@lab-anssi/ui-kit 1.61.3 → 1.62.1

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

@@ -0,0 +1,86 @@
+import type { TextSize, TextWeight } from "../types";
+interface Props {
+    /** Attribut id du champs de saisie */
+    id: string;
+    /** Libellé du champs de saisie */
+    label: string;
+    /** Permet de masquer le label */
+    hideLabel?: boolean;
+    /** Texte additionnel sous le libellé du champs de saisie */
+    hint?: string;
+    /** Type du champs de saisie, par défaut: "text" */
+    type?: "date" | "email" | "password" | "number" | "search" | "tel" | "text" | "url";
+    /** Ajoute une icône dans le champs de saisie */
+    icon?: string;
+    /** Associe un bouton d'envoi à l'input (variation addon) */
+    addon?: boolean;
+    /** Associe un bouton d'action à l'input (variation action) */
+    action?: boolean;
+    /** Valeur initiale du champs de saisie */
+    value?: string;
+    /** Texte avant saisie dans le champs de saisie */
+    placeholder?: string;
+    /** Attribut name du champs de saisie */
+    name?: string;
+    /** Attribut autocomplete du champs de saisie, voir la liste des valeurs possibles sur MDN */
+    autocomplete?: string;
+    /** Désactive le champs de saisie */
+    disabled?: boolean;
+    /** Statut du message */
+    status?: "default" | "valid" | "error" | "info";
+    /** Texte du message d'erreur */
+    errorMessage?: string;
+    /** Texte du message de succès */
+    validMessage?: string;
+    /** Texte du message d'information */
+    infoMessage?: string;
+    /** Attribut form du composant */
+    form?: string;
+    /** Valeur de l'attribut max du champs de saisie _(valable uniquement dans ce composant pour les champs de type "date" et "number")_ */
+    max?: string;
+    /** Longueur maximale du champs de saisie _(valable uniquement pour les champs de type "text", "search", "url", "tel", "email", "password")_ */
+    maxlength?: number;
+    /** Valeur de l'attribut min du champs de saisie _(valable uniquement dans ce composant pour les champs de type "date" et "number")_ */
+    min?: string;
+    /** Longueur minimale du champs de saisie _(valable uniquement pour les champs de type "text", "search", "url", "tel", "email", "password")_ */
+    minlength?: number;
+    /** Attribut pattern du champs de saisie _(valable uniquement pour les champs de type "text", "search", "url", "tel", "email", "password")_ */
+    pattern?: string;
+    /** Rend le champs de saisie en lecture seule */
+    readonly?: boolean;
+    /** Rend le champs de saisie obligatoire */
+    required?: boolean;
+    /** Valeur de l'attribut step du champs de saisie _(valable uniquement dans ce composant pour les champs de type "date" et "number")_  */
+    step?: number;
+    /** `ElementInternals` interface pour l'association du composant aux formulaires */
+    internals?: ElementInternals;
+    /** Callback appelé lors du changement de valeur du champ de saisie */
+    onvaluechanged?: (value: string) => void;
+    /** Applique une classe utilitaire de taille de texte DSFR (fr-text--xs à fr-text--xl, fr-text--lead) sur le label */
+    labelSize?: TextSize;
+    /** Applique une classe utilitaire de graisse DSFR (fr-text--light à fr-text--heavy) sur le label */
+    labelWeight?: TextWeight;
+}
+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;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DsfrInput: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    button: {};
+    'messages-group': {};
+}, {
+    setCustomValidity: (message: string) => void;
+}, "value">;
+type DsfrInput = InstanceType<typeof DsfrInput>;
+export default DsfrInput;

package/dist/dsfr/DsfrLabel.svelte

