@barzhsieh/nuxt-content-mermaid 3.0.2 → 3.0.3

package/dist/module.d.mts

@@ -9,11 +9,29 @@ type MermaidToolbarButtons = {
   expand?: boolean
 }
 
+type MermaidToolbarLabels = {
+  copy?: string
+  copied?: string
+  copyFailed?: string
+  expand?: string
+  collapse?: string
+  minimize?: string
+  enterFullscreen?: string
+  exitFullscreen?: string
+  zoomIn?: string
+  zoomOut?: string
+  resetZoom?: string
+  download?: string
+  downloadSvg?: string
+  downloadPng?: string
+}
+
 type MermaidToolbarOptions = {
   title?: string
   fontSize?: string | number
   fullscreenToolbarScale?: number
   buttons?: MermaidToolbarButtons
+  labels?: MermaidToolbarLabels
 }
 
 declare module '#app' {

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.1.0"
   },
-  "version": "3.0.2",
+  "version": "3.0.3",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,9 +1,11 @@
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponent, addImports, addTypeTemplate } from '@nuxt/kit';
+import { relative } from 'node:path';
 import { cloneOwnedData, mergeByPresence, assertStrictData, ContentMermaidConfigurationError } from '../dist/runtime/configuration/core.js';
 import { resolveModuleConfiguration } from '../dist/runtime/configuration/module.js';
 import destr from 'destr';
 import { parse, stringify } from 'yaml';
 import { isRecord, isNonEmptyRecord } from '../dist/runtime/utils/is.js';
