@nu-appdev/northwestern-starlight-theme 1.1.1 → 1.2.0

package/CHANGELOG.md

@@ -7,6 +7,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.0] - 2026-03-25
+
+### Added
+
+- Fullscreen Mermaid viewer: wheel zoom and double-click zoom anchor to the pointer position.
+- Zoom level badge (e.g. `84%`) in the fullscreen viewer.
+- GFM footnote styles: superscript `[n]` reference markers, footnotes section with separator, styled `↩︎` back-references.
+
+### Fixed
+
+- Mermaid diagrams sometimes breaking on Firefox and Safari. The toolbar script read `textContent` after `astro-mermaid` had already rendered SVG into the element. Reads `data-diagram` first now.
+- Horizontal rules in dark mode used `--nu-purple-140`, which was invisible against the background. Switched to `--nu-border-color`.
+
+### Accessibility
+
+- Fullscreen Mermaid overlay: `role="dialog"`, `aria-modal`, focus trap, focus restore on close.
+- White focus rings on overlay controls, theme toggle, and menu button (all sit on dark backgrounds where the purple ring was invisible).
+- Inline Mermaid toolbar buttons use a solid accent outline on focus instead of the near-invisible shadow ring.
+
 ## [1.1.1] - 2026-03-25
 
 ### Fixed
@@ -52,7 +71,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - OpenAPI plugin compatibility with method badge preservation
 - Reduced motion support for transitions
 
-[Unreleased]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.1.1...HEAD
+[Unreleased]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.2.0...HEAD
+[1.2.0]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.1.1...v1.2.0
 [1.1.1]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.1.0...v1.1.1
 [1.1.0]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/compare/v1.0.0...v1.1.0
 [1.0.0]: https://github.com/NIT-Administrative-Systems/northwestern-starlight-theme/releases/tag/v1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nu-appdev/northwestern-starlight-theme",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A Northwestern-branded theme for Astro Starlight",
   "license": "MIT",
   "author": "Danny Foster <danny@northwestern.edu>",

package/src/scripts/mermaid-toolbar.ts

@@ -34,8 +34,6 @@ const ICONS = {
         "M16 4h2a2 2 0 012 2v6a2 2 0 01-2 2h-8a2 2 0 01-2-2V6a2 2 0 012-2",
     ],
     code: ["M16 18l6-6-6-6", "M8 6l-6 6 6 6"],
