@cnamts/synapse 1.0.25 → 1.0.27

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

@@ -0,0 +1,205 @@
+import { computed, watch, type Ref } from 'vue'
+import { useValidation, type ValidationResult, type ValidationRule } from '@/composables/validation/useValidation'
+import { DATE_PICKER_MESSAGES } from '../constants/messages'
+import { useDateValidation } from './useDateValidation'
+import type { DateObjectValue } from '../types'
+
+export type DatePickerValidationRule = {
+	type: string
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- DatePicker rules are still legacy-shaped during migration.
+	options: any
+}
+
+export type DatePickerValidationBridgeOptions = {
+	showSuccessMessages: boolean
+	disableErrorHandling: boolean
+	noCalendar: boolean
+	required: boolean
+	displayRange: boolean
+	customRules: Ref<DatePickerValidationRule[]>
+	customWarningRules: Ref<DatePickerValidationRule[]>
+	selectedDates: Ref<DateObjectValue>
+	isUpdatingFromInternal: Ref<boolean>
+	currentRangeIsValid: Ref<boolean>
+	getRangeValidationError: Ref<string>
+	readonly?: Ref<boolean>
+	skipValidationWhenReadonly?: boolean
+	useCalendarModeRequiredFlow?: boolean
+	isInitialValidation?: Ref<boolean>
+	isValidateOnBlur?: Ref<boolean>
+	onblur?: Ref<boolean>
+	fieldIdentifier?: string
+	revalidateOnCustomRulesChange?: boolean
+}
+
+const emptyValidationResult = (): ValidationResult => ({
+	hasError: false,
+	hasWarning: false,
+	hasSuccess: false,
+	state: {
+		errors: [],
+		warnings: [],
+		successes: [],
+	},
+})
+
+export function useDatePickerValidationBridge(options: DatePickerValidationBridgeOptions) {
+	const validation = useValidation({
+		showSuccessMessages: options.showSuccessMessages,
+		fieldIdentifier: options.fieldIdentifier ?? 'Date',
+		disableErrorHandling: options.disableErrorHandling,
+	})
+
+	const {
+		errors,
+		warnings,
+		successes,
+		validateField: baseValidateField,
+		clearValidation: baseClearValidation,
+	} = validation
+
+	const clearValidation = () => baseClearValidation()
+
+	if (options.skipValidationWhenReadonly && options.readonly) {
+		watch(options.readonly, () => {
+			errors.value = []
+			warnings.value = []
+			successes.value = []
+		})
+	}
+
+	const validateField = (
+		value: unknown,
+		rules: ValidationRule[] = [],
+		warningRules: ValidationRule[] = [],
+		successRules: ValidationRule[] = [],
+	): Promise<ValidationResult> | ValidationResult => {
+		if (options.skipValidationWhenReadonly && options.readonly?.value) {
+			return emptyValidationResult()
+		}
+
+		return baseValidateField(value, rules, warningRules, successRules)
+	}
+
+	const validateFieldForDateValidation = (
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Compatibility signature for legacy useDateValidation.
+		value: any,
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Compatibility signature for legacy useDateValidation.
+		rules: any[] = [],
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Compatibility signature for legacy useDateValidation.
+		warningRules: any[] = [],
+	): ValidationResult | Promise<ValidationResult> => {
+		return validateField(value, rules, warningRules, [])
+	}
+
+	const { validateDates: coreValidateDates } = useDateValidation({
+		noCalendar: options.noCalendar,
+		required: options.useCalendarModeRequiredFlow ? false : options.required,
+		displayRange: options.displayRange,
+		disableErrorHandling: options.disableErrorHandling,
+		customRules: computed(() => options.customRules.value),
+		customWarningRules: computed(() => options.customWarningRules.value),
+		selectedDates: options.selectedDates,
+		isUpdatingFromInternal: options.isUpdatingFromInternal,
+		currentRangeIsValid: options.currentRangeIsValid,
+		getRangeValidationError: options.getRangeValidationError,
+		clearValidation,
+		validateField: validateFieldForDateValidation,
+		errors,
+		warnings,
+		successes,
+	})
+
+	if (options.revalidateOnCustomRulesChange) {
+		watch(options.customRules, () => {
+			if (options.selectedDates.value === null) {
+				return
+			}
+
+			queueMicrotask(async () => {
+				clearValidation()
+
+				const datesToValidate = Array.isArray(options.selectedDates.value)
+					? options.selectedDates.value
+					: [options.selectedDates.value]
+
+				for (const date of datesToValidate) {
+					await Promise.resolve(validateField(
+						date,
+						options.customRules.value,
+						options.customWarningRules.value,
+					))
+				}
+			})
+		}, { deep: true })
+	}
+
+	const validateCalendarModeDates = async (forceValidation = false) => {
+		if (!options.useCalendarModeRequiredFlow) {
+			return await Promise.resolve(coreValidateDates(forceValidation))
+		}
+
+		if (options.noCalendar) {
+			return
+		}
+
+		clearValidation()
+
+		const shouldDisplayErrors = !options.disableErrorHandling
+		const hasNoSelection = !options.selectedDates.value || (Array.isArray(options.selectedDates.value) && options.selectedDates.value.length === 0)
+
+		if ((forceValidation || !options.isUpdatingFromInternal.value) && options.required && hasNoSelection) {
+			if (options.readonly?.value) {
+				return
+			}
+			if (options.onblur?.value && !options.isValidateOnBlur?.value) {
+				return
+			}
+			if (shouldDisplayErrors && (!options.isInitialValidation?.value || forceValidation)) {
+				errors.value.push(DATE_PICKER_MESSAGES.ERROR_REQUIRED)
+			}
+			return
+		}
+
+		if (!options.selectedDates.value) {
+			if (!options.customRules.value || options.customRules.value.length === 0) return
+
+			if (shouldDisplayErrors && (!options.isInitialValidation?.value || forceValidation)) {
+				await validateField(
+					options.selectedDates.value,
+					options.customRules.value,
+					options.customWarningRules.value,
+				)
+				errors.value = [...new Set(errors.value)]
+				warnings.value = [...new Set(warnings.value)]
+				successes.value = [...new Set(successes.value)]
+			}
+			return
+		}
+
+		if (shouldDisplayErrors && (!options.isInitialValidation?.value || forceValidation)) {
+			return await Promise.resolve(coreValidateDates(forceValidation))
+		}
+	}
+
+	const validateDates = (forceValidation = false) => {
+		if (!options.useCalendarModeRequiredFlow) {
+			return coreValidateDates(forceValidation)
+		}
+
+		return validateCalendarModeDates(forceValidation)
+	}
+
+	return {
+		validation,
+		errors,
+		warnings,
+		successes,
+		errorMessages: errors,
+		warningMessages: warnings,
+		successMessages: validation.displaySuccesses,
+		clearValidation,
+		validateField,
+		validateDates,
+	}
+}

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

