added subdued prop

app/src/components/v-list/v-list-item.vue

@@ -14,6 +14,7 @@
 			'one-line': lines === 1,
 			disabled,
 			dashed,
+			subdued,
 		}"
 		:href="href"
 		:download="download"
@@ -34,6 +35,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		subdued: {
+			type: Boolean,
+			default: false,
+		},
 		lines: {
 			type: Number as PropType<1 | 2 | 3>,
 			default: null,
@@ -147,18 +152,18 @@ body {
 		transition-property: background-color, color;
 		user-select: none;
 
-		&:not(.disabled):hover {
+		&:not(.disabled):not(.subdued):hover {
 			color: var(--v-list-item-color-hover);
 			background-color: var(--v-list-item-background-color-hover);
 		}
 
-		&:not(.disabled):active {
+		&:not(.disabled):not(.subdued):active {
 			color: var(--v-list-item-color-active);
 			background-color: var(--v-list-item-background-color-active);
 		}
 	}
 
-	&.active {
+	&:not(.subdued).active {
 		color: var(--v-list-item-color-active);
 		background-color: var(--v-list-item-background-color-active);
 	}
@@ -169,6 +174,19 @@ body {
 		cursor: not-allowed;
 	}
 
+	&.subdued {
+		::v-deep .v-list-item-title {
+			color: var(--foreground-subdued);
+		}
+
+		&:hover,
+		&.active {
+			::v-deep .v-list-item-title {
+				color: var(--primary);
+			}
+		}
+	}
+
 	@at-root {
 		.v-list,
 		#{$this},
@@ -204,7 +222,7 @@ body {
 		}
 
 		.v-list.nav {
-			& #{$this} {
+			#{$this} {
 				--v-list-item-padding: 0 8px;
 				--v-list-item-border-radius: 4px;
 				&:not(:last-child):not(:only-child) {
@@ -213,9 +231,22 @@ body {
 			}
 			&.dense #{$this},
 			#{$this}.dense {
+				--v-list-item-min-height: var(--v-list-item-one-line-min-height-dense);
+
+				margin: var(--v-list-item-margin-dense);
+				padding: var(--v-list-item-padding-dense);
 				&:not(:last-child):not(:only-child) {
 					--v-list-item-margin-bottom: 4px;
 				}
+				&.one-line {
+					--v-list-item-min-height: var(--v-list-item-one-line-min-height-dense);
+				}
+				&.two-line {
+					--v-list-item-min-height: var(--v-list-item-two-line-min-height-dense);
+				}
+				&.three-line {
+					--v-list-item-min-height: var(--v-list-item-three-line-min-height-dense);
+				}
 			}
 		}
 	}

app/src/modules/docs/components/navigation-item.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-list-item v-if="section.children === undefined" :to="section.to" :dense="dense">
+	<v-list-item v-if="section.children === undefined" :to="section.to" :dense="dense" :subdued="subdued">
 		<v-list-item-icon v-if="section.icon !== undefined"><v-icon :name="section.icon" /></v-list-item-icon>
 		<v-list-item-content>
 			<v-list-item-title>{{ section.name }}</v-list-item-title>
@@ -12,6 +12,7 @@
 			:key="index"
 			:section="childSection"
 			dense
+			subdued
 		/>
 	</div>
 	<v-list-group v-else>
@@ -26,6 +27,7 @@
 			:key="index"
 			:section="childSection"
 			dense
+			subdued
 		/>
 	</v-list-group>
 </template>
@@ -45,6 +47,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		subdued: {
+			type: Boolean,
+			default: false,
+		},
 	},
 });
 </script>