@cnamts/synapse 1.0.19 → 1.0.21

package/src/components/ToolbarContainer/ToolbarContainer.stories.ts

@@ -1,18 +1,20 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import Toolbar from './ToolbarContainer.vue'
-import { VBtn, VCheckbox, VDivider } from 'vuetify/components'
+import ToolbarContainer from './ToolbarContainer.vue'
+import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+import { VBtn, VBtnToggle, VCheckbox, VDivider } from 'vuetify/components'
 import { mdiFormatAlignRight, mdiFormatAlignLeft, mdiFormatAlignCenter, mdiFormatAlignJustify, mdiFormatBold, mdiFormatItalic, mdiFormatUnderline, mdiFormatColorText, mdiFormatColorFill } from '@mdi/js'
+import { ref } from 'vue'
 
 const meta = {
 	title: 'Composants/Layout/ToolbarContainer',
-	component: Toolbar,
+	component: ToolbarContainer,
 	argTypes: {
 		default: {
 			control: false,
 			description: 'Contenu de la barre d\'outils',
 		},
 	},
-} satisfies Meta<typeof Toolbar>
+} satisfies Meta<typeof ToolbarContainer>
 
 export default meta
 
@@ -21,41 +23,60 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
 	render: (args) => {
 		return {
-			components: { VBtn, Toolbar },
+			components: { VBtn, VBtnToggle, ToolbarContainer, SyIcon },
 			setup() {
-				return { args, mdiFormatAlignRight, mdiFormatAlignLeft, mdiFormatAlignCenter }
+				const justification = ref<string>()
+				return { args, justification, mdiFormatAlignRight, mdiFormatAlignLeft, mdiFormatAlignCenter }
 			},
 			template: `
 				<div>
-					<Toolbar
+					<ToolbarContainer
 						class="d-flex flex-wrap ga-4"
 						aria-label="Outils de mise en forme"
 					>
-						<VBtn>
-							<span class="d-sr-only">aligne a gauche</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatAlignLeft }}
-							</VIcon>
-						</VBtn>
-						<VBtn>
-							<span class="d-sr-only">aligne au centre</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatAlignCenter }}
-							</VIcon>
-						</VBtn>
-						<VBtn>
-							<span class="d-sr-only">aligne a droite</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatAlignRight }}
-							</VIcon>
-						</VBtn>
-					</Toolbar>
+						<VBtnToggle
+							class="d-flex flex-wrap ga-2"
+							role="radiogroup"
+							aria-label="Alignement du texte"
+							v-model="justification"
+							color="primary"
+							style="overflow: visible;"
+						>
+							<VBtn
+								title="ferrer à gauche"
+								aria-label="ferrer à gauche"
+								role="radio"
+								value="left"
+								elevation="2"
+								size="small"
+								:aria-checked="justification === 'left' ? 'true' : 'false'"
+							>
+								<SyIcon :icon="mdiFormatAlignLeft" size="x-large" decorative />
+							</VBtn>
+							<VBtn
+								title="centrer"
+								aria-label="centrer"
+								role="radio"
+								value="center"
+								elevation="2"
+								size="small"
+								:aria-checked="justification === 'center' ? 'true' : 'false'"
+							>
+								<SyIcon :icon="mdiFormatAlignCenter" size="x-large" decorative />
+							</VBtn>
+							<VBtn
+								title="ferrer a droite"
+								aria-label="ferrer a droite"
+								role="radio"
+								value="right"
+								elevation="2"
+								size="small"
+								:aria-checked="justification === 'right' ? 'true' : 'false'"
+							>
+								<SyIcon :icon="mdiFormatAlignRight" size="x-large" decorative />
+							</VBtn>
+						</VBtnToggle>
+					</ToolbarContainer>
 				</div>
 			`,
 		}
@@ -65,38 +86,66 @@ export const Default: Story = {
 			{
 				name: 'Template',
 				code: `<template>
-							<div>
-								<Toolbar
-									class="d-flex flex-wrap ga-4"
-									aria-label="Outils de mise en forme"
+					<div>
+						<ToolbarContainer
+							class="d-flex flex-wrap ga-4"
+							aria-label="Outils de mise en forme"
+						>
+							<VBtnToggle
+								class="d-flex flex-wrap ga-2"
+								role="radiogroup"
+								aria-label="Alignement du texte"
+								v-model="justification"
+								color="primary"
+								style="overflow: visible;"
+							>
+								<VBtn
+									title="ferrer à gauche"
+									aria-label="ferrer à gauche"
+									role="radio"
+									value="left"
+									elevation="2"
+									size="small"
+									:aria-checked="justification === 'left' ? 'true' : 'false'"
+								>
+									<SyIcon :icon="mdiFormatAlignLeft" size="x-large" decorative />
+								</VBtn>
+								<VBtn
+									title="centrer"
+									aria-label="centrer"
+									role="radio"
+									value="center"
+									elevation="2"
+									size="small"
+									:aria-checked="justification === 'center' ? 'true' : 'false'"
+								>
+									<SyIcon :icon="mdiFormatAlignCenter" size="x-large" decorative />
+								</VBtn>
+								<VBtn
+									title="ferrer a droite"
+									aria-label="ferrer a droite"
+									role="radio"
+									value="right"
+									elevation="2"
+									size="small"
+									:aria-checked="justification === 'right' ? 'true' : 'false'"
 								>
-									<VBtn>
-										<span class="d-sr-only">aligne a gauche</span>
-										<VIcon
-											size="x-large"
-										>
-											{{ mdiFormatAlignLeft }}
-										</VIcon>
-									</VBtn>
-									<VBtn>
-										<span class="d-sr-only">aligne au centre</span>
-										<VIcon
-											size="x-large"
-										>
-											{{ mdiFormatAlignCenter }}
-										</VIcon>
-									</VBtn>
-									<VBtn>
-										<span class="d-sr-only">aligne a droite</span>
-										<VIcon
-											size="x-large"
-										>
-											{{ mdiFormatAlignRight }}
-										</VIcon>
-									</VBtn>
-								</Toolbar>
-							</div>
-						</tempalte>`,
+									<SyIcon :icon="mdiFormatAlignRight" size="x-large" decorative />
+								</VBtn>
+							</VBtnToggle>
+						</ToolbarContainer>
+					</div>
+				</template>
+
+				<script setup lang="ts">
+				import { ref } from 'vue'
+				import { VBtn, VBtnToggle } from 'vuetify/components'
+				import ToolbarContainer from '@/components/ToolbarContainer/ToolbarContainer.vue'
+				import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+				import { mdiFormatAlignRight, mdiFormatAlignLeft, mdiFormatAlignCenter } from '@mdi/js'
+
+				const justification = ref<string>()
+				</script>`,
 			},
 		],
 	},
@@ -105,42 +154,19 @@ export const Default: Story = {
 export const WithCheckboxes: Story = {
 	render: (args) => {
 		return {
-			components: { VCheckbox, Toolbar },
+			components: { VCheckbox, ToolbarContainer, SyIcon },
 			setup() {
 				return { args }
 			},
 			template: `
-				<Toolbar
+				<ToolbarContainer
 					class="d-flex flex-wrap ga-4"
 					aria-label="Options d'envoi"
 				>
-					<VCheckbox
-						label="Envoyer une copie"
-						color="primary"
-						hide-details
-					/>
-					<VCheckbox
-						label="Envoyer en copie cachée"
-						color="primary"
-						hide-details
-					/>
-					<VCheckbox
-						label="Confirmer la lecture"
-						color="primary"
-						hide-details
-					/>
-				</Toolbar>
-			`,
-		}
-	},
-	parameters: {
-		sourceCode: [
-			{
-				name: 'Template',
-				code: `<template>
-					<Toolbar
+					<div
 						class="d-flex flex-wrap ga-4"
-						aria-label="Options d'envoi"
+						role="group"
+						aria-label="Avertissements"	
 					>
 						<VCheckbox
 							label="Envoyer une copie"
@@ -152,141 +178,199 @@ export const WithCheckboxes: Story = {
 							color="primary"
 							hide-details
 						/>
+					</div>
+					<div
+						class="d-flex flex-wrap ga-4"
+						role="group"
+						aria-label="Confirmations"
+					>
 						<VCheckbox
 							label="Confirmer la lecture"
 							color="primary"
 							hide-details
 						/>
-					</Toolbar>
-				</tempalte>`,
+					</div>
+				</ToolbarContainer>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+					<ToolbarContainer
+						class="d-flex flex-wrap ga-4"
+						aria-label="Options d'envoi"
+					>
+						<div
+							class="d-flex flex-wrap ga-4"
+							role="group"
+							aria-label="Avertissements"
+						>
+							<VCheckbox
+								label="Envoyer une copie"
+								color="primary"
+								hide-details
+							/>
+							<VCheckbox
+								label="Envoyer en copie cachée"
+								color="primary"
+								hide-details
+							/>
+						</div>
+						<div
+							class="d-flex flex-wrap ga-4"
+							role="group"
+							aria-label="Confirmations"
+						>
+							<VCheckbox
+								label="Confirmer la lecture"
+								color="primary"
+								hide-details
+							/>
+						</div>
+					</ToolbarContainer>
+				</template>`,
 			},
 		],
 	},
 }
 
