Display flags next to class name

Reflections in TypeDoc can be assigned flags, describing certain
properties of the reflection, e.g. abstract, private, readonly etc.
These flags were rendered using badges for most type of reflections, but
not for reflections which are displayed on their own page (like classes,
interfaces etc.). This made it difficult to establish e.g. whether a
class is abstract (see TypeStrong#1874).

This PR fixes the issue by rendering flags in the page titles next to
the name of the documented entity.

Styling of the badges has been amended, to account for them now showing
next to much bigger headings. The styling was inspired by [Bootstrap
badges](https://getbootstrap.com/docs/4.0/components/badge/).

Partially resolves TypeStrong#1874.

src/lib/output/themes/default/partials/header.tsx

@@ -1,7 +1,7 @@
 import type { Reflection } from "../../../../models";
 import { JSX } from "../../../../utils";
 import type { PageEvent } from "../../../events";
-import { hasTypeParameters, join } from "../../lib";
+import { hasTypeParameters, join, renderFlags } from "../../lib";
 import type { DefaultThemeRenderContext } from "../DefaultThemeRenderContext";
 
 export const header = (context: DefaultThemeRenderContext, props: PageEvent<Reflection>) => (
@@ -77,7 +77,8 @@ export const header = (context: DefaultThemeRenderContext, props: PageEvent<Refl
                             {join(", ", props.model.typeParameters, (item) => item.name)}
                             {">"}
                         </>
-                    )}
+                    )}{" "}
+                    {renderFlags(props.model.flags)}
                 </h1>
             </div>
         </div>

static/style.css

@@ -766,12 +766,13 @@ footer .tsd-legend {
 
 .tsd-flag {
     display: inline-block;
-    padding: 1px 5px;
+    padding: 0.25em 0.4em;
     border-radius: 4px;
     color: var(--color-comment-tag-text);
     background-color: var(--color-comment-tag);
     text-indent: 0;
-    font-size: 14px;
+    font-size: 75%;
+    line-height: 1;
     font-weight: normal;
 }