-    fitWidth: ["M21 3H3v18h18V3z", "M9 3v18", "M15 3v18"],
-    fitHeight: ["M21 3H3v18h18V3z", "M3 9h18", "M3 15h18"],
 };
 
 function createSvgIcon(paths: string[], size = 14): SVGElement {
@@ -116,13 +114,24 @@ async function getMermaidRuntime() {
 function captureSource() {
     document.querySelectorAll<HTMLElement>("pre.mermaid").forEach((pre) => {
         if (mermaidSources.has(pre)) return;
-        const source = pre.textContent?.trim() || "";
-        if (source) mermaidSources.set(pre, source);
+        // Prefer data-diagram attribute (set by astro-mermaid before it renders SVG)
+        // over textContent, which may contain rendered SVG text nodes instead of source
+        const source = pre.getAttribute("data-diagram")?.trim() || pre.textContent?.trim() || "";
+        if (source) {
+            mermaidSources.set(pre, source);
+            // Persist source to data attribute so it survives across render cycles
+            if (!pre.hasAttribute("data-diagram")) {
+                pre.setAttribute("data-diagram", source);
+            }
+        }
     });
 }
 
 async function renderDiagram(container: HTMLElement, mode: MermaidThemeMode, index: number) {
-    const source = mermaidSources.get(container) ?? container.textContent?.trim();
+    const source =
+        mermaidSources.get(container) ??
+        container.getAttribute("data-diagram")?.trim() ??
+        container.textContent?.trim();
     if (!source) return;
     const mermaid = await getMermaidRuntime();
 
@@ -237,7 +246,7 @@ function initMermaidToolbar(): number {
             if (!svg) return;
 
             const action = btn.dataset.action;
-            if (action === "fullscreen") openFullscreen(svg, container, index);
+            if (action === "fullscreen") openFullscreen(svg, container, index, btn, e.detail === 0);
             else if (action === "download-svg") {
                 downloadSvg(svg, container, index);
                 showSuccess(btn, "Downloaded!");
@@ -247,9 +256,18 @@ function initMermaidToolbar(): number {
     return injected;
 }
 
-function openFullscreen(svg: SVGElement, container: HTMLElement, index: number) {
+function openFullscreen(
+    svg: SVGElement,
+    container: HTMLElement,
+    index: number,
+    triggerBtn?: HTMLElement,
+    keyboardOpen = false,
+) {
     const overlay = document.createElement("div");
     overlay.className = "nu-mermaid-overlay";
+    overlay.setAttribute("role", "dialog");
+    overlay.setAttribute("aria-modal", "true");
+    overlay.setAttribute("aria-label", "Mermaid diagram fullscreen viewer");
 
     // Controls
     const controls = document.createElement("div");
@@ -299,11 +317,9 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
         vbHeight = parts[3] || 600;
     }
 
-    function calcFitScale(mode: "both" | "width" | "height" = "both"): number {
+    function calcFitScale(): number {
         const maxW = window.innerWidth * 0.92;
         const maxH = (window.innerHeight - 120) * 0.92; // account for controls bar
-        if (mode === "width") return maxW / vbWidth;
-        if (mode === "height") return maxH / vbHeight;
         return Math.min(maxW / vbWidth, maxH / vbHeight);
     }
 
@@ -311,8 +327,13 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
     cloned.setAttribute("width", String(Math.round(vbWidth * initialScale)));
     cloned.setAttribute("height", String(Math.round(vbHeight * initialScale)));
 
+    const zoomBadge = document.createElement("span");
+    zoomBadge.className = "nu-mermaid-zoom-badge";
+    zoomBadge.textContent = "100%";
+
     wrapper.appendChild(cloned);
     viewport.appendChild(wrapper);
+    viewport.appendChild(zoomBadge);
     overlay.appendChild(viewport);
 
     overlay.style.opacity = "0";
@@ -333,6 +354,7 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
     function updateTransform() {
         wrapper.style.transform = `translate(${panX}px, ${panY}px) scale(${scale})`;
         wrapper.style.transformOrigin = "center center";
+        zoomBadge.textContent = `${Math.round(scale * 100)}%`;
     }
 
     function zoomTo(newScale: number) {
@@ -351,8 +373,17 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
         "wheel",
         (e) => {
             e.preventDefault();
-            const delta = e.deltaY > 0 ? 0.9 : 1.1;
-            zoomTo(scale * delta);
+            const factor = e.deltaY > 0 ? 0.9 : 1.1;
+            const newScale = Math.min(Math.max(0.1, scale * factor), 20);
+            // Anchor zoom to cursor: keep the point under the cursor fixed
+            const rect = viewport.getBoundingClientRect();
+            const cx = e.clientX - rect.left - rect.width / 2;
+            const cy = e.clientY - rect.top - rect.height / 2;
+            const ratio = 1 - newScale / scale;
+            panX += (cx - panX) * ratio;
+            panY += (cy - panY) * ratio;
+            scale = newScale;
+            updateTransform();
         },
         { passive: false },
     );
@@ -446,7 +477,15 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
 
     viewport.addEventListener("dblclick", (e) => {
         e.preventDefault();
-        zoomTo(scale * 1.5);
+        const newScale = Math.min(Math.max(0.1, scale * 1.5), 20);
+        const rect = viewport.getBoundingClientRect();
+        const cx = e.clientX - rect.left - rect.width / 2;
+        const cy = e.clientY - rect.top - rect.height / 2;
+        const ratio = 1 - newScale / scale;
+        panX += (cx - panX) * ratio;
+        panY += (cy - panY) * ratio;
+        scale = newScale;
+        updateTransform();
     });
 
     controls.addEventListener("click", (e) => {
@@ -466,6 +505,27 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
     });
 
     const onKeydown = (e: KeyboardEvent) => {
+        if (e.key === "Tab") {
+            // Focus trap: cycle focus within the overlay
+            const focusable = overlay.querySelectorAll<HTMLElement>(
+                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+            );
+            if (!focusable.length) return;
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            if (e.shiftKey) {
+                if (document.activeElement === first) {
+                    e.preventDefault();
+                    last.focus();
+                }
+            } else {
+                if (document.activeElement === last) {
+                    e.preventDefault();
+                    first.focus();
+                }
+            }
+            return;
+        }
         if (e.key === "Escape") close();
         else if (e.key === "+" || e.key === "=") zoomTo(scale * 1.2);
         else if (e.key === "-" || e.key === "_") zoomTo(scale * 0.8);
@@ -492,6 +552,15 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
         if (e.target === overlay) close();
     });
 
+    // Keyboard: focus first button (shows focus ring). Mouse: focus overlay container (no ring, but Tab works).
+    if (keyboardOpen) {
+        const firstBtn = controls.querySelector<HTMLElement>(".nu-mermaid-btn");
+        firstBtn?.focus();
+    } else {
+        overlay.setAttribute("tabindex", "-1");
+        overlay.focus();
+    }
+
     function close() {
         overlay.style.opacity = "0";
         setTimeout(() => {
@@ -500,6 +569,7 @@ function openFullscreen(svg: SVGElement, container: HTMLElement, index: number)
             window.removeEventListener("mouseup", onMouseUp);
             document.body.style.overflow = "";
             overlay.remove();
+            triggerBtn?.focus();
         }, 200);
     }
 }
@@ -529,7 +599,7 @@ function getDiagramType(container: Element): string {
     return slugify(raw.replace(/[-_](v\d+|beta)$/i, "").replace(/(diagram|chart)$/i, "")) || "diagram";
 }
 
-function buildFilename(container: Element, index: number): string {
+function buildFilename(container: Element): string {
     const site = getSiteSlug();
     const page = getPageSlug();
     const type = getDiagramType(container);
@@ -549,7 +619,7 @@ function downloadSvg(svg: SVGElement, container: Element, index: number) {
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = buildFilename(container, index);
+    a.download = buildFilename(container);
     a.click();
     URL.revokeObjectURL(url);
 }

package/src/styles/content.css

@@ -6,7 +6,7 @@
    ========================================================================== */
 
 @layer northwestern {
-    .sl-markdown-content a:not(.anchor-link, [role="tab"], .not-content) {
+    .sl-markdown-content a:not(.anchor-link, [role="tab"], .not-content, [data-footnote-ref], [data-footnote-backref]) {
         padding-bottom: 2px;
         font-weight: 700;
         color: var(--sl-color-accent);
@@ -15,11 +15,86 @@
         transition: all var(--nu-transition-default);
     }
 
-    .sl-markdown-content a:not(.anchor-link, [role="tab"], .not-content):hover {
+    .sl-markdown-content
+        a:not(.anchor-link, [role="tab"], .not-content, [data-footnote-ref], [data-footnote-backref]):hover {
         text-decoration: none;
         border-bottom-style: solid;
     }
 
+    /* Footnote references — superscript markers with brackets */
+    .sl-markdown-content a[data-footnote-ref] {
+        font-weight: 600;
+        line-height: 1;
+        vertical-align: super;
+        color: var(--sl-color-accent);
+        text-decoration: none;
+    }
+
+    .sl-markdown-content a[data-footnote-ref]::before {
+        content: "[";
+    }
+
+    .sl-markdown-content a[data-footnote-ref]::after {
+        content: "]";
+    }
+
+    .sl-markdown-content a[data-footnote-ref]:hover {
+        text-decoration: underline;
+    }
+
+    /* Footnotes section */
+    .sl-markdown-content section[data-footnotes] {
+        padding-top: 1.5rem;
+        margin-top: 2.5rem;
+        font-size: 0.875rem;
+        color: var(--nu-color-text-muted);
+        border-top: 1px solid var(--nu-border-color);
+    }
+
+    /* Hide the default <hr> that remark-gfm inserts before footnotes */
+    .sl-markdown-content section[data-footnotes] > :first-child:is(hr) {
+        display: none;
+    }
+
+    /* Collapse the heading wrapper around the sr-only "Footnotes" label */
+    .sl-markdown-content section[data-footnotes] > .sl-heading-wrapper {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        white-space: nowrap;
+        border: 0;
+        clip-path: inset(50%);
+    }
+
+    .sl-markdown-content section[data-footnotes] ol {
+        padding-left: 1.5rem;
+    }
+
+    .sl-markdown-content section[data-footnotes] li {
+        padding-left: 0.25rem;
+    }
+
+    .sl-markdown-content section[data-footnotes] li + li {
+        margin-top: 0.5rem;
+    }
+
+    .sl-markdown-content section[data-footnotes] a[data-footnote-backref] {
+        margin-left: 0.25em;
+        font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
+        font-size: 1em;
+        font-weight: 700;
+        color: var(--sl-color-accent);
+        text-decoration: none;
+        font-variant-emoji: text;
+    }
+
+    .sl-markdown-content section[data-footnotes] a[data-footnote-backref]:hover {
+        border-bottom: 1px solid var(--sl-color-accent);
+    }
+
     .sl-markdown-content ul:not(:where(.not-content *)) {
         padding-left: 1.25rem;
         list-style: none;
@@ -55,16 +130,12 @@
     }
 
     .sl-markdown-content hr:not(:where(.not-content *)) {
-        height: 3px;
+        height: 1px;
         margin: 2.5rem 0;
-        background: var(--nu-purple-10);
+        background: var(--nu-border-color);
         border: 0;
     }
 
-    :root:not([data-theme="light"]) .sl-markdown-content hr:not(:where(.not-content *)) {
-        background: var(--nu-purple-140);
-    }
-
     .sl-markdown-content blockquote:not(:where(.not-content *)) {
         padding: 1rem 1.5rem;
         margin: 2rem 0;

package/src/styles/mermaid-toolbar.css

@@ -75,8 +75,8 @@
     }
 
     .nu-mermaid-btn:focus-visible {
-        outline: none;
-        box-shadow: 0 0 0 0.25rem var(--nu-focus-shadow-color);
+        outline: 2px solid var(--sl-color-accent);
+        outline-offset: -2px;
     }
 
     .nu-mermaid-btn:hover {
@@ -144,6 +144,11 @@
         height: 16px;
     }
 
+    .nu-mermaid-overlay-controls .nu-mermaid-btn:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 2px rgb(255 255 255 / 60%);
+    }
+
     .nu-mermaid-overlay-controls .nu-mermaid-btn:hover {
         color: #fff;
         background: rgb(255 255 255 / 25%);
@@ -199,4 +204,27 @@
         background: transparent !important;
         border: none !important;
     }
+
+    .nu-mermaid-zoom-badge {
+        position: absolute;
+        right: 1rem;
+        bottom: 1rem;
+        padding: 0.2rem 0.5rem;
+        font-family: var(--nu-font-mono, ui-monospace, monospace);
+        font-size: 0.75rem;
+        line-height: 1;
+        color: rgb(255 255 255 / 70%);
+        pointer-events: none;
+        background: rgb(0 0 0 / 35%);
+        border-radius: 0.25rem;
+
+        /* stylelint-disable-next-line property-no-vendor-prefix -- Safari requires prefix */
+        -webkit-backdrop-filter: blur(6px);
+        backdrop-filter: blur(6px);
+    }
+
+    :root[data-theme="light"] .nu-mermaid-zoom-badge {
+        color: rgb(0 0 0 / 55%);
+        background: rgb(255 255 255 / 50%);
+    }
 }

package/src/styles/navigation.css

@@ -38,6 +38,13 @@
         background: rgb(255 255 255 / 25%) !important;
     }
 
+    starlight-menu-button button:focus-visible,
+    northwestern-theme-toggle button:focus-visible,
+    .header northwestern-theme-toggle button:focus-visible {
+        outline: none !important;
+        box-shadow: 0 0 0 2px rgb(255 255 255 / 60%) !important;
+    }
+
     @media (width < 50rem) {
         site-search button {
             color: var(--nu-topbar-text) !important;