-export const ManyTables: Story = {
+export const ManySections: Story = {
 	render: (args) => {
 		return {
-			components: { VBtn, VDivider, Toolbar },
+			components: { VBtn, VDivider, ToolbarContainer, SyIcon, VBtnToggle },
 			setup() {
-				return { args, mdiFormatAlignRight, mdiFormatAlignLeft, mdiFormatAlignCenter, mdiFormatAlignJustify, mdiFormatBold, mdiFormatItalic, mdiFormatUnderline, mdiFormatColorText, mdiFormatColorFill }
+				const justification = ref()
+				const textDecoration = ref([])
+				return { args, justification, textDecoration, mdiFormatAlignRight, mdiFormatAlignLeft, mdiFormatAlignCenter, mdiFormatAlignJustify, mdiFormatBold, mdiFormatItalic, mdiFormatUnderline, mdiFormatColorText, mdiFormatColorFill }
 			},
 			template: `
-				<div class="d-flex flex-wrap ga-4">
-					<Toolbar
-						class="d-flex flex-wrap ga-4"
+				<ToolbarContainer
+					class="d-flex flex-wrap ga-4 align-center"
+					aria-label="Outils d'édition"
+				>
+					<VBtnToggle
+						class="d-flex flex-wrap ga-2"
+						role="radiogroup"
 						aria-label="Outils d'alignement"
+						v-model="justification"
+						color="primary"
+						style="overflow: visible;"
 					>
 						<VBtn
 							title="ferrer à gauche"
+							aria-label="ferrer à gauche"
+							role="radio"
+							value="left"
+							elevation="2"
+							size="small"
+							height="48"
+							:aria-checked="justification === 'left' ? 'true' : 'false'"
 						>
-							<span class="d-sr-only">aligne a gauche</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatAlignLeft }}
-							</VIcon>
+							<SyIcon :icon="mdiFormatAlignLeft" size="x-large" decorative />
 						</VBtn>
 						<VBtn
 							title="justifier"
+							aria-label="justifier"
+							role="radio"
+							value="justify"
+							elevation="2"
+							size="small"
+							height="48"
+							:aria-checked="justification === 'justify' ? 'true' : 'false'"
 						>
-							<span class="d-sr-only">Texte justifié</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatAlignJustify }}
-							</VIcon>
+							<SyIcon :icon="mdiFormatAlignJustify" size="x-large" decorative />
 						</VBtn>
 						<VBtn
 							title="centrer"
+							aria-label="centrer"
+							role="radio"
+							value="center"
+							elevation="2"
+							size="small"
+							:aria-checked="justification === 'center' ? 'true' : 'false'"
 						>
-							<span class="d-sr-only">aligne au centre</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatAlignCenter }}
-							</VIcon>
+							<SyIcon :icon="mdiFormatAlignCenter" size="x-large" decorative />
 						</VBtn>
 						<VBtn
 							title="ferrer a droite"
+							aria-label="ferrer a droite"
+							role="radio"
+							value="right"
+							elevation="2"
+							size="small"
+							:aria-checked="justification === 'right' ? 'true' : 'false'"
 						>
-							<span class="d-sr-only">aligne à droite</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatAlignRight }}
-							</VIcon>
+							<SyIcon :icon="mdiFormatAlignRight" size="x-large" decorative />
 						</VBtn>
-					</Toolbar>
-					<VDivider
-						:thickness="2"
-						vertical
-					/>
-					<Toolbar
-						class="d-flex flex-wrap ga-4"
-						aria-label="Outils de mise en forme du texte"
+					</VBtnToggle>
+					<span style="height: 48px; width: 2px; background-color: #999"></span>
+					<VBtnToggle
+						class="d-flex flex-wrap ga-2"
+						role="group"
+						aria-label="Style du texte"
+						v-model="textDecoration"
+						color="primary"
+						style="overflow: visible;"
+						multiple
 					>
 						<VBtn
 							title="gras"
+							aria-label="gras"
+							elevation="2"
+							size="small"
+							value="bold"
+							:aria-pressed="textDecoration.includes('bold') ? 'true' : 'false'"
 						>
-							<span class="d-sr-only">Text gras</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatBold }}
-							</VIcon>
+							<SyIcon :icon="mdiFormatBold" size="x-large" decorative />
 						</VBtn>
 						<VBtn
 							title="italique"
+							aria-label="italique"
+							elevation="2"
+							size="small"
+							value="italic"
+							:aria-pressed="textDecoration.includes('italic') ? 'true' : 'false'"
 						>
-							<span class="d-sr-only">Text italique</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatItalic }}
-							</VIcon>
+							<SyIcon :icon="mdiFormatItalic" size="x-large" decorative />
 						</VBtn>
 						<VBtn
 							title="souligné"
+							aria-label="souligné"
+							elevation="2"
+							size="small"
+							value="underline"
+							:aria-pressed="textDecoration.includes('underline') ? 'true' : 'false'"
 						>
-							<span class="d-sr-only">Text souligné</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatUnderline }}
-							</VIcon>
+							<SyIcon :icon="mdiFormatUnderline" size="x-large" decorative />
 						</VBtn>
-					</Toolbar>
-					<VDivider
-						:thickness="2"
-						vertical
-					/>
-					<Toolbar
-						class="d-flex flex-wrap ga-4"
-						aria-label="Outils de couleur"
+					</VBtnToggle>
+					<span style="height: 48px; width: 2px; background-color: #999"></span>
+					<div
+						class="d-flex flex-wrap ga-2"
+						role="group"
+						aria-label="Couleurs"
 					>
 						<VBtn
-							title="couleur"
+							title="couleur du texte"
+							aria-label="couleur du texte"
+							size="small"
+							height="48"
 						>
-							<span class="d-sr-only">couleur du texte</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatColorText }}
-							</VIcon>
+							<SyIcon :icon="mdiFormatColorText" size="x-large" decorative />
 						</VBtn>
 						<VBtn
-							title="fond"
+							title="couleur de fond"
+							aria-label="couleur de fond"
+							size="small"
+							height="48"
 						>
-							<span class="d-sr-only">Couleur de fond</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatColorFill }}
-							</VIcon>
+							<SyIcon :icon="mdiFormatColorFill" size="x-large" decorative />
 						</VBtn>
-					</Toolbar>
-				</div>
+					</div>
+				</ToolbarContainer>
 			`,
 		}
 	},
@@ -295,253 +379,288 @@ export const ManyTables: Story = {
 			{
 				name: 'Template',
 				code: `<template>
-					<div class="d-flex flex-wrap ga-4">
-						<Toolbar
-							class="d-flex flex-wrap ga-4"
+					<ToolbarContainer
+						class="d-flex flex-wrap ga-4 align-center"
+						aria-label="Outils d'édition"
+					>
+						<VBtnToggle
+							class="d-flex flex-wrap ga-2"
+							role="radiogroup"
 							aria-label="Outils d'alignement"
+							v-model="justification"
+							color="primary"
+							style="overflow: visible;"
 						>
 							<VBtn
 								title="ferrer à gauche"
-							>
-								<span class="d-sr-only">aligne a gauche</span>
-								<VIcon
-									size="x-large"
-								>
-									{{ mdiFormatAlignLeft }}
-								</VIcon>
+								aria-label="ferrer à gauche"
+								role="radio"
+								value="left"
+								elevation="2"
+								size="small"
+								:aria-checked="justification === 'left' ? 'true' : 'false'"
+							>
+								<SyIcon :icon="mdiFormatAlignLeft" size="x-large" decorative />
 							</VBtn>
 							<VBtn
 								title="justifier"
-							>
-								<span class="d-sr-only">Texte justifié</span>
-								<VIcon
-									size="x-large"
-								>
-									{{ mdiFormatAlignJustify }}
-								</VIcon>
+								aria-label="justifier"
+								role="radio"
+								value="justify"
+								elevation="2"
+								size="small"
+								:aria-checked="justification === 'justify' ? 'true' : 'false'"
+							>
+								<SyIcon :icon="mdiFormatAlignJustify" size="x-large" decorative />
 							</VBtn>
 							<VBtn
 								title="centrer"
-							>
-								<span class="d-sr-only">aligne au centre</span>
-								<VIcon
-									size="x-large"
-								>
-									{{ mdiFormatAlignCenter }}
-								</VIcon>
+								aria-label="centrer"
+								role="radio"
+								value="center"
+								elevation="2"
+								size="small"
+								:aria-checked="justification === 'center' ? 'true' : 'false'"
+							>
+								<SyIcon :icon="mdiFormatAlignCenter" size="x-large" decorative />
 							</VBtn>
 							<VBtn
 								title="ferrer a droite"
-							>
-								<span class="d-sr-only">aligne à droite</span>
-								<VIcon
-									size="x-large"
-								>
-									{{ mdiFormatAlignRight }}
-								</VIcon>
+								aria-label="ferrer a droite"
+								role="radio"
+								value="right"
+								elevation="2"
+								size="small"
+								:aria-checked="justification === 'right' ? 'true' : 'false'"
+							>
+								<SyIcon :icon="mdiFormatAlignRight" size="x-large" decorative />
 							</VBtn>
-						</Toolbar>
-						<VDivider
-							:thickness="2"
-							vertical
-						/>
-						<Toolbar
-							class="d-flex flex-wrap ga-4"
-							aria-label="Outils de mise en forme du texte"
+						</VBtnToggle>
+						<span style="height: 48px; width: 2px; background-color: #999"></span>
+						<VBtnToggle
+							class="d-flex flex-wrap ga-2"
+							role="group"
+							aria-label="Style du texte"
+							v-model="textDecoration"
+							color="primary"
+							style="overflow: visible;"
+							multiple
 						>
 							<VBtn
 								title="gras"
+								aria-label="gras"
+								elevation="2"
+								size="small"
+								value="bold"
+								:aria-pressed="textDecoration.includes('bold') ? 'true' : 'false'"
 							>
-								<span class="d-sr-only">Text gras</span>
-								<VIcon
-									size="x-large"
-								>
-									{{ mdiFormatBold }}
-								</VIcon>
+								<SyIcon :icon="mdiFormatBold" size="x-large" decorative />
 							</VBtn>
 							<VBtn
 								title="italique"
+								aria-label="italique"
+								elevation="2"
+								size="small"
+								value="italic"
+								:aria-pressed="textDecoration.includes('italic') ? 'true' : 'false'"
 							>
-								<span class="d-sr-only">Text italique</span>
-								<VIcon
-									size="x-large"
-								>
-									{{ mdiFormatItalic }}
-								</VIcon>
+								<SyIcon :icon="mdiFormatItalic" size="x-large" decorative />
 							</VBtn>
 							<VBtn
 								title="souligné"
+								aria-label="souligné"
+								elevation="2"
+								size="small"
+								value="underline"
+								:aria-pressed="textDecoration.includes('underline') ? 'true' : 'false'"
 							>
-								<span class="d-sr-only">Text souligné</span>
-								<VIcon
-									size="x-large"
-								>
-									{{ mdiFormatUnderline }}
-								</VIcon>
+								<SyIcon :icon="mdiFormatUnderline" size="x-large" decorative />
 							</VBtn>
-						</Toolbar>
-						<VDivider
-							:thickness="2"
-							vertical
-						/>
-						<Toolbar
-							class="d-flex flex-wrap ga-4"
-							aria-label="Outils de couleur"
+						</VBtnToggle>
+						<span style="height: 48px; width: 2px; background-color: #999"></span>
+						<div
+							class="d-flex flex-wrap ga-2"
+							role="group"
+							aria-label="Couleurs"
 						>
 							<VBtn
-								title="couleur"
+								title="couleur du texte"
+								aria-label="couleur du texte"
+								size="small"
+								height="48"
 							>
-								<span class="d-sr-only">couleur du texte</span>
-								<VIcon
-									size="x-large"
-								>
-									{{ mdiFormatColorText }}
-								</VIcon>
+								<SyIcon :icon="mdiFormatColorText" size="x-large" decorative />
 							</VBtn>
 							<VBtn
-								title="fond"
+								title="couleur de fond"
+								aria-label="couleur de fond"
+								size="small"
+								height="48"
 							>
-								<span class="d-sr-only">Couleur de fond</span>
-								<VIcon
-									size="x-large"
-								>
-									{{ mdiFormatColorFill }}
-								</VIcon>
+								<SyIcon :icon="mdiFormatColorFill" size="x-large" decorative />
 							</VBtn>
-						</Toolbar>
-					</div>
-				</template>`,
+						</div>
+					</ToolbarContainer>
+				</template>
+
+				<script setup lang="ts">
+				import { ref } from 'vue'
+				import { VBtn, VBtnToggle } from 'vuetify/components'
+				import ToolbarContainer from '@/components/ToolbarContainer/ToolbarContainer.vue'
+				import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+				import { mdiFormatAlignRight, mdiFormatAlignLeft, mdiFormatAlignCenter, mdiFormatAlignJustify, mdiFormatBold, mdiFormatItalic, mdiFormatUnderline, mdiFormatColorText, mdiFormatColorFill } from '@mdi/js'
+
+				const justification = ref<string>()
+				const textDecoration = ref<string[]>([])
+				</script>`,
 			},
 		],
 	},
 }
 
-export const Horizontal: Story = {
+export const Vertical: Story = {
 	render: (args) => {
 		return {
-			components: { VBtn, VDivider, Toolbar },
+			components: { VBtn, ToolbarContainer, SyIcon, VBtnToggle },
 			setup() {
-				return { args, mdiFormatAlignRight, mdiFormatAlignLeft, mdiFormatAlignCenter, mdiFormatAlignJustify, mdiFormatBold, mdiFormatItalic, mdiFormatUnderline, mdiFormatColorText, mdiFormatColorFill }
+				const justification = ref<string>()
+				const textDecoration = ref<string[]>([])
+				return { args, justification, textDecoration, mdiFormatAlignRight, mdiFormatAlignLeft, mdiFormatAlignCenter, mdiFormatAlignJustify, mdiFormatBold, mdiFormatItalic, mdiFormatUnderline, mdiFormatColorText, mdiFormatColorFill }
 			},
 			template: `
-				<div class="d-flex flex-column flex-wrap ga-4" style="width: min-content;">
-					<Toolbar
+				<ToolbarContainer
+					class="d-flex flex-column flex-wrap ga-4"
+					style="width: min-content;"
+					aria-label="Outils d'édition verticaux"
+					aria-orientation="vertical"
+				>
+					<VBtnToggle
 						class="d-flex flex-column flex-wrap ga-4"
+						role="radiogroup"
+						direction="vertical"
+						style="overflow: visible;"
+						color="primary"
 						aria-label="Outils d'alignement"
-						aria-orientation="vertical"
+						v-model="justification"
 					>
 						<VBtn
 							title="ferrer à gauche"
+							aria-label="ferrer à gauche"
+							role="radio"
+							value="left"
+							elevation="2"
+							size="small"
+							height="48"
+							:aria-checked="justification === 'left' ? 'true' : 'false'"
 						>
-							<span class="d-sr-only">aligne a gauche</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatAlignLeft }}
-							</VIcon>
+							<SyIcon :icon="mdiFormatAlignLeft" size="x-large" decorative />
 						</VBtn>
 						<VBtn
 							title="justifier"
+							aria-label="justifier"
+							role="radio"
+							value="justify"
+							elevation="2"
+							size="small"
+							height="48"
+							:aria-checked="justification === 'justify' ? 'true' : 'false'"
 						>
-							<span class="d-sr-only">Texte justifié</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatAlignJustify }}
-							</VIcon>
+							<SyIcon :icon="mdiFormatAlignJustify" size="x-large" decorative />
 						</VBtn>
 						<VBtn
 							title="centrer"
