@lab-anssi/ui-kit 1.61.3 → 1.62.0

package/dist/dsfr/DsfrPagination.svelte.d.ts

@@ -0,0 +1,35 @@
+type PageLink = {
+    label: string;
+    href: string;
+    title?: string;
+    displayedLg?: boolean;
+};
+interface Props {
+    /** Liste des pages à afficher dans la pagination */
+    pages: PageLink[];
+    /** Ajoute des boutons Première et Dernière page */
+    hasFirstAndLast?: boolean;
+    /** Données du bouton de Première page */
+    first?: PageLink;
+    /** Données du bouton de Dernière page */
+    last?: PageLink;
+    /** Affiche les boutons Première et Dernière page à partir du breakpoint LG */
+    firstAndLastDisplayedLg?: boolean;
+    /** Ajoute des boutons page Précédente et Suivante */
+    hasPrevAndNext?: boolean;
+    /** Données du bouton de page Précédente */
+    prev?: PageLink;
+    /** Données du bouton de page Suivante */
+    next?: PageLink;
+    /** Affiche les boutons page Précédente et Suivante à partir du breakpoint LG */
+    prevAndNextDisplayedLg?: boolean;
+    /** Affiche les libellés des boutons page Précédente et Suivante à partir du breakpoint LG */
+    prevAndNextHasLgLabel?: boolean;
+    /** Page courante */
+    currentPageIndex?: number;
+    /** Callback appelé lors du changement de page */
+    onpagechange?: (page: number) => void;
+}
+declare const DsfrPagination: import("svelte").Component<Props, {}, "">;
+type DsfrPagination = ReturnType<typeof DsfrPagination>;
+export default DsfrPagination;

package/dist/dsfr/DsfrQuote.svelte

