@lab-anssi/ui-kit 1.61.3 → 1.62.0

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

@@ -0,0 +1,131 @@
+import type { Kind, TranslateLanguage } from "../types";
+type ButtonKind = Extract<Kind, "tertiary" | "tertiary-no-outline">;
+type ToolLinkPreset = "close" | "tooltip" | "fullscreen" | "display" | "account" | "team" | "briefcase" | "sort";
+type ToolLink = {
+    label: string;
+    url: string;
+    icon?: string;
+    preset?: ToolLinkPreset;
+    classes?: string[];
+    markup?: "a" | "button";
+};
+type MenuItem = {
+    id: string;
+    type?: "link" | "menu" | "mega-menu";
+    active?: boolean;
+    collapsable?: boolean;
+    collapseId?: string;
+    label: string;
+    href?: string;
+    items?: MenuItem[];
+};
+interface Props {
+    /** Attribut id du header */
+    id?: string;
+    /** Passe le header en mode deuil */
+    isMourning?: boolean;
+    /** Attribut id du bouton de menu */
+    menuId?: string;
+    /** Attribut id de la fenêtre modale du menu */
+    menuModalId?: string;
+    /** Ajoute des liens d‘accès rapide */
+    hasToolLinks?: boolean;
+    /** Liens d‘accès rapide */
+    toolLinks?: ToolLink[];
+    /** Duplique les liens d‘accès rapide dans la modale mobile (pour les SPA) */
+    duplicateToolLinks?: boolean;
+    /** Ajoute un menu de traduction */
+    hasTranslate?: boolean;
+    /** Attribut id du menu de traduction */
+    translateId?: string;
+    /** Attribut id du collapse du menu de traduction */
+    translateCollapseId?: string;
+    /** Titre du bouton du menu de traduction */
+    translateButtonTitle?: string;
+    /** Type du bouton du menu de traduction */
+    translateButtonKind?: ButtonKind;
+    /** Langues du menu de traduction */
+    translateLanguages?: TranslateLanguage[];
+    /** Ajoute un champ de recherche */
+    hasSearch?: boolean;
+    /** Attribut id du champ de recherche */
+    searchId?: string;
+    /** Attribut id de la fenêtre modale de recherche */
+    searchModalId?: string;
+    /** Attribut id du bouton de recherche */
+    searchBtnId?: string;
+    /** Attribut id du champ de recherche */
+    searchInputId?: string;
+    /** Libellé du champ de recherche */
+    searchLabel?: string;
+    /** Placeholder du champ de recherche */
+    searchPlaceholder?: string;
+    /** Titre du champ de recherche */
+    searchTitle?: string;
+    /** Intitulé du logo */
+    brandLogoTitle: string;
+    /** Titre du service */
+    brandService?: string;
+    /** Ajoute une baseline */
+    hasBrandTagline?: boolean;
+    /** Baseline - précisions sur l‘organisation */
+    brandTagline?: string;
+    /** Attribut id du lien du bloc marque */
+    brandLinkId?: string;
+    /** Attribut title du lien du bloc marque */
+    brandLinkTitle?: string;
+    /** Lien du bloc marque */
+    brandLinkHref?: string;
+    /** Ajoute un logo opérateur dans le bloc marque */
+    hasBrandOperator?: boolean;
+    /** Texte alternatif du logo opérateur */
+    brandOperatorAlt?: string;
+    /** Chemin de l‘image du logo opérateur */
+    brandOperatorSrc?: string;
+    /** Attribut style du logo opérateur (permet de définir la taille) */
+    brandOperatorStyle?: string;
+    /** Ajoute une navigation principale */
+    hasNavigation?: boolean;
+    /** Ajoute un slot "afternavigation" dans la navigation principale */
+    hasSlotAfterNavigation?: boolean;
+    /** Attribut id de la navigation principale */
+    navigationId?: string;
+    /** Attribut aria-label de la navigation principale */
+    navigationAriaLabel?: string;
+    /** Éléments de la navigation principale */
+    navigationItems?: MenuItem[];
+    /** Utiliser une balise <header> pour le composant */
+    hasHeaderTag?: boolean;
+    /** Permet de définir le conteneur comme "fluide" ou non */
+    fluid?: boolean;
+    /** Callback appelé lors du clic sur un lien d'accès rapide */
+    ontoolLinkClick?: (link: ToolLink) => void;
+}
+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 DsfrHeader: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    beforenavbarbuttons: {};
+    headerbadge: {};
+    beforetoolslinks: {};
+    toolLinks: {};
+    translate: {};
+    searchbar: {};
+    modalToolLinks: {};
+    aftermodaltoollinks: {};
+    navigation: {};
+}, {}, "">;
+type DsfrHeader = InstanceType<typeof DsfrHeader>;
+export default DsfrHeader;

package/dist/dsfr/DsfrHighlight.svelte