+							aria-label="centrer"
+							role="radio"
+							value="center"
+							elevation="2"
+							size="small"
+							height="48"
+							:aria-checked="justification === 'center' ? 'true' : 'false'"
 						>
-							<span class="d-sr-only">aligne au centre</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatAlignCenter }}
-							</VIcon>
+							<SyIcon :icon="mdiFormatAlignCenter" size="x-large" decorative />
 						</VBtn>
 						<VBtn
 							title="ferrer a droite"
+							aria-label="ferrer a droite"
+							role="radio"
+							value="right"
+							elevation="2"
+							size="small"
+							height="48"
+							:aria-checked="justification === 'right' ? 'true' : 'false'"
 						>
-							<span class="d-sr-only">aligne à droite</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatAlignRight }}
-							</VIcon>
+							<SyIcon :icon="mdiFormatAlignRight" size="x-large" decorative />
 						</VBtn>
-					</Toolbar>
-					<VDivider
-						:thickness="2"
-						horizontal
-					/>
-					<Toolbar
+					</VBtnToggle>
+					<span style="height: 2px; width: 48px; background-color: #999"></span>
+					<VBtnToggle
 						class="d-flex flex-column flex-wrap ga-4"
-						aria-label="Outils de mise en forme du texte"
-						aria-orientation="vertical"
+						role="group"
+						direction="vertical"
+						aria-label="Style du texte"
+						v-model="textDecoration"
+						color="primary"
+						style="overflow: visible;"
+						multiple
 					>
 						<VBtn
 							title="gras"
