spec-up-t 1.1.24 → 1.1.26

package/assets/js/search.js

@@ -41,54 +41,62 @@ function inPageSearch() {
 
 
    /* Add DOM elements: search container with search bar, back and forth buttons, and results count */
-
-   let searchContainer = document.createElement("div");
-   searchContainer.setAttribute("id", "container-" + antiNameCollisions);
-   searchContainer.setAttribute("class", "container-" + antiNameCollisions);
+   const searchContainer = document.createElement("div");
+   searchContainer.setAttribute("id", `container-${antiNameCollisions}`);
+   searchContainer.classList.add("input-group", "mb-3", "d-flex", "align-items-center"); // Bootstrap 5.3 input group with margin bottom
+   searchContainer.setAttribute("role", "search"); // ARIA role for search container
    terminologySectionUtilityContainer.appendChild(searchContainer);
 
    // Add an input element (for search)
-   let searchInput = document.createElement("input");
+   const searchInput = document.createElement("input");
    searchInput.setAttribute("type", "text");
    searchInput.setAttribute("id", antiNameCollisions);
+   searchInput.classList.add("form-control");
    searchInput.setAttribute("placeholder", searchBarPlaceholder);
+   searchInput.setAttribute("aria-label", "Search terms"); // ARIA label for screen readers
+   searchInput.setAttribute("autocomplete", "off"); // Prevent browser autocomplete
    searchContainer.appendChild(searchInput);
 
-   // setTimeout(() => {
-   //    searchInput.focus();
-   // }, 1000);
-
-   // Add a container for the back and forth buttons
-   const backAndForthButtonsContainer = document.createElement("div");
-   backAndForthButtonsContainer.setAttribute("id", "back-and-forth-buttons-container-" + antiNameCollisions);
-
-   // Add a back button to the container for the back and forth buttons
-   const goToPreviousMatchButton = document.createElement('button');
-   goToPreviousMatchButton.setAttribute("id", "one-match-backward-" + antiNameCollisions);
-   goToPreviousMatchButton.setAttribute("disabled", "disabled");
-   goToPreviousMatchButton.setAttribute("title", "Go to previous match. Shortcut key: Left Arrow");
-   goToPreviousMatchButton.textContent = "▲";
-   backAndForthButtonsContainer.appendChild(goToPreviousMatchButton);
-
-   // Add a forward button to the container for the back and forth buttons
-   const goToNextMatchButton = document.createElement('button');
-   goToNextMatchButton.setAttribute("id", "one-match-forward-" + antiNameCollisions);
-   goToNextMatchButton.setAttribute("disabled", "disabled");
-   goToNextMatchButton.setAttribute("title", "Go to next match. Shortcut key: Right Arrow");
-   goToNextMatchButton.textContent = "▼";
-   backAndForthButtonsContainer.appendChild(goToNextMatchButton);
-
-   // Add the container for the back and forth buttons
-   // search.after(backAndForthButtonsContainer);
-   searchContainer.appendChild(backAndForthButtonsContainer);
-
-   // Add number of matches
+   // Add a container for the navigation buttons and results
+   const buttonGroup = document.createElement("div");
+   buttonGroup.classList.add("input-group-append"); // Bootstrap 5.3 button group styling
+
+   // Add a back button
+   const goToPreviousMatchButton = document.createElement("button");
+   goToPreviousMatchButton.setAttribute("id", `one-match-backward-${antiNameCollisions}`);
+   goToPreviousMatchButton.classList.add("btn", "btn-outline-secondary");
+   goToPreviousMatchButton.setAttribute("type", "button"); // Specify button type
+   goToPreviousMatchButton.setAttribute("disabled", "true"); // Bootstrap 5 uses "true" instead of "disabled"
+   goToPreviousMatchButton.setAttribute("title", "Go to previous match (Left Arrow)");
+   goToPreviousMatchButton.setAttribute("aria-label", "Go to previous match");
+   goToPreviousMatchButton.innerHTML = '<span aria-hidden="true">▲</span>'; // Hide symbol from screen readers
+   buttonGroup.appendChild(goToPreviousMatchButton);
+
+   // Add a forward button
+   const goToNextMatchButton = document.createElement("button");
+   goToNextMatchButton.setAttribute("id", `one-match-forward-${antiNameCollisions}`);
+   goToNextMatchButton.classList.add("btn", "btn-outline-secondary");
+   goToNextMatchButton.setAttribute("type", "button");
+   goToNextMatchButton.setAttribute("disabled", "true");
+   goToNextMatchButton.setAttribute("title", "Go to next match (Right Arrow)");
+   goToNextMatchButton.setAttribute("aria-label", "Go to next match");
+   goToNextMatchButton.innerHTML = '<span aria-hidden="true">▼</span>';
+   buttonGroup.appendChild(goToNextMatchButton);
+
+
+   // Add number of matches with accessibility
    const totalMatchesSpan = document.createElement("span");
-   totalMatchesSpan.setAttribute("id", "total-matches-" + antiNameCollisions);
+   totalMatchesSpan.setAttribute("id", `total-matches-${antiNameCollisions}`);
+   totalMatchesSpan.classList.add("input-group-text"); // Bootstrap 5.3 styling
    totalMatchesSpan.innerHTML = `0 ${matches}`;
-   // backAndForthButtonsContainer.after(totalMatchesSpan);
+   totalMatchesSpan.setAttribute("aria-live", "polite"); // Announce changes to screen readers
+   totalMatchesSpan.setAttribute("role", "status"); // Define as status region
    searchContainer.appendChild(totalMatchesSpan);
-   
+
+   // Add the button group to the container
+   searchContainer.appendChild(buttonGroup);
+
+
    /* END Add DOM elements */
 
    // Add an event listener to the input element

package/assets/js/token-input.js

@@ -8,7 +8,7 @@
 function tokenInput() {
    let buttonTokenInput = document.createElement("button");
    buttonTokenInput.classList.add("button-token-input");
-   buttonTokenInput.classList.add("btn");
+   buttonTokenInput.classList.add("btn", "btn-sm", "btn-outline-secondary","me-1");
    buttonTokenInput.innerHTML = "🔑";
    document.querySelector('#repo_issues').insertAdjacentElement('afterend', buttonTokenInput);
    buttonTokenInput.addEventListener('click', () => {

package/index.js

@@ -267,7 +267,7 @@ module.exports = async function (options = {}) {
           const termsIndex = (spec.markdown_paths || ['spec.md']).indexOf('terms-and-definitions-intro.md');
           if (termsIndex !== -1) {
                 // Append the HTML string to the content of terms-and-definitions-intro.md. This string is used to create a div that is used to insert an alphabet index, and a div that is used as the starting point of the terminology index. The newlines are essential for the correct rendering of the markdown.
-            docs[termsIndex] += '\n\n<div id="terminology-section-utility-container"></div>\n\n<div id="terminology-section-start-h7vc6omi2hr2880"></div>\n\n<hr>\n\n';
+            docs[termsIndex] += '\n\n<div id="terminology-section-utility-container"></div>\n\n<div id="terminology-section-start-h7vc6omi2hr2880"></div>\n\n';
           }
 
           let doc = docs.join("\n");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spec-up-t",
-  "version": "1.1.24",
+  "version": "1.1.26",
   "description": "Technical specification drafting tool that generates rich specification documents from markdown. Forked from https://github.com/decentralized-identity/spec-up by Daniel Buchner (https://github.com/csuwildcat)",
   "main": "./index",
   "repository": {

package/src/asset-map.json

@@ -1,7 +1,7 @@
 {
   "head": {
     "css": [
-      "assets/css/bootstrap-parts.css",
+      "assets/css/theme-vars.css",
       "assets/css/custom-elements.css",
       "assets/css/prism.css",
       "assets/css/chart.css",
@@ -15,11 +15,20 @@
       "assets/css/modal.css",
       "assets/css/create-alphabet-index.css",
       "assets/css/pdf-download.css",
+      "assets/css/terms-and-definitions.css",
+      "assets/css/bootstrap.min.css",
+      "assets/css/header-navbar.css",
+      "assets/css/sidebar-toc.css",
+      "assets/css/loader.css",
+      "assets/css/external-links.css",
+      "assets/css/repo-issues.css",
+      "assets/css/adjust-font-size.css",
       "assets/css/index.css"
     ],
     "js": [
       "assets/js/utils.js",
-      "assets/js/custom-elements.js"
+      "assets/js/custom-elements.js",
+      "assets/js/color-modes.js"
     ]
   },
   "body": {
@@ -49,8 +58,11 @@
       "assets/js/collapse-definitions.js",
       "assets/js/collapse-meta-info.js",
       "assets/js/add-href-to-snapshot-link.js",
+      "assets/js/adjust-font-size.js",
+      "assets/js/close-off-canvas-menu.js",
       "assets/js/index.js",
-      "assets/js/css-helper.js"
+      "assets/js/css-helper.js",
+      "assets/js/bootstrap.bundle.min.js"
     ]
   }
 }

package/src/markdown-it-extensions.js

@@ -134,34 +134,4 @@ module.exports = function (md, templates = {}) {
 
     return originalRender(tokens, idx, options, env, self);
   };
-
-  // Override the default `dd_open` renderer
-  md.renderer.rules.dd_open = (tokens, idx, options, env, self) => {
-    // Get the next token (the content inside the <dd>)
-    const contentToken = tokens[idx + 1];
-    
-    if (contentToken.tag === 'p') {
-      return '<dd>';
-    }
-
-    if (contentToken.tag === 'table') {
-      return '<dd class="contains-table">';
-    }
-
-    // Default behavior
-    return '';
-  };
-
-  // Override the default `dd_close` renderer
-  md.renderer.rules.dd_close = (tokens, idx, options, env, self) => {
-    // Get the previous token (the content inside the <dd>)
-    const contentToken = tokens[idx - 1];
-
-    if (contentToken.tag === 'p') {
-      return '</dd>';
-    }
-
-    // Default behavior
-    return '';
-  };
 };

package/templates/template.html

@@ -1,80 +1,241 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html lang="en" data-bs-theme="auto">
 
 <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="generator" content="Spec-Up-T" />
-    <title>${title}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="${description}">
     <meta name="author" content="${author}">
     <link rel="icon" href="${specFavicon}" type="image/x-icon">
-    <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@300;400&display=swap" rel="stylesheet">
+    <meta name="generator" content="Spec-Up-T" />
+    <title>${title}</title>
 
     ${assetsHead}
     ${xtrefsData}
+
+    <!-- Template based on https://getbootstrap.com/docs/5.3/examples/dashboard/ -->
+    <!-- Custom styles for this template -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css" rel="stylesheet">
 </head>
 
 <body features="${features}">
-
     ${assetsSvg}
 
-    <main>
-
-        <header id="header" class="panel-header">
-            <span id="toc_toggle" panel-toggle="toc">
-                <svg icon>
-                    <use xlink:href="#svg-nested-list"></use>
-                </svg>
-            </span>
-            <a id="logo" href="${specLogoLink}">
-                <img src="${specLogo}" />
-            </a>
-            <span id="repo_issues" issue-count animate panel-toggle="repo_issues">
-                <svg icon>
-                    <use xlink:href="#svg-github"></use>
-                </svg>
-            </span>
-        </header>
-
-        <article id="content">
-            ${render}
-        </article>
-
-    </main>
-
-    <slide-panels id="slidepanels">
-        <slide-panel id="repo_issues" options="right">
-            <header class="panel-header">
-                <span>
-                    <svg icon>
-                        <use xlink:href="#svg-github"></use>
+    <!-- Icons for hamburger menu, dark/light buttons  -->
+    <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+        <symbol id="check2" viewBox="0 0 16 16">
+            <path
+                d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
+        </symbol>
+        <symbol id="circle-half" viewBox="0 0 16 16">
+            <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" />
+        </symbol>
+        <symbol id="moon-stars-fill" viewBox="0 0 16 16">
+            <path
+                d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
+            <path
+                d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z" />
+        </symbol>
+        <symbol id="sun-fill" viewBox="0 0 16 16">
+            <path
+                d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
+        </symbol>
+    </svg>
+
+    <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
+        <symbol id="calendar3" viewBox="0 0 16 16">
+            <path
+                d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" />
+            <path
+                d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
+        </symbol>
+        <symbol id="cart" viewBox="0 0 16 16">
+            <path
+                d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
+        </symbol>
+        <symbol id="chevron-right" viewBox="0 0 16 16">
+            <path fill-rule="evenodd"
+                d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
+        </symbol>
+        <symbol id="door-closed" viewBox="0 0 16 16">
+            <path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z" />
+            <path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z" />
+        </symbol>
+        <symbol id="file-earmark" viewBox="0 0 16 16">
+            <path
+                d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z" />
+        </symbol>
+        <symbol id="file-earmark-text" viewBox="0 0 16 16">
+            <path
+                d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z" />
+            <path
+                d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z" />
+        </symbol>
+        <symbol id="gear-wide-connected" viewBox="0 0 16 16">
+            <path
+                d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z" />
+        </symbol>
+        <symbol id="graph-up" viewBox="0 0 16 16">
+            <path fill-rule="evenodd"
+                d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z" />
+        </symbol>
+        <symbol id="house-fill" viewBox="0 0 16 16">
+            <path
+                d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z" />
+            <path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z" />
+        </symbol>
+        <symbol id="list" viewBox="0 0 16 16">
+            <path fill-rule="evenodd"
+                d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
+        </symbol>
+        <symbol id="people" viewBox="0 0 16 16">
+            <path
+                d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" />
+        </symbol>
+        <symbol id="plus-circle" viewBox="0 0 16 16">
+            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+            <path
+                d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
+        </symbol>
+        <symbol id="puzzle" viewBox="0 0 16 16">
+            <path
+                d="M3.112 3.645A1.5 1.5 0 0 1 4.605 2H7a.5.5 0 0 1 .5.5v.382c0 .696-.497 1.182-.872 1.469a.459.459 0 0 0-.115.118.113.113 0 0 0-.012.025L6.5 4.5v.003l.003.01c.004.01.014.028.036.053a.86.86 0 0 0 .27.194C7.09 4.9 7.51 5 8 5c.492 0 .912-.1 1.19-.24a.86.86 0 0 0 .271-.194.213.213 0 0 0 .039-.063v-.009a.112.112 0 0 0-.012-.025.459.459 0 0 0-.115-.118c-.375-.287-.872-.773-.872-1.469V2.5A.5.5 0 0 1 9 2h2.395a1.5 1.5 0 0 1 1.493 1.645L12.645 6.5h.237c.195 0 .42-.147.675-.48.21-.274.528-.52.943-.52.568 0 .947.447 1.154.862C15.877 6.807 16 7.387 16 8s-.123 1.193-.346 1.638c-.207.415-.586.862-1.154.862-.415 0-.733-.246-.943-.52-.255-.333-.48-.48-.675-.48h-.237l.243 2.855A1.5 1.5 0 0 1 11.395 14H9a.5.5 0 0 1-.5-.5v-.382c0-.696.497-1.182.872-1.469a.459.459 0 0 0 .115-.118.113.113 0 0 0 .012-.025L9.5 11.5v-.003a.214.214 0 0 0-.039-.064.859.859 0 0 0-.27-.193C8.91 11.1 8.49 11 8 11c-.491 0-.912.1-1.19.24a.859.859 0 0 0-.271.194.214.214 0 0 0-.039.063v.003l.001.006a.113.113 0 0 0 .012.025c.016.027.05.068.115.118.375.287.872.773.872 1.469v.382a.5.5 0 0 1-.5.5H4.605a1.5 1.5 0 0 1-1.493-1.645L3.356 9.5h-.238c-.195 0-.42.147-.675.48-.21.274-.528.52-.943.52-.568 0-.947-.447-1.154-.862C.123 9.193 0 8.613 0 8s.123-1.193.346-1.638C.553 5.947.932 5.5 1.5 5.5c.415 0 .733.246.943.52.255.333.48.48.675.48h.238l-.244-2.855zM4.605 3a.5.5 0 0 0-.498.55l.001.007.29 3.4A.5.5 0 0 1 3.9 7.5h-.782c-.696 0-1.182-.497-1.469-.872a.459.459 0 0 0-.118-.115.112.112 0 0 0-.025-.012L1.5 6.5h-.003a.213.213 0 0 0-.064.039.86.86 0 0 0-.193.27C1.1 7.09 1 7.51 1 8c0 .491.1.912.24 1.19.07.14.14.225.194.271a.213.213 0 0 0 .063.039H1.5l.006-.001a.112.112 0 0 0 .025-.012.459.459 0 0 0 .118-.115c.287-.375.773-.872 1.469-.872H3.9a.5.5 0 0 1 .498.542l-.29 3.408a.5.5 0 0 0 .497.55h1.878c-.048-.166-.195-.352-.463-.557-.274-.21-.52-.528-.52-.943 0-.568.447-.947.862-1.154C6.807 10.123 7.387 10 8 10s1.193.123 1.638.346c.415.207.862.586.862 1.154 0 .415-.246.733-.52.943-.268.205-.415.39-.463.557h1.878a.5.5 0 0 0 .498-.55l-.001-.007-.29-3.4A.5.5 0 0 1 12.1 8.5h.782c.696 0 1.182.497 1.469.872.05.065.091.099.118.115.013.008.021.01.025.012a.02.02 0 0 0 .006.001h.003a.214.214 0 0 0 .064-.039.86.86 0 0 0 .193-.27c.14-.28.24-.7.24-1.191 0-.492-.1-.912-.24-1.19a.86.86 0 0 0-.194-.271.215.215 0 0 0-.063-.039H14.5l-.006.001a.113.113 0 0 0-.025.012.459.459 0 0 0-.118.115c-.287.375-.773.872-1.469.872H12.1a.5.5 0 0 1-.498-.543l.29-3.407a.5.5 0 0 0-.497-.55H9.517c.048.166.195.352.463.557.274.21.52.528.52.943 0 .568-.447.947-.862 1.154C9.193 5.877 8.613 6 8 6s-1.193-.123-1.638-.346C5.947 5.447 5.5 5.068 5.5 4.5c0-.415.246-.733.52-.943.268-.205.415-.39.463-.557H4.605z" />
+        </symbol>
+        <symbol id="search" viewBox="0 0 16 16">
+            <path
+                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
+        </symbol>
+    </svg>
+
+    <header id="header" class="navbar sticky-top p-0 shadow">
+        <!-- Left-aligned elements -->
+        <button class="nav-link px-3 d-md-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu"
+            aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
+            <svg class="bi">
+                <use xlink:href="#list" />
+            </svg>
+        </button>
+
+        <a id="logo" href="${specLogoLink}">
+            <img class="m-1" src="${specLogo}" alt="" />
+        </a>
+        <!-- <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6 text-white" href="#">Spec-Up-T</a> -->
+
+        <!-- Spacer to push the following elements to the right -->
+        <div class="flex-grow-1"></div>
+
+        <!-- Right-aligned elements -->
+        <div class="d-flex align-items-center">
+
+            <!-- Issues side menu -->
+            <button id="repo_issues" issue-count animate class="btn btn-sm btn-outline-secondary ms-2" type="button"
+                data-bs-toggle="offcanvas" data-bs-target="#offcanvasIssues" aria-controls="offcanvasIssues">
+                Issues
+            </button>
+
+            <!-- Dark / Light theme selector -->
+            <div class="dropdown bd-mode-toggle me-2">
+                <button
+                    class="btn btn-bd-primary btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center"
+                    id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown"
+                    aria-label="Toggle theme (auto)">
+                    <svg class="bi theme-icon-active" width="1em" height="1em">
+                        <use href="#circle-half"></use>
                     </svg>
-                    <span issue-count></span>
-                </span>
-                <span class="repo-issue-toggle" panel-toggle="repo_issues">✕</span>
-            </header>
-            <ul id="repo_issue_list"></ul>
-        </slide-panel>
-
-        <slide-panel id="toc">
-            <header class="panel-header">
-                <span>Table of Contents</span>
-                <span panel-toggle="toc">✕</span>
-            </header>
-            <div id="toc_list">
-                ${toc}
+                    <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
+                </button>
+                <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
+                    <li>
+                        <button type="button" class="dropdown-item d-flex align-items-center"
+                            data-bs-theme-value="light" aria-pressed="false">
+                            <svg class="bi me-2 opacity-50" width="1em" height="1em">
+                                <use href="#sun-fill"></use>
+                            </svg>
+                            Light
+                            <svg class="bi ms-auto d-none" width="1em" height="1em">
+                                <use href="#check2"></use>
+                            </svg>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark"
+                            aria-pressed="false">
+                            <svg class="bi me-2 opacity-50" width="1em" height="1em">
+                                <use href="#moon-stars-fill"></use>
+                            </svg>
+                            Dark
+                            <svg class="bi ms-auto d-none" width="1em" height="1em">
+                                <use href="#check2"></use>
+                            </svg>
+                        </button>
+                    </li>
+                </ul>
+            </div>
+
+            <!-- Font size -->
+            <div class="adjust-font-size btn-group me-2" role="group">
+                <button title="Decrease font size" type="button"
+                    class="btn btn-sm btn-outline-secondary m-0 p-3 border-end-0" id="decreaseBtn"><span
+                        class="visually-hidden">Decrease font size</span>
+                </button>
+                <!-- <button type="button" class="btn btn-sm btn-outline-secondary m-0 px-2" id="resetBtn">0</button> -->
+                <button title="Increase font size" type="button"
+                    class="btn btn-sm btn-outline-secondary m-0 p-3 border-start-0" id="increaseBtn">
+                    <span class="visually-hidden">Increase font size</span>
+                </button>
+            </div>
+        </div>
+    </header>
+
+    <div class="container">
+        <div class="row">
+            <div class="sidebar border border-right col-md-4 col-lg-3 bg-body-tertiary">
+                <div class="offcanvas-md offcanvas-start bg-body-tertiary p-2 pt-5" tabindex="-1" id="sidebarMenu"
+                    aria-labelledby="sidebarMenuLabel">
+                    <div class="offcanvas-header">
+                        <h5 id="sidebarMenuLabel">Table of Contents</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
+                            data-bs-target="#sidebarMenu" aria-label="Close"></button>
+                    </div>
+                    <div id="toc" class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto">
+                        ${toc}
+                        <!-- href added via JS -->
+                        <a class="btn btn-outline-secondary mt-5" href="#">Snapshots</a>
+                        <a class="powered-by mx-auto p-2" href="https://github.com/trustoverip/spec-up-t"
+                            target="_blank" rel="noopener">Powered By Spec-Up-T</a>
+                    </div>
+                </div>
+            </div>
+
+            <main class="col-md-8 ms-sm-auto col-lg-9 px-md-4 pt-5">
+                <article id="content" class="">
+                    ${render}
+                </article>
+
+            </main>
+        </div>
+    </div>
+
+    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasIssues" aria-labelledby="offcanvasIssuesLabel">
+        <div class="offcanvas-header">
+            <h5 class="offcanvas-title" id="offcanvasIssuesLabel">Issues</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body">
+            <div>
+                <ul id="repo_issue_list"></ul>
             </div>
-            <!-- href added via JS -->
-            <div class="snapshots"><a href="#">Snapshots</a></div>
-            <div class="powered-by"><a href="https://github.com/trustoverip/spec-up-t" target="_blank" rel="noopener">Powered By Spec-Up-T</a></div>
-        </slide-panel>
-    </slide-panels>
+        </div>
+    </div>
     <div style="display: none;">
         ${externalReferences}
     </div>
+
+    <script>window.specConfig = ${ spec }</script>
+    ${assetsBody}
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js"
+        integrity="sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
+        crossorigin="anonymous"></script>
 </body>
-<script>window.specConfig = ${ spec }</script>
-${assetsBody}
 
 </html>

package/assets/css/bootstrap-parts.css

@@ -1,91 +0,0 @@
-/* Basic Bootstrap Button Styles, edited by Kor Dwarshuis */
-.btn {
-  display: inline-block;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  /* user-select: none; */
-  border: 1px solid #1D6DAE;
-  /* Ensure border is applied */
-  padding: 0.2rem 0.4rem;
-  font-size: 1rem;
-  /* Font size consistency */
-  line-height: 1.5;
-  border-radius: 0.25rem;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  color: #111;
-  background-color: transparent;
-  /* Ensure background color consistency */
-  text-decoration: none;
-  cursor: pointer;
-  /* Ensure pointer cursor */
-}
-
-/* Normalize button and a element */
-.btn,
-.btn:link,
-.btn:visited {
-  text-decoration: none;
-}
-
-.btn:hover,
-.btn:focus {
-  text-decoration: none;
-  outline: 0;
-  color: #fff;
-  background-color: #0056b3;
-  border-color: #004085;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
-}
-
-.btn.disabled,
-.btn:disabled {
-  opacity: 0.65;
-  pointer-events: none;
-  color: #fff;
-  background-color: #1D6DAE;
-  border-color: #1D6DAE;
-}
-
-/* Focus state for accessibility */
-.btn:focus {
-  outline: none;
-}
-
-.btn:not(:disabled):not(.disabled):active,
-.btn:not(:disabled):not(.disabled).active,
-.show>.btn.dropdown-toggle {
-  color: #fff;
-  background-color: #004085;
-  border-color: #002752;
-}
-
-.btn:not(:disabled):not(.disabled):active:focus,
-.btn:not(:disabled):not(.disabled).active:focus,
-.show>.btn.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
-}
-
-/* Remove default button and anchor styles */
-a.btn {
-  display: inline-block;
-}
-
-button.btn {
-  border: 1px solid #1D6DAE;
-  /* Reapply the border */
-  padding: 0.2rem 0.4rem;
-  /* Ensure padding matches */
-  background-color: transparent;
-  /* Match default background */
-  color: inherit;
-  /* Match font color */
-  font-size: 1rem;
-  /* Ensure font size consistency */
-  line-height: 1.5;
-  /* Ensure visual height consistency */
-  cursor: pointer;
-  /* Ensure pointer cursor */
-}
-
-/* End Basic Bootstrap Button Styles */