@@ -0,0 +1,438 @@
+<svelte:options
+  customElement={{
+    tag: "dsfr-label",
+    props: {
+      for: { attribute: "for", type: "String" },
+      label: { attribute: "label", type: "String" },
+      hint: { attribute: "hint", type: "String" },
+      hidden: { attribute: "hidden", type: "Boolean" },
+      id: { attribute: "id", type: "String" },
+      class: { attribute: "class", type: "String" },
+      context: { attribute: "context", type: "String" },
+      inline: { attribute: "inline", type: "Boolean" },
+      status: { attribute: "status", type: "String" },
+      disabled: { attribute: "disabled", type: "Boolean" },
+      labelSize: { attribute: "label-size", type: "String" },
+      labelWeight: { attribute: "label-weight", type: "String" },
+    },
+  }}
+/>
+
+<script lang="ts">const { for: forAttr, label, hint, hidden = false, id, class: extraClass, context = "default", inline = false, status = "default", disabled = false, labelSize, labelWeight } = $props();
+export {};
+</script>
+
+<label
+  class={[
+    "fr-label",
+    extraClass,
+    {
+      "fr-sr-only": hidden,
+      "fr-label--field": context === "field",
+      "fr-label--inline": inline,
+      "fr-label--error": status === "error",
+      "fr-label--success": status === "valid",
+      "fr-label--info": status === "info",
+      "fr-label--disabled": disabled,
+    },
+  ]}
+  for={forAttr}
+  {id}
+>
+  <span class={[labelSize && `fr-text--${labelSize}`, labelWeight && `fr-text--${labelWeight}`]}>
+    <slot>{label}</slot>
+  </span>
+  {#if hint || $$slots.hint}
+    <span class="fr-hint-text">
+      <slot name="hint">
+        {hint}
+      </slot>
+    </span>
+  {/if}
+</label>
+
+<style>@charset "UTF-8";
+/**
+ * Override de l'opacité chrome sur un élément disabled
+ */
+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, select:disabled, textarea:disabled, video:not([href]), audio:not([href]) {
+  opacity: 1;
+}
+
+input,
+select,
+textarea,
+label,
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+: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-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;
+}
+
+.fr-hint-text {
+  display: block;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  --text-spacing: 0 0 1rem;
+}
+.fr-hint-text + .fr-hint-text {
+  margin-top: 0.25rem;
+}
+
+.fr-label {
+  display: block;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.fr-label + .fr-input, .fr-label + .fr-input-wrap, .fr-label + .fr-select {
+  margin-top: 0.5rem;
+}
+
+.fr-select-group--valid label, .fr-input-group--valid label, .fr-range-group--valid label, .fr-upload-group--valid label {
+  color: var(--text-default-success);
+}
+.fr-select-group--error label, .fr-input-group--error label, .fr-range-group--error label, .fr-upload-group--error label {
+  color: var(--text-default-error);
+}
+.fr-select-group--info label, .fr-input-group--info label, .fr-range-group--info label, .fr-upload-group--info label {
+  color: var(--text-default-info);
+}
+.fr-select-group--disabled label,
+.fr-select-group--disabled .fr-hint-text, .fr-input-group--disabled label,
+.fr-input-group--disabled .fr-hint-text, .fr-range-group--disabled label,
+.fr-range-group--disabled .fr-hint-text, .fr-upload-group--disabled label,
+.fr-upload-group--disabled .fr-hint-text {
+  color: var(--text-disabled-grey);
+}
+
+.fr-label {
+  color: var(--text-label-grey);
+}
+.fr-label--error {
+  color: var(--text-default-error);
+}
+.fr-label--success {
+  color: var(--text-default-success);
+}
+.fr-label--info {
+  color: var(--text-default-info);
+}
+.fr-label--disabled, .fr-label--disabled .fr-hint-text {
+  color: var(--text-disabled-grey);
+}
+
+.fr-hint-text,
+.fr-message {
+  color: var(--text-mention-grey);
+}
+
+.fr-message--error {
+  color: var(--text-default-error);
+}
+.fr-message--valid {
+  color: var(--text-default-success);
+}
+.fr-message--info {
+  color: var(--text-default-info);
+}
+.fr-message--warning {
+  color: var(--text-default-warning);
+}
+
+.fr-fieldset:disabled .fr-label,
+.fr-fieldset:disabled .fr-hint-text,
+.fr-fieldset:disabled .fr-fieldset__legend {
+  color: var(--text-disabled-grey);
+}
+
+.fr-fieldset input:disabled + label,
+.fr-fieldset input:disabled + label .fr-hint-text,
+.fr-fieldset input:disabled + label + .fr-hint-text {
+  color: var(--text-disabled-grey);
+}
+
+.fr-fieldset__legend {
+  color: var(--text-label-grey);
+}
+.fr-fieldset--error, .fr-fieldset--error .fr-fieldset__legend {
+  background-image: linear-gradient(0deg, var(--border-plain-error), var(--border-plain-error));
+}
+.fr-fieldset--error .fr-fieldset__legend, .fr-fieldset--error .fr-label {
+  color: var(--text-default-error);
+}
+.fr-fieldset--valid, .fr-fieldset--valid .fr-fieldset__legend {
+  background-image: linear-gradient(0deg, var(--border-plain-success), var(--border-plain-success));
+}
+.fr-fieldset--valid .fr-fieldset__legend, .fr-fieldset--valid .fr-label {
+  color: var(--text-default-success);
+}
+.fr-fieldset--info, .fr-fieldset--info .fr-fieldset__legend {
+  background-image: linear-gradient(0deg, var(--border-plain-info), var(--border-plain-info));
+}
+.fr-fieldset--info .fr-fieldset__legend, .fr-fieldset--info .fr-label {
+  color: var(--text-default-info);
+}
+
+: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-label {
+  box-sizing: border-box;
+  --text-spacing: 0;
+}
+.fr-label--field {
+  margin-bottom: 0.5rem;
+}
+.fr-label--field .fr-hint-text {
+  margin-top: 0.25rem;
+}
+.fr-label--inline .fr-hint-text {
+  margin: 0;
+  width: 100%;
+}
+
+.fr-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap; /* added line */
+  border: 0;
+  display: block;
+}</style>

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

