@cnamts/synapse 1.1.0 → 1.1.1

package/src/composantsVuetify/VSlideGroup/v-slide-group.stories.ts

@@ -0,0 +1,463 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { VSlideGroup, VSlideGroupItem, VCard, VCardText, VBtn, VChip } from 'vuetify/components'
+import { ref } from 'vue'
+
+const meta: Meta<typeof VSlideGroup> = {
+	title: 'Composants/Composants Vuetify/VSlideGroup',
+	tags: ['!dev'],
+	component: VSlideGroup,
+	parameters: {
+		docs: {
+			source: {
+				transform: (src: string) => {
+					const templateMatch = src.match(/template:\s*`([\s\S]*?)`/)
+					if (templateMatch && templateMatch[1]) {
+						return templateMatch[1]
+							.trim()
+							.replace(/<VSlideGroup/g, '<v-slide-group')
+							.replace(/<\/VSlideGroup>/g, '</v-slide-group>')
+							.replace(/<VSlideGroupItem/g, '<v-slide-group-item')
+							.replace(/<\/VSlideGroupItem>/g, '</v-slide-group-item>')
+							.replace(/<VCard/g, '<v-card')
+							.replace(/<\/VCard>/g, '</v-card>')
+							.replace(/<VCardText/g, '<v-card-text')
+							.replace(/<\/VCardText>/g, '</v-card-text>')
+							.replace(/<VBtn/g, '<v-btn')
+							.replace(/<\/VBtn>/g, '</v-btn>')
+							.replace(/<VIcon/g, '<v-icon')
+							.replace(/<\/VIcon>/g, '</v-icon>')
+							.replace(/<VChip/g, '<v-chip')
+							.replace(/<\/VChip>/g, '</v-chip>')
+					}
+					return src
+				},
+			},
+		},
+	},
+	argTypes: {
+		selectedClass: {
+			control: { type: 'text' },
+			description: 'Classe CSS appliquée aux éléments sélectionnés',
+		},
+		showArrows: {
+			control: { type: 'boolean' },
+			description: 'Affiche les flèches de navigation',
+		},
+		centerActive: {
+			control: { type: 'boolean' },
+			description: 'Centre l\'élément actif',
+		},
+		multiple: {
+			control: { type: 'boolean' },
+			description: 'Permet la sélection multiple',
+		},
+		mandatory: {
+			control: { type: 'boolean' },
+			description: 'Rend la sélection obligatoire',
+		},
+	},
+}
+
+export default meta
+
+type Story = StoryObj<typeof VSlideGroup>
+
+export const Default: Story = {
+	render: args => ({
+		components: { VSlideGroup, VSlideGroupItem, VCard, VCardText },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VSlideGroup v-bind="args">
+                <VSlideGroupItem v-for="n in 15" :key="n">
+                    <VCard
+                        color="primary"
+                        class="ma-2"
+                        height="150"
+                        width="150"
+                        :ripple="false"
+                    >
+                        <VCardText class="d-flex align-center justify-center h-100 text-h4">
+                            {{ n }}
+                        </VCardText>
+                    </VCard>
+                </VSlideGroupItem>
+            </VSlideGroup>
+        `,
+	}),
+	args: {
+		showArrows: true,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+    <v-slide-group :show-arrows="true">
+        <v-slide-group-item v-for="n in 15" :key="n">
+            <v-card
+                color="primary"
+                class="ma-2"
+                height="150"
+                width="150"
+                :ripple="false"
+            >
+                <v-card-text class="d-flex align-center justify-center h-100 text-h4">
+                    {{ n }}
+                </v-card-text>
+            </v-card>
+        </v-slide-group-item>
+    </v-slide-group>
+</template>`,
+			},
+		},
+	},
+}
+
+export const WithChips: Story = {
+	render: args => ({
+		components: { VSlideGroup, VSlideGroupItem, VChip },
+		setup() {
+			const tags = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6', 'Option 7', 'Option 8']
+			return { args, tags }
+		},
+		template: `
+            <VSlideGroup v-bind="args">
+                <VSlideGroupItem v-for="(tag, index) in tags" :key="index" v-slot="{ isSelected, toggle }">
+                    <VChip
+                        color="primary"
+                        :variant="isSelected ? 'flat' : 'outlined'"
+                        class="ma-2"
+                        :ripple="false"
+                        @click="toggle"
+                    >
+                        {{ tag }}
+                    </VChip>
+                </VSlideGroupItem>
+            </VSlideGroup>
+        `,
+	}),
+	args: {
+		showArrows: true,
+		mandatory: false,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+    <v-slide-group :show-arrows="true">
+        <v-slide-group-item v-for="(tag, index) in tags" :key="index" v-slot="{ isSelected, toggle }">
+            <v-chip
+                color="primary"
+                :variant="isSelected ? 'flat' : 'outlined'"
+                class="ma-2"
+                :ripple="false"
+                @click="toggle"
+            >
+                {{ tag }}
+            </v-chip>
+        </v-slide-group-item>
+    </v-slide-group>
+</template>
+
+<script setup lang="ts">
+const tags = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6', 'Option 7', 'Option 8']
+</script>`,
+			},
+		},
+	},
+}
+
+export const CenterActive: Story = {
+	render: args => ({
+		components: { VSlideGroup, VSlideGroupItem, VBtn },
+		setup() {
+			const model = ref(3)
+			const items = ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche']
+			return { args, model, items }
+		},
+		template: `
+            <VSlideGroup v-model="model" v-bind="args">
+                <VSlideGroupItem v-for="(item, index) in items" :key="index" :value="index" v-slot="{ isSelected, toggle }">
+                    <VBtn
+                        color="primary"
+                        :variant="isSelected ? 'flat' : 'outlined'"
+                        class="ma-2"
+                        :ripple="false"
+                        @click="toggle"
+                    >
+                        {{ item }}
+                    </VBtn>
+                </VSlideGroupItem>
+            </VSlideGroup>
+            <div class="text-center mt-4">
+                <p class="text-body-2">Jour sélectionné : {{ items[model] }}</p>
+            </div>
+        `,
+	}),
+	args: {
+		showArrows: true,
+		centerActive: true,
+		mandatory: true,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+    <v-slide-group v-model="model" :show-arrows="true" :center-active="true" :mandatory="true">
+        <v-slide-group-item v-for="(item, index) in items" :key="index" :value="index" v-slot="{ isSelected, toggle }">
+            <v-btn
+                color="primary"
+                :variant="isSelected ? 'flat' : 'outlined'"
+                class="ma-2"
+                :ripple="false"
+                @click="toggle"
+            >
+                {{ item }}
+            </v-btn>
+        </v-slide-group-item>
+    </v-slide-group>
+    <div class="text-center mt-4">
+        <p class="text-body-2">Jour sélectionné : {{ items[model] }}</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const model = ref(3)
+const items = ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche']
+</script>`,
+			},
+		},
+	},
+}
+
+export const Misc: Story = {
+	render: args => ({
+		components: { VSlideGroup, VSlideGroupItem, VChip },
+		setup() {
+			const model = ref(0)
+			const items = [
+				{ text: 'Aperitifs', value: 'aperitifs' },
+				{ text: 'Appetizers', value: 'appetizers' },
+				{ text: 'Cocktails', value: 'cocktails' },
+				{ text: 'Dinner', value: 'dinner' },
+				{ text: 'Wines by the Bottle', value: 'wines_bottle' },
+				{ text: 'Wines by the Glass', value: 'wines_glass' },
+			]
+			return { args, model, items }
+		},
+		template: `
+            <VSlideGroup v-model="model" v-bind="args" selected-class="bg-primary">
+                <VSlideGroupItem
+                    v-for="(item, index) in items"
+                    :key="item.value"
+                    :value="index"
+                    v-slot="{ isSelected, toggle }"
+                >
+                    <VChip
+                        class="ma-2"
+                        color="primary"
+                        :variant="isSelected ? 'flat' : 'outlined'"
+                        :ripple="false"
+                        @click="toggle"
+                    >
+                        {{ item.text }}
+                    </VChip>
+                </VSlideGroupItem>
+            </VSlideGroup>
+
+            <div class="text-center mt-4">
+                <p class="text-body-2 text-medium-emphasis">Selected: {{ items[model]?.text || 'None' }}</p>
+            </div>
+        `,
+	}),
+	args: {
+		showArrows: true,
+		centerActive: true,
+		mandatory: true,
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: 'Exemple de menu de navigation avec sélection et affichage de la valeur sélectionnée.',
+			},
+			source: {
+				code: `<template>
+    <v-slide-group v-model="model" :show-arrows="true" :center-active="true" :mandatory="true" selected-class="bg-primary">
+        <v-slide-group-item
+            v-for="(item, index) in items"
+            :key="item.value"
+            :value="index"
+            v-slot="{ isSelected, toggle }"
+        >
+            <v-chip
+                class="ma-2"
+                color="primary"
+                :variant="isSelected ? 'flat' : 'outlined'"
+                :ripple="false"
+                @click="toggle"
+            >
+                {{ item.text }}
+            </v-chip>
+        </v-slide-group-item>
+    </v-slide-group>
+
+    <div class="text-center mt-4">
+        <p class="text-body-2 text-medium-emphasis">Selected: {{ items[model]?.text || 'None' }}</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const model = ref(0)
+const items = [
+    { text: 'Aperitifs', value: 'aperitifs' },
+    { text: 'Appetizers', value: 'appetizers' },
+    { text: 'Cocktails', value: 'cocktails' },
+    { text: 'Dinner', value: 'dinner' },
+    { text: 'Wines by the Bottle', value: 'wines_bottle' },
+    { text: 'Wines by the Glass', value: 'wines_glass' },
+]
+</script>`,
+			},
+		},
+	},
+}
+
+export const MultipleSelection: Story = {
+	render: args => ({
+		components: { VSlideGroup, VSlideGroupItem, VCard, VCardText },
+		setup() {
+			return { args }
+		},
+		template: `
+            <VSlideGroup v-bind="args">
+                <VSlideGroupItem v-for="n in 10" :key="n" v-slot="{ isSelected, toggle }">
+                    <VCard
+                        color="primary"
+                        :variant="isSelected ? 'flat' : 'outlined'"
+                        class="ma-2"
+                        height="120"
+                        width="120"
+                        :ripple="false"
+                        @click="toggle"
+                    >
+                        <VCardText class="d-flex align-center justify-center h-100 text-h5">
+                            {{ n }}
+                        </VCardText>
+                    </VCard>
+                </VSlideGroupItem>
+            </VSlideGroup>
+        `,
+	}),
+	args: {
+		showArrows: true,
+		multiple: true,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+    <v-slide-group :show-arrows="true" :multiple="true">
+        <v-slide-group-item v-for="n in 10" :key="n" v-slot="{ isSelected, toggle }">
+            <v-card
+                color="primary"
+                :variant="isSelected ? 'flat' : 'outlined'"
+                class="ma-2"
+                height="120"
+                width="120"
+                :ripple="false"
+                @click="toggle"
+            >
+                <v-card-text class="d-flex align-center justify-center h-100 text-h5">
+                    {{ n }}
+                </v-card-text>
+            </v-card>
+        </v-slide-group-item>
+    </v-slide-group>
+</template>`,
+			},
+		},
+	},
+}
+
+export const CustomCards: Story = {
+	render: args => ({
+		components: { VSlideGroup, VSlideGroupItem, VCard, VCardText },
+		setup() {
+			const categories = [
+				{ title: 'Catégorie 1', color: 'primary' },
+				{ title: 'Catégorie 2', color: 'secondary' },
+				{ title: 'Catégorie 3', color: 'success' },
+				{ title: 'Catégorie 4', color: 'info' },
+				{ title: 'Catégorie 5', color: 'warning' },
+				{ title: 'Catégorie 6', color: 'error' },
+			]
+			return { args, categories }
+		},
+		template: `
+            <VSlideGroup v-bind="args">
+                <VSlideGroupItem v-for="(category, index) in categories" :key="index" v-slot="{ isSelected, toggle }">
+                    <VCard
+                        :color="category.color"
+                        :variant="isSelected ? 'flat' : 'outlined'"
+                        :elevation="isSelected ? 4 : 0"
+                        class="ma-2"
+                        height="180"
+                        width="180"
+                        :ripple="false"
+                        @click="toggle"
+                    >
+                        <VCardText class="d-flex align-center justify-center h-100 text-h6 text-center">
+                            {{ category.title }}
+                        </VCardText>
+                    </VCard>
+                </VSlideGroupItem>
+            </VSlideGroup>
+        `,
+	}),
+	args: {
+		showArrows: true,
+		mandatory: false,
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `<template>
+    <v-slide-group :show-arrows="true">
+        <v-slide-group-item v-for="(category, index) in categories" :key="index" v-slot="{ isSelected, toggle }">
+            <v-card
+                :color="category.color"
+                :variant="isSelected ? 'flat' : 'outlined'"
+                :elevation="isSelected ? 4 : 0"
+                class="ma-2"
+                height="180"
+                width="180"
+                :ripple="false"
+                @click="toggle"
+            >
+                <v-card-text class="d-flex align-center justify-center h-100 text-h6 text-center">
+                    {{ category.title }}
+                </v-card-text>
+            </v-card>
+        </v-slide-group-item>
+    </v-slide-group>
+</template>
+
+<script setup lang="ts">
+const categories = [
+    { title: 'Catégorie 1', color: 'primary' },
+    { title: 'Catégorie 2', color: 'secondary' },
+    { title: 'Catégorie 3', color: 'success' },
+    { title: 'Catégorie 4', color: 'info' },
+    { title: 'Catégorie 5', color: 'warning' },
+    { title: 'Catégorie 6', color: 'error' },
+]
+</script>`,
+			},
+		},
+	},
+}

package/src/designTokens/tokens/baseColors.ts

@@ -123,7 +123,7 @@ export const baseColors = {
 		lighten38: 'rgba(255, 255, 255, 0.38)',
 		lighten40: 'rgba(255, 255, 255, 0.40)',
 		lighten70: 'rgba(255, 255, 255, 0.70)',
-		lighten8: 'rgba(255, 255, 255, 0.080)',
+		lighten8: 'rgba(255, 255, 255, 0.08)',
 		base: '#ffffff',
 	},
 }

package/src/designTokens/tokens/baseTokens.ts

@@ -156,37 +156,37 @@ export const baseTokens = {
 			lighten80: '#DDDEDE',
 			lighten90: '#EEEEEE',
 			lighten97: '#FAFAFA',
-			alpha40: 'rgba(152,155,155,0.4000000059604645)',
+			alpha40: 'rgba(152,155,155,0.4)',
 		},
 		white: {
 			base: '#FFFFFF',
-			alpha70: 'rgba(255,255,255,0.699999988079071)',
-			alpha40: 'rgba(255,255,255,0.4000000059604645)',
-			alpha38: 'rgba(255,255,255,0.3799999952316284)',
-			alpha20: 'rgba(255,255,255,0.20000000298023224)',
-			alpha08: 'rgba(255,255,255,0.07999999821186066)',
+			alpha70: 'rgba(255,255,255,0.7)',
+			alpha40: 'rgba(255,255,255,0.4)',
+			alpha38: 'rgba(255,255,255,0.38)',
+			alpha20: 'rgba(255,255,255,0.2)',
+			alpha08: 'rgba(255,255,255,0.08)',
 			alpha00: 'rgba(255,255,255,0)',
 		},
 		transparentBlue: {
-			alpha40: 'rgba(12,65,154,0.4000000059604645)',
-			alpha20: 'rgba(12,65,154,0.20000000298023224)',
-			alpha18: 'rgba(12,65,154,0.18000000715255737)',
-			alpha08: 'rgba(12,65,154,0.07999999821186066)',
+			alpha40: 'rgba(12,65,154,0.4)',
+			alpha20: 'rgba(12,65,154,0.2)',
+			alpha18: 'rgba(12,65,154,0.18)',
+			alpha08: 'rgba(12,65,154,0.08)',
 			alpha00: 'rgba(12,65,154,0)',
 		},
 		transparentCyan: {
 			alpha00: 'rgba(0,132,178,0)',
-			alpha08: 'rgba(0,132,178,0.07999999821186066)',
-			alpha18: 'rgba(0,132,178,0.18000000715255737)',
-			alpha20: 'rgba(0,132,178,0.20000000298023224)',
-			alpha40: 'rgba(0,132,178,0.4000000059604645)',
+			alpha08: 'rgba(0,132,178,0.08)',
+			alpha18: 'rgba(0,132,178,0.18)',
+			alpha20: 'rgba(0,132,178,0.2)',
+			alpha40: 'rgba(0,132,178,0.4)',
 		},
 		transparentBlack: {
 			alpha00: 'rgba(0,0,0,0)',
-			alpha08: 'rgba(0,0,0,0.07999999821186066)',
-			alpha18: 'rgba(0,0,0,0.18000000715255737)',
-			alpha20: 'rgba(0,0,0,0.20000000298023224)',
-			alpha40: 'rgba(0,0,0,0.4000000059604645)',
+			alpha08: 'rgba(0,0,0,0.08)',
+			alpha18: 'rgba(0,0,0,0.18)',
+			alpha20: 'rgba(0,0,0,0.2)',
+			alpha40: 'rgba(0,0,0,0.4)',
 		},
 		amber: {
 			darken80: '#502C01',

package/src/stories/Components/Components.stories.ts

@@ -63,6 +63,13 @@ export const ComponentsList: StoryObj = {
 						img: '/components/v-skeleton-loader.svg',
 						category: 'Structure',
 					},
+					{
+						title: 'NavigationDrawer',
+						description: 'Utilisé pour naviguer dans l\'application.',
+						link: '/?path=/docs/composants-composants-vuetify-vnavigationdrawer--docs',
+						img: `/components/navigation-drawer${isAp ? '-ap' : ''}.svg`,
+						category: 'Navigation',
+					},
 					{
 						title: 'FooterBar',
 						description: 'Utilisé pour afficher une barre de pied de page avec des liens et des informations supplémentaires.',
@@ -84,6 +91,20 @@ export const ComponentsList: StoryObj = {
 						img: `/components/card${isAp ? '-ap' : ''}.svg`,
 						category: 'Layout',
 					},
+					{
+						title: 'Carousel',
+						description: 'Utilisé pour afficher un diaporama d\'images ou de contenu.',
+						link: '/?path=/docs/composants-composants-vuetify-vcarousel--docs',
+						img: `/components/carousel${isAp ? '-ap' : ''}.svg`,
+						category: 'Layout',
+					},
+					{
+						title: 'SlideGroup',
+						description: 'Utilisé pour afficher des informations pseudo-paginées.',
+						link: '/?path=/docs/composants-composants-vuetify-vslidegroup--docs',
+						img: `/components/slide-group${isAp ? '-ap' : ''}.svg`,
+						category: 'Layout',
+					},
 					{
 						title: 'Stepper',
 						description: 'Affiche la progression par étapes numérotées.',
@@ -200,7 +221,7 @@ export const ComponentsList: StoryObj = {
 						title: 'UserMenuBtn',
 						description: 'Utilisé pour afficher un bouton de menu utilisateur avec un menu déroulant.',
 						link: '/?path=/docs/composants-boutons-usermenubtn--docs',
-						img: '/components/user-menu-btn.svg',
+						img: `/components/user-menu-btn${isAp ? '-ap' : ''}.svg`,
 						category: 'Boutons',
 					},
 					{
@@ -273,6 +294,13 @@ export const ComponentsList: StoryObj = {
 						img: '/components/file-upload.svg',
 						category: 'Formulaires',
 					},
+					{
+						title: 'UploadWorkflow',
+						description: 'Utilisé pour permettre à l’utilisateur de sélectionner ou de glisser-déposer plusieurs fichiers demandés.',
+						link: '/?path=/docs/composants-formulaires-uploadworkflow--docs',
+						img: `/components/upload-workflow${isAp ? '-ap' : ''}.svg`,
+						category: 'Formulaires',
+					},
 					{
 						title: 'NirField',
 						description: 'Utilisé pour permettre à l’utilisateur de saisir un numéro de Sécurité sociale (NIR).',
@@ -546,6 +574,11 @@ export const ComponentsList: StoryObj = {
 					'PasswordField',
 					'Stepper',
 					'Captcha',
+					'Carousel',
+					'UserMenuBtn',
+					'UploadWorkflow',
+					'NavigationDrawer',
+					'SlideGroup',
 				]
 
 				const shouldDisplayComponent = (component: { category: string, title: string }, category: string) => {

package/src/stories/Demarrer/Releases.stories.ts

@@ -25,7 +25,7 @@ const releaseAlerts: ReleaseAlert[] = [
 	{
 		id: 'form-success-messages-hidden',
 		releaseVersion: 'v1.1.0',
-		message: 'Cette version modifie le comportement des composants de formulaire, les messages de succès sont désormais masqués par défaut. Cette modification répond à la fois à des besoins projets et à l\'harmonisation des différents thèmes (CNAM, PAG, Amelipro). Pour les projets souhaitant afficher les messages de succès vous pouvez simplement le faire via la prop `showSuccessMessages`. Les composants concernés sont :',
+		message: 'Cette version modifie le comportement des composants de formulaire, les messages de succès sont désormais masqués par défaut. Cette modification répond à la fois à des besoins projets et à l\'harmonisation des différents thèmes (CNAM, PAG, Amelipro).\nPour les projets souhaitant afficher les messages de succès vous pouvez simplement le faire via la prop showSuccessMessages.\nLes composants concernés sont :',
 		type: 'warning',
 		variant: 'tonal',
 		components: [
@@ -62,6 +62,20 @@ const releaseAlerts: ReleaseAlert[] = [
 		variant: 'tonal',
 		link: { href: '/?path=/docs/design-tokens-couleurs--docs', text: 'couleurs' },
 	},
+	{
+		id: 'starter-kit-2-0-35',
+		releaseVersion: 'v1.0.27',
+		message: 'Il est conseillé de faire une montée de version du Starter Kit en 2.0.35',
+		type: 'warning',
+		variant: 'tonal',
+	},
+	{
+		id: 'starter-kit-2-0-33',
+		releaseVersion: 'v1.0.25',
+		message: 'Il est conseillé de faire une montée de version du Starter Kit en 2.0.33',
+		type: 'warning',
+		variant: 'tonal',
+	},
 	{
 		id: 'starter-kit-2-0-32',
 		releaseVersion: 'v1.0.24',
@@ -144,7 +158,7 @@ export const List = {
 								:closable="false"
 								class="mt-2 mb-4"
 							>
-								<template #default>{{ alert.message }}<template v-if="alert.link"> <a :href="alert.link.href">{{ alert.link.text }}</a>.</template><ul v-if="alert.components" class="mt-2 ml-4"><li v-for="component in alert.components" :key="component">{{ component }}</li></ul></template>
+								<template #default><span style="white-space: pre-line">{{ alert.message }}</span><template v-if="alert.link"> <a :href="alert.link.href">{{ alert.link.text }}</a>.</template><ul v-if="alert.components" class="mt-2 ml-4" style="column-count: 3; max-width: 42rem;"><li v-for="component in alert.components" :key="component">{{ component }}</li></ul></template>
 							</SyAlert>
 							<div v-html="formatMarkdown(release.body)"></div>
 							<hr>

package/src/stories/DesignTokens/Arrondis.mdx

@@ -23,7 +23,7 @@ Ce radius peut être utilisé sur des éléments interactifs tels que les bouton
 - <b>rounded-lg : 8px</b><br/>
 Ce radius peut être utilisé sur des blocs de structure (cards, tableaux...)
 
-- <b>rounded-pill : 96px</b><br/>
+- <b>rounded-pill : 64px</b><br/>
 Ce radius peut être utilisé sur des éléments (intéractifs ou non) présentant de la donnée, comme des tags, des filtres, des status...
 
 <br />