+							aria-label="gras"
+							elevation="2"
+							size="small"
+							height="48"
+							value="bold"
+							:aria-pressed="textDecoration.includes('bold') ? 'true' : 'false'"
 						>
-							<span class="d-sr-only">Text gras</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatBold }}
-							</VIcon>
+							<SyIcon :icon="mdiFormatBold" size="x-large" decorative />
 						</VBtn>
 						<VBtn
 							title="italique"
+							aria-label="italique"
+							elevation="2"
+							size="small"
+							height="48"
+							value="italic"
+							:aria-pressed="textDecoration.includes('italic') ? 'true' : 'false'"
 						>
-							<span class="d-sr-only">Text italique</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatItalic }}
-							</VIcon>
+							<SyIcon :icon="mdiFormatItalic" size="x-large" decorative />
 						</VBtn>
 						<VBtn
 							title="souligné"
+							aria-label="souligné"
+							elevation="2"
+							size="small"
+							height="48"
+							value="underline"
+							:aria-pressed="textDecoration.includes('underline') ? 'true' : 'false'"
 						>
-							<span class="d-sr-only">Text souligné</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatUnderline }}
-							</VIcon>
+							<SyIcon :icon="mdiFormatUnderline" size="x-large" decorative />
 						</VBtn>
-					</Toolbar>
-					<VDivider
-						:thickness="2"
-						horizontal
-					/>
-					<Toolbar
+					</VBtnToggle>
+					<span style="height: 2px; width: 48px; background-color: #999"></span>
+					<div
 						class="d-flex flex-column flex-wrap ga-4"
