@cnamts/synapse 1.0.15 → 1.0.17

package/dist/utils/formatNir/formatNir.d.ts

@@ -0,0 +1,2 @@
+/** Format a NIR (with or without key) */
+export declare function formatNir(nir: string): string;

package/dist/utils/index.d.ts

@@ -4,6 +4,7 @@ export { LocalStorageUtility } from './localStorageUtility';
 export { calcHumanFileSize } from './calcHumanFileSize';
 export { convertToUnit } from './convertToUnit';
 export { formatDate } from './formatDate';
+export { formatNir } from './formatNir/formatNir';
 export { parseDate } from './parseDate';
 export { propValidator } from './propValidator';
 export { ruleMessage } from './ruleMessage';

package/dist/utils/insertAt.d.ts

@@ -0,0 +1 @@
+export declare function insertAt(value: string, index: number, insert: string): string;

package/dist/utils/rules/validateDateValue.d.ts

@@ -0,0 +1,14 @@
+import { ErrorMessages, ValidationResult, Value } from './types';
+interface ValidateDateOptions {
+    errorMessages: ErrorMessages;
+    messageKey?: string;
+    messageArgs?: unknown[];
+}
+/**
+ * Utility to validate date-like values (string | Date) in rules.
+ * - returns true when the value is falsy
+ * - supports string and Date inputs
+ * - falls back to a rule message for unsupported types or invalid dates
+ */
+export declare function validateDateValue(value: Value, isValid: (formatted: string) => boolean, { errorMessages, messageKey, messageArgs }: ValidateDateOptions): ValidationResult;
+export {};

package/dist/vuetifyConfig.d.ts