@@ -2,6 +2,7 @@ import { ref, computed } from 'vue'
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
 import { extractRangeParts as extractRangePartsUtil, hasRangeSeparator as hasRangeSeparatorUtil, isValidDateRange } from '../utils/dateFormattingUtils'
+import { DATE_PICKER_MESSAGES } from '../constants/messages'
 
 // Initialiser les plugins dayjs
 dayjs.extend(customParseFormat)
@@ -23,7 +24,7 @@ export function useDateRangeInput(
 	// Stockage temporaire pour la deuxième date saisie
 	const secondDate = ref<Date | null>(null)
 	// Séparateur de plage
-	const rangeSeparator = ' - '
+	const rangeSeparator = DATE_PICKER_MESSAGES.RANGE_SEPARATOR
 
 	/**
 	 * Vérifie si une chaîne de caractères contient un séparateur de plage

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

@@ -1,5 +1,6 @@
 import { ref } from 'vue'
 import type { Ref } from 'vue'
+import { DATE_PICKER_MESSAGES } from '../constants/messages'
 
 /**
  * Composable pour gérer la sélection de dates dans les composants CalendarMode
@@ -101,7 +102,7 @@ export function useDateSelection(
 		}
 		else if (typeof input === 'string') {
 			// Mode plage de dates
-			const dates = input.split(' - ')
+			const dates = input.split(DATE_PICKER_MESSAGES.RANGE_SEPARATOR)
 			if (dates.length === 2) {
 				const startDate = parseDate(dates[0]!, format)
 				const endDate = parseDate(dates[1]!, format)

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

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import type { ValidationResult } from '@/composables/validation/useValidation'
-import type { DateValue } from '@/composables/date/useDateInitializationDayjs'
+import type { DateModelValue } from '@/composables/date/useDateInitializationDayjs'
 import { useManualDateValidation } from './useManualDateValidation'
 
 export interface UseDateTextFieldManualValidationOptions {
@@ -37,7 +37,7 @@ export interface UseDateTextFieldResetOptions {
 	inputValue: Ref<string>
 	selectedDates: Ref<unknown>
 	resetState: () => void
-	emitModel: (value: DateValue) => void
+	emitModel: (value: DateModelValue) => void
 }
 
 export interface UseDateTextFieldOptions {

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

@@ -1,5 +1,5 @@
 import { type Ref, ref } from 'vue'
-import { type DateValue } from '@/composables/date/useDateInitializationDayjs'
+import { type DateModelValue } from '@/composables/date/useDateInitializationDayjs'
 import { type DateObjectValue } from '../types'
 import { DATE_PICKER_MESSAGES } from '../constants/messages'
 
@@ -27,7 +27,7 @@ export const useInputBlurHandler = (options: {
 	validateDateFormat: (dateStr: string) => { isValid: boolean, message: string }
 	parseDate: (dateStr: string, format: string) => Date | null
 	formatDate: (date: Date, format: string) => string
-	updateModel: (value: DateValue) => void
+	updateModel: (value: DateModelValue) => void
 	validateManualInput: (value: string) => boolean | Promise<boolean>
 
 	// Émetteurs d'événements

package/src/components/DatePicker/docExamples/BidirectionalComplexValidation.vue

@@ -210,7 +210,7 @@
 
 			<v-btn
 				size="small"
-				color="success"
+				color="onSuccessVariant"
 				class="mr-2"
 				@click="setTestDates"
 			>

package/src/components/DatePicker/docExamples/DatePickerBidirectionalValidation.vue

@@ -207,7 +207,7 @@
 
 			<v-btn
 				size="small"
-				color="success"
+				color="onSuccessVariant"
 				class="mr-2"
 				@click="setTestDates"
 			>

package/src/components/DatePicker/tests/exposed-methods.coverage.spec.ts

@@ -0,0 +1,75 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import DateTextInput from '../DateTextInput/DateTextInput.vue'
+
+/**
+ * Tests pour couvrir les méthodes exposées (focus, blur)
+ * Zones non couvertes : DateTextInput.vue lignes 1138-1144
+ */
+describe('Exposed Methods Coverage Tests', () => {
+	/**
+	 * Test 1 : Méthode focus() exposée
+	 * Couvre ligne 1138-1140
+	 */
+	it('expose la méthode focus() pour le focus programmatique', async () => {
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+			},
+			attachTo: document.body,
+		})
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect(typeof (wrapper.vm as any).focus).toBe('function')
+		// Appel réel pour couvrir le corps de la méthode (ligne 1139)
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect(() => (wrapper.vm as any).focus()).not.toThrow()
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 2 : Méthode blur() exposée
+	 * Couvre ligne 1142-1144
+	 */
+	it('expose la méthode blur() pour le blur programmatique', async () => {
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+			},
+			attachTo: document.body,
+		})
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect(typeof (wrapper.vm as any).blur).toBe('function')
+		// Appel réel pour couvrir le corps de la méthode (ligne 1142-1143)
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect(() => (wrapper.vm as any).blur()).not.toThrow()
+
+		wrapper.unmount()
+	})
+
+	/**
+	 * Test 3 : validateOnSubmit exposé
+	 */
+	it('expose validateOnSubmit pour validation externe', async () => {
+		const wrapper = mount(DateTextInput, {
+			props: {
+				modelValue: '',
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+				required: true,
+			},
+		})
+
+		// La méthode doit exister
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		expect((wrapper.vm as any).validateOnSubmit).toBeDefined()
+
+		wrapper.unmount()
+	})
+})