-						aria-label="Outils de couleur"
-						aria-orientation="vertical"
+						role="group"
+						aria-label="Couleurs"
 					>
 						<VBtn
-							title="couleur"
+							title="couleur du texte"
+							aria-label="couleur du texte"
+							size="small"
+							height="48"
 						>
-							<span class="d-sr-only">couleur du texte</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatColorText }}
-							</VIcon>
+							<SyIcon :icon="mdiFormatColorText" size="x-large" decorative />
 						</VBtn>
 						<VBtn
-							title="fond"
+							title="couleur de fond"
+							aria-label="couleur de fond"
+							size="small"
+							height="48"
 						>
-							<span class="d-sr-only">Couleur de fond</span>
-							<VIcon
-								size="x-large"
-							>
-								{{ mdiFormatColorFill }}
-							</VIcon>
+							<SyIcon :icon="mdiFormatColorFill" size="x-large" decorative />
 						</VBtn>
-					</Toolbar>
-				</div>
+					</div>
+				</ToolbarContainer>
 			`,
 		}
 	},
@@ -550,125 +669,149 @@ export const Horizontal: Story = {
 			{
 				name: 'Template',
 				code: `<template>
-					<div class="d-flex flex-column flex-wrap ga-4" style="width: min-content;">
-						<Toolbar
+					<ToolbarContainer
+						class="d-flex flex-column flex-wrap ga-4"
+						style="width: min-content;"
+						aria-label="Outils d'édition verticaux"
+						aria-orientation="vertical"
+					>
+						<VBtnToggle
 							class="d-flex flex-column flex-wrap ga-4"