@@ -0,0 +1,646 @@
+<svelte:options
+  customElement={{
+    tag: "dsfr-quote",
+    props: {
+      text: { attribute: "text", type: "String" },
+      size: { attribute: "size", type: "String" },
+      hasAuthor: { attribute: "has-author", type: "Boolean" },
+      author: { attribute: "author", type: "String" },
+      hasDetails: { attribute: "has-details", type: "Boolean" },
+      sources: { attribute: "sources", type: "Array" },
+      hasImage: { attribute: "has-image", type: "Boolean" },
+      src: { attribute: "src", type: "String" },
+      alt: { attribute: "alt", type: "String" },
+      accent: { attribute: "accent", type: "String" },
+      sourceUrl: { attribute: "source-url", type: "String" },
+    },
+  }}
+/>
+
+<script lang="ts">import { setThemeable } from "../utilitaires";
+setThemeable($host());
+let { text, size = "md", hasAuthor, author, hasDetails, sources, hasImage, src, alt = "", accent, sourceUrl } = $props();
+let accentClass = $derived(accent && `fr-quote--${accent}`);
+let columnClass = $derived(hasImage && `fr-quote--column`);
+</script>
+
+<figure class={["fr-quote", accentClass, columnClass]}>
+  <blockquote cite={sourceUrl ? sourceUrl : undefined}>
+    <p class="fr-text--{size}">«&nbsp;{text}&nbsp;»</p>
+  </blockquote>
+  <figcaption>
+    {#if hasAuthor}
+      <p class="fr-quote__author">{author}</p>
+    {/if}
+    {#if hasDetails && sources && sources.length > 0}
+      <ul class="fr-quote__source">
+        {#each sources as source, index (index)}
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+          <li>{@html source}</li>
+        {/each}
+      </ul>
+    {/if}
+    {#if hasImage}
+      <div class="fr-quote__image">
+        <img class="fr-responsive-img" {src} {alt} />
+      </div>
+    {/if}
+  </figcaption>
+</figure>
+
+<style>@charset "UTF-8";
+p {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  margin: var(--text-spacing);
+}
+
+: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";
+}
+
+:root {
+  --text-spacing: 0 0 1.5rem;
+  --title-spacing: 0 0 1.5rem;
+  --display-spacing: 0 0 2rem;
+}
+
+.fr-h6 {
+  font-weight: 700  !important;
+  font-size: 1.125rem  !important;
+  line-height: 1.5rem  !important;
+}
+@media (min-width: 48em) {
+  .fr-h6 {
+    font-size: 1.25rem  !important;
+    line-height: 1.75rem  !important;
+  }
+}
+.fr-h6 {
+  margin: var(--title-spacing);
+}
+
+.fr-h5 {
+  font-weight: 700  !important;
+  font-size: 1.25rem  !important;
+  line-height: 1.75rem  !important;
+}
+@media (min-width: 48em) {
+  .fr-h5 {
+    font-size: 1.375rem  !important;
+    line-height: 1.75rem  !important;
+  }
+}
+.fr-h5 {
+  margin: var(--title-spacing);
+}
+
+.fr-h4 {
+  font-weight: 700  !important;
+  font-size: 1.375rem  !important;
+  line-height: 1.75rem  !important;
+}
+@media (min-width: 48em) {
+  .fr-h4 {
+    font-size: 1.5rem  !important;
+    line-height: 2rem  !important;
+  }
+}
+.fr-h4 {
+  margin: var(--title-spacing);
+}
+
+.fr-h3 {
+  font-weight: 700  !important;
+  font-size: 1.5rem  !important;
+  line-height: 2rem  !important;
+}
+@media (min-width: 48em) {
+  .fr-h3 {
+    font-size: 1.75rem  !important;
+    line-height: 2.25rem  !important;
+  }
+}
+.fr-h3 {
+  margin: var(--title-spacing);
+}
+
+.fr-h2 {
+  font-weight: 700  !important;
+  font-size: 1.75rem  !important;
+  line-height: 2.25rem  !important;
+}
+@media (min-width: 48em) {
+  .fr-h2 {
+    font-size: 2rem  !important;
+    line-height: 2.5rem  !important;
+  }
+}
+.fr-h2 {
+  margin: var(--title-spacing);
+}
+
+.fr-h1 {
+  font-weight: 700  !important;
+  font-size: 2rem  !important;
+  line-height: 2.5rem  !important;
+}
+@media (min-width: 48em) {
+  .fr-h1 {
+    font-size: 2.5rem  !important;
+    line-height: 3rem  !important;
+  }
+}
+.fr-h1 {
+  margin: var(--title-spacing);
+}
+
+.fr-display--xs {
+  font-weight: 700  !important;
+  font-size: 2.5rem  !important;
+  line-height: 3rem  !important;
+}
+@media (min-width: 48em) {
+  .fr-display--xs {
+    font-size: 3rem  !important;
+    line-height: 3.5rem  !important;
+  }
+}
+.fr-display--xs {
+  margin: var(--display-spacing);
+}
+
+.fr-display--sm {
+  font-weight: 700  !important;
+  font-size: 3rem  !important;
+  line-height: 3.5rem  !important;
+}
+@media (min-width: 48em) {
+  .fr-display--sm {
+    font-size: 3.5rem  !important;
+    line-height: 4rem  !important;
+  }
+}
+.fr-display--sm {
+  margin: var(--display-spacing);
+}
+
+.fr-display--md {
+  font-weight: 700  !important;
+  font-size: 3.5rem  !important;
+  line-height: 4rem  !important;
+}
+@media (min-width: 48em) {
+  .fr-display--md {
+    font-size: 4rem  !important;
+    line-height: 4.5rem  !important;
+  }
+}
+.fr-display--md {
+  margin: var(--display-spacing);
+}
+
+.fr-display--lg {
+  font-weight: 700  !important;
+  font-size: 4rem  !important;
+  line-height: 4.5rem  !important;
+}
+@media (min-width: 48em) {
+  .fr-display--lg {
+    font-size: 4.5rem  !important;
+    line-height: 5rem  !important;
+  }
+}
+.fr-display--lg {
+  margin: var(--display-spacing);
+}
+
+.fr-display--xl {
+  font-weight: 700  !important;
+  font-size: 4.5rem  !important;
+  line-height: 5rem  !important;
+}
+@media (min-width: 48em) {
+  .fr-display--xl {
+    font-size: 5rem  !important;
+    line-height: 5.5rem  !important;
+  }
+}
+.fr-display--xl {
+  margin: var(--display-spacing);
+}
+
+.fr-text--alt {
+  font-family: "Spectral", georgia, serif !important;
+}
+
+.fr-text--xs {
+  font-size: 0.75rem  !important;
+  line-height: 1.25rem  !important;
+  margin: var(--text-spacing);
+}
+
+.fr-text--sm {
+  font-size: 0.875rem  !important;
+  line-height: 1.5rem  !important;
+  margin: var(--text-spacing);
+}
+
+.fr-text--md {
+  font-size: 1rem  !important;
+  line-height: 1.5rem  !important;
+  margin: var(--text-spacing);
+}
+
+.fr-text--lg {
+  font-size: 1.125rem  !important;
+  line-height: 1.75rem  !important;
+  margin: var(--text-spacing);
+}
+
+.fr-text--xl, .fr-text--lead {
+  font-size: 1.25rem  !important;
+  line-height: 2rem  !important;
+  margin: var(--text-spacing);
+}
+
+.fr-responsive-img {
+  width: 100%;
+  height: auto;
+}
+
+.fr-responsive-vid {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1.7777777778;
+  display: block;
+}
+.fr-responsive-vid__player {
+  width: 100%;
+  height: 100%;
+  display: block;
+  border: 0;
+}
+.fr-responsive-vid > .fr-consent-placeholder {
+  object-fit: cover;
+  object-position: 50% 50%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* ¯¯¯¯¯¯¯¯¯ *\
+  QUOTE
+\* ˍˍˍˍˍˍˍˍˍ */
+@media (min-width: 36em) {
+  /*! media sm */
+}
+@media (min-width: 48em) {
+  /*! media md */
+}
+@media (min-width: 62em) {
+  /*! media lg */
+}
+@media (min-width: 78em) {
+  /*! media xl */
+}
+.fr-quote {
+  position: relative;
+  margin: 0;
+  padding: 0 0.5rem 2rem 0.5rem;
+}
+@media (min-width: 48em) {
+  .fr-quote {
+    padding: 0 0 0 2rem;
+  }
+}
+.fr-quote {
+  background-size: 50% 1px;
+  background-repeat: no-repeat;
+  background-position: 0.5rem 100%;
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  .fr-quote {
+    border-left: 1px solid;
+  }
+}
+@media (min-width: 48em) {
+  .fr-quote {
+    background-size: 1px 100%;
+    background-position: 0 0;
+  }
+}
+.fr-quote::before, .fr-quote::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%;
+}
+.fr-quote::before, .fr-quote::after {
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/editor/fr--quote-line.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/editor/fr--quote-line.svg");
+}
+.fr-quote::before, .fr-quote::after {
+  --icon-size: 2rem;
+}
+.fr-quote::before {
+  content: "";
+  display: block;
+  margin-bottom: 0.5rem;
+}
+.fr-quote--column {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+@media (min-width: 48em) {
+  .fr-quote--column {
+    margin-left: 13.5rem;
+  }
+}
+@media (min-width: 48em) {
+  .fr-quote--column {
+    min-height: 13rem;
+  }
+}
+.fr-quote--column .fr-quote__author {
+  margin-left: 5.25rem;
+}
+@media (min-width: 48em) {
+  .fr-quote--column .fr-quote__author {
+    margin-left: 0;
+  }
+}
+.fr-quote--column .fr-quote__source {
+  margin-left: 5.25rem;
+}
+@media (min-width: 48em) {
+  .fr-quote--column .fr-quote__source {
+    margin-left: 0;
+  }
+}
+.fr-quote--column figcaption {
+  min-height: 4.25rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+@media (min-width: 48em) {
+  .fr-quote--column figcaption {
+    min-height: auto;
+  }
+}
+.fr-quote blockquote {
+  margin: 0;
+  --text-spacing: 0 0 1rem;
+}
+.fr-quote blockquote p {
+  font-size: 1.25rem;
+  line-height: 2rem;
+  font-weight: 700;
+}
+.fr-quote__author {
+  font-weight: 700;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --text-spacing: 0 0 0.25rem;
+}
+.fr-quote__image {
+  width: 4.25rem;
+  background-size: cover;
+  border-radius: 50%;
+  overflow: hidden;
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+}
+.fr-quote__image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+@media (min-width: 48em) {
+  .fr-quote__image {
+    position: absolute;
+    top: 50%;
+    left: -13.5rem;
+    width: 11.5rem;
+    height: 11.5rem;
+    margin-top: -5.75rem;
+  }
+}
+.fr-quote cite {
+  font-style: italic;
+}
+.fr-quote figcaption {
+  --ul-type: none;
+  --ol-type: none;
+  --ul-start: 0;
+  --ol-start: 0;
+  --xl-block: 0;
+  --li-bottom: 0;
+  --ol-content: none;
+}
+.fr-quote figcaption .fr-quote__source {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+}
+.fr-quote figcaption .fr-quote__source li {
+  display: inline-block;
+}
+.fr-quote figcaption .fr-quote__source li:not(:last-child)::after {
+  content: "·";
+  display: inline-block;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.fr-quote::before {
+  color: var(--artwork-minor-blue-france);
+}
+.fr-quote--green-tilleul-verveine::before {
+  color: var(--artwork-minor-green-tilleul-verveine);
+}
+
+.fr-quote--green-bourgeon::before {
+  color: var(--artwork-minor-green-bourgeon);
+}
+
+.fr-quote--green-emeraude::before {
+  color: var(--artwork-minor-green-emeraude);
+}
+
+.fr-quote--green-menthe::before {
+  color: var(--artwork-minor-green-menthe);
+}
+
+.fr-quote--green-archipel::before {
+  color: var(--artwork-minor-green-archipel);
+}
+
+.fr-quote--blue-ecume::before {
+  color: var(--artwork-minor-blue-ecume);
+}
+
+.fr-quote--blue-cumulus::before {
+  color: var(--artwork-minor-blue-cumulus);
+}
+
+.fr-quote--purple-glycine::before {
+  color: var(--artwork-minor-purple-glycine);
+}
+
+.fr-quote--pink-macaron::before {
+  color: var(--artwork-minor-pink-macaron);
+}
+
+.fr-quote--pink-tuile::before {
+  color: var(--artwork-minor-pink-tuile);
+}
+
+.fr-quote--yellow-tournesol::before {
+  color: var(--artwork-minor-yellow-tournesol);
+}
+
+.fr-quote--yellow-moutarde::before {
+  color: var(--artwork-minor-yellow-moutarde);
+}
+
+.fr-quote--orange-terre-battue::before {
+  color: var(--artwork-minor-orange-terre-battue);
+}
+
+.fr-quote--brown-cafe-creme::before {
+  color: var(--artwork-minor-brown-cafe-creme);
+}
+
+.fr-quote--brown-caramel::before {
+  color: var(--artwork-minor-brown-caramel);
+}
+
+.fr-quote--brown-opera::before {
+  color: var(--artwork-minor-brown-opera);
+}
+
+.fr-quote--beige-gris-galet::before {
+  color: var(--artwork-minor-beige-gris-galet);
+}
+
+.fr-quote {
+  background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey));
+}
+.fr-quote__source {
+  color: var(--text-mention-grey);
+}
+
+:host {
+  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-quote {
+  box-sizing: border-box;
+}</style>

package/dist/dsfr/DsfrQuote.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { Accent, Size } from "../types";
+type QuoteSize = Extract<Size, "md" | "lg" | "xl">;
+interface Props {
+    /** Texte de la citation */
+    text: string;
+    /** Taille du texte de citation */
+    size?: QuoteSize;
+    /** Si true, ajoute un auteur à la citation */
+    hasAuthor?: boolean;
+    /** Nom de l'auteur */
+    author?: string;
+    /** Si true, ajoute des textes de détail à la citation */
+    hasDetails?: boolean;
+    /** Tableau des textes de détail */
+    sources?: string[];
+    /** Si true, ajoute une image à la citation */
+    hasImage?: boolean;
+    /** Source de l'image */
+    src?: string;
+    /** L'alternative de l'image doit rester vide car l'image est illustrative et ne doit pas être restituée aux technologies d’assistance) */
+    alt?: string;
+    /** Couleur d'accentuation de la citation */
+    accent?: Accent;
+    /** URL de la source de la citation */
+    sourceUrl?: string;
+}
+declare const DsfrQuote: import("svelte").Component<Props, {}, "">;
+type DsfrQuote = ReturnType<typeof DsfrQuote>;
+export default DsfrQuote;