@lab-anssi/ui-kit 1.61.3 → 1.62.0

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

@@ -0,0 +1,56 @@
+type Status = "default" | "valid" | "error";
+interface Props {
+    /** Attribut id de l'input */
+    id: string;
+    /** Libellé de l'interrupteur */
+    label?: string;
+    /** Permet de masquer le label */
+    hideLabel?: boolean;
+    /** Texte additionnel de l'interrupteur */
+    hint?: string;
+    /** ID du texte additionnel de l'interrupteur */
+    hintId: string;
+    /** Désactive l'interrupteur */
+    disabled?: boolean;
+    /** Coche l'interrupteur */
+    checked?: boolean;
+    /** Ajoute une bordure sous l'interrupteur */
+    border?: boolean;
+    /** Place le libellé sur la gauche */
+    left?: boolean;
+    /** Ajoute les libellés "activé"/"désactivé" sous le champ */
+    state?: boolean;
+    /** Statut du message */
+    status?: Status;
+    /** Texte du message d'erreur */
+    errorMessage?: string;
+    /** Texte du message de succès */
+    validMessage?: string;
+    /** Attribut form du composant */
+    form?: string;
+    /** Attribut required de la checkbox */
+    required?: boolean;
+    /** Callback appelé lors du changement d'état de l'interrupteur */
+    onvaluechanged?: (checked: boolean) => 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 DsfrToggle: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    hint: {};
+    'messages-group': {};
+}, {}, "checked">;
+type DsfrToggle = InstanceType<typeof DsfrToggle>;
+export default DsfrToggle;

package/dist/dsfr/DsfrTooltip.svelte