+							role="radiogroup"
+							direction="vertical"
+							style="overflow: visible;"
+							color="primary"
 							aria-label="Outils d'alignement"
-							aria-orientation="vertical"
+							v-model="justification"
 						>
 							<VBtn
 								title="ferrer à gauche"
-							>
-								<span class="d-sr-only">aligne a gauche</span>
-								<VIcon
-									size="x-large"
-								>
-									{{ mdiFormatAlignLeft }}
-								</VIcon>
+								aria-label="ferrer à gauche"
+								role="radio"
+								value="left"
+								elevation="2"
+								size="small"
+								:aria-checked="justification === 'left' ? 'true' : 'false'"
+							>
+								<SyIcon :icon="mdiFormatAlignLeft" size="x-large" decorative />
 							</VBtn>
 							<VBtn
 								title="justifier"
-							>
-								<span class="d-sr-only">Texte justifié</span>
-								<VIcon
-									size="x-large"
-								>
-									{{ mdiFormatAlignJustify }}
-								</VIcon>
+								aria-label="justifier"
+								role="radio"
+								value="justify"
+								elevation="2"
+								size="small"
+								:aria-checked="justification === 'justify' ? 'true' : 'false'"
+							>
+								<SyIcon :icon="mdiFormatAlignJustify" size="x-large" decorative />
 							</VBtn>
 							<VBtn
 								title="centrer"