@@ -0,0 +1,294 @@
+<svelte:options
+  customElement={{
+    tag: "dsfr-highlight",
+    props: {
+      text: { attribute: "text", type: "String" },
+      id: { attribute: "id", type: "String" },
+      size: { attribute: "size", type: "String" },
+      accent: { attribute: "accent", type: "String" },
+    },
+  }}
+/>
+
+<script lang="ts">import { setThemeable } from "../utilitaires";
+setThemeable($host());
+let { text, id, size = "md", accent } = $props();
+const accentClass = $derived(accent && `fr-highlight--${accent}`);
+</script>
+
+{#if text || $$slots.text}
+  <div {id} class={["fr-highlight", accentClass]}>
+    <slot name="title"></slot>
+    <slot name="text">
+      <p class={`fr-text--${size}`}>{text}</p>
+    </slot>
+  </div>
+{/if}
+
+<style>/*!
+ * DSFR v1.14.4 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
+ */.fr-highlight{background-image:linear-gradient(0deg,var(--border-default-blue-france),var(--border-default-blue-france));background-position:0 0;background-repeat:no-repeat;background-size:.25rem 100%;font-size:1rem;line-height:1.5rem;padding-left:1.25rem}.fr-highlight--green-tilleul-verveine{background-image:linear-gradient(0deg,var(--border-default-green-tilleul-verveine),var(--border-default-green-tilleul-verveine))}.fr-highlight--green-bourgeon{background-image:linear-gradient(0deg,var(--border-default-green-bourgeon),var(--border-default-green-bourgeon))}.fr-highlight--green-emeraude{background-image:linear-gradient(0deg,var(--border-default-green-emeraude),var(--border-default-green-emeraude))}.fr-highlight--green-menthe{background-image:linear-gradient(0deg,var(--border-default-green-menthe),var(--border-default-green-menthe))}.fr-highlight--green-archipel{background-image:linear-gradient(0deg,var(--border-default-green-archipel),var(--border-default-green-archipel))}.fr-highlight--blue-ecume{background-image:linear-gradient(0deg,var(--border-default-blue-ecume),var(--border-default-blue-ecume))}.fr-highlight--blue-cumulus{background-image:linear-gradient(0deg,var(--border-default-blue-cumulus),var(--border-default-blue-cumulus))}.fr-highlight--purple-glycine{background-image:linear-gradient(0deg,var(--border-default-purple-glycine),var(--border-default-purple-glycine))}.fr-highlight--pink-macaron{background-image:linear-gradient(0deg,var(--border-default-pink-macaron),var(--border-default-pink-macaron))}.fr-highlight--pink-tuile{background-image:linear-gradient(0deg,var(--border-default-pink-tuile),var(--border-default-pink-tuile))}.fr-highlight--yellow-tournesol{background-image:linear-gradient(0deg,var(--border-default-yellow-tournesol),var(--border-default-yellow-tournesol))}.fr-highlight--yellow-moutarde{background-image:linear-gradient(0deg,var(--border-default-yellow-moutarde),var(--border-default-yellow-moutarde))}.fr-highlight--orange-terre-battue{background-image:linear-gradient(0deg,var(--border-default-orange-terre-battue),var(--border-default-orange-terre-battue))}.fr-highlight--brown-cafe-creme{background-image:linear-gradient(0deg,var(--border-default-brown-cafe-creme),var(--border-default-brown-cafe-creme))}.fr-highlight--brown-caramel{background-image:linear-gradient(0deg,var(--border-default-brown-caramel),var(--border-default-brown-caramel))}.fr-highlight--brown-opera{background-image:linear-gradient(0deg,var(--border-default-brown-opera),var(--border-default-brown-opera))}.fr-highlight--beige-gris-galet{background-image:linear-gradient(0deg,var(--border-default-beige-gris-galet),var(--border-default-beige-gris-galet))}@media (min-width:36em){
+  /*! media sm */}@media (min-width:48em){
+  /*! media md */.fr-highlight{margin-left:2rem;padding-left:2.25rem}}@media (min-width:62em){
+  /*! media lg */}@media (min-width:78em){
+  /*! media xl */}@media (-ms-high-contrast:active),(forced-colors:active){.fr-highlight{border-left:4px solid;padding-left:1rem}}@media (-ms-high-contrast:active) and (min-width:48em),(forced-colors:active) and (min-width:48em){.fr-highlight{padding-left:2rem}}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;
+}
+
+: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);
+}
+
+*,
+*::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-highlight {
+  box-sizing: border-box;
+}
+.fr-highlight :global(::slotted([slot="text"])) {
+  font-size: 1rem  !important;
+  line-height: 1.5rem  !important;
+  margin: var(--text-spacing);
+}</style>

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

@@ -0,0 +1,33 @@
+import type { Accent, Size } from "../types";
+type HighlightSize = Extract<Size, "sm" | "md" | "lg">;
+interface Props {
+    /** Contenu texte de la mise en exergue */
+    text?: string;
+    /** Attribut id de la mise en exergue */
+    id?: string;
+    /** Taille du texte de la mise en exergue */
+    size?: HighlightSize;
+    /** Couleur d'accentuation */
+    accent?: Accent;
+}
+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 DsfrHighlight: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    title: {};
+    text: {};
+}, {}, "">;
+type DsfrHighlight = InstanceType<typeof DsfrHighlight>;
+export default DsfrHighlight;