@@ -0,0 +1,396 @@
+<svelte:options
+  customElement={{
+    tag: "dsfr-tooltip",
+    props: {
+      id: { attribute: "id", type: "String" },
+      content: { attribute: "content", type: "String" },
+      type: { attribute: "type", type: "String" },
+    },
+  }}
+/>
+
+<script lang="ts">import { setThemeable } from "../utilitaires";
+setThemeable($host());
+let { id, content, type = "hover" } = $props();
+let placement = $state("top");
+let translateX = $state(0);
+let arrowX = $state(0);
+let tooltipElement;
+let wrapperElement;
+let triggerElement;
+let focusActive = $state(false);
+let hoverActive = $state(false);
+let timeoutID;
+const SAFE_AREA_MARGIN = 16;
+const ARROW_EDGE_MARGIN = 8;
+const shown = $derived(focusActive || hoverActive);
+$effect(() => {
+	if (!shown) return;
+	const frameId = requestAnimationFrame(updatePlacement);
+	return () => cancelAnimationFrame(frameId);
+});
+/**
+* Met à jour la position et l'alignement de l'infobulle en fonction de l'espace disponible
+* dans la fenêtre. Calcule la position horizontale (translateX) et la position de la flèche (arrowX)
+* pour éviter que l'infobulle ne sorte de la fenêtre.
+*/
+function updatePlacement() {
+	if (!tooltipElement || !wrapperElement) return;
+	const wrapperRect = wrapperElement.getBoundingClientRect();
+	const tooltipWidth = tooltipElement.offsetWidth;
+	const tooltipHeight = tooltipElement.offsetHeight;
+	const viewportWidth = window.innerWidth;
+	placement = wrapperRect.top < tooltipHeight + ARROW_EDGE_MARGIN ? "bottom" : "top";
+	const wrapperCenter = wrapperRect.left + wrapperRect.width / 2;
+	const centerOffset = (wrapperRect.width - tooltipWidth) / 2;
+	const centerLeft = wrapperRect.left + centerOffset;
+	const centerRight = centerLeft + tooltipWidth;
+	let horizontalOffset;
+	let arrowOffset;
+	if (centerLeft >= SAFE_AREA_MARGIN && centerRight <= viewportWidth - SAFE_AREA_MARGIN) {
+		horizontalOffset = centerOffset;
+		arrowOffset = 0;
+	} else if (wrapperRect.left + tooltipWidth <= viewportWidth - SAFE_AREA_MARGIN) {
+		horizontalOffset = 0;
+		arrowOffset = wrapperCenter - (wrapperRect.left + tooltipWidth / 2);
+	} else if (wrapperRect.right - tooltipWidth >= SAFE_AREA_MARGIN) {
+		horizontalOffset = wrapperRect.width - tooltipWidth;
+		arrowOffset = wrapperCenter - (wrapperRect.left + (wrapperRect.width - tooltipWidth) + tooltipWidth / 2);
+	} else {
+		horizontalOffset = centerOffset;
+		arrowOffset = 0;
+	}
+	translateX = Math.round(horizontalOffset);
+	const limit = tooltipWidth / 2 - ARROW_EDGE_MARGIN;
+	arrowX = Math.max(-limit, Math.min(limit, arrowOffset));
+}
+function handleFocusIn() {
+	focusActive = true;
+}
+function handleFocusOut() {
+	focusActive = false;
+}
+function handleMouseOver() {
+	clearTimeout(timeoutID);
+	hoverActive = true;
+}
+function handleMouseOut() {
+	timeoutID = setTimeout(() => {
+		hoverActive = false;
+	}, 100);
+}
+$effect(() => {
+	if (!shown) return;
+	function onClickOutside(event) {
+		const host = $host();
+		if (host && !event.composedPath().includes(host)) {
+			focusActive = false;
+			hoverActive = false;
+		}
+	}
+	function onEscape(event) {
+		if (event.key === "Escape") {
+			focusActive = false;
+			hoverActive = false;
+		}
+	}
+	document.addEventListener("click", onClickOutside, true);
+	document.addEventListener("keydown", onEscape);
+	return () => {
+		document.removeEventListener("click", onClickOutside, true);
+		document.removeEventListener("keydown", onEscape);
+	};
+});
+$effect(() => {
+	if (!triggerElement) return;
+	const slot = triggerElement.querySelector("slot");
+	if (!slot) return;
+	function setAria() {
+		for (const el of slot.assignedElements()) {
+			el.setAttribute("aria-describedby", id);
+		}
+	}
+	slot.addEventListener("slotchange", setAria);
+	setAria();
+	return () => slot.removeEventListener("slotchange", setAria);
+});
+$effect(() => {
+	return () => clearTimeout(timeoutID);
+});
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<div class="fr-tooltip-wrapper" bind:this={wrapperElement}>
+  <span
+    class="fr-tooltip-trigger"
+    bind:this={triggerElement}
+    onfocusin={handleFocusIn}
+    onfocusout={handleFocusOut}
+    onmouseover={type === "hover" ? handleMouseOver : undefined}
+    onmouseout={type === "hover" ? handleMouseOut : undefined}
+  >
+    <slot></slot>
+  </span>
+
+  <span
+    class={[
+      "fr-tooltip",
+      "fr-placement",
+      `fr-placement--${placement}`,
+      { "fr-tooltip--shown": shown },
+    ]}
+    {id}
+    role="tooltip"
+    style:--arrow-x="{arrowX.toFixed(2)}px"
+    style:transform="translateX({translateX}px)"
+    bind:this={tooltipElement}
+    onmouseover={type === "hover" ? handleMouseOver : undefined}
+    onmouseout={type === "hover" ? handleMouseOut : undefined}
+  >
+    {content}
+  </span>
+</div>
+
+<style>/*!
+ * DSFR v1.14.4 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
+ *//* ¯¯¯¯¯¯¯¯¯ *\
+  TOOLTIP
+\* ˍˍˍˍˍˍˍˍˍ */
+.fr-tooltip {
+  --arrow-x: 0;
+  display: block;
+  max-width: min(24rem, calc((100vw - 2rem) * 2 / 3));
+  padding: 0.5rem 0.5rem 1.25rem;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 0s 0.15s, visibility 0s 0.15s;
+  text-align: left;
+  background-repeat: no-repeat;
+  background-position: calc(50% + var(--arrow-x)) calc(100% - 0.5rem), calc(50% + var(--arrow-x)) calc(100% - 0.375rem), 50% calc(100% - 0.75rem), 50% calc(100% - 0.75rem);
+  background-size: 0.5rem 0.375rem, 0.5rem 0.375rem, 100% 1px, 100% calc(100% - 0.75rem);
+  white-space: normal;
+  color: var(--text-default-grey);
+}
+
+.fr-tooltip:not(.fr-tooltip--shown) {
+  display: none;
+  opacity: 0;
+}
+
+.fr-tooltip--hidding {
+  opacity: 0;
+}
+
+.fr-tooltip.fr-placement--bottom {
+  padding-top: 1.25rem;
+  padding-bottom: 0.5rem;
+  background-position-y: 0.5rem, 0.375rem, 0.75rem, 0.75rem;
+}
+
+.fr-tooltip.fr-placement {
+  z-index: calc(var(--ground) + 1000);
+  filter: drop-shadow(var(--overlap-shadow));
+  background-image: linear-gradient(90deg, var(--background-overlap-grey), var(--background-overlap-grey));
+}
+@supports (background: conic-gradient(white, black)) {
+  .fr-tooltip.fr-placement--top {
+    background-image: conic-gradient(from -33.69deg at 50% 100%, transparent 0deg, var(--background-overlap-grey) 0deg, var(--background-overlap-grey) 67.38deg, transparent 67.38deg), conic-gradient(from -33.69deg at 50% 100%, transparent 0deg, var(--border-default-grey) 0deg, var(--border-default-grey) 67.38deg, transparent 67.38deg), linear-gradient(90deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(90deg, var(--background-overlap-grey), var(--background-overlap-grey));
+  }
+
+  .fr-tooltip.fr-placement--bottom {
+    background-image: conic-gradient(from 146.31deg at 50% 0%, transparent 0deg, var(--background-overlap-grey) 0deg, var(--background-overlap-grey) 67.38deg, transparent 67.38deg), conic-gradient(from 146.31deg at 50% 0%, transparent 0deg, var(--border-default-grey) 0deg, var(--border-default-grey) 67.38deg, transparent 67.38deg), linear-gradient(90deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(90deg, var(--background-overlap-grey), var(--background-overlap-grey));
+  }
+}
+@media (min-width: 36em) {
+  /*! media sm */
+}
+@media (min-width: 48em) {
+  /*! media md */
+}
+@media (min-width: 62em) {
+  /*! media lg */
+}
+@media (min-width: 78em) {
+  /*! media xl */
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  .fr-tooltip {
+    outline: 1px solid;
+    background: canvas;
+  }
+
+  .fr-tooltip.fr-placement {
+    padding: 0.5rem;
+  }
+}
+.fr-placement {
+  position: fixed;
+  width: max-content;
+}
+
+body {
+  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);
+}
+
+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]) {
+  color: var(--text-disabled-grey);
+}
+
+.fr-artwork-decorative {
+  fill: var(--artwork-decorative-blue-france);
+}
+.fr-artwork-minor {
+  fill: var(--artwork-minor-red-marianne);
+}
+.fr-artwork-major {
+  fill: var(--artwork-major-blue-france);
+}
+.fr-artwork-background {
+  fill: var(--artwork-background-grey);
+}
+.fr-artwork-motif {
+  fill: var(--artwork-motif-grey);
+}
+.fr-artwork--green-tilleul-verveine .fr-artwork-minor {
+  fill: var(--artwork-minor-green-tilleul-verveine);
+}
+
+.fr-artwork--green-bourgeon .fr-artwork-minor {
+  fill: var(--artwork-minor-green-bourgeon);
+}
+
+.fr-artwork--green-emeraude .fr-artwork-minor {
+  fill: var(--artwork-minor-green-emeraude);
+}
+
+.fr-artwork--green-menthe .fr-artwork-minor {
+  fill: var(--artwork-minor-green-menthe);
+}
+
+.fr-artwork--green-archipel .fr-artwork-minor {
+  fill: var(--artwork-minor-green-archipel);
+}
+
+.fr-artwork--blue-ecume .fr-artwork-minor {
+  fill: var(--artwork-minor-blue-ecume);
+}
+
+.fr-artwork--blue-cumulus .fr-artwork-minor {
+  fill: var(--artwork-minor-blue-cumulus);
+}
+
+.fr-artwork--purple-glycine .fr-artwork-minor {
+  fill: var(--artwork-minor-purple-glycine);
+}
+
+.fr-artwork--pink-macaron .fr-artwork-minor {
+  fill: var(--artwork-minor-pink-macaron);
+}
+
+.fr-artwork--pink-tuile .fr-artwork-minor {
+  fill: var(--artwork-minor-pink-tuile);
+}
+
+.fr-artwork--yellow-tournesol .fr-artwork-minor {
+  fill: var(--artwork-minor-yellow-tournesol);
+}
+
+.fr-artwork--yellow-moutarde .fr-artwork-minor {
+  fill: var(--artwork-minor-yellow-moutarde);
+}
+
+.fr-artwork--orange-terre-battue .fr-artwork-minor {
+  fill: var(--artwork-minor-orange-terre-battue);
+}
+
+.fr-artwork--brown-cafe-creme .fr-artwork-minor {
+  fill: var(--artwork-minor-brown-cafe-creme);
+}
+
+.fr-artwork--brown-caramel .fr-artwork-minor {
+  fill: var(--artwork-minor-brown-caramel);
+}
+
+.fr-artwork--brown-opera .fr-artwork-minor {
+  fill: var(--artwork-minor-brown-opera);
+}
+
+.fr-artwork--beige-gris-galet .fr-artwork-minor {
+  fill: var(--artwork-minor-beige-gris-galet);
+}
+
+[disabled] .fr-artwork * {
+  fill: var(--text-disabled-grey);
+}
+
+.fr-h6, .fr-h5, .fr-h4, .fr-h3, .fr-h2, .fr-h1, .fr-display-xs, .fr-display-sm, .fr-display-md, .fr-display-lg, .fr-display-xl {
+  color: var(--text-title-grey);
+}
+
+h6, h5, h4, h3, h2, h1 {
+  color: var(--text-title-grey);
+}
+
+hr {
+  background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey));
+}
+
+.fr-hr-or::before, .fr-hr-or::after {
+  background-color: var(--border-default-grey);
+  --idle: transparent;
+  --hover: var(--border-default-grey-hover);
+  --active: var(--border-default-grey-active);
+}
+
+.fr-hr {
+  background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey));
+}
+
+:host {
+  display: inline-flex;
+  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-tooltip {
+  box-sizing: border-box;
+}
+
+.fr-tooltip-wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.fr-tooltip {
+  position: absolute;
+  left: 0;
+}
+
+.fr-tooltip.fr-placement--top {
+  bottom: 100%;
+}
+
+.fr-tooltip.fr-placement--bottom {
+  top: 100%;
+}
+
+.fr-tooltip-trigger {
+  display: contents;
+}</style>

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

@@ -0,0 +1,36 @@
+type TooltipType = "hover" | "click";
+interface Props {
+    /** Identifiant de l'infobulle */
+    id: string;
+    /** Contenu texte de l'infobulle */
+    content: string;
+    /** Type de déclenchement : 'hover' (information contextuelle) ou 'click' (infobulle) */
+    type?: TooltipType;
+}
+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 DsfrTooltip: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type DsfrTooltip = InstanceType<typeof DsfrTooltip>;
+export default DsfrTooltip;