package/src/components/DatePicker/types.ts

@@ -9,7 +9,6 @@
 export type DateObjectValue = Date | (Date | null)[] | null
 
 /**
- * Alias pour maintenir la compatibilité avec le code existant
- * @deprecated Utilisez DateObjectValue pour les objets Date ou importez DateValue depuis useDateInitializationDayjs pour les chaînes
+ * @deprecated Utilisez DateObjectValue pour les objets Date ou importez DateModelValue depuis useDateInitializationDayjs pour les chaînes
  */
 export type DateValue = DateObjectValue

package/src/components/DialogBox/DialogBox.stories.ts

@@ -730,7 +730,7 @@ export const VuetifyOptions: Story = {
 				rounded: 'xl',
 			},
 			cardTitle: {
-				class: 'pa-5 mb-4 accent--text',
+				class: 'pa-5 mb-4 secondary--text',
 			},
 			closeBtn: {
 				class: {
@@ -738,14 +738,14 @@ export const VuetifyOptions: Story = {
 				},
 			},
 			icon: {
-				color: 'accent',
+				color: 'secondary',
 			},
 			cancelBtn: {
-				color: 'accent',
+				color: 'secondary',
 				text: false,
 			},
 			confirmBtn: {
-				color: 'accent',
+				color: 'secondary',
 				text: true,
 			},
 		},
