@cnamts/synapse 1.0.13 → 1.0.15

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.stories.ts

@@ -793,7 +793,7 @@ export const WithDateFormatReturn: Story = {
 					<div class="d-flex flex-column">
 						<DatePicker
 							v-model="date"
-							placeholder="Format d'affichage: DD/MM/YYYY, Format de retour: YYYY-MM-DD"
+							placeholder="Format d'affichage: JJ/MM/AAAA, Format de retour: AAAA-MM-JJ"
 							format="DD/MM/YYYY"
 							dateFormatReturn="YYYY-MM-DD"
 							class="mb-4"
@@ -828,7 +828,7 @@ export const WithDateFormatReturn: Story = {
               <div class="d-flex flex-column pa-4">
                 <DatePicker
                   v-model="date"
-                  placeholder="Format d'affichage: DD/MM/YYYY, Format de retour: YYYY-MM-DD"
+                  placeholder="Format d'affichage: JJ/MM/AAAA, Format de retour: AAAA-MM-JJ"
                   format="DD/MM/YYYY"
                   dateFormatReturn="YYYY-MM-DD"
                   class="mb-4"
@@ -960,8 +960,8 @@ export const CustomDateFormat: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
-						placeholder="Format YYYY.MM.DD"
-						format="YYYY.MM.DD"
+						placeholder="Format AAAA.MM.JJ"
+						format="AAAA.MM.JJ"
 						useCombinedMode
 					/>
 				</template>
@@ -981,7 +981,7 @@ export const CustomDateFormat: Story = {
 		],
 	},
 	args: {
-		placeholder: 'Format YYYY.MM.DD',
+		placeholder: 'Format AAAA.MM.JJ',
 		format: 'YYYY.MM.DD',
 		useCombinedMode: true,
 	},
@@ -1307,7 +1307,7 @@ export const AutoClampFeature: Story = {
 					<div class="d-flex flex-column">
 						<h3>Démonstration de l'auto clamp avec différents formats</h3>
 						
-						<h4 class="mt-4">Format DD/MM/YYYY (séparateur /)</h4>
+						<h4 class="mt-4">Format JJ/MM/AAAA (séparateur /)</h4>
 						<DatePicker
 							v-model="dateSlash"
 							placeholder="Saisie avec auto clamp - séparateur /"
@@ -1316,7 +1316,7 @@ export const AutoClampFeature: Story = {
 							autoClamp
 						/>
 						
-						<h4 class="mt-4">Format DD-MM-YYYY (séparateur -)</h4>
+						<h4 class="mt-4">Format JJ-MM-AAAA (séparateur -)</h4>
 						<DatePicker
 							v-model="dateDash"
 							placeholder="Saisie avec auto clamp - séparateur -"
@@ -1325,7 +1325,7 @@ export const AutoClampFeature: Story = {
 							autoClamp
 						/>
 						
-						<h4 class="mt-4">Format YYYY.MM.DD (séparateur .)</h4>
+						<h4 class="mt-4">Format AAAA.MM.JJ (séparateur .)</h4>
 						<DatePicker
 							v-model="dateDot"
 							placeholder="Saisie avec auto clamp - séparateur ."
@@ -1366,7 +1366,7 @@ export const AutoClampFeature: Story = {
                 <h3>Démonstration de l'auto clamp avec différents formats</h3>
                 <div class="mb-4 mt-2">Saisissez uniquement des chiffres - les séparateurs seront ajoutés automatiquement selon le format défini</div>
                 
-                <h4 class="mb-2">Format DD/MM/YYYY (séparateur /)</h4>
+                <h4 class="mb-2">Format JJ/MM/AAAA (séparateur /)</h4>
                 <DatePicker
                   v-model="dateSlash"
                   placeholder="Saisie avec auto clamp - séparateur /"
@@ -1376,7 +1376,7 @@ export const AutoClampFeature: Story = {
                 />
                 <div class="caption mb-4">Valeur actuelle: {{ dateSlash || 'aucune date saisie' }}</div>
                 
-                <h4 class="mb-2">Format DD-MM-YYYY (séparateur -)</h4>
+                <h4 class="mb-2">Format JJ-MM-AAAA (séparateur -)</h4>
                 <DatePicker
                   v-model="dateDash"
                   placeholder="Saisie avec auto clamp - séparateur -"
@@ -1386,7 +1386,7 @@ export const AutoClampFeature: Story = {
                 />
                 <div class="caption mb-4">Valeur actuelle: {{ dateDash || 'aucune date saisie' }}</div>
                 
-                <h4 class="mb-2">Format YYYY.MM.DD (séparateur .)</h4>
+                <h4 class="mb-2">Format AAAA.MM.JJ (séparateur .)</h4>
                 <DatePicker
                   v-model="dateDot"
                   placeholder="Saisie avec auto clamp - séparateur ."

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.vue

@@ -982,6 +982,11 @@
 		hasInteracted.value = false
 		isManualInputActive.value = false
 
+		if (props.disabled) {
+			fieldKey.value++
+			return
+		}
+
 		// 2) Réinitialiser la valeur et la sélection SANS déclencher
 		// de validation "required" interactive
 		withInternalUpdate(() => {

package/src/components/DatePicker/DatePickerValidationExample/DatePickerValidation.mdx

@@ -7,6 +7,7 @@ import '../../../stories/styles/shared.css';
 <div className="header">
   <h1>Documentations des règles de validation du DatePicker</h1>
   <p>Le composant DatePicker prend en charge plusieurs types de règles de validation qui permettent de contrôler les dates saisies par l'utilisateur. Cette documentation décrit toutes les règles disponibles et comment les utiliser.</p>
+  <p>Pour les règles <code>notBeforeDate</code>, <code>notAfterDate</code> et <code>dateExact</code>, lorsque la date de référence est vide (valeur <code>null</code> ou chaîne vide), la règle est ignorée pour cette validation. Le message technique « Configuration de la règle invalide » n'est affiché que si l'option <code>date</code> est totalement absente de la configuration de la règle.</p>
 </div>
 
 > Pour en savoir plus sur le système global de gestion de validation, consultez la page <a href="/?path=/docs/guide-du-dev-utiliser-le-syst%C3%A8me-de-validation--docs">Utiliser le système de validation</a>.
@@ -157,6 +158,12 @@ Vérifie que la date sélectionnée est exactement égale à une date de référ
 />
 `}/>
 
+#### Notes sur les dates de référence dynamiques
+
+Lorsque l'option `date` d'une règle `notBeforeDate`, `notAfterDate` ou `dateExact` est fournie mais que sa valeur est vide (`null` ou chaîne vide), la règle est considérée comme inactive pour cette validation : aucun message d'erreur ou d'avertissement n'est affiché.
+
+L'erreur technique « Configuration de la règle invalide » n'est affichée que si l'option `date` est totalement absente de la configuration de la règle (par exemple `{ type: 'notBeforeDate', options: {} }`).
+
 ### 8. `custom`
 
 Permet de créer une règle de validation personnalisée avec une fonction de validation.

package/src/components/DatePicker/DateTextInput/DateTextInput.range.spec.ts

@@ -60,7 +60,7 @@ describe('DateTextInput.vue - Range Mode', () => {
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
 		const textField = wrapper.findComponent(SyTextField)
-		expect(textField.props('errorMessages')).toContain('Format de date invalide (DD/MM/YYYY)')
+		expect(textField.props('errorMessages')).toContain('Format de date invalide (JJ/MM/AAAA)')
 	})
 
 	// Test modifié pour vérifier le comportement réel du composant

package/src/components/DatePicker/DateTextInput/DateTextInput.spec.ts

@@ -35,7 +35,7 @@ describe('DateTextInput.vue', () => {
 		await wrapper.vm.$nextTick()
 		const textField = wrapper.findComponent(SyTextField)
 
-		expect(textField.props('errorMessages')).toContain('Format de date invalide (DD/MM/YYYY)')
+		expect(textField.props('errorMessages')).toContain('Format de date invalide (JJ/MM/AAAA)')
 	})
 
 	it('accepts valid date format', async () => {
@@ -129,7 +129,7 @@ describe('DateTextInput.vue', () => {
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
 		const textField = wrapper.findComponent(SyTextField)
-		expect(textField.props('errorMessages')).toContain('Format de date invalide (DD/MM/YYYY)')
+		expect(textField.props('errorMessages')).toContain('Format de date invalide (JJ/MM/AAAA)')
 	})
 
 	it('formats input while typing', async () => {
@@ -162,7 +162,7 @@ describe('DateTextInput.vue', () => {
 		const input = wrapper.find('input')
 		await input.trigger('blur')
 		await wrapper.vm.$nextTick()
-		expect(textField.props('errorMessages')).toContain('Format de date invalide (DD/MM/YYYY)')
+		expect(textField.props('errorMessages')).toContain('Format de date invalide (JJ/MM/AAAA)')
 	})
 
 	it('formats date during input', async () => {

package/src/components/DatePicker/DateTextInput/DateTextInput.vue

@@ -54,7 +54,7 @@
 		persistentHint?: boolean
 		externalErrorMessages?: string[]
 	}>(), {
-		modelValue: null,
+		modelValue: undefined,
 		placeholder: DATE_PICKER_MESSAGES.PLACEHOLDER_DEFAULT,
 		format: DATE_PICKER_MESSAGES.FORMAT_DEFAULT,
 		dateFormatReturn: undefined,
@@ -690,6 +690,49 @@
 	 * =====================
 	 */
 	watch(inputValue, async (nv, ov) => {
+		if (props.disabled) {
+			const isEmpty = !nv || nv.trim() === '' || /^[_/\-.\s]+$/.test(nv)
+
+			if (isEmpty && ov && props.modelValue) {
+				isFormatting.value = true
+
+				const mv = props.modelValue
+
+				// --- RANGE ---
+				if (isRange.value && Array.isArray(mv) && mv.length === 2) {
+					const [start, end] = mv
+					const sd = parseDate(start, returnFormat.value)
+					const ed = parseDate(end, returnFormat.value)
+
+					if (sd && ed) {
+						initializeWithDates(sd, ed)
+						selectedDates.value = [sd, ed]
+						inputValue.value = formatRangeForDisplay(sd, ed)
+						runRules(inputValue.value)
+					}
+				}
+
+				// --- SINGLE ---
+				else {
+					const raw = typeof mv === 'string' ? mv : ''
+					const parsed = dayjs(raw, displayFormat.value, true)
+
+					if (parsed.isValid()) {
+						inputValue.value = parsed.format(displayFormat.value)
+						runRules(inputValue.value)
+					}
+					else {
+						inputValue.value = raw
+						runRules(raw)
+					}
+				}
+
+				isFormatting.value = false
+			}
+
+			return
+		}
+
 		// Prevent infinite loops but allow formatting
 		if (isFormatting.value || nv === ov || isHandlingBackspace.value || isBootstrapping.value) return
 		try {
@@ -871,7 +914,7 @@
 		}
 	})
 
-	watch(() => props.modelValue, (nv: DateValue) => {
+	watch(() => props.modelValue, (nv) => {
 		if (isFormatting.value) return
 		if (!nv) {
 			inputValue.value = ''
@@ -953,6 +996,11 @@
 		isFocused.value = false
 		hasInteracted.value = false
 
+		if (props.disabled) {
+			fieldKey.value++
+			return
+		}
+
 		// 2) Réinitialiser la valeur sans déclencher de validation interactive
 		isFormatting.value = true
 		inputValue.value = ''

package/src/components/DatePicker/DateTextInput/NoCalendar.stories.ts

@@ -681,7 +681,7 @@ export const AutoClampFeature: Story = {
 					<div class="d-flex flex-column">
 						<h3>Démonstration de l'auto clamp dans DateTextInput</h3>
 						
-						<h4 class="mt-4">Format DD/MM/YYYY (séparateur /)</h4>
+						<h4 class="mt-4">Format JJ/MM/AAAA (séparateur /)</h4>
 						<DatePicker
 							v-model="dateSlash"
 							placeholder="Saisie avec auto clamp - séparateur /"
@@ -690,7 +690,7 @@ export const AutoClampFeature: Story = {
 							autoClamp
 						/>
 						
-						<h4 class="mt-4">Format DD-MM-YYYY (séparateur -)</h4>
+						<h4 class="mt-4">Format JJ-MM-AAAA (séparateur -)</h4>
 						<DatePicker
 							v-model="dateDash"
 							placeholder="Saisie avec auto clamp - séparateur -"
@@ -753,7 +753,7 @@ export const AutoClampFeature: Story = {
                 <h3>Démonstration de l'auto clamp dans DateTextInput</h3>
                 <div class="mb-4 mt-2">Saisissez uniquement des chiffres - les séparateurs seront ajoutés automatiquement selon le format défini</div>
                 
-                <h4 class="mb-2">Format DD/MM/YYYY (séparateur /)</h4>
+                <h4 class="mb-2">Format JJ/MM/AAAA (séparateur /)</h4>
                 <DatePicker
                   v-model="dateSlash"
                   placeholder="Saisie avec auto clamp - séparateur /"
@@ -763,7 +763,7 @@ export const AutoClampFeature: Story = {
                 />
                 <div class="caption mb-4">Valeur actuelle: {{ dateSlash || 'aucune date saisie' }}</div>
                 
-                <h4 class="mb-2">Format DD-MM-YYYY (séparateur -)</h4>
+                <h4 class="mb-2">Format JJ-MM-AAAA (séparateur -)</h4>
                 <DatePicker
                   v-model="dateDash"
                   placeholder="Saisie avec auto clamp - séparateur -"
@@ -773,7 +773,7 @@ export const AutoClampFeature: Story = {
                 />
                 <div class="caption mb-4">Valeur actuelle: {{ dateDash || 'aucune date saisie' }}</div>
                 
-                <h4 class="mb-2">Format YYYY.MM.DD (séparateur .)</h4>
+                <h4 class="mb-2">Format AAAA.MM.JJ (séparateur .)</h4>
                 <DatePicker
                   v-model="dateDot"
                   placeholder="Saisie avec auto clamp - séparateur ."
@@ -809,31 +809,31 @@ export const DifferentFormats: Story = {
 					<div class="d-flex flex-column gap-4">
 						<DatePicker
 							v-model="value1"
-							placeholder="Format DD/MM/YYYY"
+							placeholder="Format JJ/MM/AAAA"
 							format="DD/MM/YYYY"
 							no-calendar
 						/>
 						<DatePicker
 							v-model="value2"
-							placeholder="Format MM/DD/YYYY"
+							placeholder="Format MM/JJ/AAAA"
 							format="MM/DD/YYYY"
 							no-calendar
 						/>
 						<DatePicker
 							v-model="value3"
-							placeholder="Format YYYY-MM-DD"
+							placeholder="Format AAAA-MM-JJ"
 							format="YYYY-MM-DD"
 							no-calendar
 						/>
 						<DatePicker
 							v-model="value4"
-							placeholder="Format DD-MM-YY"
+							placeholder="Format JJ-MM-AA"
 							format="DD-MM-YY"
 							no-calendar
 						/>
 						<DatePicker
 							v-model="value5"
-							placeholder="Format DD.MM.YYYY"
+							placeholder="Format JJ.MM.AAAA"
 							format="DD.MM.YYYY"
 							no-calendar
 						/>
@@ -873,35 +873,35 @@ export const DifferentFormats: Story = {
               <div class="d-flex flex-column gap-4 pa-4">
                 <DatePicker
                     v-model="value1"
-                    placeholder="Format DD/MM/YYYY"
+                    placeholder="Format JJ/MM/AAAA"
                     format="DD/MM/YYYY"
                     no-calendar
                     class="py-4"
                 />
                 <DatePicker
                     v-model="value2"
-                    placeholder="Format MM/DD/YYYY"
+                    placeholder="Format MM/JJ/AAAA"
                     format="MM/DD/YYYY"
 					no-calendar
 					class="py-4"
                 />
                 <DatePicker
                     v-model="value3"
-                    placeholder="Format YYYY-MM-DD"
+                    placeholder="Format AAAA-MM-JJ"
                     format="YYYY-MM-DD"
 					no-calendar
 					class="py-4"
                 />
                 <DatePicker
                     v-model="value4"
-                    placeholder="Format DD-MM-YY"
+                    placeholder="Format JJ-MM-AA"
                     format="DD-MM-YY"
 					no-calendar
 					class="py-4"
                 />
                 <DatePicker
                     v-model="value5"
-                    placeholder="Format DD.MM.YYYY"
+                    placeholder="Format JJ.MM.AAAA"
                     format="DD.MM.YYYY"
 					no-calendar
 					class="py-4"

package/src/components/DatePicker/composables/tests/useDateFormatValidation.spec.ts

@@ -29,7 +29,7 @@ describe('useDateFormatValidation', () => {
 
 			const result = validateDateFormat('32/12/2023')
 			expect(result.isValid).toBe(false)
-			expect(result.message).toBe('Format de date invalide (DD/MM/YYYY)')
+			expect(result.message).toBe('Format de date invalide (JJ/MM/AAAA)')
 		})
 
 		it('devrait retourner isValid=true pour une date vide si non requis', () => {
@@ -78,7 +78,7 @@ describe('useDateFormatValidation', () => {
 
 			const result = validateDateFormat('25/12/2023a')
 			expect(result.isValid).toBe(false)
-			expect(result.message).toBe('Format de date invalide (DD/MM/YYYY)')
+			expect(result.message).toBe('Format de date invalide (JJ/MM/AAAA)')
 		})
 
 		it('devrait valider une date au format alternatif si dateFormatReturn est spécifié', () => {

package/src/components/DatePicker/composables/tests/useManualDateValidation.spec.ts

@@ -161,7 +161,7 @@ describe('useManualDateValidation', () => {
 		const result = validateManualInput('01/01/2023')
 
 		expect(result).toBe(false)
-		expect(errors.value).toContain('Format de date invalide (DD/MM/YYYY)')
+		expect(errors.value).toContain('Format de date invalide (JJ/MM/AAAA)')
 	})
 
 	it('devrait appeler validateField avec les règles personnalisées', () => {

package/src/components/DatePicker/composables/useDateFormatDisplay.ts

@@ -0,0 +1,25 @@
+export const useDateFormatDisplay = () => {
+	const getDisplayFormat = (format: string): string => {
+		if (!format) return ''
+
+		return format.replace(/[DMY]+/gi, (token) => {
+			const upper = token.toUpperCase()
+			const firstChar = upper.charAt(0)
+
+			switch (firstChar) {
+				case 'D':
+					return 'J'.repeat(token.length)
+				case 'M':
+					return 'M'.repeat(token.length)
+				case 'Y':
+					return 'A'.repeat(token.length)
+				default:
+					return token
+			}
+		})
+	}
+
+	return {
+		getDisplayFormat,
+	}
+}

package/src/components/DatePicker/composables/useDateFormatValidation.ts

@@ -2,6 +2,7 @@ import { computed, type Ref } from 'vue'
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
 import { DATE_PICKER_MESSAGES } from '../constants/messages'
+import { useDateFormatDisplay } from './useDateFormatDisplay'
 
 // Initialiser le plugin dayjs nécessaire pour la validation des formats de date
 dayjs.extend(customParseFormat)
@@ -25,6 +26,8 @@ export const useDateFormatValidation = (options: {
 	disableErrorHandling?: boolean
 }) => {
 	const { format, dateFormatReturn, required = false, hasInteracted, disableErrorHandling = false } = options
+	const { getDisplayFormat } = useDateFormatDisplay()
+	const displayFormat = getDisplayFormat(format)
 
 	/**
    * Valide le format d'une chaîne de date
@@ -43,7 +46,7 @@ export const useDateFormatValidation = (options: {
 		if (!/^[\d/.-]*$/.test(dateStr)) {
 			return {
 				isValid: disableErrorHandling,
-				message: disableErrorHandling ? '' : `Format de date invalide (${format})`,
+				message: disableErrorHandling ? '' : `Format de date invalide (${displayFormat})`,
 			}
 		}
 
@@ -53,7 +56,7 @@ export const useDateFormatValidation = (options: {
 		if (!isValid) {
 			return {
 				isValid: disableErrorHandling,
-				message: disableErrorHandling ? '' : `Format de date invalide (${format})`,
+				message: disableErrorHandling ? '' : `Format de date invalide (${displayFormat})`,
 			}
 		}
 

package/src/components/DatePicker/composables/useManualDateValidation.ts

@@ -6,6 +6,7 @@ import {
 	validateEmptyOrIncompleteDate,
 	type CustomRule,
 } from '../utils/validationUtils'
+import { useDateFormatDisplay } from './useDateFormatDisplay'
 
 /**
  * Composable pour la validation manuelle des dates saisies
@@ -47,6 +48,9 @@ export const useManualDateValidation = (options: {
 		validateField,
 	} = options
 
+	const { getDisplayFormat } = useDateFormatDisplay()
+	const displayFormat = getDisplayFormat(format)
+
 	/**
 	 * Valide une saisie manuelle de date
 	 *
@@ -89,7 +93,7 @@ export const useManualDateValidation = (options: {
 		if (!date) {
 			// La date n'a pas pu être parsée
 			if (!disableErrorHandling) {
-				errors.value.push(`Format de date invalide (${format})`)
+				errors.value.push(`Format de date invalide (${displayFormat})`)
 			}
 			return false
 		}

package/src/components/DatePicker/tests/DatePicker.validation.spec.ts

@@ -2634,7 +2634,7 @@ describe('DatePicker - Tests de Validation Complets', () => {
 				const endTime = performance.now()
 
 				expect(wrapper.exists()).toBe(true)
-				expect(endTime - startTime).toBeLessThan(500) // Moins de 500ms
+				expect(endTime - startTime).toBeLessThan(1000) // Moins de 1 seconde sans lag
 			})
 		})
 

package/src/components/ErrorPage/ErrorPage.vue

@@ -3,10 +3,45 @@
 	import { locales } from './locales'
 	import PageContainer from '../PageContainer/PageContainer.vue'
 
+	type MessagePart =
+		| { type: 'text', value: string }
+		| { type: 'phone', value: string }
+
 	// Fonction pour formater le message et ajouter des liens tel: aux numéros de téléphone
-	const formatMessage = (message: string): string => {
-		// Regex pour détecter les numéros de téléphone comme 3646
-		return message.replace(/\b(3646|\d{10})\b/g, '<a href="tel:$1">$1</a>')
+	const splitMessage = (message?: string): MessagePart[] => {
+		// Regex pour détecter les numéros de téléphone
+		if (!message)
+			return []
+
+		const regex = /\b(\d{4}|\d{10})\b/g
+		const parts: MessagePart[] = []
+		let lastIndex = 0
+		let match: RegExpExecArray | null
+
+		while ((match = regex.exec(message)) !== null) {
+			if (match.index > lastIndex) {
+				parts.push({
+					type: 'text',
+					value: message.slice(lastIndex, match.index),
+				})
+			}
+
+			parts.push({
+				type: 'phone',
+				value: match[1],
+			})
+
+			lastIndex = regex.lastIndex
+		}
+
+		if (lastIndex < message.length) {
+			parts.push({
+				type: 'text',
+				value: message.slice(lastIndex),
+			})
+		}
+
+		return parts
 	}
 
 	withDefaults(defineProps<{
@@ -57,10 +92,22 @@
 						{{ pageTitle }}
 					</h1>
 
-					<p
-						v-if="message"
-						v-html="formatMessage(message)"
-					/>
+					<p v-if="message">
+						<template
+							v-for="(part, index) in splitMessage(message)"
+							:key="index"
+						>
+							<span v-if="part.type === 'text'">
+								{{ part.value }}
+							</span>
+							<a
+								v-else
+								:href="`tel:${part.value}`"
+							>
+								{{ part.value }}
+							</a>
+						</template>
+					</p>
 
 					<slot name="additional-content" />
 

package/src/components/ErrorPage/tests/__snapshots__/ErrorPage.spec.ts.snap

@@ -103,7 +103,9 @@ exports[`ErrorPage > renders correctly 1`] = `
             Something went wrong
           </h1>
           <p>
-            Error message
+            <span>
+              Error message
+            </span>
           </p>
           <!-- v-if -->
         </div>
@@ -229,7 +231,9 @@ exports[`ErrorPage > renders correctly with undefined route 1`] = `
             Error
           </h1>
           <p>
-            Error message
+            <span>
+              Error message
+            </span>
           </p>
           <a
             class="

package/src/components/ExternalLinks/ExternalLinks.vue

@@ -145,9 +145,7 @@
 						class="sy-external-links-list-item py-2"
 						v-bind="options.listItem"
 					>
-						<div
-							class="w-100 h-100 d-flex justify-space-between align-center"
-						>
+						<div class="w-100 h-100 d-flex justify-space-between align-center">
 							<div v-bind="options.listItemTitle">
 								{{ item.text }}
 							</div>
@@ -183,6 +181,7 @@ $list-max-height: 248px;
 	// Allow overgrow on mobile
 	max-width: none;
 	border-radius: 0 !important;
+	box-shadow: none !important;
 
 	:deep(.v-btn__content) {
 		flex-direction: inherit;
@@ -244,7 +243,6 @@ $list-max-height: 248px;
 	width: 100%;
 	font-size: 1rem;
 	font-weight: 400;
-	letter-spacing: 0.0094em;
 }
 
 @media only screen and (height <= 340px) {

package/src/components/NotFoundPage/tests/__snapshots__/NotFoundPage.spec.ts.snap

@@ -112,7 +112,9 @@ exports[`NotFoundPage > display the support ID if provided in the url 1`] = `
             Page non trouvée
           </h1>
           <p>
-            Cette page n’existe pas ou a été déplacée.
+            <span>
+              Cette page n’existe pas ou a été déplacée.
+            </span>
           </p>
           <p class="mt-4">
             Votre identifiant de support est
@@ -257,7 +259,9 @@ exports[`NotFoundPage > renders correctly 1`] = `
             Page non trouvée
           </h1>
           <p>
-            Cette page n’existe pas ou a été déplacée.
+            <span>
+              Cette page n’existe pas ou a été déplacée.
+            </span>
           </p>
           <!-- v-if -->
         </div>