@cnamts/synapse 0.0.6-alpha → 0.0.8-alpha

package/src/components/FooterBar/FooterBar.vue

@@ -79,8 +79,12 @@
 		return typeof complianceLabel === 'string' ? locales.a11yLabel(complianceLabel) : ''
 	})
 
-	const extendedMode = computed(() => {
-		return Boolean(slots.default)
+	const extendedMode = computed<boolean>(() => {
+		if (slots.default) {
+			return true
+		}
+
+		return false
 	})
 
 	const logoSize = computed(() => {
@@ -236,102 +240,127 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
+
 $white: #fff;
 
 a {
-  cursor: pointer;
+	cursor: pointer;
 }
+
 .v-btn--icon {
-  border: 0;
+	border: 0;
 }
+
 // Fix footer bar height in SK
 .v-footer {
-  flex-grow: 0 !important;
-  justify-content: center;
-  .container {
-    width: 100%;
-    max-width: 1712px;
-    margin: 0 auto;
-  }
+	flex-grow: 0 !important;
+	justify-content: center;
+
+	.container {
+		width: 100%;
+		max-width: 1712px;
+		margin: 0 auto;
+	}
 }
+
 .vd-footer-bar :deep() {
-  .vd-footer-bar-links a {
-    color: rgba(0, 0, 0, .87);
-  }
-  p,
-  .text--primary {
-    color: rgba(0, 0, 0, .87);
-  }
-  .text--secondary {
-    color: rgba(0, 0, 0, .6);
-  }
-  .social {
-    .text--primary {
-      color: tokens.$primary-base;
-    }
-    a.v-btn:hover {
-      background: rgba(0, 0, 0, 0.05);
-    }
-  }
-  button.v-btn:hover {
-    background: rgba(0, 0, 0, 0.05);
-  }
-  a.text--primary {
-    color: tokens.$primary-base;
-  }
-  .v-divider {
-    border-color: rgba(tokens.$parma-darken-60, 1);
-  }
-  svg.logo {
-    fill: tokens.$primary-base;
-  }
-  .scroll {
-    color: tokens.$primary-base !important;
-  }
+	.vd-footer-bar-links a {
+		color: rgb(0 0 0 / 87%);
+	}
+
+	p,
+	.text--primary {
+		color: rgb(0 0 0 / 87%);
+	}
+
+	.text--secondary {
+		color: rgb(0 0 0 / 60%);
+	}
+
+	.social {
+		.text--primary {
+			color: rgb(var(--v-theme-primary));
+		}
+
+		a.v-btn:hover {
+			background: rgb(0 0 0 / 5%);
+		}
+	}
+
+	button.v-btn:hover {
+		background: rgb(0 0 0 / 5%);
+	}
+
+	a.text--primary {
+		color: rgb(var(--v-theme-primary));
+	}
+
+	.v-divider {
+		border-color: rgba(tokens.$parma-darken-60, 1);
+	}
+
+	svg.logo {
+		fill: rgb(var(--v-theme-primary));
+	}
+
+	.scroll {
+		color: rgb(var(--v-theme-primary)) !important;
+	}
 }
+
 // Use deep selector to style user content as well
 .vd-footer-bar.v-theme--dark :deep() {
-  .vd-footer-bar-links a {
-    color: $white;
-  }
-  p,
-  .text--primary {
-    color: rgba($white, 0.87);
-  }
-  .text--secondary {
-    color: rgba($white, 0.6);
-  }
-  a.text--primary {
-    color: $white;
-  }
-  .v-divider {
-    border-color: rgba($white, 1);
-  }
-  svg {
-    fill: $white;
-  }
+	.vd-footer-bar-links a {
+		color: $white;
+	}
+
+	p,
+	.text--primary {
+		color: rgba($white, 0.87);
+	}
+
+	.text--secondary {
+		color: rgba($white, 0.6);
+	}
+
+	a.text--primary {
+		color: $white;
+	}
+
+	.v-divider {
+		border-color: rgba($white, 1);
+	}
+
+	svg {
+		fill: $white;
+	}
 }
+
 .vd-footer-bar-links :deep() {
-  li {
-    list-style: none;
-    display: flex;
-  }
-  a {
-    transition: 0.15s;
-    text-decoration: none;
-    padding-top: 1px; // Add top padding to account for bottom border
-    border-bottom: 1px solid transparent;
-    &:hover,
-    &:focus {
-      border-color: currentColor;
-    }
-  }
-  p {
-    padding: 1px 0;
-  }
+	li {
+		list-style: none;
+		display: flex;
+	}
+
+	a {
+		transition: 0.15s;
+		text-decoration: none;
+		padding-top: 1px; // Add top padding to account for bottom border
+		border-bottom: 1px solid transparent;
+
+		&:hover,
+		&:focus {
+			border-color: currentcolor;
+		}
+	}
+
+	p {
+		padding: 1px 0;
+	}
 }
+
 .v-theme--dark button.v-btn:hover :deep() {
-  background: rgba(white, 0.1);
+	background: rgba(white, 0.1);
 }
 </style>

package/src/components/FranceConnectBtn/FranceConnectBtn.stories.ts

@@ -105,7 +105,8 @@ export const DarkTheme: Story = {
 			{
 				name: 'Template',
 				code: `<template>
-	<FranceConnectBtn 
+	<FranceConnectBtn
+		href="https://app.franceconnect.gouv.fr/"
 		is-connect-plus 
 		dark
 	/>

package/src/components/FranceConnectBtn/FranceConnectBtn.vue

@@ -97,13 +97,14 @@
 .vd-france-connect-btn a {
 	color: #000091;
 
-  &:focus {
-    outline-offset: 3px;
-  }
+	&:focus {
+		outline-offset: 3px;
+	}
 }
 
 .vd-france-connect-link {
 	background: #000091;
+
 	&:hover {
 		background: #1212ff;
 		transition: all 0.2s ease-in-out;
@@ -113,32 +114,32 @@
 		background: #2323ff;
 	}
 
-  &:focus {
-    outline-offset: 3px;
-  }
+	&:focus {
+		outline-offset: 3px;
+	}
 }
 
 .vd-france-connect-btn--dark {
 	.vd-france-connect-link {
-		color: #FFFFFF;
-		background-color: #8585F6;
+		color: #fff;
+		background-color: #8585f6;
 
 		&:hover {
-			background-color: #B1B1F9;
+			background-color: #b1b1f9;
 		}
 
 		&:active {
-			background-color: #C6C6FB;
+			background-color: #c6c6fb;
 		}
 	}
 
 	.vd-france-connect-info-link {
-		color: #8585F6;
+		color: #8585f6;
 	}
 }
 
 .vd-france-connect-info-link {
-	background-image: linear-gradient(currentColor, currentColor);
+	background-image: linear-gradient(currentcolor, currentcolor);
 	background-position: 0% 100%;
 	background-repeat: no-repeat;
 	background-size: 100% 1px;
@@ -149,6 +150,6 @@
 }
 
 :deep(&:focus) {
-  border-radius: 0 !important;
+	border-radius: 0 !important;
 }
 </style>

package/src/components/HeaderBar/HeaderBar.stories.ts

@@ -237,7 +237,7 @@ export const WithRightMenu: Story = {
 							<div class="d-flex justify-center h-100 ga-4 pr-4">
 								<VBtn
 									variant="text"
-									:prepend-icon="searchIcon"
+									:prepend-icon="mdiMagnify"
 									color="primary"
 								>
 									Rechercher
@@ -344,7 +344,7 @@ export const CustomLogo: Story = {
 				code: `
 				<template>
 					<HeaderBar>
-						<template #logo-brand-content="{ menuOpen }">
+						<template #logo-brand-content>
 							<svg data-v-7f5c1754="" width="22" height="64" fill="#0c419a" role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 64" class="vd-divider"><path data-v-7f5c1754="" d="M14.3 49.3c-.2 0-.4-.2-.4-.4V14.2c0-.2.2-.4.4-.4.3 0 .5.2.5.4v34.7c0 .2-.2.4-.5.4Z"></path></svg>
 							<img
 								src="/ameli.svg"
@@ -354,7 +354,7 @@ export const CustomLogo: Story = {
 					</HeaderBar>
 					<br>
 					<HeaderBar>
-						<template #logo-brand-content="{ menuOpen }">
+						<template #logo-brand-content>
 							<svg data-v-7f5c1754="" width="22" height="64" fill="#0c419a" role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 64" class="vd-divider"><path data-v-7f5c1754="" d="M14.3 49.3c-.2 0-.4-.2-.4-.4V14.2c0-.2.2-.4.4-.4.3 0 .5.2.5.4v34.7c0 .2-.2.4-.5.4Z"></path></svg>
 							<img
 								src="/ameli-pro.svg"
@@ -364,7 +364,7 @@ export const CustomLogo: Story = {
 					</HeaderBar>
 					<br>
 					<HeaderBar>
-						<template #logo-brand-content="{ menuOpen }">
+						<template #logo-brand-content>
 							<svg data-v-7f5c1754="" width="22" height="64" fill="#0c419a" role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 64" class="vd-divider"><path data-v-7f5c1754="" d="M14.3 49.3c-.2 0-.4-.2-.4-.4V14.2c0-.2.2-.4.4-.4.3 0 .5.2.5.4v34.7c0 .2-.2.4-.5.4Z"></path></svg>
 							<img
 								src="/cnam.svg"
@@ -374,7 +374,7 @@ export const CustomLogo: Story = {
 					</HeaderBar>
 					<br>
 					<HeaderBar>
-						<template #logo-brand-content="{ menuOpen }">
+						<template #logo-brand-content">
 							<svg data-v-7f5c1754="" width="22" height="64" fill="#006386" role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 64" class="vd-divider"><path data-v-7f5c1754="" d="M14.3 49.3c-.2 0-.4-.2-.4-.4V14.2c0-.2.2-.4.4-.4.3 0 .5.2.5.4v34.7c0 .2-.2.4-.5.4Z"></path></svg>
 							<img
 								src="/compte-ameli.svg"
@@ -384,7 +384,7 @@ export const CustomLogo: Story = {
 					</HeaderBar>
 					<br>
 					<HeaderBar>
-						<template #logo="{ menuOpen }">
+						<template #logo>
 							<svg data-v-7f5c1754="" fill="#0c419a" aria-label="l’Assurance Maladie: Risques Professionnels" width="211" height="64" viewBox="0 0 211 64" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" class=""><path fill="#cd545b" d="M68 55.8h2.8a3 3 0 0 1 2 .6c.5.4.8 1 .8 1.8 0 .6-.2 1-.4 1.4-.2.4-.6.6-1 .9l1.8 3.3h-1.5l-1.6-3h-1.6v3H68zm2.6 3.8c.5 0 1 0 1.2-.3.2-.3.4-.6.4-1 0-1-.6-1.4-1.6-1.4h-1.3v2.7zm4.5-3.8h1.3v8H75zm5.4 8.2a6.5 6.5 0 0 1-2.7-.6L78 62c1 .5 1.9.7 2.7.7.4 0 .8 0 1-.2.3-.2.4-.5.4-.8 0-.3 0-.5-.2-.6-.1-.2-.3-.3-.6-.4l-1.1-.5a7 7 0 0 1-1.3-.5l-.8-.7a2 2 0 0 1-.2-1.1c0-.7.2-1.2.7-1.6.5-.4 1.2-.6 2.1-.6a6.1 6.1 0 0 1 2.6.5l-.2 1.3-1.2-.4c-.4-.2-.8-.2-1.2-.2a2 2 0 0 0-1.1.2c-.2.2-.4.4-.4.7 0 .3 0 .5.2.6l.5.4 1 .3c1 .3 1.6.6 2 1 .5.4.7 1 .7 1.6 0 .6-.3 1.2-.7 1.6-.5.4-1.3.7-2.4.7zm11.7-4.2c0 1-.3 2-.8 2.7l.7.7-.8.8-.7-.7a4 4 0 0 1-2.3.7 4 4 0 0 1-2-.6c-.7-.3-1.1-.8-1.5-1.4-.3-.6-.5-1.4-.5-2.2 0-.8.2-1.6.5-2.2.4-.6.8-1 1.4-1.4a4 4 0 0 1 2-.5 4 4 0 0 1 2.1.5c.6.3 1 .8 1.4 1.4.3.6.5 1.4.5 2.2zm-4 2.9c.6 0 1-.1 1.4-.4l-1-.9.8-.8 1 .9c.3-.5.4-1 .4-1.7 0-.8-.2-1.5-.7-2-.4-.6-1-.9-1.8-.9s-1.5.3-2 .8c-.4.6-.6 1.3-.6 2.1 0 .9.2 1.6.7 2 .4.6 1 .9 1.9.9zm8.5 1.3c-1 0-1.9-.4-2.4-1-.6-.6-.9-1.5-.9-2.6v-4.6h1.3V60c0 .9.2 1.6.5 2 .2.5.8.7 1.5.7.8 0 1.3-.2 1.6-.7.3-.4.4-1.1.4-2v-4.2h1.3v4.6c0 1.1-.2 2-.8 2.6-.5.6-1.4 1-2.5 1zm5-8.2h5v1.3h-3.6v2h2.9v1.2h-3v2.2h3.9v1.3h-5.2zm8.8 8.2a6.5 6.5 0 0 1-2.7-.6l.2-1.4c1 .5 1.9.7 2.7.7.4 0 .8 0 1-.2.3-.2.4-.5.4-.8 0-.3 0-.5-.2-.6-.1-.2-.3-.3-.6-.4l-1.1-.5a7 7 0 0 1-1.3-.5l-.8-.7a2 2 0 0 1-.2-1.1c0-.7.2-1.2.7-1.6.5-.4 1.2-.6 2.1-.6a6.1 6.1 0 0 1 2.6.5l-.2 1.3-1.3-.4c-.3-.2-.7-.2-1.1-.2a2 2 0 0 0-1.1.2c-.3.2-.4.4-.4.7 0 .3 0 .5.2.6l.5.4 1 .3c1 .3 1.6.6 2 1 .5.4.7 1 .7 1.6 0 .6-.3 1.2-.7 1.6-.5.4-1.3.7-2.4.7zm6.9-8.2h2.7c1.9 0 2.8.9 2.8 2.6 0 .9-.2 1.5-.7 2-.5.4-1.2.6-2 .6h-1.5v2.8h-1.3zm2.6 4c.5 0 1 0 1.2-.3.2-.2.4-.6.4-1 0-.6-.2-1-.4-1.2-.3-.2-.7-.4-1.2-.4h-1.3v3zm4-4h2.9a3 3 0 0 1 2 .6c.5.4.7 1 .7 1.8 0 .6-.1 1-.3 1.4l-1 .9 1.7 3.3h-1.5l-1.5-3h-1.6v3h-1.3zm2.6 3.8c.6 0 1 0 1.2-.3.3-.3.4-.6.4-1 0-1-.5-1.4-1.6-1.4h-1.2v2.7zm8 4.4a4 4 0 0 1-2-.6c-.6-.3-1.1-.8-1.5-1.4-.3-.6-.5-1.4-.5-2.2 0-.8.2-1.6.5-2.2.4-.6.9-1 1.4-1.4a4 4 0 0 1 2-.5 4 4 0 0 1 2.1.5c.6.3 1 .8 1.4 1.4.3.6.5 1.4.5 2.2 0 .8-.2 1.6-.5 2.2-.3.6-.8 1.1-1.4 1.4a4 4 0 0 1-2 .6zm0-1.3c.8 0 1.4-.3 1.9-.8.4-.5.6-1.2.6-2 0-1-.2-1.6-.6-2.2-.5-.5-1.1-.8-2-.8-.7 0-1.4.3-1.8.8-.4.6-.7 1.3-.7 2.1 0 .9.3 1.6.7 2 .4.6 1 .9 1.9.9zm5.2-6.9h5v1.3h-3.6v2h2.7v1.2h-2.7v3.5h-1.4zm6 0h5v1.3h-3.6v2h2.8v1.2h-2.8v2.2h3.7v1.3h-5zm8.7 8.2a6.5 6.5 0 0 1-2.6-.6l.2-1.4c1 .5 1.9.7 2.7.7.4 0 .8 0 1-.2.3-.2.4-.5.4-.8 0-.3 0-.5-.2-.6l-.6-.4-1.2-.5a7 7 0 0 1-1.2-.5l-.8-.7a2 2 0 0 1-.3-1.1c0-.7.3-1.2.8-1.6.5-.4 1.2-.6 2.1-.6a6.1 6.1 0 0 1 2.5.5v1.3l-1.4-.4c-.4-.2-.8-.2-1.2-.2a2 2 0 0 0-1 .2c-.3.2-.4.4-.4.7 0 .3 0 .5.2.6l.5.4 1 .3c1 .3 1.6.6 2 1 .4.4.7 1 .7 1.6 0 .6-.3 1.2-.8 1.6-.4.4-1.2.7-2.4.7zm6.7 0a6.5 6.5 0 0 1-2.7-.6l.2-1.4c1 .5 1.9.7 2.7.7.4 0 .8 0 1-.2.3-.2.4-.5.4-.8 0-.3 0-.5-.2-.6-.1-.2-.3-.3-.6-.4l-1.1-.5a7 7 0 0 1-1.3-.5l-.7-.7a2 2 0 0 1-.3-1.1c0-.7.2-1.2.7-1.6.5-.4 1.2-.6 2.2-.6a6.1 6.1 0 0 1 2.5.5l-.2 1.3-1.2-.4c-.4-.2-.8-.2-1.2-.2a2 2 0 0 0-1 .2c-.3.2-.5.4-.5.7l.2.6.5.4 1 .3c1 .3 1.6.6 2 1 .5.4.7 1 .7 1.6 0 .6-.3 1.2-.7 1.6-.5.4-1.3.7-2.4.7zm4.3-8.2h1.3v8h-1.3zm6.6 8.2a4 4 0 0 1-2-.6c-.6-.3-1.1-.8-1.4-1.4-.4-.6-.6-1.4-.6-2.2 0-.8.2-1.6.6-2.2.3-.6.8-1 1.4-1.4a4 4 0 0 1 2-.5 4 4 0 0 1 2 .5c.6.3 1 .8 1.4 1.4.4.6.5 1.4.5 2.2 0 .8-.1 1.6-.5 2.2-.3.6-.8 1.1-1.4 1.4a4 4 0 0 1-2 .6zm0-1.3c.8 0 1.4-.3 1.9-.8.4-.5.6-1.2.6-2 0-1-.2-1.6-.6-2.2-.5-.5-1.1-.8-2-.8-.7 0-1.4.3-1.8.8-.4.6-.7 1.3-.7 2.1 0 .9.3 1.6.7 2 .4.6 1 .9 1.9.9zm5.2-6.9h1.4l3.6 5.5v-5.5h1.3v8h-1l-4-5.8v5.8h-1.3zm8 0h1.4l3.6 5.5v-5.5h1.4v8h-1.1l-3.9-5.8v5.8h-1.3zm8.2 0h5v1.3h-3.7v2h2.9v1.2h-2.9v2.2h3.8v1.3h-5.1zm6.4 0h1.3v6.8h3.4v1.2H200zm8 8.2a6.5 6.5 0 0 1-2.6-.6l.1-1.4c1 .5 1.9.7 2.7.7.4 0 .8 0 1-.2.3-.2.4-.5.4-.8 0-.3 0-.5-.2-.6-.1-.2-.3-.3-.6-.4l-1.1-.5a7 7 0 0 1-1.2-.5c-.4-.2-.6-.4-.8-.7a2 2 0 0 1-.3-1.1c0-.7.2-1.2.7-1.6.5-.4 1.2-.6 2.2-.6a6.1 6.1 0 0 1 2.5.5l-.1 1.3-1.3-.4c-.4-.2-.8-.2-1.2-.2a2 2 0 0 0-1 .2c-.3.2-.4.4-.4.7l.1.6.6.4 1 .3c.9.3 1.5.6 2 1 .4.4.6 1 .6 1.6 0 .6-.2 1.2-.7 1.6-.5.4-1.3.7-2.4.7z"></path><g role="presentation" aria-hidden="true"><path d="m3.3 32.3-.4-.4c.1-.3.3-.5.3-.8 0-.3 0-.4-.2-.4s-.3.1-.4.4l-.2.4c-.1.3-.4.6-.8.6-.5 0-.9-.5-.8-1.1 0-.4.1-.7.4-1l.4.4a1 1 0 0 0-.3.6c0 .2.1.4.3.4.2 0 .2-.2.4-.4l.1-.4c.2-.3.5-.6.9-.5.5 0 .9.5.8 1.2 0 .2-.2.7-.5 1Z"></path><path d="M.5 28 0 27l.5-.2.4.9-.4.2Zm.4.6.3-1.8h.5L1.6 28h.6l.1-1 .6.1-.1 1 .6.2.2-1.3.6.1-.3 2-3-.5Z"></path><path d="M2.8 26c-1-.3-1.4-1-1.2-1.8l.6-.8.3.5c-.1.1-.3.2-.3.5-.1.4.2.8.7.9.6.1 1 0 1.2-.5 0-.2 0-.4-.2-.6l.5-.3c.2.4.3.7.2 1-.1.9-.8 1.3-1.8 1Z"></path><path d="m3.7 22.8-1.5-.5.3-.7 1.6.6c.5.2.8.1.9-.2.1-.3 0-.6-.5-.8l-1.6-.6.2-.6 1.5.6c1 .3 1.2.9 1 1.6-.4.8-1 1-1.9.6Z"></path><path d="m3.7 18.6.5-1c.3-.6.7-1 1.4-.6.6.3.6.9.3 1.5l-.2.3 1 .5-.3.6-2.7-1.3Zm1.7-.3c.2-.3.1-.6-.2-.7-.2-.2-.4 0-.6.3l-.1.3.7.4.2-.3Zm.3.2-.2-.6h2l-.4.6H5.7Z"></path><path d="m5.4 15.3.4-.6 2.5 1.7-.3.5-2.6-1.6Z"></path><path d="m7.3 13.5-.5.7-.4-.4 1.4-1.9.5.4-.6.7 2 1.4-.4.6-2-1.5Z"></path><path d="m8.5 11 1.3-1.3.5.4-.9.8.5.4.7-.7.4.4-.7.7.5.5.9-1 .4.5-1.3 1.4-2.3-2Zm.1-.7v-1h.7l-.2 1h-.5Z"></path><path d="M13.6 9.7v-.6c.3 0 .6 0 .8-.2.2-.2.3-.4.2-.5-.2-.2-.3-.1-.6 0h-.4c-.4.2-.7.1-1-.2-.3-.4-.2-1 .3-1.4.3-.2.6-.3 1-.3v.6a1 1 0 0 0-.7.1c-.1.2-.2.4-.1.5h.6l.4-.1c.4-.1.7-.1 1 .3.2.4.2 1-.4 1.4-.3.3-.7.4-1 .4Z"></path><path d="M15.5 6.8c-.5-.8-.4-1.6.3-2 .7-.5 1.5-.2 2 .6s.3 1.6-.4 2c-.6.5-1.4.2-2-.6Zm1.7-1c-.3-.6-.7-.7-1-.5-.4.2-.5.6-.1 1.1.3.6.7.8 1 .6.4-.3.4-.7.1-1.2Z"></path><path d="M18.7 5c-.5-1 0-1.8.6-2.1.4-.2.7-.1 1 0l-.2.5h-.6c-.3.2-.5.7-.2 1.2.2.6.7.8 1 .6.3-.1.4-.3.5-.5l.5.2c-.1.4-.3.7-.7.8-.7.3-1.5.1-2-.8Z"></path><path d="m21.4 2.1.6-.2 1 2.8-.6.2-1-2.8Z"></path><path d="M24 1.2 25 1l1.7 2.7-.7.1-.8-1.3-.4-1v2.7l-.7.2V1.2Zm.2 1.8 1.4-.4.2.5-1.4.4-.2-.5Z"></path><path d="m26.9.5.7-.1.3 2.4 1.2-.2v.6l-1.8.3-.4-3Z"></path><path d="m29.8.1 2-.1v.6h-1.2v.7l1-.1v.6h-1v.7H32V3l-1.9.1-.2-3Z"></path></g><g><path d="M100.1 45V30.6h3.8v14.6c0 .8.4 1 .7 1h.5l.5 2.9a5 5 0 0 1-2 .3c-2.6 0-3.5-1.7-3.5-4.4Z"></path><path d="m75.7 40.4 3.8-8.5h4V49h-3.6V38.4l-3 7.8h-2.4l-3-7.8v10.7H68V32h4l3.8 8.5Z"></path><path d="M107.1 45.5c0-2.8 2.3-4.3 7.4-4.9 0-1.1-.8-1.8-2.2-1.8-1 0-2.1.4-3.4 1.2l-1.3-2.6c1.6-1 3.5-1.7 5.5-1.7 3.3 0 5 1.9 5 5.9V49h-3.5v-1.3s-1.5 1.6-3.6 1.6c-2.4 0-3.9-1.7-3.9-4Zm7.4-.3V43c-2.7.3-3.7 1.2-3.7 2.2 0 .8.5 1.2 1.5 1.2.8 0 1.5-.5 2.2-1.2Z"></path><path d="M86.1 45.5c0-2.8 2.3-4.3 7.4-4.9 0-1.1-.8-1.8-2.2-1.8-1 0-2.1.4-3.4 1.2l-1.3-2.6c1.6-1 3.5-1.7 5.5-1.7 3.3 0 5 1.9 5 5.9V49h-3.5v-1.3S92 49.4 90 49.4c-2.4 0-3.9-1.7-3.9-4Zm7.4-.3V43c-2.7.3-3.7 1.2-3.7 2.2 0 .8.6 1.2 1.5 1.2.8 0 1.6-.5 2.2-1.2Z"></path><path d="M129 30.6v6.3a4.1 4.1 0 0 0-3.2-1.2c-2.7 0-5.3 2.6-5.3 6.8 0 4.3 2 7 5.2 7 1.8 0 3.1-1.4 3.2-1.5v1.1h3.8V30.6H129Zm-2.3 15.7c-1.5 0-2.4-1.2-2.4-3.8 0-2.5 1.1-3.6 2.4-3.6.6 0 1.4.2 2.2.8v5.4c-.7.8-1.4 1.2-2.2 1.2Z"></path><path d="M135.7 32c0-1.2 1-2 2.2-2 1.2 0 2.2.8 2.2 2s-1 2-2.2 2c-1.3 0-2.2-.8-2.2-2Zm.3 4h3.8V49H136V36Z"></path><path d="M142.2 42.5c0-4.2 2.6-6.8 5.9-6.8 3.6 0 5.6 2.7 5.6 6.3l-.1 1.7h-7.7c.3 2 1.6 2.8 3.3 2.8 1 0 1.8-.4 2.8-1l1.3 2.5c-1.3.9-3 1.4-4.6 1.4-3.8 0-6.5-2.5-6.5-6.9Zm8.3-1.4c0-1.4-.9-2.5-2.4-2.5-1.2 0-2 .9-2.3 2.5h4.7Z"></path><path d="M68 23.3V8.8h3.7v14.7c0 .8.4 1 .7 1h.5l.4 2.9a5 5 0 0 1-1.9.3c-2.6 0-3.5-1.7-3.5-4.4Z"></path><path d="m88.1 23.3 1 4.1h4l-5.3-17.3h-4.4l-5.3 17.3h4l1-4.1h5Zm-4.2-3 1.6-6.6h.2l1.6 6.5H84Z"></path><path d="m93.9 25.9 1.7-2.4c1.1.9 2.2 1.3 3.3 1.3 1.1 0 1.6-.4 1.6-1 0-1-1.2-1.4-2.6-1.9-1.6-.6-3.4-1.7-3.4-3.8 0-2.5 2-4.2 5-4.2 1.9 0 3.4.8 4.5 1.7l-1.7 2.4c-1-.7-1.8-1.2-2.8-1.2-1 0-1.4.4-1.4 1 0 1 1.2 1.2 2.5 1.7 1.6.7 3.5 1.6 3.5 4s-1.9 4.2-5.3 4.2c-1.7 0-3.6-.7-5-1.8Z"></path><path d="m105.3 25.9 1.7-2.4c1.1.9 2.2 1.3 3.3 1.3 1.1 0 1.6-.4 1.6-1 0-1-1.2-1.4-2.6-1.9-1.6-.6-3.4-1.7-3.4-3.8 0-2.5 2-4.2 5-4.2 1.9 0 3.4.8 4.5 1.7l-1.7 2.4c-1-.7-1.8-1.2-2.8-1.2-1 0-1.4.4-1.4 1 0 1 1.2 1.2 2.5 1.7 1.6.7 3.5 1.6 3.5 4s-1.9 4.2-5.3 4.2c-1.7 0-3.6-.7-5-1.8Z"></path><path d="M132.2 14.3h3.8V16c.8-1.4 2.5-2 3.4-2 .8 0 1.2.2 1.6.3l-.4 3.6c-.5-.2-1.1-.4-1.7-.4-1.5 0-2.8 1.3-2.9 3v6.8h-3.8V14.3Z"></path><path d="M155.7 14.3h3.8v1.6c1-1 2.2-2 4-2 2.7 0 4 2 4 5.3v8.2h-3.9v-7.7c0-1.9-.5-2.5-1.6-2.5-1 0-1.6.5-2.5 1.3v8.8h-3.8v-13Z"></path><path d="M180.6 20.8c0-4.3 2.7-6.9 5.9-6.9 3.7 0 5.7 2.8 5.7 6.3 0 .7 0 1.4-.2 1.8h-7.7c.4 1.9 1.7 2.8 3.4 2.8 1 0 1.8-.4 2.7-1l1.3 2.4c-1.3 1-3 1.5-4.6 1.5-3.7 0-6.5-2.5-6.5-6.9Zm8.4-1.4c0-1.4-.9-2.5-2.4-2.5-1.2 0-2 .8-2.3 2.5h4.7Z"></path><path d="M141.8 23.7c0-2.7 2.3-4.3 7.4-4.8 0-1.2-.8-1.9-2.2-1.9a7 7 0 0 0-3.4 1.2l-1.3-2.5c1.6-1 3.4-1.8 5.5-1.8 3.3 0 5 2 5 6v7.5h-3.6V26s-1.4 1.6-3.5 1.6c-2.4 0-4-1.7-4-4Zm7.4-.2v-2.3c-2.7.4-3.8 1.3-3.8 2.3 0 .8.6 1.2 1.5 1.2s1.7-.5 2.3-1.2Z"></path><path d="M76.7 8.8c-.8 0-1.9.6-1.9 1.7 0 1 .8 1.5 1.6 1.5 0 1.2-1 1.8-1.5 2.1l1 1.4c3.3-1 4-6.7.8-6.7Z"></path><path d="M125.3 14.3V23c-.8 1-1.4 1.4-2.3 1.4-1 0-1.6-.6-1.6-2.5v-7.6h-3.8v8.3c0 3 1.4 5.1 4 5.1 2.5 0 3.8-1.6 3.8-1.6v1.3h3.7V14.3h-3.8Z"></path><path d="M176.3 24.6c-1.7 0-3-1.5-3-3.7 0-2.3 1.3-3.8 3-3.8.6 0 1.1.2 1.7.7l1.8-2.5c-.9-.8-2.1-1.3-3.7-1.3a6.5 6.5 0 0 0-6.6 6.9c0 4.3 2.7 6.8 6.3 6.8 1.4 0 3-.4 4.2-1.5l-1.4-2.7c-.7.6-1.5 1-2.3 1Z"></path></g><path d="M34.8 9c-.1-.2-.4-.3-.6-.3H34c-.2-.2-5.3 0-6.5.7 0-.8-.4-1.8-1.7-2-1-.3-3.1.7-2.4 2.8 0 .3.3.6.7.8.2 0 .5 0 .7.6h.3l.2.2h.5c.4.4.8-.1 1-.5l.7 2c-.2-.2-1.8-.6-2.5.2s-1.2 1.8-1.7 3.5c-.2.4-.5.7-1 .9-.9.3-.4.7-.2.7a6 6 0 0 0 2 0c.4-.2.1-1 .5-1.4l.8-1c0 .5 0 .8-.3 1.5-.2.7-1 1-1.3 1.3-.4.5.6.5.8.5.7-.2 1-.2 1.3-.4.4-.2.2-.8.3-1 .3-.7 1.4-2 1.6-2.3.8.2 1.7.2 2 .2 1.9-.2 2.3-1.5 2-2.6-.1-1-.7-1.5-.9-1.8l-.9-1.4 3.5-.9c0 .3.3.3.4.4.2.1.3 0 .2-.1a.6.6 0 0 1-.2-.2h.7c.3 0 .4-.4.3-.5Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M61 26.7c-.5-2.6-2.9-4.1-4.1-4.7l-1.4-.4-.4-.2c.1-.5.8-.5 1.2-1.3 1-2.3-1.2-3.8-2.8-3.5-.8.2-1.3.4-1.5 1 0 .4-.3.4-.7.8-.2.2.1.4.2.5l-.1.3v.5s-.3.3 0 .7l.3.8c0 .1 0 .2-.3 0l-3.4-1a37.4 37.4 0 0 1-4.2-4.7c-.7 0 .5 1.3-.1.8-.2 0-.7-.4-.8-.5l-.1-.2-.3-.3H42.2c-.2 0-.1.5 0 .7 0 0 .4 1.2.6 1.4l1.5 1 2.6 3c.7.7 3.8 2.5 3.9 2.6.2 0 .5.8 0 5.5-.1 1.8-1.4 5.6-.8 7.5.4 1.3.9 2.2 1.3 5.6.1.8-.5 1.3-1.3 2l-1.4.8c-.2.2 0 .4.2.5.2 0 .5.3.8.3.3.1.9 0 1.4-.3.7-.3.7-.4 1-.6.5-.3 1-.3 1.2-.8.2-.6-.3-1.4-.3-1.7.4-2.8.9-4.1.2-5.8-.2-.3 1-4 1-3.4.2.9.3 3.8.3 5.9 0 .9.8 4.2 1 5.4.4 1.8-2.6 3.2-2 3.8l1 .3 1-.1c.3-.1.6-.5.7-.6.6-.8.4-.6 1-1.1.4-.5 0-1.4 0-1.8v-2.9c0-1.9 0-2.4.2-3.2l1-6.2s.2 0 .3-.2c.2-.2.1-.5.2-.7 0-.2 0 0 0 0l.2.6-.2.8c-.2.4.1.4.2.5 0 0 1-.7 1.2-1l.1-.8-.2-1.8c.2-.9 1-3.2.8-3.8Zm-2.2 3.6c-.2.5-.2 0-.6 1.7V31.1c0-2.1-1.5-6.5-.6-5.6 0 0 1.2.8 1.4 1.4.2.5.1 1.8-.2 3.4Z"></path><path d="M20 35.3c-.3-.3-1.6-2-2.4-2.7l-1-1.5c-1.6-2-1.9-2.1-3-2.2-.1-.2 0-.3 0-.4 1.3-.5.9-1.6.8-1.7l.2-.6-.2-1-.1-.7c-.8-.9-2.6-.9-3.5-.3-.8.5-.3.9-.6 1.6-.1.5 0 .9.3 1.2 0 .3.8.7.7 1.2-.2.6-1 .7-1 .7l-.3.1c-1.4.8-2.7 2-2.9 3.2 0 1 1.7 2.5 2.7 3.3.1 1.7 1.2 4.4 1.3 4.5.1.3-.3-.3-1.4-.7-.6-.1-1.2-.9-1.4 0 0 .4 0 1-.3 1.8-.2.6 0 1.5.7 1.5.5 0 .8-1.4.8-1.4s2.3 1 3.3.7c.7-.2.8-2.7.2-5-.2-.8.4 1.3 2 3.1.2.4 0 .7.2 2.2v1c0 .7-.7 1.6.9 2 1.6.4 1.5.8 2.5.1.5-.3-1.4-.5-1.8-1.6v-.2c0-.9.3-2.9.2-3.6-.6-3.4-2-5-2.2-5.8 0-2.4-.2-3.2 0-2.6l1 1.5.3.3.4.4 2.8 2.1s.1 1 .6 1c.4 0 2.3-1 2.2-1.1 0-.3-2-.3-2-.4ZM9.7 34l-1-1.8c.4-.7 1-1 1-.9.2 0 0 2.7 0 2.7Z"></path><path d="M51.8 54.8c-.1 0-1.2-.5-2.2-2-.5-.8-3.8-7-4.3-8.2-.9-2.4-8-6.7-8.2-7-.2-.1-.2-.5-.1-.8.5-2 .3-3.8.4-4.1.3-.7.8-1.7.4-2.3l-.7-1.2s3.7 1.4 4.6 1.2c.8-.2 4.5-2.8 4.7-2.9.5-.2 1.8.1 3-1.3.5-.5.2-.6 0-.6.1 0-.1-.2-.4 0-.2.1-1.3.4-1.1.2.8-.5.2-.7.2-.7-.3.3-1.8.7-2.1 1l-.8.5c-.9.5-2.4 1.3-4 1.7-.3 0-3.3-2-5-2.2-1-.1-1.3 0-1.8.1-.6.2-.6-.7 0-1 .2 0 .6-.1.7-.4.2-.4 0-.7 0-.8v-.2l-.1-.1v-.5c.3-.2.2-.4.1-.4-.1-.1-.6-.4-.7-.7 0-.6-.3-.9-.3-1.2 0 0-.1-.8-.4-1-.4-.4-1.2-.8-2.8-.3-.6.1-.5.4-1.8.6-1.6.3-2.4 2.7-2.3 3.7.1.8.8.4.8.7 0 .6-.1 1.5 1 1.8.3 0 1.8-.2 2.4 0 0 0 .5 0 .2.4-.1.2-1.6.9-2 1-1 .4-3.6 4.6-4.3 5-.7.3-1 .6-1.3.8-1 .6-2.1 1.4-2.7 1.4-.7 0-1.4.3-1.9 1.5-.1.3 0 .5.3.5 0 .1.2.3.4.3.2.2.5 0 .7 0l1-.7c.5-.2 4-1.5 4.7-2.1 1.2-.6 3.5-3 4-3s1.6 1 1.2 3c0 .7-1 2-1.4 2.6-1 1.5-.2 2.7-.4 3-1 1.6-2.2 3.7-4.2 5.5-.8.6-2.4.7-3.3 1-2 .5-4.2 2-5.7 2.8-.5.3-1-.3-1.6-.4-.7 0-.7 1-1 1.8l-.7 1.5c-.1.4-.7 1.7-.1 2.2.4.7 1.5-1.4 2.4-2.3.4-.5.7-.7 1.7-1 .6 0 5.6-1.4 8.8-2.2h.3c4.2-1.1 8.6-6.6 8.7-6.6l7.2 3.5c.7.4.7 1.8 1.5 3.4a22 22 0 0 0 4.4 4.9c.4.4 0 1 .2 1.6.2.6.6.6 1.1.6l1.6-.2c.7 0 .5 0 1.3.2.4 0 1.3.1 2-.5 1-1.2-1.2-.6-2.3-1.1Z"></path><path d="M44 51.7a.4.4 0 0 0-.6-.2 22.2 22.2 0 0 1-21-.6.5.5 0 0 0-.6.2c-.1.2 0 .4.1.6a23 23 0 0 0 21.9.5c.2 0 .3-.3.2-.5Z"></path><path d="M12.9 22.9h-.2c-.2-.2-.3-.4-.2-.6 2-4.4 5.2-8 9.3-10.4.2-.1.5 0 .6.2.2.2 0 .4-.1.6-4 2.3-7.1 5.7-9 10l-.4.2Z"></path><path d="M50.3 17.3c-.1 0-.3 0-.3-.2A22 22 0 0 0 36.5 10c-.2 0-.4-.3-.3-.5 0-.3.2-.4.5-.4a23 23 0 0 1 14 7.5v.7h-.4Z"></path></svg>
 						</template>
 					</HeaderBar>
@@ -396,7 +396,6 @@ export const CustomLogo: Story = {
 				code: `
 				<script setup lang="ts">
 					import { HeaderBar } from '@cnamts/synapse'
-
 				</script>
 				`,
 			},
@@ -566,7 +565,7 @@ export const WithSubHeader: Story = {
 			},
 			template: `
 				<HeaderBar v-bind="args">
-					<template #append="{ menuOpen }">
+					<template #append>
 						<SubHeader
 							title-text="Paul Dupont"
 							sub-title-text="1 69 08 75 125 456 75"
@@ -585,8 +584,8 @@ export const WithSubHeader: Story = {
 				name: 'Template',
 				code: `
 				<template>
-					<HeaderBar v-bind="args">
-						<template #append="{ menuOpen }">
+					<HeaderBar>
+						<template #append>
 							<SubHeader
 								title-text="Paul Dupont"
 								sub-title-text="1 69 08 75 125 456 75"
@@ -620,7 +619,11 @@ export const DefaultSlot: Story = {
 		return {
 			components: { HeaderBar, UserMenuBtn, VListItem, VListItemTitle },
 			setup() {
-				const listItems = ['Item 1', 'Item 2', 'Item 3']
+				const listItems = [
+					{ text: 'Item 1', value: 'item1' },
+					{ text: 'Item 2', value: 'item2' },
+					{ text: 'Item 3', value: 'item3' },
+				]
 				return { args, listItems }
 			},
 			template: `
@@ -660,7 +663,11 @@ export const DefaultSlot: Story = {
 				<script setup lang="ts">
 					import { HeaderBar, UserMenuBtn } from '@cnamts/synapse'
 					
-					const listItems = ['Item 1', 'Item 2', 'Item 3']
+					const listItems = [
+                        { text: 'Item 1', value: 'item1' },
+						{ text: 'Item 2', value: 'item2' },
+						{ text: 'Item 3', value: 'item3' },
+					]
 				</script>
 				`,
 			},

package/src/components/HeaderBar/HeaderBar.vue

@@ -164,7 +164,7 @@
 			:style="headerStickyStyle"
 		>
 			<div
-				v-if="$slots.prepend"
+				v-if="$slots['prepend']"
 				class="header-prepend"
 			>
 				<slot
@@ -177,7 +177,6 @@
 					name="menu"
 					:menu-open
 				/>
-
 				<div class="header-logo pl-xl-0 pl-md-14 pl-4">
 					<slot
 						name="logo"
@@ -218,7 +217,7 @@
 				</div>
 			</div>
 			<div
-				v-if="$slots.append"
+				v-if="$slots['append']"
 				class="header-append"
 			>
 				<slot
@@ -260,6 +259,12 @@
 	margin-left: auto;
 }
 
+.menu + .header-logo {
+	@media screen and (width >= 340px) {
+		padding-left: 16px !important;
+	}
+}
+
 @media screen and (min-width: $header-breakpoint) {
 	.inner-header {
 		height: $header-height-desktop;

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderBurgerMenu.vue

@@ -101,6 +101,7 @@
 		role="dialog"
 		aria-modal="true"
 		:aria-label="locals.mainMenu"
+		class="menu mr-4"
 	>
 		<div ref="menuBtnWrapper">
 			<HeaderMenuBtn
@@ -152,7 +153,7 @@
 	inset: 0;
 	position: fixed;
 	z-index: 1000;
-	background-color: rgba(3, 16, 37, .5);
+	background-color: rgb(3 16 37 / 50%);
 	backdrop-filter: blur(2px);
 }
 
@@ -187,8 +188,7 @@
 
 	.header-menu {
 		background-color: $neutral-white;
-		overflow-y : auto;
-		overflow-x: hidden;
+		overflow: hidden auto;
 		height: 100%;
 	}
 }
@@ -209,12 +209,14 @@
 	}
 }
 
-.menu-enter-from, .menu-leave-to {
+.menu-enter-from,
+.menu-leave-to {
 	opacity: 0;
 }
 
 @media screen and (min-width: $header-breakpoint) {
-	.menu-enter-from, .menu-leave-to {
+	.menu-enter-from,
+	.menu-leave-to {
 		.header-menu-wrapper {
 			transform: translateY(10px);
 		}
@@ -222,10 +224,13 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-	.menu-enter-active, .menu-leave-active {
+	.menu-enter-active,
+	.menu-leave-active {
 		transition: opacity 0s;
 	}
-	.menu-enter-from, .menu-leave-to {
+
+	.menu-enter-from,
+	.menu-leave-to {
 		.header-menu-wrapper {
 			transform: none;
 		}

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuItem/HeaderMenuItem.vue

@@ -9,10 +9,10 @@
 </template>
 
 <style lang="scss" scoped>
-	@use "@/assets/tokens.scss" as *;
+	@use '@/assets/tokens.scss' as *;
 
 	.header-menu-item {
-		color: $primary-base;
+		color: rgb(var(--v-theme-primary));
 		list-style-type: none;
 		margin: 0;
 		padding: 0;
@@ -24,14 +24,14 @@
 			flex-direction: column;
 			padding: 16px 50px 16px 20px;
 			text-decoration: none;
-			color: currentColor;
+			color: currentcolor;
 
 			&:hover {
 				text-decoration: underline;
 			}
 
 			&:visited {
-				color: currentColor;
+				color: currentcolor;
 			}
 
 			&::first-letter {
@@ -41,7 +41,7 @@
 	}
 
 	.header-menu-item:hover {
-		background-color: $primary-base;
+		background-color: rgb(var(--v-theme-primary));
 		color: $neutral-white;
 
 		> :deep(a > *) {

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuSection/HeaderMenuSection.vue

@@ -30,8 +30,8 @@
 </template>
 
 <style lang="scss" scoped>
-@use "@/assets/tokens.scss" as *;
-@use "../../consts.scss" as menu;
+@use '@/assets/tokens.scss' as *;
+@use '../../consts.scss' as menu;
 
 .header-menu-section {
 	list-style-type: none;

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderSubMenu/HeaderSubMenu.vue

@@ -61,7 +61,7 @@
 </template>
 
 <style lang="scss" scoped>
-	@use "@/assets/tokens.scss" as *;
+	@use '@/assets/tokens.scss' as *;
 	@use '../../consts' as *;
 
 	.sub-menu-btn {
@@ -71,10 +71,10 @@
 		width: 100%;
 		padding: 16px 50px 16px 20px;
 		text-align: left;
-		color: $primary-base;
+		color: rgb(var(--v-theme-primary));
 
 		&:hover {
-			background-color: $primary-base;
+			background-color: rgb(var(--v-theme-primary));
 			color: $neutral-white;
 			text-decoration: underline;
 
@@ -119,6 +119,7 @@
 
 			&:hover {
 				color: #000;
+
 				> :deep(*) {
 					color: #000 !important;
 				}
@@ -137,7 +138,7 @@
 		}
 
 		.sub-menu--open > .sub-menu-btn {
-			background-color: $primary-base;
+			background-color: rgb(var(--v-theme-primary));
 			color: $neutral-white;
 			transition: color 0.15s linear, background-color 0.15s linear;
 
@@ -158,8 +159,7 @@
 			height: 100%;
 			background: #f9f9f9;
 			border-left: 1px solid $menu-border-color;
-			overflow-y: auto;
-			overflow-x: hidden;
+			overflow: hidden auto;
 
 			> .sub-menu--open .sub-menu-content {
 				left: $menu-width * 2;
@@ -180,13 +180,15 @@
 			transition: opacity 0.08s ease-in, transform 0.08s ease-in;
 		}
 
-		.slide-fade-enter-from, .slide-fade-leave-to {
+		.slide-fade-enter-from,
+		.slide-fade-leave-to {
 			opacity: 0;
 			transform: translateX(-10px);
 		}
 
 		@media (prefers-reduced-motion) {
-			.slide-fade-enter-active, .slide-fade-leave-active {
+			.slide-fade-enter-active,
+			.slide-fade-leave-active {
 				transition: none;
 			}
 		}

package/src/components/HeaderBar/HeaderLogo/HeaderLogo.vue

@@ -109,9 +109,9 @@
 	display: flex;
 	height: 52px;
 	align-items: center;
-	color: $primary-base;
+	color: rgb(var(--v-theme-primary));
 	line-height: 1.45;
-	font-family: 'Cabin', 'Arial', 'Helvetica', sans-serif;
+	font-family: Cabin, Arial, Helvetica, sans-serif;
 	text-decoration: none;
 	cursor: pointer;
 }

package/src/components/HeaderBar/HeaderLogo/logos/Logo-mobile.vue

@@ -114,4 +114,5 @@
 	</svg>
 </template>
 
-<style scoped>.cls-2{fill:#0c419a}</style>
+<style scoped>.cls-2 { fill: #0c419a; }
+</style>

package/src/components/HeaderBar/HeaderLogo/logos/Logo.vue

@@ -276,4 +276,5 @@
 	</svg>
 </template>
 
-<style scoped>.cls-2{fill:#0c419a}</style>
+<style scoped>.cls-2 { fill: #0c419a; }
+</style>