@@ -813,7 +813,7 @@ export const VuetifyOptions: Story = {
 							rounded: 'xl',
 						},
 						cardTitle: {
-							class: 'pa-5 mb-4 accent--text',
+							class: 'pa-5 mb-4 secondary--text',
 						},
 						closeBtn: {
 							class: {
@@ -821,14 +821,14 @@ export const VuetifyOptions: Story = {
 							},
 						},
 						icon: {
-							color: 'accent',
+							color: 'secondary',
 						},
 						cancelBtn: {
-							color: 'accent',
+							color: 'secondary',
 							text: false,
 						},
 						confirmBtn: {
-							color: 'accent',
+							color: 'secondary',
 							text: true,
 						},
 					}

package/src/components/DialogBox/DialogBox.vue

@@ -253,7 +253,7 @@
 }
 
 .v-btn--icon {
-	color: rgb(var(--v-theme-iconBase));
+	color: rgb(var(--v-theme-primary));
 	position: absolute;
 	right: 24px;
 }

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

@@ -1,14 +1,13 @@
-import { Meta, Story, Primary } from '@storybook/addon-docs';
+import { Meta } from '@storybook/addon-docs';
 import * as DialogBoxStories from '../DialogBox.stories.ts';
 import '@/stories/styles/shared.css';
 import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+
 import {
-	AccessibilityGuideLayout,
-	CriteriaSection,
-	CriteriaCard,
-	DemoSection,
-	BestPracticesSection,
-	ResourcesSection,
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    AuditSection
 } from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={DialogBoxStories} />
