@lab-anssi/ui-kit 1.61.3 → 1.62.0

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

@@ -0,0 +1,13 @@
+type Link = {
+    label: string;
+    href: string;
+};
+interface Props {
+    /** Liste des liens d'évitements */
+    items: Link[];
+    /** Texte alternatif pour le menu de navigation */
+    ariaLabel?: string;
+}
+declare const DsfrSkipLink: import("svelte").Component<Props, {}, "">;
+type DsfrSkipLink = ReturnType<typeof DsfrSkipLink>;
+export default DsfrSkipLink;

package/dist/dsfr/DsfrStepper.svelte

@@ -0,0 +1,340 @@
+<svelte:options
+  customElement={{
+    tag: "dsfr-stepper",
+    props: {
+      title: { attribute: "title", type: "String" },
+      nextStep: { attribute: "next-step", type: "String" },
+      currentStep: { attribute: "current-step", type: "Number" },
+      stepCount: { attribute: "step-count", type: "Number" },
+      level: { attribute: "level", type: "Number" },
+      hideDetails: { attribute: "hide-details", type: "Boolean" },
+    },
+  }}
+/>
+
+<script lang="ts">import { setThemeable } from "../utilitaires";
+setThemeable($host());
+let { title, nextStep, currentStep, stepCount, level = 2, hideDetails = false } = $props();
+let markup = $derived.by(() => [
+	2,
+	3,
+	4,
+	5
+].includes(level) ? `h${level}` : `h2`);
+</script>
+
+<div class="fr-stepper">
+  <svelte:element this={markup} class="fr-stepper__title">
+    {title}
+    <span class="fr-stepper__state">Étape {currentStep} sur {stepCount}</span>
+  </svelte:element>
+  <div class="fr-stepper__steps" data-fr-current-step={currentStep} data-fr-steps={stepCount}></div>
+  {#if !hideDetails}
+    <p class="fr-stepper__details">
+      <span class="fr-text--bold">Étape suivante :</span>
+      {nextStep}
+    </p>
+  {/if}
+</div>
+
+<style>/*!
+ * DSFR v1.14.4 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
+ *//* ¯¯¯¯¯¯¯¯¯ *\
+  STEPPER
+\* ˍˍˍˍˍˍˍˍˍ */
+.fr-stepper {
+  --title-spacing: 0;
+  --text-spacing: 0;
+  margin-bottom: 2rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.fr-stepper__title {
+  display: flex;
+  flex-direction: column-reverse;
+  font-weight: 700;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  --title-spacing: 0 0 0.75rem 0;
+  --text-spacing: 0 0 0.75rem 0;
+  color: var(--text-title-grey);
+}
+
+.fr-stepper__state {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+
+  --title-spacing: 0 0 0.25rem 0;
+  --text-spacing: 0 0 0.25rem 0;
+  font-weight: 400;
+  color: var(--text-mention-grey);
+}
+
+.fr-stepper__state::after {
+  content: "\a";
+  white-space: pre;
+  line-height: 2rem;
+}
+
+.fr-stepper__details {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  margin-top: 0.75rem;
+  color: var(--text-mention-grey);
+}
+
+.fr-stepper .fr-stepper__steps[data-fr-steps="2"][data-fr-current-step="2"] + .fr-stepper__details,
+.fr-stepper .fr-stepper__steps[data-fr-steps="3"][data-fr-current-step="3"] + .fr-stepper__details,
+.fr-stepper .fr-stepper__steps[data-fr-steps="4"][data-fr-current-step="4"] + .fr-stepper__details,
+.fr-stepper .fr-stepper__steps[data-fr-steps="5"][data-fr-current-step="5"] + .fr-stepper__details,
+.fr-stepper .fr-stepper__steps[data-fr-steps="6"][data-fr-current-step="6"] + .fr-stepper__details,
+.fr-stepper .fr-stepper__steps[data-fr-steps="7"][data-fr-current-step="7"] + .fr-stepper__details,
+.fr-stepper .fr-stepper__steps[data-fr-steps="8"][data-fr-current-step="8"] + .fr-stepper__details {
+  display: none;
+}
+
+.fr-stepper__steps {
+  --stepper-size: 0.5rem;
+  --default-outer: calc((100% + var(--stepper-size)) / var(--steps));
+  --default-inner: calc(var(--default-outer) - var(--stepper-size));
+  --active-outer: calc((100% + var(--stepper-size)) / var(--current-step));
+  --active-inner: calc(var(--active-outer) - var(--stepper-size));
+  width: 100%;
+  height: var(--stepper-size);
+  background-repeat: no-repeat;
+  background-size: calc((100% + var(--stepper-size)) * var(--current-step) / var(--steps) - var(--stepper-size)) 100%, 100% 100%;
+  background-position: 0 0, 0 0;
+  --current-step: 0;
+  background-image: repeating-linear-gradient(to right, var(--background-active-blue-france) 0, var(--background-active-blue-france) var(--active-inner), transparent var(--active-inner), transparent var(--active-outer)), repeating-linear-gradient(to right, var(--background-contrast-grey) 0, var(--background-contrast-grey) var(--default-inner), transparent var(--default-inner), transparent var(--default-outer));
+}
+
+.fr-stepper__steps[data-fr-steps="2"] {
+  --steps: 2;
+  --step-width: calc(100% / 2);
+}
+
+.fr-stepper__steps[data-fr-steps="3"] {
+  --steps: 3;
+  --step-width: calc(100% / 3);
+}
+
+.fr-stepper__steps[data-fr-steps="4"] {
+  --steps: 4;
+  --step-width: calc(100% / 4);
+}
+
+.fr-stepper__steps[data-fr-steps="5"] {
+  --steps: 5;
+  --step-width: calc(100% / 5);
+}
+
+.fr-stepper__steps[data-fr-steps="6"] {
+  --steps: 6;
+  --step-width: calc(100% / 6);
+}
+
+.fr-stepper__steps[data-fr-steps="7"] {
+  --steps: 7;
+  --step-width: calc(100% / 7);
+}
+
+.fr-stepper__steps[data-fr-steps="8"] {
+  --steps: 8;
+  --step-width: calc(100% / 8);
+}
+
+.fr-stepper__steps[data-fr-current-step="1"] {
+  --current-step: 1;
+}
+
+.fr-stepper__steps[data-fr-current-step="2"] {
+  --current-step: 2;
+}
+
+.fr-stepper__steps[data-fr-current-step="3"] {
+  --current-step: 3;
+}
+
+.fr-stepper__steps[data-fr-current-step="4"] {
+  --current-step: 4;
+}
+
+.fr-stepper__steps[data-fr-current-step="5"] {
+  --current-step: 5;
+}
+
+.fr-stepper__steps[data-fr-current-step="6"] {
+  --current-step: 6;
+}
+
+.fr-stepper__steps[data-fr-current-step="7"] {
+  --current-step: 7;
+}
+
+.fr-stepper__steps[data-fr-current-step="8"] {
+  --current-step: 8;
+}
+@media (min-width: 36em) {
+  /*! media sm */
+}
+@media (min-width: 48em) {
+  /*! media md */
+  .fr-stepper__title {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+@media (min-width: 62em) {
+  /*! media lg */
+}
+@media (min-width: 78em) {
+  /*! media xl */
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  .fr-stepper__steps {
+    forced-color-adjust: none;
+    background-image: repeating-linear-gradient(to right, highlight 0, highlight var(--active-inner), transparent var(--active-inner), transparent var(--active-outer)), repeating-linear-gradient(to right, graytext 0, graytext var(--default-inner), transparent var(--default-inner), transparent var(--default-outer));
+  }
+}
+h6 {
+  font-weight: 700;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+}
+@media (min-width: 48em) {
+  h6 {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+h6 {
+  margin: var(--title-spacing);
+}
+
+h5 {
+  font-weight: 700;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+@media (min-width: 48em) {
+  h5 {
+    font-size: 1.375rem;
+    line-height: 1.75rem;
+  }
+}
+h5 {
+  margin: var(--title-spacing);
+}
+
+h4 {
+  font-weight: 700;
+  font-size: 1.375rem;
+  line-height: 1.75rem;
+}
+@media (min-width: 48em) {
+  h4 {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}
+h4 {
+  margin: var(--title-spacing);
+}
+
+h3 {
+  font-weight: 700;
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+@media (min-width: 48em) {
+  h3 {
+    font-size: 1.75rem;
+    line-height: 2.25rem;
+  }
+}
+h3 {
+  margin: var(--title-spacing);
+}
+
+h2 {
+  font-weight: 700;
+  font-size: 1.75rem;
+  line-height: 2.25rem;
+}
+@media (min-width: 48em) {
+  h2 {
+    font-size: 2rem;
+    line-height: 2.5rem;
+  }
+}
+h2 {
+  margin: var(--title-spacing);
+}
+
+h1 {
+  font-weight: 700;
+  font-size: 2rem;
+  line-height: 2.5rem;
+}
+@media (min-width: 48em) {
+  h1 {
+    font-size: 2.5rem;
+    line-height: 3rem;
+  }
+}
+h1 {
+  margin: var(--title-spacing);
+}
+
+p {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  margin: var(--text-spacing);
+}
+
+.fr-text--light {
+  font-weight: 300 !important;
+}
+
+.fr-text--regular {
+  font-weight: 400 !important;
+}
+
+.fr-text--bold {
+  font-weight: 700 !important;
+}
+
+.fr-text--heavy {
+  font-weight: 900 !important;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+:root {
+  box-sizing: border-box;
+}
+
+: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-stepper {
+  box-sizing: border-box;
+}</style>

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

@@ -0,0 +1,18 @@
+type Level = 2 | 3 | 4 | 5;
+interface Props {
+    /** Titre de l'indicateur d'étapes */
+    title: string;
+    /** Titre de la prochaine étape */
+    nextStep: string;
+    /** Numéro de l'étape courrante */
+    currentStep: number;
+    /** Nombre d'étapes */
+    stepCount: number;
+    /** Niveau du titre (défaut: 2) */
+    level?: Level;
+    /** Si true, masque les textes de détail en lien avec l'étape suivante  */
+    hideDetails?: boolean;
+}
+declare const DsfrStepper: import("svelte").Component<Props, {}, "">;
+type DsfrStepper = ReturnType<typeof DsfrStepper>;
+export default DsfrStepper;