@forsakringskassan/docs-generator 2.16.1 → 2.17.0

package/README.md

@@ -150,13 +150,12 @@ See {@link MyAwesomeComponent} for details or the {@link getting-started getting
 will be rendered as:
 
 ```html
-See
-<a href="./components/my-awesome-component.html"
-    >MyAwesomeComponent<a>
-        for details or the
-        <a href="../guides/getting-started.html">getting started guide</a>.</a
-    ></a
->
+<p>
+    See
+    <a href="./components/my-awesome-component.html">MyAwesomeComponent</a> for
+    details or the
+    <a href="../guides/getting-started.html">getting started guide</a>.
+</p>
 ```
 
 The ID can be either the document identifier, name or one of the aliases.

package/dist/{create-markdown-renderer-CuMSwaNA.js → create-markdown-renderer-Bj0NKzgi.js}

@@ -733,6 +733,7 @@ function headingLevel(options) {
       ids.add(id);
       return tag.replace(/h(\d)/, (_, n) => {
         const level = parseInt(n, 10) + offset;
+        env.currentHeading = level;
         return `<h${level} id="${id}"><a class="header-anchor" href="#${id}">`;
       });
     };
@@ -820,7 +821,11 @@ function apiContainer(context) {
     }
     included.add(doc.id);
     if (doc.format === "html") {
-      return doc.body;
+      return doc.body.replace(
+        /* replace `<next-heading-level>` and `</next-heading-level>` with actual h-tags */
+        /(?<=<\/?)next-heading-level/g,
+        `h${String(env.currentHeading + 1)}`
+      );
     }
     const content = md.render(doc.body, env);
     return (
@@ -1035,6 +1040,7 @@ function createMarkdownRenderer(options) {
       outputName: false
     },
     ids: /* @__PURE__ */ new Set(),
+    currentHeading: 1,
     namedExamples: /* @__PURE__ */ new Map()
   };
   const included = /* @__PURE__ */ new Set();

package/dist/index.js

@@ -6,7 +6,7 @@ var vendor = require('./vendor-BeoVq2Sv.js');
 var path$1 = require('node:path');
 var require$$1 = require('crypto');
 require('node:crypto');
-var createMarkdownRenderer = require('./create-markdown-renderer-CuMSwaNA.js');
+var createMarkdownRenderer = require('./create-markdown-renderer-Bj0NKzgi.js');
 var node_child_process = require('node:child_process');
 var util = require('node:util');
 var codeFrame = require('@babel/code-frame');
@@ -266,8 +266,8 @@ function slugify(value) {
   return value.toLowerCase().replace(/\//g, "--").replace(/[^a-z]+/g, "-").replace(/(^-+|-+$)/, "");
 }
 
-const md$2 = vendor.MarkdownIt();
-md$2.renderer.rules.fence = (tokens, idx, _options, collected) => {
+const md$4 = vendor.MarkdownIt();
+md$4.renderer.rules.fence = (tokens, idx, _options, collected) => {
   const { content, info } = tokens[idx];
   const { language, tags } = createMarkdownRenderer.parseInfostring(info);
   if (language === "import") {
@@ -288,7 +288,7 @@ function findExamples$1(doc) {
     return [];
   }
   const collected = [];
-  md$2.render(doc.body, collected);
+  md$4.render(doc.body, collected);
   return collected;
 }
 function getSuffix(tags) {
@@ -354,8 +354,8 @@ function extractExamplesProcessor(options) {
   };
 }
 
-const md$1 = vendor.MarkdownIt();
-md$1.renderer.rules.fence = (tokens, idx, _options, collected) => {
+const md$3 = vendor.MarkdownIt();
+md$3.renderer.rules.fence = (tokens, idx, _options, collected) => {
   const { content, info, map } = tokens[idx];
   const { language, tags } = createMarkdownRenderer.parseInfostring(info);
   const hashContent = `${map?.[0]}:${map?.[1]}:${info}:${content}`;
@@ -389,7 +389,7 @@ function findExamples(doc) {
     return [];
   }
   const collected = [];
-  md$1.render(doc.body, collected);
+  md$3.render(doc.body, collected);
   return collected;
 }
 function manifestPageFromDocument(doc) {
@@ -1076,19 +1076,17 @@ async function frontMatterFileReader(filePath, basePath) {
   return [doc];
 }
 
-const EMPTY_CHAR = "‐";
-const EM_DASH = "—";
 function getPropSlotDeprecated(prop) {
   const tags = prop.tags;
   if (!tags) {
-    return EMPTY_CHAR;
+    return null;
   }
   const tag = tags["deprecated"]?.[0];
   if (!tag?.description) {
-    return EMPTY_CHAR;
+    return null;
   }
   if (tag.description === true) {
-    return "true";
+    return "";
   } else {
     return tag.description;
   }
@@ -1096,39 +1094,37 @@ function getPropSlotDeprecated(prop) {
 function getEventDeprecated(event) {
   const tags = event.tags;
   if (!tags) {
-    return EMPTY_CHAR;
+    return null;
   }
   const tag = tags.find((it) => it.title === "deprecated");
   if (!tag?.content) {
-    return EMPTY_CHAR;
+    return null;
   }
   if (tag.content === true) {
-    return "true";
+    return "";
   } else {
     return tag.content;
   }
 }
 function translateProps(props) {
-  const translatedProps = [];
-  for (const prop of props) {
-    const translatedProp = {
+  return props.map((prop) => {
+    const defaultValue = prop.defaultValue ? { value: prop.defaultValue.value } : null;
+    return {
       name: prop.name,
-      description: prop.description ?? EMPTY_CHAR,
-      type: prop.type?.name ?? EMPTY_CHAR,
-      required: prop.required ? "true" : "false",
-      default: prop.defaultValue?.value ?? EMPTY_CHAR,
+      description: prop.description ?? null,
+      type: prop.type?.name ?? null,
+      required: Boolean(prop.required),
+      default: defaultValue,
       deprecated: getPropSlotDeprecated(prop)
     };
-    translatedProps.push(translatedProp);
-  }
-  return translatedProps;
+  });
 }
 function translateEvents(events) {
   const translatedEvents = [];
   for (const event of events) {
     const translatedEvent = {
       name: event.name,
-      description: event.description ?? EMPTY_CHAR,
+      description: event.description ?? null,
       properties: translateEventProperties(event),
       deprecated: getEventDeprecated(event)
     };
@@ -1140,10 +1136,12 @@ function translateEventProperties(event) {
   const properties = event.properties;
   const types = event.type ? Object.values(event.type.names) : [];
   if (!properties && !types.length) {
-    return EMPTY_CHAR;
+    return [];
   }
   if (!properties) {
-    return `<anonymous>: ${String(types)}`;
+    return [
+      { name: "<anonymous>", type: String(types), description: null }
+    ];
   }
   const translatedProperties = [];
   for (let i = 0; i < properties.length; i++) {
@@ -1151,19 +1149,22 @@ function translateEventProperties(event) {
     const name = property.name ?? "<anonymous>";
     const eventType = types[i];
     const hasEventType = !eventType || eventType !== "undefined";
-    const resolvedType = hasEventType ? eventType : String(property.type.names);
-    const type = `: ${resolvedType}`;
-    const description = property.description ? ` ${EM_DASH} ${property.description}` : "";
-    translatedProperties.push(`${name}${type}${description}`);
+    const type = hasEventType ? eventType : String(property.type.names);
+    const description = typeof property.description === "string" ? property.description : null;
+    translatedProperties.push({
+      name,
+      type,
+      description
+    });
   }
-  return translatedProperties.join("\n");
+  return translatedProperties;
 }
 function translateSlots(slots) {
   const translatedSlots = [];
   for (const slot of slots) {
     const translatedSlot = {
       name: slot.name,
-      description: slot.description ?? EMPTY_CHAR,
+      description: slot.description ?? null,
       bindings: translateSlotBindings(slot),
       deprecated: getPropSlotDeprecated(slot)
     };
@@ -1173,16 +1174,20 @@ function translateSlots(slots) {
 }
 function translateSlotBindings(slot) {
   if (!slot.bindings) {
-    return EMPTY_CHAR;
+    return [];
   }
   const translatedBindings = [];
   for (const binding of slot.bindings) {
-    const name = binding.name ?? EMPTY_CHAR;
-    const type = binding.type ? `: ${binding.type.name}` : "";
-    const description = binding.description ? ` ${EM_DASH} ${binding.description}` : "";
-    translatedBindings.push(`${name}${type}${description}`);
+    const name = binding.name ?? "<anonymous>";
+    const type = binding.type?.name ?? "unknown";
+    const description = typeof binding.description === "string" ? binding.description : null;
+    translatedBindings.push({
+      name,
+      type,
+      description
+    });
   }
-  return translatedBindings.join("\n");
+  return translatedBindings;
 }
 async function translateAPI(filePath) {
   const api = await vueDocgenApi.parse(filePath);
@@ -1200,69 +1205,182 @@ async function translateAPI(filePath) {
     }
   }
   return {
+    name: api.displayName,
+    slug: slugify(api.displayName),
     props,
     events,
     slots
   };
 }
 
-const md = vendor.MarkdownIt({ breaks: true });
-function generateTableHead(headers) {
-  return [
-    "<thead><tr>",
-    ...headers.map((header) => `<th>${header}</th>`),
-    "</tr></thead>"
-  ].join("");
-}
-function generateTableBody(content) {
-  const rows = content.map((row) => {
-    return [
-      "<tr>",
-      ...row.map((value) => `<td>${md.render(value)}</td>`),
-      "</tr>"
-    ].join("");
-  });
-  return ["<tbody>", ...rows, "</tbody>"].join("");
-}
-function generateTable(caption, headers, content) {
-  return [
-    '<div class="docs-table"><table>',
-    `<caption>${caption}</caption>`,
-    generateTableHead(headers),
-    generateTableBody(content),
-    "</table></div>"
-  ].join("");
+const md$2 = vendor.MarkdownIt();
+const EMPTY_CHAR$2 = "&#8208;";
+function render$3(text) {
+  return text ? md$2.render(text) : EMPTY_CHAR$2;
+}
+function renderInline$2(text) {
+  return text ? md$2.renderInline(text) : EMPTY_CHAR$2;
+}
+function generatePropTable(slug, props) {
+  return (
+    /* HTML */
+    `
+        <next-heading-level id="${slug}-props">
+            <a class="header-anchor" href="#${slug}-props">Props</a>
+        </next-heading-level>
+        <dl class="docs-api docs-api--slots">
+            ${props.map((prop) => {
+      const { name } = prop;
+      const id = `${slug}-slot-${name}`;
+      return (
+        /* HTML */
+        `
+                        <dt>
+                            <code id="${id}"
+                                ><a class="docs-api__anchor" href="#${id}"
+                                    ><span class="docs-api__name">${name}</span
+                                    >: ${prop.type}</a
+                                ></code
+                            >
+                            ${prop.required ? "" : `<span class="docs-tag docs-tag--default">Optional</span>`}
+                            ${prop.deprecated === null ? "" : `<span class="docs-tag docs-tag--deprecated">Deprecated</span>`}
+                        </dt>
+                        <dd>
+                            ${render$3(prop.description)}
+                            ${prop.default ? `<p class="doc-api__item">Default: <code>${prop.default.value}</code></p>` : ""}
+                            ${prop.deprecated ? `<p class="doc-api__item docs-deprecated">Deprecated: ${renderInline$2(prop.deprecated)}</p>` : ""}
+                        </dd>
+                    `
+      );
+    }).join("")}
+        </dl>
+    `
+  );
 }
 
-function capitalize(text) {
-  return `${text.charAt(0).toUpperCase()}${text.slice(1)}`;
+const md$1 = vendor.MarkdownIt();
+const EMPTY_CHAR$1 = "&#8208;";
+const EM_DASH$1 = `<span role="presentation">&mdash;</span>`;
+function render$2(text) {
+  return text ? md$1.render(text) : EMPTY_CHAR$1;
+}
+function renderInline$1(text) {
+  return text ? md$1.renderInline(text) : EMPTY_CHAR$1;
+}
+function generateEventTable(slug, events) {
+  return (
+    /* HTML */
+    `
+        <next-heading-level id="${slug}-events">
+            <a class="header-anchor" href="#${slug}-events">Events</a>
+        </next-heading-level>
+        <dl class="docs-api docs-api--events">
+            ${events.map((event) => {
+      const { name } = event;
+      const id = `${slug}-event-${name}`;
+      const haveProperties = event.properties.length > 0;
+      return (
+        /* HTML */
+        `
+                        <dt>
+                            <code id="${id}"
+                                ><a class="docs-api__anchor" href="#${id}"
+                                    ><span class="docs-api__name"
+                                        >${name}</span
+                                    ></a
+                                ></code
+                            >
+                            ${event.deprecated === null ? "" : `<span class="docs-tag docs-tag--deprecated">Deprecated</span>`}
+                        </dt>
+                        <dd>
+                            ${render$2(event.description)}
+                            ${haveProperties ? `<p class="docs-api__list-title">Arguments:</p><ul class="docs-api__list">` : ""}
+                            ${event.properties.map((it) => {
+          if (it.description) {
+            return `<li><code>${it.name}: ${it.type}</code> ${EM_DASH$1} ${it.description}</li>`;
+          } else {
+            return `<li><code>${it.name}: ${it.type}</code></li>`;
+          }
+        }).join("")}
+                            ${haveProperties ? `</ul>` : ""}
+                            ${event.deprecated ? `<p class="docs-api__deprecated docs-deprecated">Deprecated: ${renderInline$1(event.deprecated)}</p>` : ""}
+                        </dd>
+                    `
+      );
+    }).join("")}
+        </dl>
+    `
+  );
 }
-function parseAPIToArray(api) {
-  const content = [];
-  const headers = Object.keys(api[0]);
-  const capitalizedHeaders = headers.map(capitalize);
-  content.push(capitalizedHeaders);
-  for (const row of api) {
-    content.push(Object.values(row));
-  }
-  return content;
+
+const md = vendor.MarkdownIt();
+const EMPTY_CHAR = "&#8208;";
+const EM_DASH = `<span role="presentation">&mdash;</span>`;
+function render$1(text) {
+  return text ? md.render(text) : EMPTY_CHAR;
+}
+function renderInline(text) {
+  return text ? md.renderInline(text) : EMPTY_CHAR;
+}
+function generateSlotTable(slug, slots) {
+  return (
+    /* HTML */
+    `
+        <next-heading-level id="${slug}-slots">
+            <a class="header-anchor" href="#${slug}-slots">Slots</a>
+        </next-heading-level>
+        <dl class="docs-api docs-api--slots">
+            ${slots.map((slot) => {
+      const { name } = slot;
+      const id = `${slug}-slot-${name}`;
+      const haveBindings = slot.bindings.length > 0;
+      return (
+        /* HTML */
+        `
+                        <dt>
+                            <code id="${id}"
+                                ><a class="docs-api__anchor" href="#${id}"
+                                    ><span class="docs-api__name"
+                                        >${name}</span
+                                    ></a
+                                ></code
+                            >
+                            ${slot.deprecated === null ? "" : `<span class="docs-tag docs-tag--deprecated">Deprecated</span>`}
+                        </dt>
+                        <dd>
+                            ${render$1(slot.description)}
+                            ${haveBindings ? `<p class="docs-api__list-title">Bindings:</p><ul class="docs-api__list">` : ""}
+                            ${slot.bindings.map((it) => {
+          if (it.description) {
+            return `<li><code>${it.name}: ${it.type}</code> ${EM_DASH} ${it.description}</li>`;
+          } else {
+            return `<li><code>${it.name}: ${it.type}</code></li>`;
+          }
+        }).join("")}
+                            ${haveBindings ? `</ul>` : ""}
+                            ${slot.deprecated ? `<p class="docs-api__deprecated docs-deprecated">Deprecated: ${renderInline(slot.deprecated)}</p>` : ""}
+                        </dd>
+                    `
+      );
+    }).join("")}
+        </dl>
+    `
+  );
 }
+
 function parseAPI(filePath, api) {
   const relative = createMarkdownRenderer.normalizePath(filePath);
   const parsedPath = path$1.parse(relative);
   const componentName = parsedPath.name;
   let html = "";
   if (api.props.length) {
-    const propsArray = parseAPIToArray(api.props);
-    html += generateTable("Props", propsArray[0], propsArray.slice(1));
+    html += generatePropTable(api.slug, api.props);
   }
   if (api.events.length) {
-    const eventsArray = parseAPIToArray(api.events);
-    html += generateTable("Events", eventsArray[0], eventsArray.slice(1));
+    html += generateEventTable(api.slug, api.events);
   }
   if (api.slots.length) {
-    const slotsArray = parseAPIToArray(api.slots);
-    html += generateTable("Slots", slotsArray[0], slotsArray.slice(1));
+    html += generateSlotTable(api.slug, api.slots);
   }
   return {
     id: `fs:${filePath.replace(/\\/g, "/")}`,

package/dist/markdown.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var createMarkdownRenderer = require('./create-markdown-renderer-CuMSwaNA.js');
+var createMarkdownRenderer = require('./create-markdown-renderer-Bj0NKzgi.js');
 require('./vendor-BeoVq2Sv.js');
 require('node:url');
 require('node:path');

package/dist/style/core.css

@@ -1,4 +1,41 @@
 @charset "UTF-8";
+.docs-api dt code {
+  margin-left: -0.25rem;
+}
+.docs-api dd {
+  margin-bottom: 2rem;
+}
+.docs-api p {
+  margin-bottom: 0.5rem;
+}
+.docs-api__name {
+  font-weight: bold;
+}
+.docs-api__deprecated, .docs-api__item, .docs-api__list-title {
+  margin: 1rem 0 0;
+}
+
+#content a.docs-api__anchor {
+  color: var(--docs-text-color-default);
+  text-decoration: none;
+}
+#content a.docs-api__anchor:hover {
+  text-decoration: underline;
+}
+#content a.docs-api__anchor::before {
+  content: "#";
+  display: inline-block;
+  font-size: 1em;
+  margin-left: -1em;
+  visibility: hidden;
+  width: 1em;
+  color: rgba(158, 158, 158, 0.6509803922);
+  text-decoration: none;
+}
+#content a.docs-api__anchor:hover::before {
+  visibility: visible;
+}
+
 :root {
   --docs-breakpoint-sm: 640px;
   --docs-breakpoint-md: 1024px;
@@ -611,6 +648,11 @@ main {
   border-color: var(--docs-tags-optional-border-color);
   color: var(--docs-tags-optional-text-color);
 }
+.docs-tag--deprecated {
+  background-color: var(--docs-tags-deprecated-background-color);
+  border-color: var(--docs-tags-deprecated-border-color);
+  color: var(--docs-tags-deprecated-text-color);
+}
 
 #version-banner {
   margin: 0;
@@ -843,11 +885,11 @@ h6 code {
   text-decoration: inherit;
 }
 
-#content a:not(.code-preview a) {
+#content a:where(:not(.code-preview a)) {
   color: var(--docs-text-color-default);
 }
 
-#content a:not(.code-preview a, h2 a, h3 a, h4 a, h5 a) {
+#content a:where(:not(.code-preview a, h2 a, h3 a, h4 a, h5 a)) {
   text-decoration: underline;
   text-decoration-thickness: 1px;
   color: var(--f-text-color-link);
@@ -855,7 +897,7 @@ h6 code {
   text-underline-offset: 0.15rem;
 }
 
-#content a:hover:not(.code-preview a, h2 a, h3 a, h4 a, h5 a) {
+#content a:where(:hover:not(.code-preview a, h2 a, h3 a, h4 a, h5 a)) {
   color: var(--f-text-color-default);
   text-decoration-color: var(--docs-text-link-hover);
 }
@@ -1017,52 +1059,6 @@ main #aside dd {
   margin: 0 0 1.5rem;
 }
 
-.docs-table {
-  overflow-x: auto;
-  margin-bottom: 48px;
-}
-
-.docs-table table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.docs-table p {
-  margin: 0;
-}
-
-.docs-table caption {
-  text-align: left;
-  font-size: var(--f-font-size-large);
-  font-weight: var(--f-font-weight-bold);
-  margin-top: 0.5rem;
-}
-
-.docs-table thead {
-  border-bottom: 1px solid #8d8e91;
-}
-
-.docs-table th {
-  padding-right: 16px;
-  padding-bottom: 4px;
-  padding-left: 8px;
-  text-align: left;
-  font-weight: var(--f-font-weight-medium);
-  white-space: nowrap;
-}
-
-/* not: turn off for additional tables inside the table */
-.docs-table tr:nth-child(even):not(.api-table tr tr) {
-  background-color: #f4f4f4;
-}
-
-.docs-table td {
-  color: rgb(51, 51, 51);
-  padding: 1rem 1rem 1rem 0.5rem;
-  vertical-align: top;
-  border-bottom: 1px solid rgb(232, 232, 232);
-}
-
 .code-preview main,
 .code-preview header,
 .code-preview footer {
@@ -1227,4 +1223,8 @@ kbd {
 
 #search-results .list__item__itempane:focus {
   background-color: #f4f4f4;
+}
+
+.docs-deprecated {
+  color: var(--docs-error-color);
 }

package/dist/style/index.css

@@ -1,4 +1,41 @@
 @charset "UTF-8";
+.docs-api dt code {
+  margin-left: -0.25rem;
+}
+.docs-api dd {
+  margin-bottom: 2rem;
+}
+.docs-api p {
+  margin-bottom: 0.5rem;
+}
+.docs-api__name {
+  font-weight: bold;
+}
+.docs-api__deprecated, .docs-api__item, .docs-api__list-title {
+  margin: 1rem 0 0;
+}
+
+#content a.docs-api__anchor {
+  color: var(--docs-text-color-default);
+  text-decoration: none;
+}
+#content a.docs-api__anchor:hover {
+  text-decoration: underline;
+}
+#content a.docs-api__anchor::before {
+  content: "#";
+  display: inline-block;
+  font-size: 1em;
+  margin-left: -1em;
+  visibility: hidden;
+  width: 1em;
+  color: rgba(158, 158, 158, 0.6509803922);
+  text-decoration: none;
+}
+#content a.docs-api__anchor:hover::before {
+  visibility: visible;
+}
+
 :root {
   --docs-breakpoint-sm: 640px;
   --docs-breakpoint-md: 1024px;
@@ -611,6 +648,11 @@ main {
   border-color: var(--docs-tags-optional-border-color);
   color: var(--docs-tags-optional-text-color);
 }
+.docs-tag--deprecated {
+  background-color: var(--docs-tags-deprecated-background-color);
+  border-color: var(--docs-tags-deprecated-border-color);
+  color: var(--docs-tags-deprecated-text-color);
+}
 
 #version-banner {
   margin: 0;
@@ -843,11 +885,11 @@ h6 code {
   text-decoration: inherit;
 }
 
-#content a:not(.code-preview a) {
+#content a:where(:not(.code-preview a)) {
   color: var(--docs-text-color-default);
 }
 
-#content a:not(.code-preview a, h2 a, h3 a, h4 a, h5 a) {
+#content a:where(:not(.code-preview a, h2 a, h3 a, h4 a, h5 a)) {
   text-decoration: underline;
   text-decoration-thickness: 1px;
   color: var(--f-text-color-link);
@@ -855,7 +897,7 @@ h6 code {
   text-underline-offset: 0.15rem;
 }
 
-#content a:hover:not(.code-preview a, h2 a, h3 a, h4 a, h5 a) {
+#content a:where(:hover:not(.code-preview a, h2 a, h3 a, h4 a, h5 a)) {
   color: var(--f-text-color-default);
   text-decoration-color: var(--docs-text-link-hover);
 }
@@ -1017,52 +1059,6 @@ main #aside dd {
   margin: 0 0 1.5rem;
 }
 
-.docs-table {
-  overflow-x: auto;
-  margin-bottom: 48px;
-}
-
-.docs-table table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.docs-table p {
-  margin: 0;
-}
-
-.docs-table caption {
-  text-align: left;
-  font-size: var(--f-font-size-large);
-  font-weight: var(--f-font-weight-bold);
-  margin-top: 0.5rem;
-}
-
-.docs-table thead {
-  border-bottom: 1px solid #8d8e91;
-}
-
-.docs-table th {
-  padding-right: 16px;
-  padding-bottom: 4px;
-  padding-left: 8px;
-  text-align: left;
-  font-weight: var(--f-font-weight-medium);
-  white-space: nowrap;
-}
-
-/* not: turn off for additional tables inside the table */
-.docs-table tr:nth-child(even):not(.api-table tr tr) {
-  background-color: #f4f4f4;
-}
-
-.docs-table td {
-  color: rgb(51, 51, 51);
-  padding: 1rem 1rem 1rem 0.5rem;
-  vertical-align: top;
-  border-bottom: 1px solid rgb(232, 232, 232);
-}
-
 .code-preview main,
 .code-preview header,
 .code-preview footer {
@@ -1229,6 +1225,10 @@ kbd {
   background-color: #f4f4f4;
 }
 
+.docs-deprecated {
+  color: var(--docs-error-color);
+}
+
 :root {
   --docs-font-family: arial, "Helvetica Neue", sans-serif;
   --docs-font-weight: normal;
@@ -1270,6 +1270,9 @@ kbd {
   --docs-tags-optional-background-color: transparent;
   --docs-tags-optional-border-color: #5f6165;
   --docs-tags-optional-text-color: var(--docs-text-color-discrete);
+  --docs-tags-deprecated-background-color: var(--docs-error-color);
+  --docs-tags-deprecated-border-color: #1b1e23;
+  --docs-tags-deprecated-text-color: var(--docs-error-background);
   --docs-topnav-background-color: transparent;
   --docs-topnav-link-color-default: var(--docs-text-color-default);
   --docs-topnav-link-color-hover: var(--docs-text-color-link-hover);

package/dist/style/site.css

@@ -39,6 +39,9 @@
   --docs-tags-optional-background-color: transparent;
   --docs-tags-optional-border-color: #5f6165;
   --docs-tags-optional-text-color: var(--docs-text-color-discrete);
+  --docs-tags-deprecated-background-color: var(--docs-error-color);
+  --docs-tags-deprecated-border-color: #1b1e23;
+  --docs-tags-deprecated-text-color: var(--docs-error-background);
   --docs-topnav-background-color: transparent;
   --docs-topnav-link-color-default: var(--docs-text-color-default);
   --docs-topnav-link-color-hover: var(--docs-text-color-link-hover);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsakringskassan/docs-generator",
-  "version": "2.16.1",
+  "version": "2.17.0",
   "description": "Documentation generator",
   "keywords": [
     "documentation"
@@ -35,7 +35,7 @@
   "scripts": {
     "prebuild": "npm run --workspaces --if-present build",
     "build": "tsc && node build.mjs",
-    "postbuild": "node generate-docs.mjs",
+    "postbuild": "node generate-docs.mjs && html-validate public",
     "build:docs": "node generate-docs.mjs",
     "eslint": "eslint --cache .",
     "eslint:fix": "eslint --fix .",