@lab-anssi/ui-kit 1.61.3 → 1.62.1

package/dist/dsfr/DsfrPagination.svelte

@@ -0,0 +1,1036 @@
+<svelte:options
+  customElement={{
+    tag: "dsfr-pagination",
+    props: {
+      pages: { attribute: "pages", type: "Array" },
+      hasFirstAndLast: { attribute: "has-first-and-last", type: "Boolean" },
+      first: { attribute: "first", type: "Object" },
+      last: { attribute: "last", type: "Object" },
+      firstAndLastDisplayedLg: { attribute: "first-and-last-displayed-lg", type: "Boolean" },
+      hasPrevAndNext: { attribute: "has-prev-and-next", type: "Boolean" },
+      prev: { attribute: "prev", type: "Object" },
+      next: { attribute: "next", type: "Object" },
+      prevAndNextDisplayedLg: { attribute: "prev-and-next-displayed-lg", type: "Boolean" },
+      prevAndNextHasLgLabel: { attribute: "prev-and-next-has-lg-label", type: "Boolean" },
+      currentPageIndex: { attribute: "current-page-index", type: "Number" },
+    },
+  }}
+/>
+
+<script lang="ts">import { setThemeable } from "../utilitaires";
+setThemeable($host());
+let { pages = [], hasFirstAndLast = false, first, last, firstAndLastDisplayedLg = false, hasPrevAndNext = false, prev, next, prevAndNextDisplayedLg = false, prevAndNextHasLgLabel = false, currentPageIndex, onpagechange } = $props();
+const HIDDEN_CLASS = "fr-hidden fr-unhidden-lg";
+const disabledFirst = $derived(currentPageIndex === 1);
+const disabledLast = $derived(currentPageIndex === pages.length);
+/**
+* Retourne la classe CSS à appliquer pour masquer ou styliser un lien de pagination selon sa position et ses propriétés d'affichage.
+*
+* @param {PagePosition} position - La position du lien dans la pagination ("first", "last", "prev", "next", etc.).
+* @param {Object} link - L'objet représentant le lien de pagination, contenant notamment la propriété `displayedLg`.
+* @returns {string|undefined} La classe CSS à appliquer pour masquer ou styliser le lien, ou `undefined` si aucune classe n'est nécessaire.
+*/
+function getHiddenClass(position, link) {
+	const isFirstOrLast = position === "first" || position === "last";
+	const isPrevOrNext = position === "prev" || position === "next";
+	if (!isFirstOrLast && !isPrevOrNext && link.displayedLg) {
+		return HIDDEN_CLASS;
+	} else if (isFirstOrLast && firstAndLastDisplayedLg) {
+		return HIDDEN_CLASS;
+	} else if (isPrevOrNext && prevAndNextDisplayedLg) {
+		return HIDDEN_CLASS;
+	} else if (isPrevOrNext && prevAndNextHasLgLabel) {
+		return "fr-pagination__link--lg-label";
+	}
+	return undefined;
+}
+/**
+* Détermine la valeur de l'attribut `aria-current` pour une page de pagination.
+*
+* @param {number} index - L'index de la page à vérifier.
+* @returns {AriaCurrent | undefined} Retourne "page" si l'index correspond à la page courante, sinon `undefined`.
+*/
+function setAriaCurrent(index) {
+	if (index === null) return undefined;
+	return index + 1 === currentPageIndex ? "page" : undefined;
+}
+/**
+* Génère ou annule le lien de pagination en fonction de la position et de l'état de désactivation.
+*
+* @param {string} href - L'URL à utiliser pour le lien de pagination.
+* @param {PagePosition} position - La position de la page ("first", "prev", "next", "last").
+* @returns {string | undefined} L'URL du lien si la position n'est pas désactivée, sinon `undefined`.
+*/
+function setHref(href, position) {
+	if (position && ["first", "prev"].includes(position) && disabledFirst || position && ["last", "next"].includes(position) && disabledLast) {
+		return undefined;
+	}
+	return href;
+}
+/**
+* Détermine si un lien de pagination doit être désactivé selon sa position.
+*
+* @param {PagePosition} position - La position du lien de pagination ('first', 'prev', 'next', 'last').
+* @returns {boolean | string | undefined} Retourne `true` si le lien doit être désactivé, sinon `undefined`.
+*/
+function setAriaDisabled(position) {
+	if (position && ["first", "prev"].includes(position) && disabledFirst || position && ["last", "next"].includes(position) && disabledLast) {
+		return "true";
+	}
+	return undefined;
+}
+/**
+* Gère le clic sur un lien de pagination et appelle le callback de changement de page.
+*
+* @param {MouseEvent} e - L'événement clic.
+* @param {number | null | undefined} index - L'index de la page cliquée, ou null/undefined pour les boutons spéciaux (first, prev, next, last).
+* @param {PagePosition} [position] - La position du lien cliqué ('first', 'prev', 'next', 'last', ou undefined pour un numéro de page).
+*/
+function handlePageClick(e, index, position) {
+	if (!onpagechange) return;
+	e.preventDefault();
+	if ((position === "first" || position === "prev") && disabledFirst) return;
+	if ((position === "last" || position === "next") && disabledLast) return;
+	let targetPage;
+	if (position === "prev") targetPage = (currentPageIndex ?? 2) - 1;
+	else if (position === "next") targetPage = (currentPageIndex ?? 0) + 1;
+	else if (position === "first") targetPage = 1;
+	else if (position === "last") targetPage = pages.length;
+	else targetPage = (index ?? 0) + 1;
+	onpagechange(targetPage);
+}
+</script>
+
+{#snippet pageItem(link: PageLink, index?: number | null, position?: PagePosition)}
+  <li>
+    <a
+      class={[
+        "fr-pagination__link",
+        getHiddenClass(position, link),
+        { [`fr-pagination__link--${position}`]: position },
+      ]}
+      href={setHref(link.href ?? "", position)}
+      title={link.title}
+      aria-current={setAriaCurrent(index ?? 0)}
+      aria-disabled={setAriaDisabled(position) as boolean | undefined}
+      onclick={(e) => handlePageClick(e, index, position)}
+    >
+      {link.label}
+    </a>
+  </li>
+{/snippet}
+
+<nav
+  role="navigation"
+  class="fr-pagination"
+  aria-label="Pagination"
+  data-fr-analytics-page-total="132"
+>
+  <ul class="fr-pagination__list">
+    {#if hasFirstAndLast && first}
+      {@render pageItem(first, null, "first")}
+    {/if}
+
+    {#if hasPrevAndNext && prev}
+      {@render pageItem(prev, null, "prev")}
+    {/if}
+
+    {#each pages as page, index (index)}
+      {@render pageItem(page, index)}
+    {/each}
+
+    {#if hasPrevAndNext && next}
+      {@render pageItem(next, null, "next")}
+    {/if}
+
+    {#if hasFirstAndLast && last}
+      {@render pageItem(last, null, "last")}
+    {/if}
+  </ul>
+</nav>
+
+<style>/*!
+ * DSFR v1.14.4 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
+ *//* ¯¯¯¯¯¯¯¯¯ *\
+  PAGINATION
+\* ˍˍˍˍˍˍˍˍˍ */
+.fr-pagination__link {
+  --text-spacing: 0;
+  --title-spacing: 0;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  width: -moz-fit-content;
+  width: fit-content;
+  --hover-tint: var(--hover);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.75rem;
+  min-width: 2rem;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  margin-bottom: 1rem;
+
+  --underline-img: none;
+  position: relative;
+}
+
+.fr-pagination__link::before,
+.fr-pagination__link::after {
+  display: block;
+}
+
+.fr-pagination {
+  --underline-img: none;
+  --ul-type: none;
+  --ol-type: none;
+  --ul-start: 0;
+  --ol-start: 0;
+  --xl-block: 0;
+  --li-bottom: 0;
+  --ol-content: none;
+  color: var(--text-action-high-grey);
+}
+
+.fr-pagination__list {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.fr-pagination__list > *:first-child,
+.fr-pagination__list > *:first-child * {
+  margin-left: 0;
+}
+
+.fr-pagination__list > *:last-child,
+.fr-pagination__list > *:last-child * {
+  margin-right: 0;
+}
+
+.fr-pagination__link:not([href])[aria-current]:not([aria-current=false]) {
+  cursor: default;
+  pointer-events: none;
+}
+
+.fr-pagination__link--first {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.75rem;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 2rem;
+  max-height: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.fr-pagination__link--first::before {
+  --icon-size: 1rem;
+  margin-left: 0;
+  margin-right: 0.5rem;
+  flex: 0 0 auto;
+  display: inline-block;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  background-color: currentColor;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/fr--arrow-left-s-first-line.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/fr--arrow-left-s-first-line.svg");
+  content: "";
+}
+
+.fr-pagination__link--first.fr-pagination__link--label {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.75rem;
+  overflow: initial;
+  max-width: 100%;
+  max-height: none;
+}
+
+.fr-pagination__link--first.fr-pagination__link--label::before {
+  --icon-size: 1rem;
+  margin-left: -0.125rem;
+  margin-right: 0.5rem;
+  flex: 0 0 auto;
+  display: inline-block;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  background-color: currentColor;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/fr--arrow-left-s-first-line.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/fr--arrow-left-s-first-line.svg");
+  content: "";
+}
+
+.fr-pagination__link--prev {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.75rem;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 2rem;
+  max-height: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.fr-pagination__link--prev::before {
+  --icon-size: 1rem;
+  margin-left: 0;
+  margin-right: 0.5rem;
+  flex: 0 0 auto;
+  display: inline-block;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  background-color: currentColor;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/arrow-left-s-line.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/arrow-left-s-line.svg");
+  content: "";
+}
+
+.fr-pagination__link--prev.fr-pagination__link--label {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.75rem;
+  overflow: initial;
+  max-width: 100%;
+  max-height: none;
+}
+
+.fr-pagination__link--prev.fr-pagination__link--label::before {
+  --icon-size: 1rem;
+  margin-left: -0.125rem;
+  margin-right: 0.5rem;
+  flex: 0 0 auto;
+  display: inline-block;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  background-color: currentColor;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/arrow-left-s-line.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/arrow-left-s-line.svg");
+  content: "";
+}
+
+.fr-pagination__link--next {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.75rem;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 2rem;
+  max-height: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.fr-pagination__link--next::before {
+  --icon-size: 1rem;
+  margin-left: 0;
+  margin-right: 0.5rem;
+  flex: 0 0 auto;
+  display: inline-block;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  background-color: currentColor;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/arrow-right-s-line.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/arrow-right-s-line.svg");
+  content: "";
+}
+
+.fr-pagination__link--next.fr-pagination__link--label {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.75rem;
+  overflow: initial;
+  max-width: 100%;
+  max-height: none;
+}
+
+.fr-pagination__link--next.fr-pagination__link--label::after {
+
+  --icon-size: 1rem;
+  margin-right: -0.125rem;
+  margin-left: 0.5rem;
+  flex: 0 0 auto;
+  display: inline-block;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  background-color: currentColor;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/arrow-right-s-line.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/arrow-right-s-line.svg");
+  content: "";
+}
+
+.fr-pagination__link--next.fr-pagination__link--label::before {
+  content: none;
+}
+
+.fr-pagination__link--last {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.75rem;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: 2rem;
+  max-height: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.fr-pagination__link--last::before {
+  --icon-size: 1rem;
+  margin-left: 0;
+  margin-right: 0.5rem;
+  flex: 0 0 auto;
+  display: inline-block;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  background-color: currentColor;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/fr--arrow-right-s-last-line.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/fr--arrow-right-s-last-line.svg");
+  content: "";
+}
+
+.fr-pagination__link--last.fr-pagination__link--label {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.75rem;
+  overflow: initial;
+  max-width: 100%;
+  max-height: none;
+}
+
+.fr-pagination__link--last.fr-pagination__link--label::after {
+
+  --icon-size: 1rem;
+  margin-right: -0.125rem;
+  margin-left: 0.5rem;
+  flex: 0 0 auto;
+  display: inline-block;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  background-color: currentColor;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/fr--arrow-right-s-last-line.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/fr--arrow-right-s-last-line.svg");
+  content: "";
+}
+
+.fr-pagination__link--last.fr-pagination__link--label::before {
+  content: none;
+}
+
+.fr-pagination__link[aria-current]:not([aria-current=false]) {
+  background-color: var(--background-active-blue-france);
+
+  --idle: transparent;
+  --hover: var(--background-active-blue-france-hover);
+  --active: var(--background-active-blue-france-active);
+  color: var(--text-inverted-blue-france);
+}
+
+.fr-pagination__link:not([aria-current]):disabled,
+a.fr-pagination__link:not([aria-current]):not([href]),
+a.fr-pagination__link[aria-current=false]:not([href]),
+.fr-pagination__link[aria-current=false]:disabled {
+  color: var(--text-disabled-grey);
+}
+@media (min-width: 36em) {
+  /*! media sm */
+}
+@media (min-width: 48em) {
+  /*! media md */
+}
+@media (min-width: 62em) {
+  /*! media lg */
+  .fr-pagination__link--first.fr-pagination__link--lg-label {
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+    min-height: 2rem;
+    padding: 0.25rem 0.75rem;
+    overflow: initial;
+    max-width: 100%;
+    max-height: none;
+  }
+
+  .fr-pagination__link--first.fr-pagination__link--lg-label::before {
+    --icon-size: 1rem;
+    margin-left: -0.125rem;
+    margin-right: 0.5rem;
+    flex: 0 0 auto;
+    display: inline-block;
+    vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+    background-color: currentColor;
+    width: var(--icon-size);
+    height: var(--icon-size);
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/fr--arrow-left-s-first-line.svg");
+    mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/fr--arrow-left-s-first-line.svg");
+    content: "";
+  }
+
+  .fr-pagination__link--prev.fr-pagination__link--lg-label {
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+    min-height: 2rem;
+    padding: 0.25rem 0.75rem;
+    overflow: initial;
+    max-width: 100%;
+    max-height: none;
+  }
+
+  .fr-pagination__link--prev.fr-pagination__link--lg-label::before {
+    --icon-size: 1rem;
+    margin-left: -0.125rem;
+    margin-right: 0.5rem;
+    flex: 0 0 auto;
+    display: inline-block;
+    vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+    background-color: currentColor;
+    width: var(--icon-size);
+    height: var(--icon-size);
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/arrow-left-s-line.svg");
+    mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/arrow-left-s-line.svg");
+    content: "";
+  }
+
+  .fr-pagination__link--next.fr-pagination__link--lg-label {
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+    min-height: 2rem;
+    padding: 0.25rem 0.75rem;
+    overflow: initial;
+    max-width: 100%;
+    max-height: none;
+  }
+
+  .fr-pagination__link--next.fr-pagination__link--lg-label::after {
+
+    --icon-size: 1rem;
+    margin-right: -0.125rem;
+    margin-left: 0.5rem;
+    flex: 0 0 auto;
+    display: inline-block;
+    vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+    background-color: currentColor;
+    width: var(--icon-size);
+    height: var(--icon-size);
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/arrow-right-s-line.svg");
+    mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/arrow-right-s-line.svg");
+    content: "";
+  }
+
+  .fr-pagination__link--next.fr-pagination__link--lg-label::before {
+    content: none;
+  }
+
+  .fr-pagination__link--last.fr-pagination__link--lg-label {
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+    min-height: 2rem;
+    padding: 0.25rem 0.75rem;
+    overflow: initial;
+    max-width: 100%;
+    max-height: none;
+  }
+
+  .fr-pagination__link--last.fr-pagination__link--lg-label::after {
+
+    --icon-size: 1rem;
+    margin-right: -0.125rem;
+    margin-left: 0.5rem;
+    flex: 0 0 auto;
+    display: inline-block;
+    vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+    background-color: currentColor;
+    width: var(--icon-size);
+    height: var(--icon-size);
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/fr--arrow-right-s-last-line.svg");
+    mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/arrows/fr--arrow-right-s-last-line.svg");
+    content: "";
+  }
+
+  .fr-pagination__link--last.fr-pagination__link--lg-label::before {
+    content: none;
+  }
+}
+@media (min-width: 78em) {
+  /*! media xl */
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  .fr-pagination__link:not([href]):disabled:not([aria-current]),
+  a.fr-pagination__link:not([href]):not([aria-current]) {
+    color: graytext;
+  }
+
+  .fr-pagination__link--first::before {
+    forced-color-adjust: none;
+  }
+
+  .fr-pagination__link--first.fr-pagination__link--label::before {
+    forced-color-adjust: none;
+  }
+
+  .fr-pagination__link--prev::before {
+    forced-color-adjust: none;
+  }
+
+  .fr-pagination__link--prev.fr-pagination__link--label::before {
+    forced-color-adjust: none;
+  }
+
+  .fr-pagination__link--next::before {
+    forced-color-adjust: none;
+  }
+
+  .fr-pagination__link--next.fr-pagination__link--label::after {
+    forced-color-adjust: none;
+  }
+
+  .fr-pagination__link--last::before {
+    forced-color-adjust: none;
+  }
+
+  .fr-pagination__link--last.fr-pagination__link--label::after {
+    forced-color-adjust: none;
+  }
+}
+@media (min-width: 62em) and (-ms-high-contrast: active), (min-width: 62em) and (forced-colors: active) {
+  .fr-pagination__link--first.fr-pagination__link--lg-label::before {
+    forced-color-adjust: none;
+  }
+
+  .fr-pagination__link--prev.fr-pagination__link--lg-label::before {
+    forced-color-adjust: none;
+  }
+
+  .fr-pagination__link--next.fr-pagination__link--lg-label::after {
+    forced-color-adjust: none;
+  }
+
+  .fr-pagination__link--last.fr-pagination__link--lg-label::after {
+    forced-color-adjust: none;
+  }
+}
+@media (forced-colors: active), (prefers-contrast: more) {
+  .fr-pagination__link[aria-current]:not([aria-current=false]) {
+    justify-content: center;
+    padding: calc(0.25rem - 1px) calc(0.75rem - 1px);
+    border: 1px solid var(--border-active-blue-france);
+  }
+}
+a {
+  text-decoration: var(--text-decoration);
+  color: inherit;
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  a:not([href]) {
+    color: graytext;
+  }
+}
+
+:root {
+  --underline-max-width: 100%;
+  --underline-hover-width: 0;
+  --underline-idle-width: var(--underline-max-width);
+  --underline-x: calc(var(--underline-max-width) * 0);
+  --underline-thickness: 0.0625em;
+  --underline-img: linear-gradient(0deg, currentColor, currentColor);
+  --external-link-content: '';
+  --text-decoration: none;
+}
+
+[href] {
+  background-image: var(--underline-img), var(--underline-img);
+  background-position: var(--underline-x) 100%, var(--underline-x) calc(100% - var(--underline-thickness));
+  background-repeat: no-repeat, no-repeat;
+  transition: background-size 0s;
+  background-size: var(--underline-hover-width) calc(var(--underline-thickness) * 2), var(--underline-idle-width) var(--underline-thickness);
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  [href], [href]:visited {
+    color: linktext;
+  }
+}
+
+[target=_blank]::after {
+  flex: 0 0 auto;
+  display: inline-block;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  background-color: currentColor;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+[target=_blank]::after {
+  --icon-size: 1rem;
+}
+[target=_blank]::after {
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/external-link-line.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/external-link-line.svg");
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  [target=_blank]::after {
+    forced-color-adjust: none;
+    background-color: linktext;
+  }
+}
+[target=_blank]::after {
+  content: var(--external-link-content);
+  margin-left: 0.25rem;
+}
+[target=_blank][class^=fr-icon-]::after, [target=_blank][class*=" fr-icon-"]::after, [target=_blank][class^=fr-fi-]::after, [target=_blank][class*=" fr-fi-"]::after {
+  flex: 0 0 auto;
+  display: inline-block;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  background-color: currentColor;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+[target=_blank][class^=fr-icon-]::after, [target=_blank][class*=" fr-icon-"]::after, [target=_blank][class^=fr-fi-]::after, [target=_blank][class*=" fr-fi-"]::after {
+  --icon-size: 1rem;
+}
+[target=_blank][class^=fr-icon-]::after, [target=_blank][class*=" fr-icon-"]::after, [target=_blank][class^=fr-fi-]::after, [target=_blank][class*=" fr-fi-"]::after {
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/external-link-line.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/external-link-line.svg");
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  [target=_blank][class^=fr-icon-]::after, [target=_blank][class*=" fr-icon-"]::after, [target=_blank][class^=fr-fi-]::after, [target=_blank][class*=" fr-fi-"]::after {
+    forced-color-adjust: none;
+    background-color: linktext;
+  }
+}
+[target=_blank][class^=fr-icon-]::after, [target=_blank][class*=" fr-icon-"]::after, [target=_blank][class^=fr-fi-]::after, [target=_blank][class*=" fr-fi-"]::after {
+  content: var(--external-link-content);
+  margin-left: 0.25rem;
+}
+
+form[target=_blank]::after {
+  content: none;
+}
+
+.fr-raw-link {
+  --text-decoration: none;
+}
+.fr-raw-link[href],
+.fr-raw-link [href] {
+  --underline-img: none;
+  --external-link-content: none;
+}
+
+.fr-reset-link {
+  --text-decoration: underline;
+}
+.fr-reset-link[href],
+.fr-reset-link [href] {
+  --underline-img: none;
+  text-underline-offset: 2px;
+}
+
+input[type=range]:focus::-webkit-slider-thumb {
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: #0a76f6;
+}
+
+input[type=range]:focus::-moz-range-thumb {
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: #0a76f6;
+}
+
+input[type=range]:focus::-ms-thumb {
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: #0a76f6;
+}
+
+a:focus, button:focus, input:focus, input[type=checkbox]:focus + label::before, input[type=radio]:focus + label::before, input[type=button]:focus, input[type=image]:focus, input[type=reset]:focus, input[type=submit]:focus, select:focus, textarea:focus, [tabindex]:focus, video:focus[controls], audio:focus[controls], [contenteditable]:not([contenteditable=false]):focus, details:focus, details > summary:first-of-type:focus {
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: #0a76f6;
+}
+
+input[type=range]:focus::-webkit-slider-thumb {
+  outline-style: solid;
+}
+
+input[type=range]:focus::-moz-range-thumb {
+  outline-style: solid;
+}
+
+input[type=range]:focus::-ms-thumb {
+  outline-style: solid;
+}
+
+a:focus, button:focus, input:focus, input[type=checkbox]:focus + label::before, input[type=radio]:focus + label::before, input[type=button]:focus, input[type=image]:focus, input[type=reset]:focus, input[type=submit]:focus, select:focus, textarea:focus, [tabindex]:focus, video:focus[controls], audio:focus[controls], [contenteditable]:not([contenteditable=false]):focus, details:focus, details > summary:first-of-type:focus {
+  outline-style: solid;
+}
+
+input[type=range]:focus:not(:focus-visible)::-webkit-slider-thumb {
+  outline-style: none;
+}
+
+input[type=range]:focus:not(:focus-visible)::-moz-range-thumb {
+  outline-style: none;
+}
+
+input[type=range]:focus:not(:focus-visible)::-ms-thumb {
+  outline-style: none;
+}
+
+a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:focus:not(:focus-visible), input[type=checkbox]:focus:not(:focus-visible) + label::before, input[type=radio]:focus:not(:focus-visible) + label::before, input[type=button]:focus:not(:focus-visible), input[type=image]:focus:not(:focus-visible), input[type=reset]:focus:not(:focus-visible), input[type=submit]:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible), video:focus:not(:focus-visible)[controls], audio:focus:not(:focus-visible)[controls], [contenteditable]:not([contenteditable=false]):focus:not(:focus-visible), details:focus:not(:focus-visible), details > summary:first-of-type:focus:not(:focus-visible) {
+  outline-style: none;
+}
+
+input[type=range]:focus-visible::-webkit-slider-thumb {
+  outline-style: solid;
+}
+
+input[type=range]:focus-visible::-moz-range-thumb {
+  outline-style: solid;
+}
+
+input[type=range]:focus-visible::-ms-thumb {
+  outline-style: solid;
+}
+
+a:focus-visible, button:focus-visible, input:focus-visible, input[type=checkbox]:focus-visible + label::before, input[type=radio]:focus-visible + label::before, input[type=button]:focus-visible, input[type=image]:focus-visible, input[type=reset]:focus-visible, input[type=submit]:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, video:focus-visible[controls], audio:focus-visible[controls], [contenteditable]:not([contenteditable=false]):focus-visible, details:focus-visible, details > summary:first-of-type:focus-visible {
+  outline-style: solid;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  :root {
+    --brighten: -1;
+  }
+  a[href]:hover, button:not(:disabled):hover, input[type=button]:not(:disabled):hover, input[type=image]:not(:disabled):hover, input[type=reset]:not(:disabled):hover, input[type=submit]:not(:disabled):hover {
+    background-color: var(--hover-tint);
+  }
+  a[href]:active, button:not(:disabled):active, input[type=button]:not(:disabled):active, input[type=image]:not(:disabled):active, input[type=reset]:not(:disabled):active, input[type=submit]:not(:disabled):active {
+    background-color: var(--active-tint);
+  }
+  a[href]:hover, a[href]:active {
+    --underline-hover-width: var(--underline-max-width);
+  }
+}
+button, input[type=button], input[type=image], input[type=reset], input[type=submit] {
+  --hover-tint: var(--hover);
+  --active-tint: var(--active);
+}
+
+a {
+  --hover-tint: var(--idle);
+  --active-tint: var(--active);
+}
+
+a, button, input[type=checkbox], input[type=checkbox] + label, input[type=radio], input[type=radio] + label, input[type=file], input[type=range], input[type=button], input[type=image], input[type=reset], input[type=submit], select, video[controls], audio[controls], details, details > summary:first-of-type {
+  cursor: pointer;
+}
+
+input[type=range]:disabled::-webkit-slider-thumb, input[type=range]:disabled::-webkit-slider-thumb:active {
+  cursor: not-allowed;
+}
+
+input[type=range]:disabled::-moz-range-thumb, input[type=range]:disabled::-moz-range-thumb:active {
+  cursor: not-allowed;
+}
+
+input[type=range]:disabled::-ms-thumb, input[type=range]:disabled::-ms-thumb:active {
+  cursor: not-allowed;
+}
+
+a:not([href]), button:disabled, input:disabled, input[type=checkbox]:disabled, input[type=checkbox]:disabled + label, input[type=radio]:disabled, input[type=radio]:disabled + label, input[type=file]:disabled, input[type=range]:disabled, input[type=button]:disabled, input[type=image]:disabled, input[type=reset]:disabled, input[type=submit]:disabled, select:disabled, textarea:disabled, video:not([href])[controls], audio:not([href])[controls] {
+  cursor: not-allowed;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  cursor: grab;
+}
+
+input[type=range]::-moz-range-thumb {
+  cursor: grab;
+}
+
+input[type=range]::-ms-thumb {
+  cursor: grab;
+}
+
+input[type=range]::-webkit-slider-thumb:active {
+  cursor: grabbing;
+}
+
+input[type=range]::-moz-range-thumb:active {
+  cursor: grabbing;
+}
+
+input[type=range]::-ms-thumb:active {
+  cursor: grabbing;
+}
+
+:root {
+  --ul-type: disc;
+  --ol-type: decimal;
+  --ul-start: 1rem;
+  --ol-start: 1.5rem;
+  --xl-block: 0.5rem;
+  --li-bottom: 0.25rem;
+  --xl-base: 1em;
+  --ol-content: counters(li-counter, ".") ".\00a0\00a0";
+}
+
+ul,
+ol,
+dl {
+  margin: 0;
+  padding: 0;
+  margin-block-start: var(--xl-block);
+  margin-block-end: var(--xl-block);
+  --xl-size: var(--xl-base);
+}
+
+ul {
+  list-style-type: var(--ul-type);
+  padding-inline-start: var(--ul-start);
+}
+ul > li::marker {
+  font-size: calc(var(--xl-size) * 0.9);
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  ul > li::marker {
+    color: graytext;
+  }
+}
+
+ol {
+  list-style-type: var(--ol-type);
+  padding-inline-start: var(--ol-start);
+  counter-reset: li-counter;
+}
+ol > li {
+  counter-increment: li-counter;
+}
+ol > li::marker {
+  content: var(--ol-content);
+  font-size: var(--xl-size);
+  font-weight: bold;
+}
+
+dl,
+dd {
+  margin: 0;
+  padding-inline-start: var(--ul-start);
+}
+
+li,
+dd,
+dt {
+  --xl-base: calc(var(--xl-size) * 0.9);
+  padding-bottom: var(--li-bottom);
+}
+
+.fr-raw-list {
+  --ul-type: none;
+  --ol-type: none;
+  --ul-start: 0;
+  --ol-start: 0;
+  --xl-block: 0;
+  --li-bottom: 0;
+  --ol-content: none;
+}
+
+.fr-list {
+  --ul-type: disc;
+  --ol-type: decimal;
+  --ul-start: 1rem;
+  --ol-start: 1.5rem;
+  --xl-block: 0.5rem;
+  --li-bottom: 0.25rem;
+  --xl-base: 1em;
+  --ol-content: counters(li-counter, ".") ".\00a0\00a0";
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+:root {
+  box-sizing: border-box;
+}
+
+input,
+select,
+textarea,
+label,
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+:host(dsfr-pagination) {
+  display: block;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  background-color: var(--background-default-grey);
+  --idle: transparent;
+  --hover: var(--background-default-grey-hover);
+  --active: var(--background-default-grey-active);
+  color: var(--text-default-grey);
+  background-color: transparent;
+}
+
+.fr-pagination {
+  box-sizing: border-box;
+}
+.fr-pagination__link {
+  border-radius: var(--lab-border-radius, 0);
+}</style>