Improve docs

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

src/components/ListItem/ListItem.vue

@@ -53,6 +53,7 @@
 </docs>
 
 <template>
+	<!-- This wrapper can be either a router link or a `<li>` -->
 	<nav-element
 		class="list-item__wrapper"
 		v-bind="navElement">
@@ -70,8 +71,11 @@
 			@keydown.tab="handleTab"
 			@click="onClick"
 			@keydown.esc="hideActions">
+
 			<!-- @slot This slot is used for the avatar or icon -->
 			<slot name="icon" />
+
+			<!-- Main content -->
 			<div class="list-item-content">
 				<div class="list-item-content__main">
 					<div class="list-item-content__line-one">
@@ -92,6 +96,8 @@
 							<!-- @slot Slot for the second line of the component -->
 							<slot name="subtitle" />
 						</span>
+
+						<!-- Counter -->
 						<span v-if="!displayActions" class="list-item-content__line-two__counter">
 							<AppNavigationCounter
 								v-if="counterNumber != 0"
@@ -142,15 +148,15 @@ export default {
 		},
 
 		/**
-		 * Title
+		 * Title (first line of text)
 		 */
 		title: {
 			type: String,
 			required: true,
 		},
 
 		/**
-		* Pass in `true` if you want the matching behaviour to
+		* Pass in `true` if you want the matching behavior to
 		* be non-inclusive: https://router.vuejs.org/api/#exact
 		*/
 		exact: {
@@ -175,31 +181,31 @@ export default {
 		},
 
 		/**
-		 * Boldens title and subtitle
+		 * Make title and subtitle bold
 		 */
 		bold: {
 			type: Boolean,
 			default: false,
 		},
 
 		/**
-		 * Toggle the active state of the component.
+		 * Toggle the active state of the component
 		 */
 		active: {
 			type: Boolean,
 			default: false,
 		},
 
 		/**
-		 * Aria label for the wrapper element.
+		 * Aria label for the wrapper element
 		 */
 		linkAriaLabel: {
 			type: String,
 			default: '',
 		},
 
 		/**
-		 * Aria label for the actions toggle.
+		 * Aria label for the actions toggle
 		 */
 		actionsAriaLabel: {
 			type: String,
@@ -415,7 +421,7 @@ export default {
 			justify-content: space-between;
 			white-space: nowrap;
 
-			&__subtitle {
+				&__subtitle {
 				overflow: hidden;
 				flex-grow: 1;
 				padding-right: 4px;