@cnamts/synapse 1.0.23 → 1.0.25

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

@@ -17,14 +17,14 @@ export interface UseDateTextFieldManualValidationOptions {
 	isDateComplete: (value: string) => boolean
 	parseDate: (dateStr: string, format: string) => Date | null
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	validateField: (value: unknown, rules?: any[], warningRules?: any[]) => ValidationResult
+	validateField: (value: unknown, rules?: any[], warningRules?: any[]) => Promise<ValidationResult>
 }
 
 export interface UseDateTextFieldSubmitOptions {
 	isValidating: Ref<boolean>
 	hasInteracted: Ref<boolean>
 	inputValue: Ref<string>
-	runRules: (value: string) => boolean
+	runRules: (value: string) => Promise<boolean>
 }
 
 export interface UseDateTextFieldResetOptions {
@@ -71,15 +71,15 @@ export const useDateTextField = (options: UseDateTextFieldOptions) => {
 		isDateComplete: manualValidation.isDateComplete,
 		parseDate: manualValidation.parseDate,
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		validateField: manualValidation.validateField as (value: unknown, rules?: any[], warningRules?: any[]) => ValidationResult,
+		validateField: manualValidation.validateField as (value: unknown, rules?: any[], warningRules?: any[]) => Promise<ValidationResult>,
 	})
 