-							>
-								<span class="d-sr-only">aligne au centre</span>
-								<VIcon
-									size="x-large"
-								>
-									{{ mdiFormatAlignCenter }}
-								</VIcon>
+								aria-label="centrer"
+								role="radio"
+								value="center"
+								elevation="2"
+								size="small"
+								height="48"
+								:aria-checked="justification === 'center' ? 'true' : 'false'"
+							>
+								<SyIcon :icon="mdiFormatAlignCenter" size="x-large" decorative />
 							</VBtn>
 							<VBtn
 								title="ferrer a droite"
-							>
-								<span class="d-sr-only">aligne à droite</span>
-								<VIcon
-									size="x-large"
-								>
-									{{ mdiFormatAlignRight }}
-								</VIcon>
+								aria-label="ferrer a droite"
+								role="radio"
+								value="right"
+								elevation="2"
+								size="small"
+								height="48"
+								:aria-checked="justification === 'right' ? 'true' : 'false'"
+							>
+								<SyIcon :icon="mdiFormatAlignRight" size="x-large" decorative />
 							</VBtn>
-						</Toolbar>
-						<VDivider
-							:thickness="2"
-							horizontal
-						/>
-						<Toolbar
+						</VBtnToggle>
+						<span style="height: 2px; width: 48px; background-color: #999"></span>
+						<VBtnToggle
 							class="d-flex flex-column flex-wrap ga-4"