@@ -12,6 +12,9 @@ export declare const createVuetifyInstance: () => {
         sets: Record<string, import('vuetify').IconSet>;
     };
     locale: {
+        isRtl: import('vue').Ref<boolean, boolean>;
+        rtl: import('vue').Ref<Record<string, boolean>, Record<string, boolean>>;
+        rtlClasses: import('vue').Ref<string, string>;
         name: string;
         decimalSeparator: import('vue').ShallowRef<string>;
         messages: import('vue').Ref<import('vuetify').LocaleMessages, import('vuetify').LocaleMessages>;
@@ -20,9 +23,6 @@ export declare const createVuetifyInstance: () => {
         t: (key: string, ...params: unknown[]) => string;
         n: (value: number) => string;
         provide: (props: import('vuetify').LocaleOptions) => import('vuetify').LocaleInstance;
-        isRtl: import('vue').Ref<boolean, boolean>;
-        rtl: import('vue').Ref<Record<string, boolean>, Record<string, boolean>>;
-        rtlClasses: import('vue').Ref<string, string>;
     };
     date: {
         options: {
@@ -34,6 +34,7 @@ export declare const createVuetifyInstance: () => {
             locale: Record<string, any>;
         };
         instance: {
+            locale?: any;
             date: (value?: any) => unknown;
             format: (date: unknown, formatString: string) => string;
             toJsDate: (value: unknown) => Date;
@@ -65,8 +66,8 @@ export declare const createVuetifyInstance: () => {
             setYear: (date: unknown, year: number) => unknown;
             getDiff: (date: unknown, comparing: unknown, unit?: string | undefined) => number;
             getWeekArray: (date: unknown, firstDayOfWeek?: string | number | undefined) => unknown[][];
-            getWeekdays: (firstDayOfWeek?: string | number | undefined, weekdayFormat?: "long" | "narrow" | "short" | undefined) => string[];
-            getWeek: (date: unknown, firstDayOfWeek?: string | number | undefined, firstDayOfYear?: string | number | undefined) => number;
+            getWeekdays: (firstDayOfWeek?: string | number | undefined, weekdayFormat?: "long" | "short" | "narrow" | undefined) => string[];
+            getWeek: (date: unknown, firstDayOfWeek?: string | number | undefined, firstWeekMinSize?: number | undefined) => number;
             getMonth: (date: unknown) => number;
             setMonth: (date: unknown, month: number) => unknown;
             getDate: (date: unknown) => number;
@@ -77,7 +78,6 @@ export declare const createVuetifyInstance: () => {
             setHours: (date: unknown, hours: number) => unknown;
             getMinutes: (date: unknown) => number;
             setMinutes: (date: unknown, minutes: number) => unknown;
-            locale?: any;
         };
     };
     goTo: import('vuetify').GoToInstance;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cnamts/synapse",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "private": false,
   "description": "CNAM DS v3",
   "type": "module",
@@ -28,7 +28,8 @@
     "lint": "eslint \"src/**/*.{ts,vue}\"",
     "lint:style": "stylelint \"src/**/*.{css,scss,vue}\"",
     "lint:fix": "eslint \"src/**/*.{ts,vue}\" --fix && stylelint \"src/**/*.{css,scss,vue}\" --fix",
-    "test:unit": "vitest run",
+    "test:unit": "vitest run --exclude='**/*.a11y.spec.ts'",
+    "test:a11y": "pnpm vitest run a11y.spec.ts",
     "prepare": "husky",
     "generate:changelog": "auto-changelog -o CHANGELOG-TEMP.md -p --starting-date 2024-10-10"
   },
@@ -49,6 +50,7 @@
     "@chromatic-com/storybook": "^4.0.0",
     "@jls-digital/storybook-addon-code": "^1.0.4",
     "@mdi/js": "^7.4.47",
+    "@storybook/addon-a11y": "8.6.14",
     "@storybook/addon-docs": "^8.5.6",
     "@storybook/addon-essentials": "^8.5.6",
     "@storybook/addon-interactions": "^8.5.6",
@@ -73,6 +75,7 @@
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
     "auto-changelog": "^2.4.0",
+    "axe-core": "^4.11.0",
     "axios": "^1.7.7",
     "eslint": "^9.13.0",
     "eslint-plugin-storybook": "^0.11.3",
@@ -80,6 +83,7 @@
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "happy-dom": "^20.0.0",
     "husky": "^9.1.6",
+    "jsdom": "^27.3.0",
     "marked": "^16.0.0",
     "postcss-html": "^1.7.0",
     "postcss-scss": "^4.0.9",
@@ -97,6 +101,7 @@
     "vite-plugin-dts": "^4.0.1",
     "vite-plugin-vuetify": "^2.1.1",
     "vitest": "^3.2.4",
+    "vitest-axe": "^0.1.0",
     "vue": "^3.5.18",
     "vue-component-type-helpers": "2.2.0",
     "vue-router": "^4.4.5",
@@ -105,7 +110,7 @@
   },
   "peerDependencies": {
     "vue": "^3.5.18",
-    "vuetify": "^3.9.2"
+    "vuetify": "3.9.2"
   },
   "dependencies": {
     "@emotion/css": "^11.13.5",
@@ -114,22 +119,24 @@
     "deepmerge": "^4.3.1",
     "iso-639-1": "^3.1.3",
     "maska": "^3.0.3",
-    "sass-embedded": "^1.83.0",
-    "sass-loader": "^16.0.3",
+    "sass-embedded": "1.83.0",
+    "sass-loader": "16.0.3",
     "slugify": "^1.6.6"
   },
   "publishConfig": {
     "access": "public"
   },
   "overrides": {
-    "esbuild": "^0.25.0"
+    "esbuild": "^0.25.0",
+    "parse5": "7.1.2"
   },
   "pnpm": {
     "overrides": {
       "esbuild": "^0.25.0",
       "undici": "7.15.0",
       "glob": ">=10.5.0",
-      "js-yaml": ">=4.1.1"
+      "js-yaml": ">=4.1.1",
+      "parse5": "7.1.2"
     },
     "patchedDependencies": {
       "undici@7.15.0": "patches/undici@7.15.0.patch"

package/src/assets/tokens.scss

@@ -153,11 +153,13 @@ $transparent-blue-00: rgb(12 65 154 / 0%);
 $primary-darker-2: #07275c;
 $primary-darker: #0a347b;
 $primary-base: #0c419a;
+$primary: #0c419a;
 $primary-light: #3d67ae;
 $primary-lighter-2: #9eb3d7;
 $primary-lighter-3: #ced9eb;
 $primary-lighter-4: #e7ecf5;
 $primary-lighter-5: #f8f9fc;
+$secondary: #006386;
 $neutral-black: #222324;
 $neutral-black-lighter: #545859;
 $neutral-black-lighter-2: #989b9b;

package/src/components/Accordion/Accessibilite/AccessibilityGuide.mdx

@@ -1,252 +1,81 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import { Meta, Primary } from '@storybook/blocks';
 import * as AccordionStories from '../Accordion.stories';
 import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
-import '../../../stories/styles/shared.css';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '../../../stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={AccordionStories} />
 
-<div className="accessibility-guide">
-<div className="header">
-  <h1>Guide d'Accessibilité du Composant Accordion</h1>
-</div>
-  
-  <div className="intro-section">
-    <img 
-      src={AccessibilityIcon} 
-      alt="Icône d'accessibilité" 
-      className="accessibility-icon"
-    />
-    <p className="intro-text">
-      Le composant Accordion a été conçu en suivant rigoureusement les recommandations d'accessibilité du W3C, 
-      notamment le modèle <a href="https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices</a>. 
-      Ce guide détaille comment notre implémentation respecte ces standards et garantit une expérience utilisateur inclusive.
-    </p>
-</div>
+<AccessibilityGuideLayout
+	componentName="Accordion"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/"
+>
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Structure sémantique">
+			<ul>
+				<li><strong>Rôles ARIA appropriés</strong> : <code>role="button"</code> pour les en-têtes et <code>role="region"</code> pour les panneaux de contenu</li>
+				<li><strong>Niveaux de titres personnalisables</strong> : Utilisation dynamique des balises <code>h1</code> à <code>h6</code> selon le contexte</li>
+				<li><strong>Relations entre éléments</strong> : Connexion entre en-têtes et panneaux via <code>aria-controls</code> et <code>aria-labelledby</code></li>
+			</ul>
+		</CriteriaCard>
 
-  <div className="criteria-section">
-    <h2>Critères d'accessibilité respectés</h2>
-    
-    <div className="criteria-card">
-      <div className="criteria-header">
-        <span className="criteria-icon">🔍</span>
-        <h3>Structure sémantique</h3>
-      </div>
-      <ul>
-        <li><strong>Rôles ARIA appropriés</strong> : <code>role="button"</code> pour les en-têtes et <code>role="region"</code> pour les panneaux de contenu</li>
-        <li><strong>Niveaux de titres personnalisables</strong> : Utilisation dynamique des balises <code>h1</code> à <code>h6</code> selon le contexte</li>
-        <li><strong>Relations entre éléments</strong> : Connexion entre en-têtes et panneaux via <code>aria-controls</code> et <code>aria-labelledby</code></li>
-      </ul>
-    </div>
-    
-    <div className="criteria-card">
-      <div className="criteria-header">
-        <span className="criteria-icon">⌨️</span>
-        <h3>Navigation clavier complète</h3>
-      </div>
-      <ul>
-        <li><strong>Touches Espace et Entrée</strong> : Pour activer/désactiver les panneaux</li>
-        <li><strong>Touches fléchées</strong> : Navigation entre les en-têtes (↑ et ↓)</li>
-        <li><strong>Touches Home/End</strong> : Accès rapide au premier/dernier en-tête</li>
-        <li><strong>Gestion intelligente</strong> : Contournement automatique des éléments désactivés</li>
-      </ul>
-    </div>
-    
-    <div className="criteria-card">
-      <div className="criteria-header">
-        <span className="criteria-icon">📱</span>
-        <h3>États et retours d'information</h3>
-      </div>
-      <ul>
-        <li><strong>État d'expansion</strong> : <code>aria-expanded</code> indique si un panneau est ouvert ou fermé</li>
-        <li><strong>État de désactivation</strong> : <code>aria-disabled</code> signale les éléments non disponibles</li>
-        <li><strong>Indication visuelle</strong> : Rotation de l'icône et changements de couleur pour indiquer l'état</li>
-        <li><strong>Focus visible</strong> : Indication claire de l'élément actuellement focalisé</li>
-      </ul>
-    </div>
-    
-    <div className="criteria-card">
-      <div className="criteria-header">
-        <span className="criteria-icon">🎨</span>
-        <h3>Personnalisation accessible</h3>
-      </div>
-      <ul>
-        <li><strong>Contraste configurable</strong> : Options de couleurs pour garantir un contraste suffisant</li>
-        <li><strong>Taille et espacement</strong> : Dimensions adaptées pour faciliter l'interaction</li>
-        <li><strong>Cohérence visuelle</strong> : Comportement prévisible dans différents contextes</li>
-      </ul>
-    </div>
-  </div>
+		<CriteriaCard icon="⌨️" title="Navigation clavier complète">
+			<ul>
+				<li><strong>Touches Espace et Entrée</strong> : Pour activer/désactiver les panneaux</li>
+				<li><strong>Touches fléchées</strong> : Navigation entre les en-têtes (↑ et ↓)</li>
+				<li><strong>Touches Home/End</strong> : Accès rapide au premier/dernier en-tête</li>
+				<li><strong>Gestion intelligente</strong> : Contournement automatique des éléments désactivés</li>
+			</ul>
+		</CriteriaCard>
 
-  <div className="demo-section">
-    <h2>Démonstration interactive</h2>
-    <p>
-      Explorez ci-dessous un exemple d'Accordion entièrement accessible. 
-      Essayez de naviguer en utilisant uniquement votre clavier pour tester l'accessibilité.
-    </p>
-    <Primary />
-  </div>
+		<CriteriaCard icon="📱" title="États et retours d'information">
+			<ul>
+				<li><strong>État d'expansion</strong> : <code>aria-expanded</code> indique si un panneau est ouvert ou fermé</li>
+				<li><strong>État de désactivation</strong> : <code>aria-disabled</code> signale les éléments non disponibles</li>
+				<li><strong>Indication visuelle</strong> : Rotation de l'icône et changements de couleur pour indiquer l'état</li>
+				<li><strong>Focus visible</strong> : Indication claire de l'élément actuellement focalisé</li>
+			</ul>
+		</CriteriaCard>
 
-  <div className="best-practices">
-    <h2>Bonnes pratiques d'utilisation</h2>
-    <ul>
-      <li>Utilisez des titres concis et descriptifs pour les en-têtes</li>
-      <li>Évitez de placer des éléments interactifs complexes à l'intérieur du contenu des panneaux</li>
-      <li>Maintenez une cohérence dans l'utilisation des niveaux de titres</li>
-      <li>Limitez le nombre d'accordéons sur une même page pour éviter la surcharge cognitive</li>
-    </ul>
-  </div>
+		<CriteriaCard icon="🎨" title="Personnalisation accessible">
+			<ul>
+				<li><strong>Contraste configurable</strong> : Options de couleurs pour garantir un contraste suffisant</li>
+				<li><strong>Taille et espacement</strong> : Dimensions adaptées pour faciliter l'interaction</li>
+				<li><strong>Cohérence visuelle</strong> : Comportement prévisible dans différents contextes</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
 
-  <div className="resources-section">
-    <h2>Ressources supplémentaires</h2>
-    <ul>
-      <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/accordion/" target="_blank" rel="noopener noreferrer">Guide des pratiques d'auteur WAI-ARIA pour les accordéons</a></li>
-      <li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
-      <li><a href="https://inclusive-components.design/collapsible-sections/" target="_blank" rel="noopener noreferrer">Inclusive Components: Collapsible Sections</a></li>
-    </ul>
-  </div>
-</div>
+	<DemoSection componentName="Accordion">
+		<Primary />
+	</DemoSection>
 
-<style>
-{`
-  .accessibility-guide {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 2rem;
-    color: #333;
-    line-height: 1.6;
-  }
-  
-  .intro-section {
-    display: flex;
-    align-items: center;
-    gap: 2rem;
-    margin: 2rem 0;
-    padding: 1.5rem;
-    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
-    border-radius: 12px;
-  }
-  
-  .accessibility-icon {
-    width: 80px;
-    height: 80px;
-    object-fit: contain;
-  }
-  
-  .intro-text {
-    font-size: 1.1rem;
-    margin: 0;
-  }
-  
-  .criteria-section {
-    margin: 3rem 0;
-  }
-  
-  .criteria-section h2 {
-    font-size: 1.8rem;
-    margin-bottom: 1.5rem;
-    color: #2c3e50;
-    border-bottom: 2px solid #e0e0e0;
-    padding-bottom: 0.5rem;
-  }
-  
-  .criteria-card {
-    background-color: #ffffff;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
-    padding: 1.5rem;
-    margin-bottom: 1.5rem;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-  }
-  
-  .criteria-card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.12);
-  }
-  
-  .criteria-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 1rem;
-  }
-  
-  .criteria-icon {
-    font-size: 1.8rem;
-    margin-right: 1rem;
-  }
-  
-  .criteria-header h3 {
-    margin: 0;
-    font-size: 1.4rem;
-    color: #1976d2;
-  }
-  
-  .criteria-card ul {
-    margin: 0;
-    padding-left: 1.5rem;
-  }
-  
-  .criteria-card li {
-    margin-bottom: 0.5rem;
-  }
-  
-  .criteria-card strong {
-    color: #455a64;
-  }
-  
-  .criteria-card code {
-    background-color: #f5f5f5;
-    padding: 0.2rem 0.4rem;
-    border-radius: 4px;
-    font-size: 0.9rem;
-    color: #e91e63;
-  }
-  
-  .demo-section {
-    margin: 3rem 0;
-    padding: 2rem;
-    background-color: #f9f9f9;
-    border-radius: 8px;
-  }
-  
-  .best-practices {
-    margin: 3rem 0;
-    padding: 1.5rem;
-    background-color: #e8f5e9;
-    border-left: 4px solid #4caf50;
-    border-radius: 4px;
-  }
-  
-  .best-practices h2 {
-    color: #2e7d32;
-    margin-top: 0;
-  }
-  
-  .resources-section {
-    margin: 3rem 0;
-  }
-  
-  .resources-section a {
-    color: #1976d2;
-    text-decoration: none;
-    border-bottom: 1px dotted;
-    transition: color 0.2s ease;
-  }
-  
-  .resources-section a:hover {
-    color: #0d47a1;
-  }
-  
-  @media (max-width: 768px) {
-    .intro-section {
-      flex-direction: column;
-      text-align: center;
-    }
-    
-    .accessibility-icon {
-      margin-bottom: 1rem;
-    }
-  }
-`}
-</style>
+	<BestPracticesSection>
+		<ul>
+			<li>Utilisez des titres concis et descriptifs pour les en-têtes</li>
+			<li>Évitez de placer des éléments interactifs complexes à l'intérieur du contenu des panneaux</li>
+			<li>Maintenez une cohérence dans l'utilisation des niveaux de titres</li>
+			<li>Limitez le nombre d'accordéons sur une même page pour éviter la surcharge cognitive</li>
+		</ul>
+	</BestPracticesSection>
 
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/accordion/" target="_blank" rel="noopener noreferrer">Guide des pratiques d'auteur WAI-ARIA pour les accordéons</a></li>
+			<li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
+			<li><a href="https://inclusive-components.design/collapsible-sections/" target="_blank" rel="noopener noreferrer">Inclusive Components: Collapsible Sections</a></li>
+		</ul>
+	</ResourcesSection>
+
+	<div class="mt-8">
+		<p>Rapport d’audit manuel : <a href="/audits/Accordion.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/926" target="_blank" style={{color:'#0C41BD'}}>issue #926</a>)</p>
+	</div>
+</AccessibilityGuideLayout>

package/src/components/Accordion/Accordion.mdx

@@ -27,6 +27,12 @@ Vous pouvez personnaliser le niveau de titre (h1-h6) utilisé pour les boutons d
 
 <Canvas of={AccordionStories.CustomHeadingLevel} />
 
+## Slots personnalisés
+
+Vous pouvez également utiliser des slots pour personnaliser le rendu des titres et du contenu.
+
+<Canvas of={AccordionStories.WithSlots} />
+
 ## Accessibilité
 
 Le composant Accordion respecte les normes d'accessibilité ARIA :
@@ -58,7 +64,6 @@ const accordionItems = [
   }
 ]
 </script>
-import '../../stories/styles/shared.css';
 
 <template>
   <main>

package/src/components/Accordion/Accordion.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import Accordion from './Accordion.vue'
 
-const meta = {
+const meta: Meta<typeof Accordion> = {
 	title: 'Composants/Données/Accordion',
 	component: Accordion,
 	parameters: {
@@ -23,7 +23,7 @@ const meta = {
 			default: 'default',
 		},
 	},
-} satisfies Meta<typeof Accordion>
+}
 
 export default meta
 
@@ -84,13 +84,13 @@ export const WithObjectContent: Story = {
 				code: `<template>
   <Accordion
     :items="[
-      { 
-        id: 'item3', 
-        title: 'Section 3', 
+      {
+        id: 'item',
+        title: 'Section',
         content: { 
-          title: 'Sous-titre de la section 3', 
-          content: 'Contenu détaillé de la section 3' 
-        } 
+          title: 'Sous-titre de la section', 
+          content: 'Contenu détaillé de la section' 
+        }
       }
     ]"
     :heading-level="3"
@@ -100,7 +100,16 @@ export const WithObjectContent: Story = {
 		],
 	},
 	args: {
-		items: [defaultItems[2]],
+		items: [
+			{
+				id: 'item',
+				title: 'Section',
+				content: {
+					title: 'Sous-titre de la section ',
+					content: 'Contenu détaillé de la section',
+				},
+			},
+		],
 		headingLevel: 3,
 	},
 	render: args => ({
@@ -118,6 +127,9 @@ export const WithObjectContent: Story = {
 
 export const CustomColors: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				language: 'vue',
@@ -195,6 +207,9 @@ export const CustomColors: Story = {
 
 export const CustomHeadingLevel: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				language: 'vue',
@@ -260,3 +275,67 @@ export const CustomHeadingLevel: Story = {
 		`,
 	}),
 }
+
+export const WithSlots: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				language: 'vue',
+				name: 'Template',
+				code: `<template>
+  <Accordion
+    :items="[
+      { id: 'item1', title: 'Section 1', content: 'Contenu de la section 1' },
+      { id: 'item2', title: 'Section 2', content: 'Contenu de la section 2' }
+    ]"
+  >
+    <template #title="{ item }">
+      <span style="font-weight: 700;">{{ item.title }}</span>
+    </template>
+
+    <template #right-content>
+      <span style="font-size: 12px; opacity: 0.7;">Right content</span>
+    </template>
+
+    <template #content="{ item }">
+      <div style="padding: 8px 0;">
+        <p style="margin: 0;">Contenu custom :</p>
+        <p style="margin: 0; font-weight: 600;">{{ typeof item.content === 'string' ? item.content : item.content.content }}</p>
+      </div>
+    </template>
+  </Accordion>
+</template>`,
+			},
+		],
+	},
+	args: {
+		items: defaultItems.slice(0, 2),
+		headingLevel: 3,
+	},
+	render: args => ({
+		components: { Accordion },
+		setup() {
+			return { args }
+		},
+		template: `
+			<div class="pa-4">
+				<Accordion v-bind="args">
+					<template #title="{ item }">
+						<span style="font-weight: 700;">{{ item.title }}</span>
+					</template>
+
+					<template #right-content>
+						<span style="font-size: 12px; opacity: 0.7;">Right content</span>
+					</template>
+
+					<template #content="{ item }">
+						<div style="padding: 8px 0;">
+							<p style="margin: 0;">Contenu custom :</p>
+							<p style="margin: 0; font-weight: 600;">{{ typeof item.content === 'string' ? item.content : item.content.content }}</p>
+						</div>
+					</template>
+				</Accordion>
+			</div>
+		`,
+	}),
+}