-	const validateOnSubmit = () => {
+	const validateOnSubmit = async () => {
 		if (!submit) return true
 		const { isValidating, hasInteracted, inputValue, runRules } = submit
 		isValidating.value = true
 		hasInteracted.value = true
-		const ok = runRules(inputValue.value)
+		const ok = await runRules(inputValue.value)
 		isValidating.value = false
 		return ok
 	}
@@ -99,7 +99,7 @@ export const useDateTextField = (options: UseDateTextFieldOptions) => {
 			const formattedStartDate = startDateValidation.clampedDate || ''
 			const formattedEndDate = endDateValidation.clampedDate || ''
 
-			return formattedEndDate ? `${formattedStartDate} - ${formattedEndDate}` : formattedStartDate
+			return formattedEndDate ? `${formattedStartDate} - ${formattedEndDate}` : `${formattedStartDate} - `
 		}
 
 		const dateValidationResult = autoClampDate(raw, displayFormat.value)

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

@@ -29,7 +29,7 @@ export const useDateValidation = (options: {
 	// Fonctions de validation
 	clearValidation: () => void
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Règles personnalisées
-	validateField: (value: any, rules?: any[], warningRules?: any[]) => ValidationResult
+	validateField: (value: any, rules?: any[], warningRules?: any[]) => ValidationResult | Promise<ValidationResult>
 
 	// Références aux messages
 	errors: Ref<string[]>
@@ -60,7 +60,7 @@ export const useDateValidation = (options: {
    * @param forceValidation - Force la validation même si isUpdatingFromInternal est vrai
    * @returns Résultat de la validation
    */
-	const validateDates = (forceValidation = false): ValidationResult => {
+	const validateDates = (forceValidation = false): ValidationResult | Promise<ValidationResult> => {
 		const currentCustomRules = unref(customRules)
 		const currentCustomWarningRules = unref(customWarningRules)
 
@@ -152,64 +152,65 @@ export const useDateValidation = (options: {
 			? selectedDates.value.filter(Boolean) // Filtrer les valeurs null
 			: [selectedDates.value]
 
-		let isValid = true
-
-		// Valider chaque date
-		if (shouldDisplayErrors) {
-			datesToValidate.forEach((date) => {
-				if (!date) return // Ignorer les dates null
-
-				const result = validateField(
-					date,
-					currentCustomRules,
-					currentCustomWarningRules,
-				)
-				if (result.hasError) {
-					isValid = false
-				}
-			})
+		const finalizeValidation = (isValid: boolean): ValidationResult => {
+			let finalIsValid = isValid
 
 			// Vérifier la validité de la plage de dates si en mode plage
 			if (displayRange && Array.isArray(selectedDates.value) && selectedDates.value.length >= 2) {
-				// Récupérer les dates de début et de fin
 				const startDate = selectedDates.value[0]
 				const endDate = selectedDates.value[selectedDates.value.length - 1]
 
-				// Vérifier si les deux dates sont présentes et si la plage est valide
 				if (startDate && endDate && startDate.getTime() > endDate.getTime()) {
-					// La date de fin est antérieure à la date de début
 					const rangeError = DATE_PICKER_MESSAGES.ERROR_END_BEFORE_START
 					if (!errors.value.includes(rangeError)) {
 						errors.value.push(rangeError)
-						isValid = false
+						finalIsValid = false
 					}
 				}
-				// Utiliser également la validation du composable useDateRangeValidation
 				else if (!currentRangeIsValid.value) {
 					const rangeError = getRangeValidationError.value
 					if (rangeError && !errors.value.includes(rangeError)) {
 						errors.value.push(rangeError)
-						isValid = false
+						finalIsValid = false
 					}
 				}
 			}
 
-			// Dédoublonner les messages (au cas où plusieurs dates auraient les mêmes messages)
 			errors.value = [...new Set(errors.value)]
 			warnings.value = [...new Set(warnings.value)]
 			successes.value = [...new Set(successes.value)]
+
+			return {
+				hasError: !finalIsValid,
+				hasWarning: warnings.value.length > 0,
+				hasSuccess: successes.value.length > 0 && finalIsValid && warnings.value.length === 0,
+				state: {
+					errors: errors.value,
+					warnings: warnings.value,
+					successes: successes.value,
+				},
+			}
 		}
 
-		return {
-			hasError: !isValid,
-			hasWarning: warnings.value.length > 0,
-			hasSuccess: successes.value.length > 0 && isValid && warnings.value.length === 0,
-			state: {
-				errors: errors.value,
-				warnings: warnings.value,
-				successes: successes.value,
-			},
+		if (!shouldDisplayErrors) {
+			return finalizeValidation(true)
 		}
+
+		const validationResults = datesToValidate
+			.filter(Boolean)
+			.map(date => validateField(date, currentCustomRules, currentCustomWarningRules))
+
+		if (validationResults.some(result => result instanceof Promise)) {
+			return Promise
+				.all(validationResults.map(result => Promise.resolve(result)))
+				.then((resolvedResults) => {
+					const hasError = resolvedResults.some(result => result.hasError)
+					return finalizeValidation(!hasError)
+				})
+		}
+
+		const hasError = (validationResults as ValidationResult[]).some(result => result.hasError)
+		return finalizeValidation(!hasError)
 	}
 
 	/**
@@ -217,7 +218,7 @@ export const useDateValidation = (options: {
    *
    * @returns Résultat de la validation
    */
-	const validateOnSubmit = (): ValidationResult => {
+	const validateOnSubmit = (): ValidationResult | Promise<ValidationResult> => {
 		return validateDates(true)
 	}
 

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

@@ -28,7 +28,7 @@ export const useInputBlurHandler = (options: {
 	parseDate: (dateStr: string, format: string) => Date | null
 	formatDate: (date: Date, format: string) => string
 	updateModel: (value: DateValue) => void
-	validateManualInput: (value: string) => boolean
+	validateManualInput: (value: string) => boolean | Promise<boolean>
 
 	// Émetteurs d'événements
 	emitBlur: () => void
@@ -54,7 +54,7 @@ export const useInputBlurHandler = (options: {
 	/**
 	 * Gère la perte de focus du champ de saisie de date
 	 */
-	const handleInputBlur = () => {
+	const handleInputBlur = async () => {
 		// Émettre l'événement blur
 		emitBlur()
 
@@ -155,7 +155,7 @@ export const useInputBlurHandler = (options: {
 		// Note: La vérification du type string a déjà été faite plus haut
 		// et on retourne si ce n'est pas une chaîne, donc ici displayFormattedDate.value est forcément une chaîne
 		if (displayFormattedDate.value) {
-			validateManualInput(displayFormattedDate.value || '')
+			await Promise.resolve(validateManualInput(displayFormattedDate.value || ''))
 		}
 	}
 

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

@@ -31,7 +31,7 @@ export const useManualDateValidation = (options: {
 	validateDateFormat: (dateStr: string) => { isValid: boolean, message: string }
 	isDateComplete: (value: string) => boolean
 	parseDate: (dateStr: string, format: string) => Date | null
-	validateField: (value: unknown, rules?: CustomRule[], warningRules?: CustomRule[]) => ValidationResult
+	validateField: (value: unknown, rules?: CustomRule[], warningRules?: CustomRule[]) => ValidationResult | Promise<ValidationResult>
 }) => {
 	const {
 		format,
@@ -57,7 +57,7 @@ export const useManualDateValidation = (options: {
 	 * @param value - Chaîne de date à valider
 	 * @returns Booléen indiquant si la saisie est valide
 	 */
-	const validateManualInput = (value: string): boolean => {
+	const validateManualInput = (value: string): boolean | Promise<boolean> => {
 		// Réinitialiser la validation
 		clearValidation()
 
@@ -129,6 +129,10 @@ export const useManualDateValidation = (options: {
 				safeWarningRules,
 			)
 
+			if (result instanceof Promise) {
+				return result.then(resolvedResult => !resolvedResult.hasError)
+			}
+
 			return !result.hasError
 		}
 

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

@@ -14,6 +14,7 @@ export function useMonthButtonCustomization(
 	const monthButtonText = ref('')
 	const yearText = ref('')
 	const monthButtonObservers: MutationObserver[] = []
+	const primaryThemeColor = 'rgb(var(--v-theme-primary, 12, 65, 154))'
 
 	onBeforeUnmount(() => {
 		monthButtonObservers.forEach(observer => observer.disconnect())
@@ -111,12 +112,12 @@ export function useMonthButtonCustomization(
 						)
 						monthBtnElement.setAttribute('data-ripple', 'false')
 						monthBtnElement.setAttribute('aria-label', monthText)
-						monthBtnElement.style.color = 'var(--v-theme-primary)'
+						monthBtnElement.style.color = primaryThemeColor
 
 						const buttonContentHTML = `
-							<div class="v-btn__content" data-no-activator="" style="color: var(--v-theme-primary);">
-								<span style="color: var(--v-theme-primary);">${monthText}</span> 
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: var(--v-theme-primary);" aria-hidden="true"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+							<div class="v-btn__content" data-no-activator="" style="color: ${primaryThemeColor};">
+								<span style="color: ${primaryThemeColor};">${monthText}</span> 
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: ${primaryThemeColor};" aria-hidden="true"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
 							</div>
 						`
 
@@ -167,12 +168,12 @@ export function useMonthButtonCustomization(
 						)
 						yearBtnElement.setAttribute('data-ripple', 'false')
 						yearBtnElement.setAttribute('aria-label', displayedYear)
-						yearBtnElement.style.color = 'var(--v-theme-primary)'
+						yearBtnElement.style.color = primaryThemeColor
 
 						const yearButtonContentHTML = `
-							<div class="v-btn__content" data-no-activator="" style="color: var(--v-theme-primary);">
-								<span style="color: var(--v-theme-primary);">${displayedYear}</span> 
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: var(--v-theme-primary);" aria-hidden="true"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+							<div class="v-btn__content" data-no-activator="" style="color: ${primaryThemeColor};">
+								<span style="color: ${primaryThemeColor};">${displayedYear}</span> 
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: ${primaryThemeColor};" aria-hidden="true"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
 							</div>
 						`
 

package/src/components/DatePicker/playground/DatePickerHolidayRule.vue

@@ -135,7 +135,7 @@
 .holiday-list {
 	max-height: 200px;
 	overflow-y: auto;
-	background-color: #fff;
+	background-color: rgb(var(--v-theme-surface));
 	padding: 10px;
 	border-radius: 4px;
 	border: 1px solid #e0e0e0;

package/src/components/DiacriticPicker/accessibilite/Accessibility.mdx

@@ -1,10 +1,78 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as DiacriticPicker from '../DiacriticPicker.stories';
-import '@/stories/styles/shared.css';
+import { Meta, Story } from '@storybook/blocks';
+import * as DiacriticPickerStories from '../DiacriticPicker.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+	AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={DiacriticPicker} />
+<Meta of={DiacriticPickerStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+	componentName="DiacriticPicker"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/"
+>
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Structure sémantique et rôles ARIA">
+			<ul>
+				<li><strong>Bouton déclencheur</strong> : Utilise <code>aria-controls</code> et <code>aria-haspopup="dialog"</code> pour indiquer la relation avec le dialogue.</li>
+				<li><strong>État du dialogue</strong> : <code>aria-expanded</code> reflète l'état d'ouverture/fermeture du dialogue.</li>
+				<li><strong>Rôle du dialogue</strong> : <code>role="dialog"</code> et <code>aria-modal="true"</code> sur le VDialog.</li>
+				<li><strong>Labellisation</strong> : <code>aria-labelledby</code> lie le dialogue au bouton déclencheur.</li>
+				<li><strong>Groupes de caractères</strong> : Utilisation de <code>role="group"</code> avec <code>aria-label</code> pour organiser les caractères minuscules et majuscules.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="⌨️" title="Navigation clavier et focus">
+			<ul>
+				<li><strong>Gestion du focus</strong> : Le focus retourne automatiquement au champ après insertion d'un caractère.</li>
+				<li><strong>Position du curseur</strong> : Maintien et restauration précise de la position du curseur après insertion.</li>
+				<li><strong>Focus trap</strong> : <code>retain-focus="false"</code> sur le VDialog.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Styles et contrastes">
+			<ul>
+				<li><strong>Dialogue</strong> : Fond <code>grey-lighten-2</code> sur le VCard.</li>
+				<li><strong>Boutons du dialogue</strong> : Taille "small" avec classe <code>ma-1</code>.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🔧" title="Accessibilité du champ associé">
+			<ul>
+				<li><strong>Labellisation automatique</strong> : Ajout de <code>aria-label</code> si le champ n'a ni <code>aria-label</code> ni <code>aria-labelledby</code>.</li>
+				<li><strong>Détection du champ</strong> : Recherche automatique des inputs/textarea dans le slot via <code>getNativeInput()</code>.</li>
+				<li><strong>Wrapper</strong> : Conteneur avec <code>role="textbox"</code> et <code>tabindex="0"</code>.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="DiacriticPicker">
+		<Story of={DiacriticPickerStories.Default} />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Fournissez un <code>inputAriaLabel</code> descriptif si le champ n'a pas de label visible.</li>
+			<li>Personnalisez <code>btnTitle</code> pour refléter les caractères utilisés.</li>
+			<li>Adaptez la liste des <code>diacritics</code> selon les besoins linguistiques.</li>
+			<li>Vérifiez que les caractères affichés dans <code>btnTitle</code> sont inclus dans la liste <code>diacritics</code>.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Dialogues modaux</a></li>
+			<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/keyboard-operation.html" target="_blank" rel="noopener noreferrer">WCAG : Opération au clavier</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#7.1" target="_blank" rel="noopener noreferrer">RGAA : Consultation par navigation clavier</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.9" target="_blank" rel="noopener noreferrer">RGAA : Structuration de l'information</a></li>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/button/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Boutons</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/DialogBox/DialogBox.vue

@@ -244,8 +244,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens' as *;
-
 .sy-dialog-box-actions :deep(.v-btn) {
 	box-shadow: none;
 }
@@ -255,7 +253,7 @@
 }
 
 .v-btn--icon {
-	color: $colors-icon-base;
+	color: rgb(var(--v-theme-iconBase));
 	position: absolute;
 	right: 24px;
 }
@@ -285,7 +283,7 @@ h2 {
 	display: flex;
 	flex-direction: column;
 	justify-content: stretch;
-	gap: $spacing-small;
+	gap: 16px;
 }
 
 .sy-dialog-box-draggable .sy-dialog-box-title {
@@ -303,7 +301,7 @@ h2 {
 	user-select: none;
 }
 
-@media screen and (min-width: $container-mobile-max-width) {
+@media screen and (width >= 600px) {
 	.sy-dialog-box-actions-ctn {
 		flex-direction: row;
 	}

package/src/components/DialogBox/tests/DialogBox.visual.cy.ts

@@ -0,0 +1,76 @@
+import { h } from 'vue'
+import DialogBox from '../DialogBox.vue'
+
+const dialogTransitionOptions = {
+	global: {
+		stubs: {
+			'transition': false,
+			'transition-group': false,
+		},
+	},
+} as const
+
+function waitForDialogTransitionEnd() {
+	cy.get('.v-overlay__content')
+		.should('be.visible')
+		.and('not.have.class', 'dialog-transition-enter-active')
+}
+
+describe('DialogBox - Visual regression tests', () => {
+	it('displays the opened dialog box', () => {
+		cy.mountWithVuetify(DialogBox, {
+			...dialogTransitionOptions,
+			props: {
+				'modelValue': true,
+				'title': 'Confirmer la suppression',
+				'onUpdate:modelValue': () => {},
+			},
+			slots: {
+				default: () => h('p', 'Êtes-vous sûr de vouloir supprimer cet élément ?'),
+			},
+		})
+
+		cy.get('.v-dialog').should('be.visible')
+		waitForDialogTransitionEnd()
+		cy.matchImageSnapshot('dialog-box-default')
+	})
+
+	it('displays the dialog box without actions', () => {
+		cy.mountWithVuetify(DialogBox, {
+			...dialogTransitionOptions,
+			props: {
+				'modelValue': true,
+				'title': 'Information',
+				'hideActions': true,
+				'onUpdate:modelValue': () => {},
+			},
+			slots: {
+				default: () => h('p', 'Ceci est un message informatif.'),
+			},
+		})
+
+		cy.get('.v-dialog').should('be.visible')
+		waitForDialogTransitionEnd()
+		cy.matchImageSnapshot('dialog-box-no-actions')
+	})
+
+	it('displays the dialog box with custom texts', () => {
+		cy.mountWithVuetify(DialogBox, {
+			...dialogTransitionOptions,
+			props: {
+				'modelValue': true,
+				'title': 'Valider le formulaire',
+				'cancelBtnText': 'Annuler',
+				'confirmBtnText': 'Valider',
+				'onUpdate:modelValue': () => {},
+			},
+			slots: {
+				default: () => h('p', 'Souhaitez-vous valider ce formulaire ?'),
+			},
+		})
+
+		cy.get('.v-dialog').should('be.visible')
+		waitForDialogTransitionEnd()
+		cy.matchImageSnapshot('dialog-box-custom-texts')
+	})
+})

package/src/components/FileList/FileList.vue

@@ -19,8 +19,14 @@
 	const props = withDefaults(defineProps<{
 		uploadList: Item[]
 		locales?: typeof defaultLocales
+		seeLabel?: string
+		importLabel?: string
+		deleteLabel?: string
 	} & Widthable>(), {
 		locales: () => defaultLocales,
+		seeLabel: undefined,
+		importLabel: undefined,
+		deleteLabel: undefined,
 	})
 
 	const { widthStyles } = useWidthable(props)
@@ -51,6 +57,9 @@
 			:show-delete-btn="item.showDeleteBtn"
 			tag="li"
 			:locales="locales"
+			:see-label="seeLabel"
+			:import-label="importLabel"
+			:delete-label="deleteLabel"
 			@upload="() => $emit('upload', uploadList.find((i) => i.id === item.id) as Item)"
 			@preview="() => $emit('preview', uploadList.find((i) => i.id === item.id) as Item)"
 			@delete="() => $emit('delete', uploadList.find((i) => i.id === item.id) as Item)"
@@ -66,8 +75,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .upload-list {
 	display: flex;
 	flex-direction: column;

package/src/components/FileList/UploadItem/UploadItem.vue

@@ -206,14 +206,12 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .file-item {
 	display: flex;
 	flex-direction: column;
-	gap: tokens.$gap-3;
-	padding-block: tokens.$padding-4;
-	border-bottom: 1px solid tokens.$colors-border-subdued;
+	gap: var(--v-gap-3);
+	padding-block: var(--v-padding-4);
+	border-bottom: 1px solid rgb(var(--v-theme-borderSubdued));
 
 	&:first-child:last-child {
 		border-bottom: none;
@@ -221,12 +219,12 @@
 }
 
 .file-item__title {
-	font-size: tokens.$font-size-body-text;
+	font-size: var(--v-fontSize-corpsDeTexte);
 }
 
 .file-item__name {
 	font-size: 0.875rem;
-	color: tokens.$colors-text-base;
+	color: rgb(var(--v-theme-textBase));
 }
 
 .file-item__description {
@@ -252,7 +250,7 @@
 
 .file-item__content {
 	display: flex;
-	gap: tokens.$gap-4;
+	gap: var(--v-gap-4);
 	align-items: center;
 }
 
@@ -263,9 +261,9 @@
 	justify-content: center;
 	margin-left: auto;
 	height: 100%;
-	gap: tokens.$gap-1;
+	gap: var(--v-gap-1);
 
-	@media screen and (min-width: tokens.$container-tablet-max-width) {
+	@media screen and (width >= 960px) {
 		flex-direction: row;
 	}
 }
@@ -280,18 +278,18 @@
 
 .file-item__message {
 	font-size: 0.875rem;
-	color: tokens.$colors-text-subdued;
+	color: rgb(var(--v-theme-textSubdued));
 }
 
 .file-item__message-success,
 .file-item__message-error {
-	margin-top: tokens.$gap-3;
+	margin-top: var(--v-gap-3);
 }
 
 .file-item__message-error {
 	display: flex;
 	align-items: center;
-	gap: tokens.$gap-4;
+	gap: var(--v-gap-4);
 }
 
 </style>

package/src/components/FileList/tests/FileList.spec.ts

@@ -135,6 +135,53 @@ describe('FileList', () => {
 		expect(wrapper.emitted('preview')?.[0]?.[0]).toEqual(fileItem2)
 	})
 
+	it('forwards seeLabel, importLabel, deleteLabel to all items', () => {
+		const wrapper = mount(FileList, {
+			props: {
+				uploadList: [
+					{ id: 'file1', title: 'file1', state: 'initial' },
+					{ id: 'file2', title: 'file2', state: 'success', showDeleteBtn: true, showPreviewBtn: true },
+				],
+				importLabel: 'Ajouter',
+				seeLabel: 'Consulter',
+				deleteLabel: 'Retirer',
+			},
+		})
+
+		const item1 = wrapper.findAll('.file-item').at(0)
+		expect(item1!.find('.file-item__action-upload').text()).toContain('Ajouter')
+
+		const item2 = wrapper.findAll('.file-item').at(1)
+		expect(item2!.find('.file-item__action-preview').text()).toContain('Consulter')
+		expect(item2!.find('.file-item__action-delete').text()).toContain('Retirer')
+	})
+
+	it('uses locales for button labels when individual label props are not passed', () => {
+		const customLocales = {
+			...locales,
+			import: 'Déposer',
+			see: 'Afficher',
+			delete: 'Effacer',
+		}
+
+		const wrapper = mount(FileList, {
+			props: {
+				uploadList: [
+					{ id: 'file1', title: 'file1', state: 'initial' },
+					{ id: 'file2', title: 'file2', state: 'success', showDeleteBtn: true, showPreviewBtn: true },
+				],
+				locales: customLocales,
+			},
+		})
+
+		const item1 = wrapper.findAll('.file-item').at(0)
+		expect(item1!.find('.file-item__action-upload').text()).toContain('Importer le fichier')
+
+		const item2 = wrapper.findAll('.file-item').at(1)
+		expect(item2!.find('.file-item__action-preview').text()).toContain('Voir le fichier')
+		expect(item2!.find('.file-item__action-delete').text()).toContain('Supprimer le fichier')
+	})
+
 	it('shows when a file is optional', () => {
 		const wrapper = mount(FileList, {
 			props: {