@@ -16,20 +15,85 @@ import {
 	componentName="DialogBox"
 	iconSrc={AccessibilityIcon}
 >
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/DialogBox.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
-		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/798" target="_blank" style={{color:'#0C41BD'}}>issue #798</a>)</p>
-	</div>
-<CriteriaSection>
-<CriteriaCard icon="🧩" title="Niveau de titre configurable via la prop headingLevel">
-  <ul>
-    <li>Le niveau du titre (h1 à h6) est défini grâce à la propriété <strong>headingLevel</strong> déclarée dans le composant. Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau h2, défini dans l’implémentation du composant.</li>
-      <code>&lt;DialogBox
-          :heading-level="2" /&gt; </code>
-    
-    <li><strong>Accessibilité</strong> : Permet que la hiérarchie entre les titres soit pertinente (critère 9.1.1 RGAA) </li>
-  </ul>
-</CriteriaCard>
-</CriteriaSection>
+    <AuditSection>
+        <div>Rapport d’audit manuel : <a href="/audits/DialogBox.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a></div>
+        <div style={{color: 'grey', fontSize: '14px', marginTop: '0px'}}>
+            Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/798" target="_blank" style={{color: '#0C41BD'}}>issue #798</a>)
+        </div>
+    </AuditSection>
+    <CriteriaSection>
+        <CriteriaCard icon="🧩" title="Niveau de titre configurable via la prop headingLevel">
+            <ul>
+                <li>Le niveau du titre (h1 à h6) est défini grâce à la propriété <strong>headingLevel</strong> déclarée dans le composant. Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau h2, défini dans l’implémentation du composant.</li>
+                <code>&lt;DialogBox
+                    :heading-level="2" /&gt; </code>
+
+                <li><strong>Accessibilité</strong> : Permet que la hiérarchie entre les titres soit pertinente (critère 9.1.1 RGAA) </li>
+
+                <li>Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau<strong> h2</strong>.</li>
+
+                <li>Ce titre est rendu via le composant<strong> SyHeading</strong>, ce qui garantit une structure sémantique correcte dans le DOM.</li>
+
+                <li><strong>Accessibilité :</strong> permet de respecter une hiérarchie de titres cohérente et pertinente pour les technologies d’assistance (critère 9.1.1 RGAA).</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🎯" title="Gestion automatique du focus à l’ouverture et à la fermeture">
+            <ul>
+                <li>À l’ouverture de la modale, le focus est déplacé soit sur le bouton de validation (<strong>autofocusValidateBtn</strong>), soit sur la zone de titre si la modale est draggable.</li>
+
+                <li>À la fermeture, le focus est automatiquement restauré sur l’élément qui avait le focus avant l’ouverture.</li>
+
+                <li><strong>Accessibilité :</strong> évite la perte de contexte pour les utilisateurs clavier et lecteurs d’écran (critère 7.3 RGAA).</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="⌨️" title="Piégeage du focus dans la boîte de dialogue">
+            <ul>
+                <li>La navigation clavier avec la touche<strong> Tab </strong>est maintenue à l’intérieur de la modale.</li>
+
+                <li>Le focus boucle automatiquement entre le premier et le dernier élément interactif.</li>
+
+                <li>La combinaison<strong> Shift + Tab </strong>est également gérée.</li>
+
+                <li><strong>Accessibilité :</strong> empêche la sortie involontaire du focus hors de la fenêtre modale (critère 7.1 RGAA).</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🏷️" title="Association correcte du titre avec aria-labelledby">
+            <ul>
+                <li>Le composant utilise un identifiant unique généré avec <strong>useId() </strong>.</li>
+
+                <li>Cet identifiant est appliqué au titre et référencé via <strong> aria-labelledby </strong>sur le composant dialog.</li>
+
+                <li>Le composant déclare également<strong> aria-modal="true" </strong>.</li>
+
+                <li><strong>Accessibilité :</strong> permet aux lecteurs d’écran d’annoncer correctement le contexte de la fenêtre modale (critère 7.1 RGAA).</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="✋" title="Support clavier du mode draggable">
+            <ul>
+                <li>Lorsque la prop<strong> draggable </strong>est activée, le titre devient focusable avec <strong>tabindex="0"</strong>.</li>
+
+                <li>Le déplacement peut être réalisé avec les flèches clavier (gauche, droite, haut, bas).</li>
+
+                <li>Des attributs<strong> title </strong>et <strong> aria-label </strong>expliquent l’usage aux utilisateurs.</li>
+
+                <li><strong>Accessibilité :</strong> rend le déplacement utilisable sans souris et améliore l’accessibilité fonctionnelle.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="❌" title="Bouton de fermeture explicite et accessible">
+            <ul>
+                <li>Le bouton de fermeture possède un<strong> aria-label </strong>explicite.</li>
+
+                <li>L’icône est décorative (<strong>decorative=true</strong>) pour éviter une lecture redondante.</li>
+
+                <li>Le style de focus visible est renforcé pour garantir une navigation clavier claire.</li>
 
+                <li><strong>Accessibilité :</strong> assure une identification immédiate de l’action de fermeture (critère 11.10 RGAA).</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
 </AccessibilityGuideLayout>

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

@@ -97,7 +97,7 @@
 							v-else-if="state === 'success'"
 							:icon="mdiCheckCircle"
 							:size="cnamContextualTokens.iconSize.default"
-							color="success"
+							color="onSuccessVariant"
 							decorative
 						/>
 
@@ -211,7 +211,7 @@
 	flex-direction: column;
 	gap: var(--v-gap-3);
 	padding-block: var(--v-padding-4);
-	border-bottom: 1px solid rgb(var(--v-theme-borderSubdued));
+	border-bottom: 1px solid rgb(var(--v-theme-disabled));
 
 	&:first-child:last-child {
 		border-bottom: none;
@@ -224,7 +224,7 @@
 
 .file-item__name {
 	font-size: 0.875rem;
-	color: rgb(var(--v-theme-textBase));
+	color: rgb(var(--v-theme-onSurface));
 }
 
 .file-item__description {
@@ -278,7 +278,7 @@
 
 .file-item__message {
 	font-size: 0.875rem;
-	color: rgb(var(--v-theme-textSubdued));
+	color: rgb(var(--v-theme-onSurfaceVariant));
 }
 
 .file-item__message-success,

package/src/components/FileUpload/FileUpload.vue

@@ -174,14 +174,14 @@
 .sy-file-upload {
 	cursor: pointer;
 	position: relative;
-	border: 1px dashed rgb(var(--v-theme-borderAccentPrimary));
+	border: 1px dashed rgb(var(--v-theme-primary));
 	border-radius: var(--v-radius-roundedLg);
 	transition: background 0.25s;
 
 	&:hover,
 	&:focus-within,
 	&.dragover {
-		background: rgb(var(--v-theme-backgroundSurfaceAlt));
+		background: rgb(var(--v-theme-surfaceDim));
 	}
 
 	&.dark-mode {

package/src/components/FileUpload/FileUploadContent.vue

@@ -96,7 +96,7 @@
 
 .sy-file-upload-caption {
 	font-size: 0.875rem;
-	color: rgb(var(--v-theme-textSubdued));
+	color: rgb(var(--v-theme-onSurfaceVariant));
 }
 
 .sy-file-upload-btn {

package/src/components/FilterInline/FilterInline.mdx

@@ -6,7 +6,7 @@ import * as FilterSideBarStories from '@/components/FilterSideBar/FilterSideBar.
 
 <div className="header">
   <h1>FilterInline</h1>
-  
+
 </div><Canvas of={FilterInlineStories.Default} />
 
 # API
@@ -135,7 +135,7 @@ const professionList = [
 		value: 'pharmacien',
 	},
 ]
-	
+
 </script>
 
 <template>

package/src/components/FilterSideBar/FilterSideBar.stories.ts

@@ -486,7 +486,7 @@ export const FilterCombination: Story = {
 	decorators: [
 		() => ({
 			template: `
-			<VApp style="height: 500px; overflow-y: hidden;">
+			<VApp style="height: 500px; overflow-y: hidden; background: none">
 				<div class="pa-4">
 					<story />
 				</div>