@cnamts/synapse 1.0.27 → 1.1.1

package/src/components/SyTextArea/validation/Validation.stories.ts

@@ -238,90 +238,6 @@ export const WithSuccess: Story = {
 	}),
 }
 
-export const NoSuccessMessage: Story = {
-	parameters: {
-		docs: {
-			description: {
-				story: 'Avec `showSuccessMessages: false`, l\'état visuel de succès reste actif (bordure verte, icône) mais le message texte n\'est pas affiché. Utile quand un retour positif silencieux est suffisant.',
-			},
-		},
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `
-<template>
-  <SyTextArea
-    ref="textAreaRef"
-    v-model="value"
-    label="Commentaire"
-    :show-success-messages="false"
-    :custom-success-rules="[
-      {
-        type: 'custom',
-        options: {
-          validate: (v) => v.length >= 20,
-          successMessage: 'Description suffisamment détaillée.'
-        }
-      }
-    ]"
-  />
-</template>`,
-			},
-			{
-				name: 'Script',
-				code: `
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { SyTextArea } from '@cnamts/synapse'
-
-const value = ref('Voici une description bien détaillée du problème rencontré.')
-const textAreaRef = ref(null)
-
-onMounted(() => {
-  textAreaRef.value?.validateOnSubmit()
-})
-</script>`,
-			},
-		],
-	},
-	args: {
-		'label': 'Commentaire',
-		'showSuccessMessages': false,
-		'onUpdate:modelValue': fn(),
-	},
-	render: args => ({
-		components: { SyTextArea },
-		setup() {
-			const value = ref('Voici une description bien détaillée du problème rencontré.')
-			const textAreaRef = ref<{ validateOnSubmit: () => Promise<boolean> } | null>(null)
-
-			onMounted(() => {
-				textAreaRef.value?.validateOnSubmit()
-			})
-
-			return { args, value, textAreaRef }
-		},
-		template: `
-			<div class="pa-4">
-				<SyTextArea
-					ref="textAreaRef"
-					v-model="value"
-					v-bind="args"
-					:custom-success-rules="[
-						{
-							type: 'custom',
-							options: {
-								validate: (v) => v.length >= 20,
-								successMessage: 'Description suffisamment détaillée.'
-							}
-						}
-					]"
-				/>
-			</div>
-		`,
-	}),
-}
-
 export const NoValidateOnBlur: Story = {
 	parameters: {
 		docs: {
@@ -340,11 +256,13 @@ export const NoValidateOnBlur: Story = {
       :model-value="value"
       label="Description"
       :is-validate-on-blur="false"
+      :show-success-messages="true"
       :custom-rules="[{
         type: 'custom',
         options: {
           validate: (v) => v !== 'Contenu interdit',
-          message: 'Le contenu « Contenu interdit » n\\'est pas autorisé.'
+          message: 'Le contenu « Contenu interdit » n\\'est pas autorisé.',
+          successMessage: 'Le contenu est valide.'
         }
       }]"
       @update:model-value="handleManualChange"
@@ -390,6 +308,7 @@ const applyButtonValue = (newValue) => {
 	args: {
 		'label': 'Description',
 		'isValidateOnBlur': false,
+		'showSuccessMessages': true,
 		'onUpdate:modelValue': fn(),
 	},
 	render: args => ({
@@ -426,7 +345,8 @@ const applyButtonValue = (newValue) => {
 						type: 'custom',
 						options: {
 							validate: (v) => v !== 'Contenu interdit',
-							message: 'Le contenu « Contenu interdit » n\\'est pas autorisé.'
+							message: 'Le contenu « Contenu interdit » n\\'est pas autorisé.',
+							successMessage: 'Le contenu est valide.'
 						}
 					}]"
 					@update:model-value="handleManualChange"

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

@@ -0,0 +1,49 @@
+import TableToolbar from '../TableToolbar.vue'
+
+describe('TableToolbar - Visual regression tests', () => {
+	it('displays the table toolbar by default', () => {
+		cy.mountWithVuetify(TableToolbar, {
+			props: { nbTotal: 42 },
+		})
+
+		cy.get('.sy-table-toolbar').should('be.visible')
+		cy.matchImageSnapshot('table-toolbar-default', cy.get('.sy-table-toolbar'))
+	})
+
+	it('displays the table toolbar with filtered count', () => {
+		cy.mountWithVuetify(TableToolbar, {
+			props: {
+				nbTotal: 42,
+				nbFiltered: 10,
+			},
+		})
+
+		cy.get('.sy-table-toolbar').should('be.visible')
+		cy.matchImageSnapshot('table-toolbar-filtered', cy.get('.sy-table-toolbar'))
+	})
+
+	it('displays the table toolbar with add button', () => {
+		cy.mountWithVuetify(TableToolbar, {
+			props: {
+				nbTotal: 42,
+				showAddButton: true,
+				addButtonLabel: 'Ajouter',
+			},
+		})
+
+		cy.get('.sy-table-toolbar').should('be.visible')
+		cy.matchImageSnapshot('table-toolbar-with-add-btn', cy.get('.sy-table-toolbar'))
+	})
+
+	it('displays the table toolbar in loading state', () => {
+		cy.mountWithVuetify(TableToolbar, {
+			props: {
+				nbTotal: 42,
+				loading: true,
+			},
+		})
+
+		cy.get('.sy-table-toolbar').should('be.visible')
+		cy.matchImageSnapshot('table-toolbar-loading', cy.get('.sy-table-toolbar'))
+	})
+})

package/src/components/Tables/SyServerTable/SyServerTable.vue

@@ -513,11 +513,11 @@
 }
 
 .sy-server-table--pinned-left-shadow :deep(.sy-table__pinned--left) {
-	box-shadow: 2px 0 6px -4px rgba(var(--v-theme-grey-base), 0.6);
+	box-shadow: 2px 0 6px -4px rgba(var(--v-theme-onSurfaceVariant), 0.6);
 }
 
 .sy-server-table--pinned-right-shadow :deep(.sy-table__pinned--right) {
-	box-shadow: -2px 0 6px -4px rgba(var(--v-theme-grey-base), 0.6);
+	box-shadow: -2px 0 6px -4px rgba(var(--v-theme-onSurfaceVariant), 0.6);
 }
 
 .sy-server-table--pinned-select-left :deep(.v-data-table__th--select),
@@ -558,7 +558,7 @@
 .sy-server-table--pinned-left-shadow.sy-server-table--pinned-select-left :deep(.v-table__wrapper > table > tbody > tr:not(.v-data-table-rows-loading) > .v-data-table__td:first-child),
 .sy-server-table--pinned-left-shadow.sy-server-table--pinned-select-left :deep(.v-data-table__tbody .v-data-table__tr:not(.v-data-table-rows-loading) > .v-data-table__td:first-child),
 .sy-server-table--pinned-left-shadow.sy-server-table--pinned-select-left :deep(.v-data-table__tbody tr:not(.v-data-table-rows-loading) > td:first-child) {
-	box-shadow: 2px 0 6px -4px rgba(var(--v-theme-grey-base), 0.6);
+	box-shadow: 2px 0 6px -4px rgba(var(--v-theme-onSurfaceVariant), 0.6);
 }
 /* stylelint-enable @stylistic/max-line-length */
 

package/src/components/Tables/SyServerTable/accessibilite/Accessibility.mdx

@@ -1,10 +1,117 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as SyServerTable from '../SyServerTable.stories';
+import { Meta, Story } from '@storybook/blocks';
+import * as Stories from '../SyServerTable.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    DemoSection,
+    BestPracticesSection,
+    ResourcesSection,
+    AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={SyServerTable} />
+<Meta of={Stories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+    componentName="SyServerTable"
+    iconSrc={AccessibilityIcon}
+>
+
+    [//]: # (<AuditSection>)
+
+    [//]: # ( <div>)
+
+        [//]: # ( Rapport d’audit manuel :{' '})
+
+        [//]: # ( <a href="/audits/SyServerTable.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a>)
+
+        [//]: # ( </div>)
+
+    [//]: # ( <div style={{color: 'grey', fontSize: '14px', marginTop: '0px'}}>)
+
+        [//]: # ( Correctifs associés &#40;<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/XXX" target="_blank" style={{color: '#0C41BD'}}>issue #XXX</a>&#41;)
+
+        [//]: # ( </div>)
+
+    [//]: # (</AuditSection>)
+
+    <CriteriaSection>
+        <CriteriaCard icon="🏷️" title="Structure et rôles">
+            <ul>
+                <li>Le composant repose sur <code>VDataTableServer</code> et conserve la structure sémantique native d’un tableau HTML (<code>table</code>, <code>caption</code>, <code>thead</code>, <code>tbody</code>, <code>th</code>, <code>td</code>).</li>
+                <li>Une légende (<code>caption</code>) décrit le contenu du tableau et reste disponible aux technologies d’assistance même lorsqu’elle est visuellement masquée.</li>
+                <li>Les en-têtes de colonnes sont rendus dans des cellules <code>th</code> et exposent les informations de tri, de redimensionnement et de filtrage.</li>
+                <li>La zone de statut utilise <code>role="status"</code> et <code>aria-live="polite"</code> pour annoncer les changements du nombre de résultats.</li>
+                <li>Les cases à cocher de sélection utilisent des libellés explicites pour la sélection globale et individuelle.</li>
+                <li>La pagination, les filtres et l’organisation des colonnes conservent les rôles natifs des contrôles HTML.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="⌨️" title="Navigation clavier">
+            <ul>
+                <li>Les en-têtes triables sont activables au clavier via Entrée ou Espace.</li>
+                <li>Les filtres intégrés sont accessibles par Tabulation dans l’ordre naturel du tableau.</li>
+                <li>Les cases à cocher de sélection de ligne et de sélection globale sont entièrement utilisables au clavier.</li>
+                <li>Les lignes cliquables restent focalisables et déclenchables au clavier lorsqu’elles sont activées.</li>
+                <li>La pagination est navigable au clavier et permet de modifier la page et le nombre d’éléments par page.</li>
+                <li>Le bouton de réinitialisation des filtres est accessible par Tabulation et activable via Entrée ou Espace.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📢" title="Annonces aux technologies d’assistance">
+            <ul>
+                <li>Le changement du nombre de résultats est annoncé automatiquement dans une région <code>aria-live</code>.</li>
+                <li>Les actions de sélection de lignes sont vocalisées grâce à des libellés explicites.</li>
+                <li>Le <code>caption</code> fournit un contexte global pour la lecture du tableau.</li>
+                <li>Les états de tri sont exposés par les attributs ARIA appliqués aux en-têtes.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🎨" title="Contraste et lisibilité">
+            <ul>
+                <li>Les styles du design system assurent un contraste suffisant pour les textes, les bordures et les états de focus.</li>
+                <li>Les lignes alternées (<code>striped</code>) utilisent une variation de fond discrète sans compromettre la lisibilité.</li>
+                <li>Les colonnes figées conservent un fond opaque et des ombres pour maintenir la séparation visuelle.</li>
+                <li>Les états sélectionnés, triés ou filtrés restent perceptibles visuellement et programmatiquement.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📌" title="Fonctionnalités avancées accessibles">
+            <ul>
+                <li>Le tri multi-colonnes et obligatoire conserve les attributs ARIA appropriés.</li>
+                <li>Les filtres par colonne utilisent des champs correctement libellés.</li>
+                <li>La sélection simple ou multiple annonce clairement l’état des cases à cocher.</li>
+                <li>Les colonnes épinglées restent accessibles sans altérer l’ordre de lecture du tableau.</li>
+                <li>L’organisation des colonnes conserve la structure et la cohérence des en-têtes.</li>
+                <li>L’état du tableau peut être mémorisé localement sans impact sur l’accessibilité.</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
+
+    <DemoSection componentName="SyServerTable">
+        <Story of={Stories.Default}/>
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Renseignez toujours la propriété <code>caption</code> pour décrire clairement l’objet du tableau.</li>
+            <li>Utilisez des intitulés de colonnes explicites, uniques et concis.</li>
+            <li>Activez <code>showFilters</code> uniquement lorsque chaque filtre dispose d’un libellé pertinent.</li>
+            <li>Assurez-vous que les lignes cliquables disposent d’une action compréhensible.</li>
+            <li>Testez la navigation clavier après activation du tri, des filtres, de la sélection et de la pagination.</li>
+            <li>Vérifiez que les annonces <code>aria-live</code> restent pertinentes lors des chargements serveur.</li>
+            <li>Conservez un contraste suffisant pour les colonnes figées et les états sélectionnés.</li>
+        </ul>
+    </BestPracticesSection>
+
+    <ResourcesSection>
+        <ul>
+            <li><a href="https://www.w3.org/WAI/tutorials/tables/" target="_blank" rel="noopener noreferrer">W3C WAI – Tables Tutorial</a></li>
+            <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/table/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices – Table Pattern</a></li>
+            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html" target="_blank" rel="noopener noreferrer">WCAG – Status Messages (4.1.3)</a></li>
+            <li><a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/" target="_blank" rel="noopener noreferrer">RGAA – critères 5 (tableaux), 7 (ARIA), 10 (présentation)</a></li>
+        </ul>
+    </ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/Tables/SyServerTable/tests/SyServerTable.visual.cy.ts

@@ -0,0 +1,58 @@
+import SyServerTable from '../SyServerTable.vue'
+
+const defaultHeaders = [
+	{ title: 'Nom', key: 'nom', sortable: true },
+	{ title: 'Prénom', key: 'prenom', sortable: true },
+	{ title: 'Ville', key: 'ville' },
+]
+
+const defaultItems = [
+	{ nom: 'Dupont', prenom: 'Jean', ville: 'Paris' },
+	{ nom: 'Martin', prenom: 'Marie', ville: 'Lyon' },
+]
+
+describe('SyServerTable - Visual regression tests', () => {
+	it('displays the server table by default', () => {
+		cy.mountWithVuetify(SyServerTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				serverItemsLength: 50,
+				caption: 'Tableau serveur',
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('sy-server-table-default', cy.get('.v-application'))
+	})
+
+	it('displays the server table in loading state', () => {
+		cy.mountWithVuetify(SyServerTable, {
+			props: {
+				headers: defaultHeaders,
+				items: undefined,
+				serverItemsLength: 0,
+				caption: 'Tableau chargement',
+				loading: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('sy-server-table-loading', cy.get('.v-application'))
+	})
+
+	it('displays the server table with selection', () => {
+		cy.mountWithVuetify(SyServerTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				serverItemsLength: 2,
+				caption: 'Tableau avec sélection',
+				showSelect: true,
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('sy-server-table-with-select', cy.get('.v-application'))
+	})
+})

package/src/components/Tables/SyTable/accessibilite/Accessibility.mdx

@@ -1,10 +1,119 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as SyTable from '../SyTable.stories';
+import { Meta, Story } from '@storybook/blocks';
+import * as Stories from '../SyTable.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    DemoSection,
+    BestPracticesSection,
+    ResourcesSection,
+    AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={SyTable} />
+<Meta of={Stories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+    componentName="SyTable"
+    iconSrc={AccessibilityIcon}
+>
+
+    [//]: # (<AuditSection>)
+
+    [//]: # ( <div>)
+
+        [//]: # ( Rapport d’audit manuel :{' '})
+
+        [//]: # ( <a href="/audits/SyTable.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a>)
+
+        [//]: # ( </div>)
+
+    [//]: # ( <div style={{color: 'grey', fontSize: '14px', marginTop: '0px'}}>)
+
+        [//]: # ( Correctifs associés &#40;)
+
+        [//]: # ( <a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/XXX" target="_blank" rel="noopener noreferrer" style={{color: '#0C41BD'}}>issue #XXX</a>&#41;)
+
+        [//]: # ( </div>)
+
+    [//]: # (</AuditSection>)
+
+    <CriteriaSection>
+        <CriteriaCard icon="🏷️" title="Structure et rôles">
+            <ul>
+                <li>Le composant repose sur <code>VDataTable</code> et conserve la structure sémantique native d’un tableau HTML (<code>table</code>, <code>caption</code>, <code>thead</code>, <code>tbody</code>, <code>th</code>, <code>td</code>).</li>
+                <li>Une légende (<code>caption</code>) est injectée dynamiquement au montage et reste accessible via la classe <code>d-sr-only</code> lorsqu’elle est masquée visuellement.</li>
+                <li>Les en-têtes utilisent des cellules <code>th</code> avec <code>scope="col"</code> et exposent les états de tri via <code>aria-sort</code>.</li>
+                <li>Les filtres et la pagination conservent les rôles natifs des composants de formulaire.</li>
+                <li>Les slots permettent d’étendre le tableau sans altérer sa structure sémantique.</li>
+                <li>L’état de tri, pagination et sélection peut être persisté sans impacter l’accessibilité.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="⌨️" title="Navigation clavier">
+            <ul>
+                <li>Les en-têtes de colonnes sont focalisables via <code>tabindex="0"</code> et activables au clavier.</li>
+                <li>Les actions de tri sont accessibles via Entrée ou Espace.</li>
+                <li>Les filtres sont navigables dans l’ordre naturel de tabulation.</li>
+                <li>Les cases à cocher de sélection (ligne et globale) sont entièrement accessibles au clavier.</li>
+                <li>La pagination est utilisable au clavier (page, items par page, navigation).</li>
+                <li>Les lignes cliquables restent accessibles via clavier lorsqu’activées.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📢" title="Annonces aux technologies d’assistance">
+            <ul>
+                <li>Le <code>caption</code> fournit un contexte global de lecture du tableau.</li>
+                <li>Un region <code>role="status"</code> avec <code>aria-live="polite"</code> annonce les changements de résultats.</li>
+                <li>Les états de tri sont exposés via <code>aria-sort</code> sur les en-têtes.</li>
+                <li>Les contrôles de pagination et filtres utilisent des libellés explicites.</li>
+                <li>Les attributs ARIA inutiles (ex: <code>aria-describedby</code>) sont supprimés pour éviter les doublons de lecture.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🎨" title="Contraste et lisibilité">
+            <ul>
+                <li>Les styles du design system assurent un contraste suffisant pour texte, bordures et focus.</li>
+                <li>Les lignes alternées (<code>striped</code>) améliorent la lisibilité sans nuire au contraste.</li>
+                <li>Les colonnes figées conservent un fond opaque et des ombres pour la lisibilité.</li>
+                <li>Les états actifs (focus, tri, sélection) restent perceptibles visuellement et via ARIA.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📌" title="Fonctionnalités avancées accessibles">
+            <ul>
+                <li>Le tri multi-colonnes et obligatoire reste accessible via attributs ARIA.</li>
+                <li>Les filtres par colonne utilisent des champs correctement libellés.</li>
+                <li>La sélection simple ou multiple est annoncée clairement aux lecteurs d’écran.</li>
+                <li>Les colonnes épinglées restent accessibles sans modifier l’ordre de lecture.</li>
+                <li>L’organisation des colonnes est configurable sans perte de sémantique.</li>
+                <li>La persistance locale de l’état n’impacte pas l’accessibilité du tableau.</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
+
+    <DemoSection componentName="SyTable">
+        <Story of={Stories.Default}/>
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Fournir toujours un <code>caption</code> clair et descriptif pour le tableau.</li>
+            <li>Limiter les actions dans les headers pour éviter la surcharge cognitive.</li>
+            <li>Tester systématiquement tri, filtres et pagination au clavier.</li>
+            <li>Vérifier les annonces lecteur d’écran lors des changements de données.</li>
+            <li>Éviter les libellés ambigus sur les colonnes et filtres.</li>
+            <li>Contrôler la cohérence visuelle entre états ARIA et styles CSS.</li>
+        </ul>
+    </BestPracticesSection>
+
+    <ResourcesSection>
+        <ul>
+            <li><a href="https://www.w3.org/WAI/tutorials/tables/" target="_blank" rel="noopener noreferrer">W3C WAI – Tables Tutorial</a></li>
+            <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/table/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices – Table Pattern</a></li>
+            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html" target="_blank" rel="noopener noreferrer">WCAG – Status Messages (4.1.3)</a></li>
+            <li><a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/" target="_blank" rel="noopener noreferrer">RGAA – critères 5, 7 et 10</a></li>
+        </ul>
+    </ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/Tables/SyTable/tests/SyTable.visual.cy.ts

@@ -0,0 +1,70 @@
+import SyTable from '../SyTable.vue'
+
+const defaultHeaders = [
+	{ title: 'Nom', key: 'nom', sortable: true },
+	{ title: 'Prénom', key: 'prenom', sortable: true },
+	{ title: 'Ville', key: 'ville' },
+]
+
+const defaultItems = [
+	{ nom: 'Dupont', prenom: 'Jean', ville: 'Paris' },
+	{ nom: 'Martin', prenom: 'Marie', ville: 'Lyon' },
+	{ nom: 'Bernard', prenom: 'Pierre', ville: 'Marseille' },
+]
+
+describe('SyTable - Visual regression tests', () => {
+	it('displays the table by default', () => {
+		cy.mountWithVuetify(SyTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				caption: 'Tableau de données',
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('sy-table-default', cy.get('.v-application'))
+	})
+
+	it('displays the table with striped rows', () => {
+		cy.mountWithVuetify(SyTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				caption: 'Tableau rayé',
+				striped: true,
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('sy-table-striped', cy.get('.v-application'))
+	})
+
+	it('displays the table with selection checkboxes', () => {
+		cy.mountWithVuetify(SyTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				caption: 'Tableau avec sélection',
+				showSelect: true,
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('sy-table-with-select', cy.get('.v-application'))
+	})
+
+	it('displays the table with compact density', () => {
+		cy.mountWithVuetify(SyTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				caption: 'Tableau compact',
+				density: 'compact',
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('sy-table-compact', cy.get('.v-application'))
+	})
+})

package/src/components/Tables/common/tableStyles.scss

@@ -1,8 +1,8 @@
 @mixin tablestyles {
 	.v-table {
-		border: 1px solid rgb(var(--v-theme-grey-lighten80));
+		border: 1px solid rgb(var(--v-theme-disabled));
 
-		--sy-table-header-bg-pinned: color-mix(in srgb, rgb(var(--v-theme-blue-lighten80)) 20%, white);
+		--sy-table-header-bg-pinned: color-mix(in srgb, rgb(var(--v-theme-infoVariant)) 20%, white);
 
 		// Standardisation des z-index pour les tableaux
 		--sy-table-z-base: 1;
@@ -17,13 +17,13 @@
 
 	table thead tr.filters,
 	table thead tr.reset {
-		background-color: rgb(var(--v-theme-blue-lighten90));
+		background-color: rgb(var(--v-theme-infoVariant90));
 	}
 
 	caption,
 	table thead tr.headers,
 	table thead tr.reset {
-		background-color: rgba(var(--v-theme-blue-lighten80), 0.2);
+		background-color: rgba(var(--v-theme-infoVariant), 0.2);
 	}
 
 	&.fixed-min-height {