+import { TOOLBAR_LABEL_KEYS } from '../dist/runtime/constants.js';
 
 const UNSAFE_INLINE_KEYS = /* @__PURE__ */ new Set(["__proto__", "prototype", "constructor"]);
 function inspectMermaidFrontmatter(rawCode, newline) {
@@ -305,7 +307,7 @@ const MARKDOWN_METADATA_PHASE = {
 };
 const UNSAFE_KEYS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
 const INLINE_ATTRIBUTE_KEYS = /* @__PURE__ */ new Set(["title", "config", "toolbar"]);
-const TOOLBAR_KEYS = /* @__PURE__ */ new Set(["title", "fontSize", "fullscreenToolbarScale", "buttons"]);
+const TOOLBAR_KEYS = /* @__PURE__ */ new Set(["title", "fontSize", "fullscreenToolbarScale", "buttons", "labels"]);
 const TOOLBAR_BUTTON_KEYS = /* @__PURE__ */ new Set(["copy", "fullscreen", "expand"]);
 function hasOwn(value, key) {
   return Object.prototype.hasOwnProperty.call(value, key);
@@ -363,6 +365,14 @@ function normalizeToolbar(value) {
       if (button !== void 0 && typeof button !== "boolean") return null;
     }
   }
+  const labels = valueAt(toolbar, "labels");
+  if (labels !== void 0) {
+    if (!isPlainRecord(labels) || !hasOnlyKeys(labels, new Set(TOOLBAR_LABEL_KEYS))) return null;
+    for (const key of TOOLBAR_LABEL_KEYS) {
+      const label = valueAt(labels, key);
+      if (label !== void 0 && typeof label !== "string") return null;
+    }
+  }
   return toolbar;
 }
 function resolveDiagramMermaidConfig(value) {
@@ -634,7 +644,16 @@ const module$1 = defineNuxtModule({
     publicRuntimeConfig.contentMermaid = resolved.runtimeOptions;
     const resolver = createResolver(import.meta.url);
     const runtimeDir = resolver.resolve("./runtime");
+    const pngRasterizerPath = resolver.resolve(runtimeDir, "png-rasterizer");
     const baseMermaidComponentName = "Mermaid";
+    nuxt.hook("build:manifest", async (manifest) => {
+      const resolvedPngRasterizerPath = await resolver.resolvePath(pngRasterizerPath);
+      const manifestKey = relative(nuxt.options.rootDir, resolvedPngRasterizerPath).replaceAll("\\", "/");
+      const pngRasterizerEntry = manifest[manifestKey];
+      if (pngRasterizerEntry?.src === manifestKey && pngRasterizerEntry.isDynamicEntry) {
+        pngRasterizerEntry.prefetch = false;
+      }
+    });
     nuxt.options.css ||= [];
     nuxt.options.css.push(resolver.resolve("./runtime/styles.css"));
     addVitePlugin(() => ({

package/dist/runtime/built-in-renderer/BuiltInRenderer.vue

@@ -8,12 +8,18 @@ import {
   computed,
   watch,
   shallowRef,
+  useId,
   useTemplateRef
 } from "vue";
 import { defu } from "defu";
 import { materializeMermaidConfigForInvocation, resolveMermaidTheme } from "../mermaid-config";
 import { createMermaidRenderer } from "../mermaid-rendering";
 import { getRuntimeMermaidSnapshot } from "../runtime-snapshot";
+import {
+  createSafeStandaloneSvgClone,
+  downloadBlob,
+  downloadStandaloneSvg
+} from "../svg-download";
 import { parseSizeToPx, isRecord } from "../utils";
 import { useMermaidTheme } from "../composables/useMermaidTheme";
 import { useMermaidCursors } from "../composables/useMermaidCursors";
@@ -25,7 +31,13 @@ import IconFullScreenExit from "../components/icons/iconFullScreenExit.vue";
 import MermaidExpandOverlay from "../components/MermaidExpandOverlay.vue";
 import IconExpand from "../components/icons/IconExpand.vue";
 import IconCollapse from "../components/icons/IconCollapse.vue";
+import IconDownload from "../components/icons/IconDownload.vue";
 import MermaidFullscreenPresentation from "../components/MermaidFullscreenPresentation.vue";
+import { DEFAULT_TOOLBAR_LABELS } from "../constants";
+let pngRasterizerModulePromise;
+function loadPngRasterizer() {
+  return pngRasterizerModulePromise ??= import("../png-rasterizer");
+}
 const props = defineProps({
   toolbar: { type: Object, required: false },
   code: { type: String, required: false },
@@ -58,6 +70,14 @@ const { currentTheme: manualThemeMode } = useMermaidTheme();
 const mermaidBlock = useTemplateRef("mermaidBlock");
 const mermaidWrapper = useTemplateRef("mermaidWrapper");
 const mermaidContainer = useTemplateRef("mermaidContainer");
+const downloadRoot = useTemplateRef("downloadRoot");
+const downloadTrigger = useTemplateRef("downloadTrigger");
+const downloadDisclosure = useTemplateRef("downloadDisclosure");
+const downloadSvgButton = useTemplateRef("downloadSvgButton");
+const expandButton = useTemplateRef("expandButton");
+const fullscreenButton = useTemplateRef("fullscreenButton");
+const getExpandFocusTarget = () => expandButton.value;
+const getFullscreenFocusTarget = () => fullscreenButton.value;
 const fullscreenPresentation = useTemplateRef("fullscreenPresentation");
 const isFullscreenSupported = ref(false);
 const isFullscreen = ref(false);
@@ -76,6 +96,11 @@ const hasRenderedOnce = ref(false);
 const isLoading = ref(false);
 const hasError = ref(false);
 const errorContent = shallowRef(null);
+const committedExportSnapshot = shallowRef(null);
+const isCommittedOutputSvg = ref(false);
+const downloadDisclosureId = `ncm-download-${useId()}`;
+const isDownloadDisclosureOpen = ref(false);
+const isPngDownloadPending = ref(false);
 const decodedCode = computed(() => props.code ? decodeURIComponent(props.code) : "");
 const mermaidDefinition = ref(decodedCode.value);
 let observer = null;
@@ -86,6 +111,9 @@ const defaultFullscreenToolbarScale = runtimeToolbarDefaults?.fullscreenToolbarS
 const resolvedToolbar = computed(() => {
   return defu({}, props.toolbar ?? {}, runtimeToolbarDefaults ?? {});
 });
+const toolbarLabels = computed(() => {
+  return defu({}, resolvedToolbar.value.labels ?? {}, DEFAULT_TOOLBAR_LABELS);
+});
 const toolbarButtons = computed(() => {
   const buttons = resolvedToolbar.value.buttons;
   return isRecord(buttons) ? buttons : {};
@@ -104,13 +132,16 @@ const toolbarFontSize = computed(() => {
   return defaultToolbarFontSize;
 });
 const showCopyButton = computed(() => toolbarButtons.value.copy !== false);
+const canDownloadSvg = computed(() => {
+  return isCommittedOutputSvg.value && committedExportSnapshot.value !== null && componentSource.value.kind !== "conflict";
+});
 const copySource = computed(() => decodedCode.value || mermaidDefinition.value || "");
 const hasCopySource = computed(() => !!copySource.value);
 const copyState = ref("idle");
 const copyLabel = computed(() => {
-  if (copyState.value === "copied") return "Copied";
-  if (copyState.value === "error") return "Copy failed";
-  return "Copy";
+  if (copyState.value === "copied") return toolbarLabels.value.copied;
+  if (copyState.value === "error") return toolbarLabels.value.copyFailed;
+  return toolbarLabels.value.copy;
 });
 let copyResetTimer = null;
 const isCopyHovered = ref(false);
@@ -120,7 +151,7 @@ const copyIcon = computed(() => {
   return IconClipboard;
 });
 const showFullscreenButton = computed(() => toolbarButtons.value.fullscreen !== false && isFullscreenSupported.value);
-const fullscreenLabel = computed(() => isFullscreen.value ? "Exit fullscreen" : "Enter fullscreen");
+const fullscreenLabel = computed(() => isFullscreen.value ? toolbarLabels.value.exitFullscreen : toolbarLabels.value.enterFullscreen);
 const fullscreenToolbarScale = computed(() => {
   const raw = resolvedToolbar.value.fullscreenToolbarScale ?? defaultFullscreenToolbarScale;
   if (typeof raw === "number" && Number.isFinite(raw))
@@ -178,6 +209,7 @@ const iconSize = computed(() => {
 const isExpandBlocked = computed(() => !isEnabled || !expandEnabled || isLoading.value || hasError.value || isFullscreen.value);
 const expandOverlay = useTemplateRef("expandOverlay");
 const isExpandActive = ref(false);
+const expandToolbarLabel = computed(() => isExpandActive.value ? toolbarLabels.value.collapse : toolbarLabels.value.expand);
 const handleExpandActiveChange = (active) => {
   isExpandActive.value = active;
 };
@@ -330,6 +362,78 @@ function getMermaidSvg() {
   const svg = mermaidContainer.value.querySelector("svg");
   return svg instanceof SVGSVGElement ? svg : null;
 }
+function closeDownloadDisclosure(focusTrigger = false) {
+  isDownloadDisclosureOpen.value = false;
+  if (!focusTrigger) return;
+  void nextTick(() => {
+    if (downloadTrigger.value?.isConnected)
+      downloadTrigger.value.focus();
+  });
+}
+async function toggleDownloadDisclosure(event) {
+  if (!canDownloadSvg.value || isPngDownloadPending.value) return;
+  if (isDownloadDisclosureOpen.value) {
+    closeDownloadDisclosure();
+    return;
+  }
+  isDownloadDisclosureOpen.value = true;
+  if (event.detail === 0) {
+    await nextTick();
+    downloadSvgButton.value?.focus();
+  }
+}
+function handleDownloadFocusout(event) {
+  if (isPngDownloadPending.value) return;
+  const nextTarget = event.relatedTarget;
+  if (nextTarget instanceof Node && downloadDisclosure.value?.contains(nextTarget)) {
+    return;
+  }
+  closeDownloadDisclosure();
+}
+function handleDownloadEscape() {
+  closeDownloadDisclosure(true);
+}
+function handleDocumentPointerDown(event) {
+  const target = event.target;
+  if (isDownloadDisclosureOpen.value && !isPngDownloadPending.value && target instanceof Node && !downloadRoot.value?.contains(target)) {
+    closeDownloadDisclosure();
+  }
+}
+function downloadSvg() {
+  const snapshot = committedExportSnapshot.value;
+  if (!canDownloadSvg.value || !snapshot) return;
+  try {
+    downloadStandaloneSvg(snapshot.svg, {
+      filename: "mermaid-diagram.svg"
+    });
+  } finally {
+    closeDownloadDisclosure(true);
+  }
+}
+async function downloadPng() {
+  const snapshot = committedExportSnapshot.value;
+  if (!canDownloadSvg.value || !snapshot || isPngDownloadPending.value)
+    return;
+  isPngDownloadPending.value = true;
+  try {
+    const svg = createSafeStandaloneSvgClone(snapshot.svg);
+    const { rasterizePngSnapshot } = await loadPngRasterizer();
+    const blob = await rasterizePngSnapshot({
+      svg,
+      width: snapshot.width,
+      height: snapshot.height
+    });
+    downloadBlob(blob, "mermaid-diagram.png");
+  } catch (error) {
+    console.error(
+      "[nuxt-content-mermaid] Failed to download PNG:",
+      error
+    );
+  } finally {
+    isPngDownloadPending.value = false;
+    closeDownloadDisclosure(true);
+  }
+}
 function getMermaidViewport() {
   return mermaidWrapper.value;
 }
@@ -350,6 +454,17 @@ async function renderMermaid() {
     return;
   if (outcome.status === "success") {
     hasRenderedOnce.value = true;
+    const committedSvg = getMermaidSvg();
+    const bounds = committedSvg?.getBoundingClientRect();
+    const isValidSvgSnapshot = committedSvg && bounds && Number.isFinite(bounds.width) && bounds.width > 0 && Number.isFinite(bounds.height) && bounds.height > 0;
+    isCommittedOutputSvg.value = Boolean(isValidSvgSnapshot);
+    if (isValidSvgSnapshot) {
+      committedExportSnapshot.value = {
+        svg: committedSvg.cloneNode(true),
+        width: bounds.width,
+        height: bounds.height
+      };
+    }
   } else if (outcome.status === "failure") {
     console.error("[nuxt-content-mermaid]", outcome.error);
     hasError.value = true;
@@ -415,6 +530,7 @@ async function copyToClipboard(text) {
 }
 onMounted(() => {
   if (!isEnabled) return;
+  document.addEventListener("pointerdown", handleDocumentPointerDown);
   if (!mermaidDefinition.value && mermaidContainer.value)
     mermaidDefinition.value = extractMermaidDefinition(mermaidContainer.value);
   nextTick(() => setupMermaidContainer());
@@ -423,6 +539,11 @@ onUnmounted(() => {
   requestBuiltInRender?.invalidate();
   stopLazyObservation();
   if (copyResetTimer) clearTimeout(copyResetTimer);
+  document.removeEventListener("pointerdown", handleDocumentPointerDown);
+});
+watch(canDownloadSvg, (isEligible) => {
+  if (!isEligible)
+    closeDownloadDisclosure();
 });
 watch(
   () => ({
@@ -480,12 +601,66 @@ const { cursorVariables } = useMermaidCursors(iconSize, expandEnabled);
             :size="iconSize"
           />
         </button>
+        <div
+          ref="downloadRoot"
+          class="ncm-download"
+        >
+          <button
+            ref="downloadTrigger"
+            type="button"
+            class="mermaid-btn"
+            :title="toolbarLabels.download"
+            :aria-label="toolbarLabels.download"
+            :aria-expanded="isDownloadDisclosureOpen"
+            :aria-controls="downloadDisclosureId"
+            :disabled="!canDownloadSvg"
+            @click="toggleDownloadDisclosure"
+          >
+            <IconDownload :size="iconSize" />
+          </button>
+          <div
+            v-if="isDownloadDisclosureOpen"
+            :id="downloadDisclosureId"
+            ref="downloadDisclosure"
+            class="ncm-download-disclosure"
+            @focusout="handleDownloadFocusout"
+            @keydown.esc.stop.prevent="handleDownloadEscape"
+          >
+            <button
+              ref="downloadSvgButton"
+              type="button"
+              class="ncm-download-choice"
+              :title="toolbarLabels.downloadSvg"
+              :aria-label="toolbarLabels.downloadSvg"
+              @click="downloadSvg"
+            >
+              {{ toolbarLabels.downloadSvg }}
+            </button>
+            <button
+              type="button"
+              class="ncm-download-choice"
+              :title="toolbarLabels.downloadPng"
+              :aria-label="toolbarLabels.downloadPng"
+              :disabled="isPngDownloadPending"
+              :aria-busy="isPngDownloadPending || void 0"
+              @click="downloadPng"
+            >
+              <span
+                v-if="isPngDownloadPending"
+                class="ncm-download-spinner"
+                aria-hidden="true"
+              />
+              {{ toolbarLabels.downloadPng }}
+            </button>
+          </div>
+        </div>
         <button
           v-if="showExpandToolbarButton"
+          ref="expandButton"
           type="button"
           class="mermaid-btn"
-          :title="isExpandActive ? 'Collapse' : 'Expand'"
-          :aria-label="isExpandActive ? 'Collapse diagram' : 'Expand diagram'"
+          :title="expandToolbarLabel"
+          :aria-label="expandToolbarLabel"
           @click="toggleExpand"
         >
           <IconExpand
@@ -499,6 +674,7 @@ const { cursorVariables } = useMermaidCursors(iconSize, expandEnabled);
         </button>
         <button
           v-if="showFullscreenButton"
+          ref="fullscreenButton"
           type="button"
           class="mermaid-btn"
           :title="fullscreenLabel"
@@ -523,6 +699,8 @@ const { cursorVariables } = useMermaidCursors(iconSize, expandEnabled);
       :viewport-target="mermaidWrapper"
       :render-target="mermaidContainer"
       :icon-size="iconSize"
+      :labels="toolbarLabels"
+      :get-focus-target="getFullscreenFocusTarget"
       @active-change="handleFullscreenActiveChange"
       @supported-change="handleFullscreenSupportedChange"
     />
@@ -584,14 +762,17 @@ const { cursorVariables } = useMermaidCursors(iconSize, expandEnabled);
       :blocked="isExpandBlocked"
       :get-expand-target="getMermaidSvg"
       :get-expand-viewport="getMermaidViewport"
+      :get-return-focus-target="getExpandFocusTarget"
       :overlay-style="cursorVariables"
       :content-style="cursorVariables"
       :icon-size="iconSize"
+      :labels="toolbarLabels"
+      :dialog-label="toolbarTitle || toolbarLabels.expand"
       @active-change="handleExpandActiveChange"
     />
   </div>
 </template>
 
 <style scoped>
-.mermaid-block{border:var(--ncm-border);border-radius:4px;flex-direction:column;margin:1rem 0;overflow:hidden;--ncm-toolbar-height:calc(var(--ncm-icon-size, 17px) + 20px)}.mermaid-block,.mermaid-toolbar{background-color:var(--ncm-code-bg);display:flex}.mermaid-toolbar{align-items:center;border-bottom:var(--ncm-border-bottom);border-top-left-radius:4px;border-top-right-radius:4px;justify-content:space-between;padding:.375rem .375rem .375rem .75rem;z-index:20}.mermaid-title{color:var(--ncm-text-muted);font-weight:500;letter-spacing:0;line-height:1.25;max-width:80%;overflow:hidden;padding:4px 0;text-overflow:ellipsis;white-space:nowrap}:fullscreen .mermaid-title{max-width:80%}.mermaid-actions{display:flex;gap:0;justify-self:flex-end}.mermaid-btn{align-items:center;background:var(--ncm-code-bg);border:none;border-radius:4px;color:var(--ncm-text-xmuted);cursor:pointer;display:flex;justify-content:center;line-height:1.25;padding:4px;transition:color .2s,background-color .2s}.mermaid-btn:hover{background-color:var(--ncm-code-bg-hover);color:var(--ncm-text)}.mermaid-btn:disabled{color:var(--ncm-text-xmuted);cursor:not-allowed;opacity:.6}.mermaid-wrapper{align-items:center;display:flex;justify-content:center;overflow:auto;padding:1rem;position:relative;--sb-thumb:rgba(0,0,0,.2);--sb-thumb-hover:rgba(0,0,0,.35)}.mermaid-wrapper>div{height:100%;width:100%}.mermaid-wrapper>div>:deep(svg){display:block;margin:0 auto}.mermaid-wrapper :deep(code),.mermaid-wrapper :deep(pre){height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;clip-path:inset(50%);white-space:nowrap}.mermaid:not([data-processed]){color:transparent;min-height:100px}:fullscreen .mermaid-wrapper{flex:1;overflow:hidden;touch-action:none}:fullscreen .mermaid-wrapper::-webkit-scrollbar{display:none}:fullscreen .mermaid-wrapper :deep(svg){height:100%!important;max-height:none!important;max-width:none!important;width:100%!important}:global(.dark .mermaid-wrapper){--sb-thumb:hsla(0,0%,100%,.2);--sb-thumb-hover:hsla(0,0%,100%,.35)}.mermaid-wrapper::-webkit-scrollbar{width:14px}.mermaid-wrapper::-webkit-scrollbar-track{background:hsla(0,0%,94%,.08)}:global(.dark .mermaid-wrapper::-webkit-scrollbar-track){background:hsla(0,0%,9%,.08)}.mermaid-wrapper::-webkit-scrollbar-corner{background:transparent}.mermaid-wrapper::-webkit-scrollbar-thumb{background-clip:content-box;background-color:var(--sb-thumb);border:3px solid transparent;border-radius:10px}.mermaid-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--sb-thumb-hover)}.mermaid-wrapper.ncm-is-loading{align-items:center;display:flex;justify-content:center;min-height:150px}.mermaid-wrapper.ncm-expand-hidden{opacity:0;pointer-events:none}.mermaid-wrapper.ncm-expand-clickable :deep(svg){cursor:var(--ncm-cursor-expand)}.mermaid-error-default{color:#f55;font-family:monospace;padding:1rem;white-space:pre-wrap}
+.mermaid-block{border:var(--ncm-border);border-radius:4px;flex-direction:column;margin:1rem 0;overflow:hidden;--ncm-toolbar-height:calc(var(--ncm-icon-size, 17px) + 20px)}.mermaid-block,.mermaid-toolbar{background-color:var(--ncm-code-bg);display:flex}.mermaid-toolbar{align-items:center;border-bottom:var(--ncm-border-bottom);border-top-left-radius:4px;border-top-right-radius:4px;justify-content:space-between;padding:.375rem .375rem .375rem .75rem;z-index:20}.mermaid-title{color:var(--ncm-text-muted);font-weight:500;letter-spacing:0;line-height:1.25;max-width:80%;overflow:hidden;padding:4px 0;text-overflow:ellipsis;white-space:nowrap}:fullscreen .mermaid-title{max-width:80%}.mermaid-actions{display:flex;gap:0;justify-self:flex-end}.ncm-download{display:flex;position:relative}.ncm-download-disclosure{background:var(--ncm-code-bg);border:var(--ncm-border);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;flex-direction:column;min-width:-moz-max-content;min-width:max-content;padding:4px;position:absolute;right:0;top:calc(100% + 4px);z-index:10}.ncm-download-choice{align-items:center;background:transparent;border:none;border-radius:3px;color:var(--ncm-text);cursor:pointer;display:flex;font:inherit;gap:6px;padding:6px 8px;white-space:nowrap}.ncm-download-choice:focus-visible,.ncm-download-choice:hover{background:var(--ncm-code-bg-hover)}.ncm-download-choice:disabled{cursor:not-allowed;opacity:.6}.ncm-download-spinner{animation:ncm-download-spin .8s linear infinite;border:2px solid;border-radius:50%;border-right:2px solid transparent;height:12px;width:12px}@keyframes ncm-download-spin{to{transform:rotate(1turn)}}.mermaid-btn{align-items:center;background:var(--ncm-code-bg);border:none;border-radius:4px;color:var(--ncm-text-xmuted);cursor:pointer;display:flex;justify-content:center;line-height:1.25;padding:4px;transition:color .2s,background-color .2s}.mermaid-btn:hover{background-color:var(--ncm-code-bg-hover);color:var(--ncm-text)}.mermaid-btn:disabled{color:var(--ncm-text-xmuted);cursor:not-allowed;opacity:.6}.mermaid-wrapper{align-items:center;display:flex;justify-content:center;overflow:auto;padding:1rem;position:relative;--sb-thumb:rgba(0,0,0,.2);--sb-thumb-hover:rgba(0,0,0,.35)}.mermaid-wrapper>div{height:100%;width:100%}.mermaid-wrapper>div>:deep(svg){display:block;margin:0 auto}.mermaid-wrapper :deep(code),.mermaid-wrapper :deep(pre){height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;clip-path:inset(50%);white-space:nowrap}.mermaid:not([data-processed]){color:transparent;min-height:100px}:fullscreen .mermaid-wrapper{flex:1;overflow:hidden;touch-action:none}:fullscreen .mermaid-wrapper::-webkit-scrollbar{display:none}:fullscreen .mermaid-wrapper :deep(svg){height:100%!important;max-height:none!important;max-width:none!important;width:100%!important}:global(.dark .mermaid-wrapper){--sb-thumb:hsla(0,0%,100%,.2);--sb-thumb-hover:hsla(0,0%,100%,.35)}.mermaid-wrapper::-webkit-scrollbar{width:14px}.mermaid-wrapper::-webkit-scrollbar-track{background:hsla(0,0%,94%,.08)}:global(.dark .mermaid-wrapper::-webkit-scrollbar-track){background:hsla(0,0%,9%,.08)}.mermaid-wrapper::-webkit-scrollbar-corner{background:transparent}.mermaid-wrapper::-webkit-scrollbar-thumb{background-clip:content-box;background-color:var(--sb-thumb);border:3px solid transparent;border-radius:10px}.mermaid-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--sb-thumb-hover)}.mermaid-wrapper.ncm-is-loading{align-items:center;display:flex;justify-content:center;min-height:150px}.mermaid-wrapper.ncm-expand-hidden{opacity:0;pointer-events:none}.mermaid-wrapper.ncm-expand-clickable :deep(svg){cursor:var(--ncm-cursor-expand)}.mermaid-error-default{color:#f55;font-family:monospace;padding:1rem;white-space:pre-wrap}
 </style>

package/dist/runtime/components/MermaidExpandOverlay.d.vue.ts

@@ -1,13 +1,17 @@
 import type { CSSProperties } from 'vue';
 import type { ExpandOptions } from '../types/expand.js';
+import type { MermaidToolbarLabels } from '../../types/mermaid.js';
 type __VLS_Props = {
     options: ExpandOptions;
     blocked: boolean;
     getExpandTarget: () => SVGElement | null;
     getExpandViewport: () => HTMLElement | null;
+    getReturnFocusTarget: () => HTMLElement | null;
     overlayStyle?: CSSProperties;
     contentStyle?: CSSProperties;
     iconSize?: number;
+    labels: Required<MermaidToolbarLabels>;
+    dialogLabel: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     toggle: (event?: Event) => void;

package/dist/runtime/components/MermaidExpandOverlay.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, watch } from "vue";
+import { computed, useTemplateRef, watch } from "vue";
 import { useMermaidExpand } from "../composables/useMermaidExpand";
 import MermaidZoomToolbar from "./MermaidZoomToolbar.vue";
 const props = defineProps({
@@ -7,15 +7,19 @@ const props = defineProps({
   blocked: { type: Boolean, required: true },
   getExpandTarget: { type: Function, required: true },
   getExpandViewport: { type: Function, required: true },
+  getReturnFocusTarget: { type: Function, required: true },
   overlayStyle: { type: Object, required: false },
   contentStyle: { type: Object, required: false },
-  iconSize: { type: Number, required: false }
+  iconSize: { type: Number, required: false },
+  labels: { type: Object, required: true },
+  dialogLabel: { type: String, required: true }
 });
 const isMac = import.meta.client ? /Mac|iPhone|iPad|iPod/.test(navigator.userAgent) : false;
 const emit = defineEmits(["active-change"]);
 const blocked = computed(() => props.blocked);
 const allowCloseButton = computed(() => props.options.invokeCloseOn?.closeButtonClick !== false);
 const targetHasMargin = computed(() => typeof props.options.margin === "number" && props.options.margin > 0);
+const minimizeButton = useTemplateRef("minimizeButton");
 const {
   setExpandModal,
   setExpandTargetWrap,
@@ -39,7 +43,9 @@ const {
   getExpandTarget: props.getExpandTarget,
   getExpandViewport: props.getExpandViewport,
   expandOptions: props.options,
-  isBlocked: blocked
+  isBlocked: blocked,
+  getInitialFocusTarget: () => minimizeButton.value,
+  getReturnFocusTarget: props.getReturnFocusTarget
 });
 watch(isExpandActive, (active) => emit("active-change", active), { flush: "sync", immediate: true });
 defineExpose({ toggle, openFromDiagram, endForDiagramReplacement });
@@ -51,6 +57,10 @@ defineExpose({ toggle, openFromDiagram, endForDiagramReplacement });
       v-if="isExpandActive"
       :ref="setExpandModal"
       class="ncm-expand-modal"
+      role="dialog"
+      aria-modal="true"
+      :aria-label="dialogLabel"
+      tabindex="-1"
       :style="{
   cursor
 }"
@@ -86,6 +96,7 @@ defineExpose({ toggle, openFromDiagram, endForDiagramReplacement });
         <MermaidZoomToolbar
           :scale="scale"
           :icon-size="iconSize"
+          :labels="labels"
           :icon-scale="0.75"
           @zoom-out="zoomOut"
           @zoom-in="zoomIn"
@@ -104,9 +115,11 @@ defineExpose({ toggle, openFromDiagram, endForDiagramReplacement });
 
         <button
           v-if="allowCloseButton"
+          ref="minimizeButton"
           type="button"
           class="ncm-expand-btn"
-          aria-label="Minimize diagram"
+          :title="labels.minimize"
+          :aria-label="labels.minimize"
           @click="closeFromButton"
           @mousedown.stop
           @touchstart.stop

package/dist/runtime/components/MermaidExpandOverlay.vue.d.ts

@@ -1,13 +1,17 @@
 import type { CSSProperties } from 'vue';
 import type { ExpandOptions } from '../types/expand.js';
+import type { MermaidToolbarLabels } from '../../types/mermaid.js';
 type __VLS_Props = {
     options: ExpandOptions;
     blocked: boolean;
     getExpandTarget: () => SVGElement | null;
     getExpandViewport: () => HTMLElement | null;
+    getReturnFocusTarget: () => HTMLElement | null;
     overlayStyle?: CSSProperties;
     contentStyle?: CSSProperties;
     iconSize?: number;
+    labels: Required<MermaidToolbarLabels>;
+    dialogLabel: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     toggle: (event?: Event) => void;

package/dist/runtime/components/MermaidFullscreenPresentation.d.vue.ts

@@ -1,8 +1,11 @@
+import type { MermaidToolbarLabels } from '../../types/mermaid.js';
 type __VLS_Props = {
     fullscreenTarget: HTMLElement | null;
     viewportTarget: HTMLElement | null;
     renderTarget: HTMLElement | null;
     iconSize?: number;
+    labels: Required<MermaidToolbarLabels>;
+    getFocusTarget: () => HTMLElement | null;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     toggle: () => Promise<void>;

package/dist/runtime/components/MermaidFullscreenPresentation.vue

@@ -6,7 +6,9 @@ const props = defineProps({
   fullscreenTarget: { type: null, required: true },
   viewportTarget: { type: null, required: true },
   renderTarget: { type: null, required: true },
-  iconSize: { type: Number, required: false }
+  iconSize: { type: Number, required: false },
+  labels: { type: Object, required: true },
+  getFocusTarget: { type: Function, required: true }
 });
 const emit = defineEmits(["active-change", "supported-change"]);
 const isMac = import.meta.client ? /Mac|iPhone|iPad|iPod/.test(navigator.userAgent) : false;
@@ -23,7 +25,8 @@ const {
 } = useMermaidFullscreen({
   getFullscreenTarget: () => props.fullscreenTarget,
   getViewportTarget: () => props.viewportTarget,
-  getRenderTarget: () => props.renderTarget
+  getRenderTarget: () => props.renderTarget,
+  getFocusTarget: props.getFocusTarget
 });
 watch(isActive, (active) => emit("active-change", active), { flush: "sync", immediate: true });
 watch(isSupported, (supported) => emit("supported-change", supported), { flush: "sync", immediate: true });
@@ -36,6 +39,7 @@ defineExpose({ toggle, endForDiagramReplacement });
     variant="fullscreen"
     :scale="scale"
     :icon-size="iconSize"
+    :labels="labels"
     @zoom-out="zoomOut"
     @zoom-in="zoomIn"
     @reset="resetZoom"

package/dist/runtime/components/MermaidFullscreenPresentation.vue.d.ts

@@ -1,8 +1,11 @@
+import type { MermaidToolbarLabels } from '../../types/mermaid.js';
 type __VLS_Props = {
     fullscreenTarget: HTMLElement | null;
     viewportTarget: HTMLElement | null;
     renderTarget: HTMLElement | null;
     iconSize?: number;
+    labels: Required<MermaidToolbarLabels>;
+    getFocusTarget: () => HTMLElement | null;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     toggle: () => Promise<void>;

package/dist/runtime/components/MermaidZoomToolbar.d.vue.ts

@@ -1,9 +1,10 @@
+import type { MermaidToolbarLabels } from '../../types/mermaid.js';
 type __VLS_Props = {
     scale: number;
     iconSize?: number;
     iconScale?: number;
     variant?: 'fullscreen' | 'overlay';
-    resetLabel?: string;
+    labels: Required<MermaidToolbarLabels>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     reset: () => void;
@@ -17,7 +18,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     iconSize: number;
     iconScale: number;
     variant: "fullscreen" | "overlay";
-    resetLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/MermaidZoomToolbar.vue

@@ -7,7 +7,7 @@ const props = defineProps({
   iconSize: { type: Number, required: false, default: 18 },
   iconScale: { type: Number, required: false, default: 1 },
   variant: { type: String, required: false, default: "overlay" },
-  resetLabel: { type: String, required: false, default: "Reset" }
+  labels: { type: Object, required: true }
 });
 const emit = defineEmits(["zoom-in", "zoom-out", "reset"]);
 const zoomIconSize = computed(() => {
@@ -18,7 +18,8 @@ const zoomPercent = computed(() => Math.round(props.scale * 100));
 const isFullscreen = computed(() => props.variant === "fullscreen");
 const handleAction = (event, action) => {
   emit(action);
-  event.currentTarget?.blur();
+  if (event.detail > 0)
+    event.currentTarget?.blur();
 };
 </script>
 
@@ -35,7 +36,8 @@ const handleAction = (event, action) => {
     <button
       type="button"
       class="ncm-zoom-btn"
-      aria-label="Zoom Out"
+      :title="labels.zoomOut"
+      :aria-label="labels.zoomOut"
       @click.stop="handleAction($event, 'zoom-out')"
     >
       <IconMinus :size="zoomIconSize" />
@@ -44,7 +46,8 @@ const handleAction = (event, action) => {
     <button
       type="button"
       class="ncm-zoom-btn"
-      aria-label="Zoom In"
+      :title="labels.zoomIn"
+      :aria-label="labels.zoomIn"
       @click.stop="handleAction($event, 'zoom-in')"
     >
       <IconPlus :size="zoomIconSize" />
@@ -53,10 +56,11 @@ const handleAction = (event, action) => {
     <button
       type="button"
       class="ncm-zoom-btn ncm-zoom-reset"
-      aria-label="Reset Zoom"
+      :title="labels.resetZoom"
+      :aria-label="labels.resetZoom"
       @click.stop="handleAction($event, 'reset')"
     >
-      {{ resetLabel }}
+      {{ labels.resetZoom }}
     </button>
   </div>
 </template>