@@ -0,0 +1,65 @@
+import type { TextSize, TextWeight } from "../types";
+interface Props {
+    /** Attribut for du label (id du champ associé) */
+    for: string;
+    /** Texte du label */
+    label?: string;
+    /** Texte additionnel sous le label */
+    hint?: string;
+    /** Masque visuellement le label tout en le gardant accessible */
+    hidden?: boolean;
+    /** Attribut id du label */
+    id?: string;
+    /** Classe(s) additionnelle(s) */
+    class?: string;
+    /**
+     * Contexte d'affichage du composant.
+     * - "field" : inside input-group ou select-group → fr-hint-text reçoit une marge supérieure
+     * - "default" (défaut) : checkbox, radio, segmented… → pas de marge spécifique
+     */
+    context?: "field" | "default";
+    /** Gère les états du label lorsque celui-ci est aligné horizontalement avec le champ */
+    inline?: boolean;
+    /**
+     * Statut du champ associé, applique la couleur correspondante sur le label.
+     * - "error" → fr-label--error
+     * - "valid" → fr-label--success
+     * - "info"  → fr-label--info
+     */
+    status?: "default" | "valid" | "error" | "info";
+    /** Désactive le label (applique la couleur désactivée) */
+    disabled?: boolean;
+    /** Applique une classe utilitaire de taille de texte DSFR (fr-text--xs à fr-text--xl, fr-text--lead) */
+    labelSize?: TextSize;
+    /** Applique une classe utilitaire de graisse DSFR (fr-text--light à fr-text--heavy) */
+    labelWeight?: TextWeight;
+}
+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;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const DsfrLabel: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+    hint: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    hint: {};
+}, {}, "">;
+type DsfrLabel = InstanceType<typeof DsfrLabel>;
+export default DsfrLabel;