-							aria-label="Outils de mise en forme du texte"
-							aria-orientation="vertical"
+							role="group"
+							direction="vertical"
+							aria-label="Style du texte"
+							v-model="textDecoration"
+							color="primary"
+							style="overflow: visible;"
+							multiple
 						>
 							<VBtn
 								title="gras"
-							>
-								<span class="d-sr-only">Text gras</span>
-								<VIcon
-									size="x-large"
-								>
-									{{ mdiFormatBold }}
-								</VIcon>
+								aria-label="gras"
+								elevation="2"
+								size="small"
+								height="48"
+								value="bold"
+								:aria-pressed="textDecoration.includes('bold') ? 'true' : 'false'"
+							>
+								<SyIcon :icon="mdiFormatBold" size="x-large" decorative />
 							</VBtn>
 							<VBtn
 								title="italique"
-							>
-								<span class="d-sr-only">Text italique</span>
-								<VIcon
-									size="x-large"
-								>
-									{{ mdiFormatItalic }}
-								</VIcon>
+								aria-label="italique"
+								elevation="2"
+								size="small"
+								height="48"
+								value="italic"
+								:aria-pressed="textDecoration.includes('italic') ? 'true' : 'false'"
+							>
+								<SyIcon :icon="mdiFormatItalic" size="x-large" decorative />
 							</VBtn>
 							<VBtn
 								title="souligné"
-							>
-								<span class="d-sr-only">Text souligné</span>
-								<VIcon
-									size="x-large"
-								>
-									{{ mdiFormatUnderline }}
-								</VIcon>
+								aria-label="souligné"
+								elevation="2"
+								size="small"
+								height="48"
+								value="underline"
+								:aria-pressed="textDecoration.includes('underline') ? 'true' : 'false'"
+							>
+								<SyIcon :icon="mdiFormatUnderline" size="x-large" decorative />
 							</VBtn>
-						</Toolbar>
-						<VDivider
-							:thickness="2"
-							horizontal
-						/>
-						<Toolbar
+						</VBtnToggle>
+						<span style="height: 2px; width: 48px; background-color: #999"></span>
+						<div
 							class="d-flex flex-column flex-wrap ga-4"
-							aria-label="Outils de couleur"
-							aria-orientation="vertical"
+							role="group"
+							aria-label="Couleurs"
 						>
 							<VBtn
-								title="couleur"
+								title="couleur du texte"
+								aria-label="couleur du texte"
+								size="small"
+								height="48"
 							>
-								<span class="d-sr-only">couleur du texte</span>
-								<VIcon
-									size="x-large"
-								>
-									{{ mdiFormatColorText }}
-								</VIcon>
+								<SyIcon :icon="mdiFormatColorText" size="x-large" decorative />
 							</VBtn>
 							<VBtn
-								title="fond"
+								title="couleur de fond"
+								aria-label="couleur de fond"
+								size="small"
+								height="48"
 							>
-								<span class="d-sr-only">Couleur de fond</span>
-								<VIcon
-									size="x-large"
-								>
-									{{ mdiFormatColorFill }}
-								</VIcon>
+								<SyIcon :icon="mdiFormatColorFill" size="x-large" decorative />
 							</VBtn>
-						</Toolbar>
-					</div>
-				</template>`,
+						</div>
+					</ToolbarContainer>
+				</template>
+
+				<script setup lang="ts">
+					import { ref } from 'vue'
+					import { VBtn, VBtnToggle } from 'vuetify/components'
+					import ToolbarContainer from '@/components/ToolbarContainer/ToolbarContainer.vue'
+					import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+					import { mdiFormatAlignRight, mdiFormatAlignLeft, mdiFormatAlignCenter, mdiFormatAlignJustify, mdiFormatBold, mdiFormatItalic, mdiFormatUnderline, mdiFormatColorText, mdiFormatColorFill } from '@mdi/js'
+
+					const justification = ref<string>()
+					const textDecoration = ref<string[]>([])
+				</script>`,
 			},
 		],
 	},