From 0abd0cd46e593bb5ee63b82065c4a2cc7f17a47c Mon Sep 17 00:00:00 2001
From: Cory Rylan <crylan@nvidia.com>
Date: Wed, 16 Sep 2026 10:30:34 -0500
Subject: [PATCH 1/2] feat(code): support code element slot content

- Improved internal handling of `<pre>` and `<code>` elements to extract code content correctly.

Signed-off-by: Cory Rylan <crylan@nvidia.com>
---
 projects/code/src/codeblock/codeblock.test.ts | 18 ++++++++++++++++++
 projects/code/src/codeblock/codeblock.ts      |  9 ++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/projects/code/src/codeblock/codeblock.test.ts b/projects/code/src/codeblock/codeblock.test.ts
index f661feaba3..8988faabf9 100644
--- a/projects/code/src/codeblock/codeblock.test.ts
+++ b/projects/code/src/codeblock/codeblock.test.ts
@@ -83,6 +83,24 @@ function getTime(): number {
     expect(element.shadowRoot!.querySelector('.hljs-title')).toBeTruthy();
   });
 
+  it('should render source code if slotted within a <pre><code> block', async () => {
+    element.language = 'typescript';
+    element.innerHTML = '<pre><code>const answer = 42;</code></pre>';
+    await elementIsStable(element);
+
+    expect(element.shadowRoot!.querySelector('pre.hljs > code')!.textContent).toBe('const answer = 42;');
+    expect(element.shadowRoot!.querySelector('.hljs-keyword')).toBeTruthy();
+  });
+
+  it('should decode escaped HTML source from a slotted <pre><code> block', async () => {
+    element.language = 'html';
+    element.innerHTML = '<pre><code>&lt;nve-button&gt;Save&lt;/nve-button&gt;</code></pre>';
+    await elementIsStable(element);
+
+    expect(element.shadowRoot!.querySelector('pre.hljs > code')!.textContent).toBe('<nve-button>Save</nve-button>');
+    expect(element.shadowRoot!.querySelector('.hljs-name')!.textContent).toBe('nve-button');
+  });
+
   it('should render HTML source code if slotted HTML content', async () => {
     element.language = 'typescript';
     const div = document.createElement('div');
diff --git a/projects/code/src/codeblock/codeblock.ts b/projects/code/src/codeblock/codeblock.ts
index 417b048b41..75bba22657 100644
--- a/projects/code/src/codeblock/codeblock.ts
+++ b/projects/code/src/codeblock/codeblock.ts
@@ -22,7 +22,7 @@ hljs.registerLanguage('shell', shell);
  * @documentation https://nvidia.github.io/elements/docs/code/codeblock/
  * @since 0.1.0
  * @entrypoint \@nvidia-elements/code/codeblock
- * @slot - for declarative slotting of source code and not using the `code` property
+ * @slot - source code as text, a `<template>`, or a `<pre><code>` block
  * @slot actions - slot for action bar
  * @cssprop --background
  * @cssprop --padding
@@ -92,6 +92,9 @@ export class CodeBlock extends LitElement implements ContainerElement {
         let template = '';
         if (n instanceof HTMLTemplateElement) {
           template = n.content.textContent ?? '';
+        } else if (n instanceof HTMLPreElement) {
+          const code = n.querySelector('code');
+          template = code ? (code.textContent ?? '') : n.innerHTML;
         } else if (n instanceof HTMLElement) {
           template = n.innerHTML;
         } else {
@@ -107,8 +110,8 @@ export class CodeBlock extends LitElement implements ContainerElement {
 
   render() {
     return html`
-      <div internal-host>
-        <pre class="hljs"><code class=${this.language ?? ''}><slot @slotchange=${this.#updateCode} hidden></slot>${unsafeHTML(this.formattedCode)}</code></pre>
+      <div internal-host role="none">
+        <pre class="hljs" role="none"><code class=${this.language ?? ''}><slot @slotchange=${this.#updateCode} hidden></slot>${unsafeHTML(this.formattedCode)}</code></pre>
         <slot name="actions"></slot>
       </div>
     `;

From e9bca4f7ae36c0076462abeee5ceb8ea4a22a64f Mon Sep 17 00:00:00 2001
From: Cory Rylan <crylan@nvidia.com>
Date: Wed, 16 Sep 2026 11:43:40 -0500
Subject: [PATCH 2/2] chore(docs): enhance code block handling and json-ld
 encoding

Signed-off-by: Cory Rylan <crylan@nvidia.com>
---
 .gitignore                                    |  1 +
 projects/site/src/_11ty/layouts/common.js     |  1 +
 projects/site/src/_11ty/layouts/docs.css      | 37 +++++++++++-
 projects/site/src/_11ty/layouts/docs.ts       |  2 +-
 projects/site/src/_11ty/layouts/metadata.js   |  2 +-
 projects/site/src/_11ty/libraries/markdown.js | 56 +++++++++++++++++--
 projects/site/src/_11ty/shortcodes/api.js     |  4 +-
 projects/site/src/_11ty/shortcodes/example.js | 10 ++--
 .../site/src/_11ty/shortcodes/example.test.ts | 46 ++++++++++++++-
 .../site/src/_11ty/transforms/html-minify.js  | 33 +++++++----
 .../src/_11ty/transforms/html-minify.test.ts  | 28 ++++++++++
 .../site/src/_11ty/transforms/site-urls.js    |  3 +
 .../src/_11ty/transforms/site-urls.test.ts    |  2 +
 projects/site/src/_internal/canvas/canvas.css |  1 +
 projects/site/src/_internal/canvas/canvas.ts  | 27 ++++-----
 .../site/src/_internal/canvas/html.test.ts    | 17 ------
 projects/site/src/_internal/canvas/html.ts    | 11 ----
 .../site/src/docs/integrations/shortcodes.js  |  2 +-
 projects/site/src/index.md                    |  2 +-
 projects/site/src/index.test.lighthouse.ts    | 26 +++++----
 20 files changed, 230 insertions(+), 81 deletions(-)
 delete mode 100644 projects/site/src/_internal/canvas/html.test.ts
 delete mode 100644 projects/site/src/_internal/canvas/html.ts

diff --git a/.gitignore b/.gitignore
index 8f36331cab..ca0b618803 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@
 .DS_store
 .vitest
 .vitest-attachments
+.angular
 node_modules
 dist
 .lighthouse
diff --git a/projects/site/src/_11ty/layouts/common.js b/projects/site/src/_11ty/layouts/common.js
index 795d0fded5..a6b4c55c94 100644
--- a/projects/site/src/_11ty/layouts/common.js
+++ b/projects/site/src/_11ty/layouts/common.js
@@ -78,6 +78,7 @@ export const renderBaseHead = data => {
     nve-tree:not(:defined),
     nve-grid:not(:defined),
     nvd-canvas:not(:defined),
+    nve-badge:not(:defined),
     nve-button:not(:defined) {
       visibility: hidden !important;
     }
diff --git a/projects/site/src/_11ty/layouts/docs.css b/projects/site/src/_11ty/layouts/docs.css
index fd578dab2a..d1887925e4 100644
--- a/projects/site/src/_11ty/layouts/docs.css
+++ b/projects/site/src/_11ty/layouts/docs.css
@@ -217,11 +217,41 @@ pre {
   nve-codeblock {
     --padding: var(--nve-ref-space-lg);
     anchor-name: --codeblock;
-    min-height: 65px;
+    line-height: 1;
     width: 100%;
   }
 }
 
+.markdown-codeblock nve-codeblock:not(:defined) {
+  pre {
+    padding: var(--nve-ref-space-lg);
+    background: var(--nve-sys-layer-container-background);
+    border-radius: var(--nve-ref-border-radius-md);
+    font-family: var(--nve-ref-font-family-roboto-mono);
+    overflow: hidden;
+    width: 100%;
+    line-height: 1;
+    scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);
+    scrollbar-width: var(--nve-sys-scrollbar-width);
+    text-wrap-mode: nowrap;
+  }
+
+  code {
+    white-space: var(--white-space);
+    display: block;
+  }
+}
+
+nvd-canvas > pre {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 .markdown-copy-button {
   position: absolute;
   position-anchor: --codeblock;
@@ -239,6 +269,7 @@ pre {
 /* Canvas Styles */
 nvd-canvas {
   min-height: 120px;
+  width: 100%;
 }
 
 nvd-canvas:has(nve-page),
@@ -256,6 +287,10 @@ nvd-canvas:has(iframe[src*='page']) {
   --background: var(--nve-sys-layer-container-background);
 }
 
+nve-grid:not(:defined) {
+  min-height: 220px;
+}
+
 /* Page Panel Styles */
 nve-page-panel[slot='left-aside'] {
   nve-page-panel-content {
diff --git a/projects/site/src/_11ty/layouts/docs.ts b/projects/site/src/_11ty/layouts/docs.ts
index 5dde21a158..cb70e363ec 100644
--- a/projects/site/src/_11ty/layouts/docs.ts
+++ b/projects/site/src/_11ty/layouts/docs.ts
@@ -225,7 +225,7 @@ function addHeadingAnchors() {
     const anchor = globalThis.document.createElement('a');
     anchor.className = 'heading-anchor';
     anchor.href = `${globalThis.window.parent.location.pathname}#${id}`;
-    anchor.setAttribute('aria-label', 'Copy link to this section');
+    anchor.setAttribute('aria-label', 'copy permalink');
     anchor.innerHTML = '<nve-icon-button container="inline" icon-name="link"></nve-icon-button>';
 
     // Add click handler
diff --git a/projects/site/src/_11ty/layouts/metadata.js b/projects/site/src/_11ty/layouts/metadata.js
index a10550b137..b3f3f9fa78 100644
--- a/projects/site/src/_11ty/layouts/metadata.js
+++ b/projects/site/src/_11ty/layouts/metadata.js
@@ -401,7 +401,7 @@ export function resolvePageMeta(data) {
 }
 
 function jsonLdEncode(value) {
-  return JSON.stringify(value).replace(/<\//g, '<\\/');
+  return JSON.stringify(value).replaceAll('<', '\\u003c');
 }
 
 function isApiReferencePage(data, meta) {
diff --git a/projects/site/src/_11ty/libraries/markdown.js b/projects/site/src/_11ty/libraries/markdown.js
index d62988ce3f..5a631c1ede 100644
--- a/projects/site/src/_11ty/libraries/markdown.js
+++ b/projects/site/src/_11ty/libraries/markdown.js
@@ -1,27 +1,75 @@
 import markdownIt from 'markdown-it';
 import markdownItLink from 'markdown-it-link-attributes';
 
+const LANGUAGE_NAMES = {
+  bash: 'Shell',
+  css: 'CSS',
+  go: 'Go',
+  html: 'HTML',
+  javascript: 'JavaScript',
+  js: 'JavaScript',
+  json: 'JSON',
+  markdown: 'Markdown',
+  md: 'Markdown',
+  python: 'Python',
+  shell: 'Shell',
+  sh: 'Shell',
+  toml: 'TOML',
+  ts: 'TypeScript',
+  tsx: 'TypeScript',
+  typescript: 'TypeScript',
+  xml: 'XML',
+  yaml: 'YAML',
+  yml: 'YAML',
+  zsh: 'Shell'
+};
+
 const markdown = markdownIt({
   html: true,
   breaks: false,
   linkify: true,
   highlight: function (str, lang) {
-    lang = lang === 'javascript' ? 'typescript' : lang; // alias javascript to typescript
+    const structuredData = getCodeStructuredData(str, lang);
+    const codeblockLanguage = markdown.utils.escapeHtml(lang === 'javascript' ? 'typescript' : lang); // alias javascript to typescript
     return /* html */ `
     <div class="markdown-codeblock">
-      <pre class="visually-hidden" aria-hidden="true"><code>${markdown.utils.escapeHtml(str)}</code></pre>
-      <nve-codeblock language="${lang}"><template>${markdown.utils.escapeHtml(str)}</template></nve-codeblock>
+      <script type="application/ld+json">${jsonLdEncode(structuredData)}</script>
+      <nve-codeblock language="${codeblockLanguage}"><pre aria-hidden="true"><code>${markdown.utils.escapeHtml(str).trim()}</code></pre></nve-codeblock>
       <nve-copy-button class="markdown-copy-button" role="button" aria-label="copy" behavior-copy container="flat"></nve-copy-button>
     </div>
     <script type="module">
       document.querySelectorAll('.markdown-copy-button').forEach(button => {
         const codeblock = button.previousElementSibling;
-        button.value = codeblock.querySelector('template').content.textContent.trim();
+        button.value = codeblock.querySelector('pre code').textContent.trim();
       });
     </script>`;
   }
 });
 
+function getCodeStructuredData(code, language) {
+  const languageName = language ? (LANGUAGE_NAMES[language.toLowerCase()] ?? language) : null;
+
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareSourceCode',
+    ...(languageName
+      ? {
+          programmingLanguage: {
+            '@type': 'ComputerLanguage',
+            name: languageName
+          }
+        }
+      : {}),
+    codeSampleType: 'code snippet',
+    encodingFormat: 'text/plain',
+    text: code
+  };
+}
+
+function jsonLdEncode(value) {
+  return JSON.stringify(value).replaceAll('<', '\\u003c');
+}
+
 markdown.renderer.rules.fence = function (tokens, idx, options, env, slf) {
   const token = tokens[idx];
   const info = token.info ? markdown.utils.unescapeAll(token.info).trim() : '';
diff --git a/projects/site/src/_11ty/shortcodes/api.js b/projects/site/src/_11ty/shortcodes/api.js
index 199451ae35..229e1aedeb 100644
--- a/projects/site/src/_11ty/shortcodes/api.js
+++ b/projects/site/src/_11ty/shortcodes/api.js
@@ -56,7 +56,7 @@ export function renderAPINameTable(apiValue) {
       .render(apiValue.descriptionText ?? apiValue.description ?? '')
       .trim()
       .replaceAll('<p>', '<p nve-text="body relaxed">')}
-    <nve-grid role="grid" container="flat">
+    <nve-grid role="grid" container="flat" aria-label="api options for '${apiValue.name}'">
       <nve-grid-header role="row">
         <nve-grid-column role="columnheader" width="200px">${apiValue.name.charAt(0).toUpperCase() + apiValue.name.slice(1)}</nve-grid-column>
         <nve-grid-column role="columnheader">Description</nve-grid-column>
@@ -95,7 +95,7 @@ export function renderAPITable(element, type, options = { container: 'flat' }) {
   const noItems = items.length === 0;
   return /* html */ `
   <div class="api-table" nve-layout="column gap:sm full">
-    <nve-grid role="grid" container="${options.container}" style="min-height: 100px">
+    <nve-grid role="grid" aria-label="api ${type}" container="${options.container}" style="min-height: 100px">
       <nve-grid-header role="row">
         <nve-grid-column role="columnheader" width="200px">${type.charAt(0).toUpperCase() + type.slice(1)}</nve-grid-column>
         ${type === 'property' ? '<nve-grid-column role="columnheader" width="200px">Attribute</nve-grid-column>' : ''}
diff --git a/projects/site/src/_11ty/shortcodes/example.js b/projects/site/src/_11ty/shortcodes/example.js
index bb0dd1aaf1..1865cb60cd 100644
--- a/projects/site/src/_11ty/shortcodes/example.js
+++ b/projects/site/src/_11ty/shortcodes/example.js
@@ -31,7 +31,6 @@ export async function exampleShortcode(
 
   const defaultConfig = {
     inline: true,
-    height: '95%',
     resizable: true,
     summary: true,
     align: 'start',
@@ -77,9 +76,8 @@ export async function exampleShortcode(
 <div class="example-shortcode" nve-layout="column gap:sm">
 <script type="application/ld+json">${jsonLdEncode(structuredData)}</script>
 ${formattedSummary}
-<pre class="visually-hidden" aria-hidden="true"><code>${md.utils?.escapeHtml(templateContent)}</code></pre>
-<nvd-canvas id="${canvasId}" data-pagefind-ignore="all" style="--overflow: ${config.resizable ? 'auto' : 'visible'}; --height: ${config.height};" align="${config.align}" layer="${config.layer}">
-  <template>${md.utils?.escapeHtml(templateContent)}</template>${template}${editButton}
+<nvd-canvas id="${canvasId}" aria-label="example '${md.utils.escapeHtml(example.name)}'" data-pagefind-ignore="all" style="--overflow: ${config.resizable ? 'auto' : 'visible'}; --height: ${config.height};" align="${config.align}" layer="${config.layer}">
+  <pre aria-hidden="true"><code>${md.utils?.escapeHtml(templateContent)}</code></pre>${template}${editButton}
 </nvd-canvas>
 </div>`
         .trim()
@@ -145,7 +143,7 @@ function getExampleStructuredData(example, templateContent, summary, canvasId, p
 }
 
 function jsonLdEncode(value) {
-  return JSON.stringify(value).replace(/<\//gi, '<\\/');
+  return JSON.stringify(value).replaceAll('<', '\\u003c');
 }
 
 export async function exampleTagsShortcode(ref, exampleName) {
@@ -183,7 +181,7 @@ function reloadScript(example, canvasId) {
   const rawTemplate = examples?.items?.find(s => s.id === '${example.id}')?.template ?? '';
   const container = document.querySelector('#${canvasId}_content:not(:has(iframe))');
   if (container) {
-    // parse the template to extract script tags since innerHTML does not execute scripts
+    /* Parse the template to extract script tags since innerHTML does not execute scripts. */
     ${rewriteDevImports.toString()}
     const template = rewriteDevImports(rawTemplate);
     const parser = new DOMParser();
diff --git a/projects/site/src/_11ty/shortcodes/example.test.ts b/projects/site/src/_11ty/shortcodes/example.test.ts
index 4901e9b008..16e101f13a 100644
--- a/projects/site/src/_11ty/shortcodes/example.test.ts
+++ b/projects/site/src/_11ty/shortcodes/example.test.ts
@@ -1,4 +1,5 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
+import { transformWithOxc } from 'vite';
 
 const patternExample = {
   id: 'pattern-chat-popover-chat',
@@ -24,11 +25,18 @@ const structuredDataExample = {
   permalink: '@internals/patterns/chat-pattern-chat-structured-data/'
 };
 
+const quotedNameExample = {
+  ...patternExample,
+  id: 'pattern-chat-quoted-name',
+  name: 'Quoted "<Example>',
+  permalink: '@internals/patterns/chat-pattern-chat-quoted-name/'
+};
+
 async function importShortcode() {
   vi.resetModules();
   vi.doMock('../../index.11tydata.js', () => ({
     siteData: {
-      examples: [patternExample, structuredDataExample]
+      examples: [patternExample, structuredDataExample, quotedNameExample]
     }
   }));
   vi.doMock('@internals/tools/playground', () => ({
@@ -58,6 +66,25 @@ describe('exampleShortcode', () => {
     expect(html).not.toContain('/docs/patterns/chat/examples/');
   });
 
+  it('should slot its source <pre><code> block directly into the canvas', async () => {
+    const { exampleShortcode } = await importShortcode();
+
+    const html = await exampleShortcode('@internals/patterns/chat.examples.json', 'PopoverChat');
+
+    expect(html).toContain('<nvd-canvas id="internals-patterns-chat-examples-json_pattern-chat-popover-chat"');
+    expect(html).toContain('<pre aria-hidden="true"><code>&lt;nve-dialog&gt;&lt;/nve-dialog&gt;</code></pre><div');
+    expect(html).not.toContain('<template>');
+  });
+
+  it('should escape the example name in the canvas label', async () => {
+    const { exampleShortcode } = await importShortcode();
+
+    const html = await exampleShortcode('@internals/patterns/chat.examples.json', quotedNameExample.name);
+
+    expect(html).toContain('aria-label="example \'Quoted &quot;&lt;Example&gt;\'"');
+    expect(html).not.toContain('aria-label="example \'Quoted "<Example>\'"');
+  });
+
   it('should render valid and safely encoded SoftwareSourceCode metadata', async () => {
     vi.stubEnv('ELEMENTS_SITE_URL', 'https://nvidia.github.io');
     vi.stubEnv('ELEMENTS_REPO_BASE_URL', 'https://github.com/NVIDIA/elements');
@@ -74,7 +101,8 @@ describe('exampleShortcode', () => {
     const canonicalPageUrl = 'https://nvidia.github.io/elements/docs/patterns/chat/';
     const canonicalExampleUrl = `${canonicalPageUrl}#internals-patterns-chat-examples-json_pattern-chat-structured-data`;
 
-    expect(script?.[1]).toContain('<\\/SCRIPT>');
+    expect(script?.[1]).toContain('\\u003c/SCRIPT>');
+    expect(script?.[1]).not.toContain('<');
     expect(structuredData).toMatchObject({
       '@context': 'https://schema.org',
       '@id': canonicalExampleUrl,
@@ -114,6 +142,20 @@ describe('exampleShortcode', () => {
     });
   });
 
+  it('should render a reload module that remains valid when whitespace collapses', async () => {
+    vi.stubEnv('ELEVENTY_RUN_MODE', 'serve');
+    const { exampleShortcode } = await importShortcode();
+
+    const html = await exampleShortcode('@internals/patterns/chat.examples.json', 'PopoverChat');
+    const reloadModule = [...html.matchAll(/<script type="module">([\s\S]*?)<\/script>/g)]
+      .map(match => match[1] ?? '')
+      .find(script => script.includes('import examples from'));
+    const collapsedModule = reloadModule?.replace(/\s+/g, ' ') ?? '';
+
+    expect(reloadModule).toBeDefined();
+    await expect(transformWithOxc(collapsedModule, 'reload.js', { lang: 'js' })).resolves.toBeDefined();
+  });
+
   it('should preserve imported example bindings when rewriting development module imports', async () => {
     const { rewriteDevImports } = await importShortcode();
     const template = `<script type="module">
diff --git a/projects/site/src/_11ty/transforms/html-minify.js b/projects/site/src/_11ty/transforms/html-minify.js
index 8bbe6a2287..3874ffc1a9 100644
--- a/projects/site/src/_11ty/transforms/html-minify.js
+++ b/projects/site/src/_11ty/transforms/html-minify.js
@@ -1,6 +1,7 @@
 /* eslint-env node */
 /* global process */
 
+import { randomUUID } from 'node:crypto';
 import htmlMinify from 'html-minifier-next';
 
 const IS_FULL_HTML_DOCUMENT = /<!doctype|<html[\s>]/i;
@@ -24,9 +25,15 @@ export async function htmlMinifyTransform(content, outputPath) {
 }
 
 async function minifyHTML(html) {
-  // Store template contents with unique markers
-  const templateContents = [];
-  let counter = 0;
+  // Store raw contents with unique markers so the HTML minifier cannot reinterpret them.
+  const protectedContents = [];
+  const markerPrefix = `__HTML_MINIFY_${randomUUID().replaceAll('-', '')}_`;
+
+  function protectContent(content) {
+    const marker = `${markerPrefix}${protectedContents.length}__`;
+    protectedContents.push(content);
+    return marker;
+  }
 
   const scriptSpacing = html.replace(/<script type="module">([\s\S]*?)<\/script>/g, (match, p1) => {
     return `<script type="module">${p1.replace(/\n\n/g, '\n')}</script>`;
@@ -34,14 +41,18 @@ async function minifyHTML(html) {
 
   // Replace template contents with markers
   const htmlWithMarkers = scriptSpacing.replace(/<template>([\s\S]*?)<\/template>/g, (match, content) => {
-    const marker = `__TEMPLATE_${counter}__`;
-    templateContents[counter] = content;
-    counter++;
-    return `<template>${marker}</template>`;
+    return `<template>${protectContent(content)}</template>`;
   });
 
+  const htmlWithJsonLdMarkers = htmlWithMarkers.replace(
+    /<script type="application\/ld\+json">([\s\S]*?)<\/script>/gi,
+    (match, content) => {
+      return `<script type="application/ld+json">${protectContent(content)}</script>`;
+    }
+  );
+
   // Minify the HTML
-  const minifiedHtml = await htmlMinify.minify(htmlWithMarkers, {
+  const minifiedHtml = await htmlMinify.minify(htmlWithJsonLdMarkers, {
     includeAutoGeneratedTags: true,
     removeAttributeQuotes: true,
     removeComments: true,
@@ -55,8 +66,8 @@ async function minifyHTML(html) {
     minifyCSS: true
   });
 
-  // Restore template contents
-  return minifiedHtml.replace(/__TEMPLATE_(\d+)__/g, (match, index) => {
-    return templateContents[parseInt(index)];
+  // Restore protected contents
+  return minifiedHtml.replace(new RegExp(`${markerPrefix}(\\d+)__`, 'g'), (match, index) => {
+    return protectedContents[Number(index)] ?? match;
   });
 }
diff --git a/projects/site/src/_11ty/transforms/html-minify.test.ts b/projects/site/src/_11ty/transforms/html-minify.test.ts
index f96dd6765f..62777ae859 100644
--- a/projects/site/src/_11ty/transforms/html-minify.test.ts
+++ b/projects/site/src/_11ty/transforms/html-minify.test.ts
@@ -22,4 +22,32 @@ describe('htmlMinifyTransform', () => {
 
     await expect(htmlMinifyTransform.call({ page: {} }, xml, '/atom.xml')).resolves.toBe(xml);
   });
+
+  it('should preserve safely encoded JSON-LD contents', async () => {
+    const structuredData = {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareSourceCode',
+      text: '<script type="module">console.log("ready");</script>'
+    };
+    const jsonLd = JSON.stringify(structuredData).replaceAll('<', '\\u003c');
+    const html = `<!doctype html><html><body><script type="application/ld+json">${jsonLd}</script></body></html>`;
+    const result = await htmlMinifyTransform.call({ page: {} }, html, '/index.html');
+    const script = result.match(/<script type=application\/ld\+json>([\s\S]*?)<\/script>/);
+
+    expect(script?.[1]).toContain('\\u003c/script>');
+    expect(JSON.parse(script?.[1] ?? '{}')).toEqual(structuredData);
+  });
+
+  it('should not replace ordinary text that resembles a protection marker', async () => {
+    const html = `<!doctype html><html><body>
+      <p>__TEMPLATE_0__ __JSON_LD_1__</p>
+      <template><span>Template content</span></template>
+      <script type="application/ld+json">{"@context":"https://schema.org"}</script>
+    </body></html>`;
+    const result = await htmlMinifyTransform.call({ page: {} }, html, '/index.html');
+
+    expect(result).toContain('__TEMPLATE_0__ __JSON_LD_1__');
+    expect(result).toContain('<template><span>Template content</span></template>');
+    expect(result).toContain('{"@context":"https://schema.org"}');
+  });
 });
diff --git a/projects/site/src/_11ty/transforms/site-urls.js b/projects/site/src/_11ty/transforms/site-urls.js
index 2c2c0e0fad..7a734b8170 100644
--- a/projects/site/src/_11ty/transforms/site-urls.js
+++ b/projects/site/src/_11ty/transforms/site-urls.js
@@ -4,6 +4,7 @@
 import { parse, parseFragment, serialize } from 'parse5';
 
 import {
+  BASE_URL,
   DEPLOYED_SITE_URL,
   ELEMENTS_SITE_ORIGIN,
   getSitePath as getBaseFreeSitePath,
@@ -105,6 +106,8 @@ function resolveCanonicalUrl(value) {
 }
 
 function resolveAttributeUrl(node, attribute) {
+  if (node.nodeName === 'base' && attribute.name === 'href') return BASE_URL;
+
   if (node.nodeName === 'link' && attribute.name === 'href' && hasRel(node, 'canonical')) {
     return resolveCanonicalUrl(attribute.value);
   }
diff --git a/projects/site/src/_11ty/transforms/site-urls.test.ts b/projects/site/src/_11ty/transforms/site-urls.test.ts
index 68ac8bd1ff..68e0fb0c9f 100644
--- a/projects/site/src/_11ty/transforms/site-urls.test.ts
+++ b/projects/site/src/_11ty/transforms/site-urls.test.ts
@@ -39,6 +39,7 @@ describe('siteUrlsTransform', () => {
   it('should fully qualify same-site urls in build output', async () => {
     const { siteUrlsTransform } = await importTransform('build');
     const html = `
+<base href="/elements/">
 <a href="docs/cli/">CLI</a>
 <a href="./docs/mcp/#skills">MCP</a>
 <a href="/docs/metrics/">Metrics</a>
@@ -50,6 +51,7 @@ describe('siteUrlsTransform', () => {
 
     const result = await siteUrlsTransform.call(createContext(), html, 'index.html');
 
+    expect(result).toContain('<base href="/elements/">');
     expect(result).toContain('href="https://nvidia.github.io/elements/docs/cli/"');
     expect(result).toContain('href="https://nvidia.github.io/elements/docs/mcp/#skills"');
     expect(result).toContain('href="https://nvidia.github.io/elements/docs/metrics/"');
diff --git a/projects/site/src/_internal/canvas/canvas.css b/projects/site/src/_internal/canvas/canvas.css
index 43b0211614..e1b9ede419 100644
--- a/projects/site/src/_internal/canvas/canvas.css
+++ b/projects/site/src/_internal/canvas/canvas.css
@@ -88,6 +88,7 @@ nve-select::part(_caret) {
 }
 
 .resizer {
+  margin: 0;
   position: relative;
   min-height: 80px;
   background: var(--nve-ref-color-alpha-black-400);
diff --git a/projects/site/src/_internal/canvas/canvas.ts b/projects/site/src/_internal/canvas/canvas.ts
index 6d79ba75df..a15e043e88 100644
--- a/projects/site/src/_internal/canvas/canvas.ts
+++ b/projects/site/src/_internal/canvas/canvas.ts
@@ -15,7 +15,6 @@ import '@nvidia-elements/code/codeblock/define.js';
 import '@nvidia-elements/code/codeblock/languages/html.js';
 import '@nvidia-elements/code/codeblock/languages/typescript.js';
 import styles from './canvas.css?inline';
-import { decodeHtmlEntities } from './html.js';
 
 function convertToJsxElement(source: string): string {
   return source.replace(/<(\/?)([a-z]+(?:-[a-z]+)+)([^>]*)>/g, (...args: string[]) => {
@@ -45,9 +44,11 @@ export class Canvas extends LitElement {
 
   @state() private sourceType: 'html' | 'react' = 'html';
 
-  @state() private previewWidth: number;
+  @state() private previewWidth = 200;
 
-  @state() private maxPreviewWidth: number;
+  @state() private maxPreviewWidth = 1260;
+
+  #internals = this.attachInternals();
 
   static metadata = {
     tag: 'nvd-canvas',
@@ -61,6 +62,8 @@ export class Canvas extends LitElement {
     // Initialize state values from properties
     this.previewWidth = this.max;
     this.maxPreviewWidth = this.max;
+    this.#internals.role = 'region';
+    this.#internals.ariaLabel = 'example';
 
     // Initialize previewWidth based on parent container width if possible
     requestAnimationFrame(() => {
@@ -81,7 +84,7 @@ export class Canvas extends LitElement {
   render() {
     return html`
       <div internal-host>
-        <div class="resizer" style="--preview-width: ${this.previewWidth}px">
+        <div role="figure" aria-label="example preview" class="resizer" style="--preview-width: ${this.previewWidth}px">
           <slot @slotchange=${() => this.#updateSource()}></slot>
           <nve-resize-handle 
             class="preview-resize-handle" 
@@ -95,26 +98,24 @@ export class Canvas extends LitElement {
         </div>
         <div class="code" .hidden=${!this.showSource}>
           ${this.source ? html`<nve-codeblock language="html" .code=${this.formattedSource}></nve-codeblock>` : nothing}
-          <nve-copy-button container="flat" @click=${this.#handleCopyClick} behavior-copy .value=${this.formattedSource}></nve-copy-button>
+          <nve-copy-button container="flat" @click=${this.#handleCopyClick} behavior-copy .value=${this.formattedSource} aria-label="copy"></nve-copy-button>
         </div>
         <div class="toolbar">
-          <nve-button class="source-button" container="flat" @click=${this.#handleSourceClick}>Source <nve-icon name="caret" size="sm" .direction=${this.showSource ? 'up' : 'down'}></nve-icon></nve-button>
+          <nve-button aria-label="example source" class="source-button" container="flat" @click=${this.#handleSourceClick}>Source <nve-icon name="caret" size="sm" .direction=${this.showSource ? 'up' : 'down'}></nve-icon></nve-button>
           <slot name="suffix"></slot>
         </div>
       </div>
     `;
   }
 
-  get #template() {
-    return this.shadowRoot
-      ?.querySelector('slot')
-      ?.assignedNodes()
-      .find(node => (node as HTMLElement).tagName === 'TEMPLATE') as HTMLTemplateElement;
+  get #slottedSource(): string | undefined {
+    const elements = this.shadowRoot?.querySelector('slot')?.assignedElements();
+    const pre = elements?.find(element => element instanceof HTMLPreElement && element.querySelector('code'));
+    return pre?.querySelector('code')?.textContent ?? undefined;
   }
 
   #updateSource() {
-    const template = this.#template;
-    this.source = template ? decodeHtmlEntities(template.innerHTML) : this.source;
+    this.source = this.#slottedSource ?? this.source;
   }
 
   #handleSourceClick() {
diff --git a/projects/site/src/_internal/canvas/html.test.ts b/projects/site/src/_internal/canvas/html.test.ts
deleted file mode 100644
index 456c0623f6..0000000000
--- a/projects/site/src/_internal/canvas/html.test.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
-// SPDX-License-Identifier: Apache-2.0
-
-import { describe, expect, it } from 'vitest';
-import { decodeHtmlEntities } from './html.js';
-
-describe('decodeHtmlEntities', () => {
-  it('should decode html entities once', () => {
-    const source = '&lt;nve-badge status=&quot;success&quot;&gt;GPU &amp; CPU&#039;s&lt;/nve-badge&gt;';
-
-    expect(decodeHtmlEntities(source)).toBe('<nve-badge status="success">GPU & CPU\'s</nve-badge>');
-  });
-
-  it('should not double decode ampersand-prefixed entities', () => {
-    expect(decodeHtmlEntities('&amp;lt;script&amp;gt;')).toBe('&lt;script&gt;');
-  });
-});
diff --git a/projects/site/src/_internal/canvas/html.ts b/projects/site/src/_internal/canvas/html.ts
deleted file mode 100644
index 3298637f67..0000000000
--- a/projects/site/src/_internal/canvas/html.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
-// SPDX-License-Identifier: Apache-2.0
-
-export function decodeHtmlEntities(source: string) {
-  return source
-    .replace(/&lt;/g, '<')
-    .replace(/&gt;/g, '>')
-    .replace(/&quot;/g, '"')
-    .replace(/&#039;/g, "'")
-    .replace(/&amp;/g, '&');
-}
diff --git a/projects/site/src/docs/integrations/shortcodes.js b/projects/site/src/docs/integrations/shortcodes.js
index 2cf884e7ef..50196ad445 100644
--- a/projects/site/src/docs/integrations/shortcodes.js
+++ b/projects/site/src/docs/integrations/shortcodes.js
@@ -34,7 +34,7 @@ curl -fsSL ${ELEMENTS_PAGES_BASE_URL}/install.sh | bash
 
 <div id="install-cli-windows" hidden style="height: 65px">
 
-\`\`\`powershell
+\`\`\`shell
 irm ${ELEMENTS_PAGES_BASE_URL}/install.ps1 | iex
 \`\`\`
 
diff --git a/projects/site/src/index.md b/projects/site/src/index.md
index 29085e1f0e..c66197f95f 100644
--- a/projects/site/src/index.md
+++ b/projects/site/src/index.md
@@ -87,7 +87,7 @@
     <div nve-layout="grid gap:md span-items:6 &md|span-items:3 &lg|span-items:2">
       <a href="/docs/integrations/typescript/"><nve-card class="getting-started-tile"><nve-card-content><div nve-layout="column align:center gap:sm full:height">{% svg-logo 'typescript' %}<span nve-text="label medium">TypeScript</span></div></nve-card-content><nve-icon name="arrow" direction="right" aria-hidden="true"></nve-icon></nve-card></a>
       <a href="/docs/integrations/installation/"><nve-card class="getting-started-tile"><nve-card-content><div nve-layout="column align:center gap:sm full:height">{% svg-logo 'javascript' %}<span nve-text="label medium">JavaScript</span></div></nve-card-content><nve-icon name="arrow" direction="right" aria-hidden="true"></nve-icon></nve-card></a>
-      <a href="/docs/integrations/go/"><nve-card class="getting-started-tile"><nve-card-content><div nve-layout="column align:center gap:sm full:height">{% svg-logo 'go' %}<span nve-text="label medium">Go</span></div></nve-card-content><nve-icon name="arrow" direction="right" aria-hidden="true"></nve-icon></nve-card></a>
+      <a href="/docs/integrations/go/"><nve-card class="getting-started-tile"><nve-card-content><div nve-layout="column align:center gap:sm full:height">{% svg-logo 'go' %}<span nve-text="label medium">Golang</span></div></nve-card-content><nve-icon name="arrow" direction="right" aria-hidden="true"></nve-icon></nve-card></a>
       <a href="/docs/integrations/hugo/"><nve-card class="getting-started-tile"><nve-card-content><div nve-layout="column align:center gap:sm full:height">{% svg-logo 'hugo' %}<span nve-text="label medium">Hugo</span></div></nve-card-content><nve-icon name="arrow" direction="right" aria-hidden="true"></nve-icon></nve-card></a>
       <a href="/docs/integrations/lit/"><nve-card class="getting-started-tile"><nve-card-content><div nve-layout="column align:center gap:sm full:height">{% svg-logo 'lit' %}<span nve-text="label medium">Lit</span></div></nve-card-content><nve-icon name="arrow" direction="right" aria-hidden="true"></nve-icon></nve-card></a>
       <a href="/docs/integrations/angular/"><nve-card class="getting-started-tile"><nve-card-content><div nve-layout="column align:center gap:sm full:height">{% svg-logo 'angular' %}<span nve-text="label medium">Angular</span></div></nve-card-content><nve-icon name="arrow" direction="right" aria-hidden="true"></nve-icon></nve-card></a>
diff --git a/projects/site/src/index.test.lighthouse.ts b/projects/site/src/index.test.lighthouse.ts
index d55fae9ee0..76cf4062f7 100644
--- a/projects/site/src/index.test.lighthouse.ts
+++ b/projects/site/src/index.test.lighthouse.ts
@@ -105,21 +105,23 @@ describe('lighthouse', { concurrent: false }, () => {
 
   test('landing page', async () => {
     const scores = await getLighthouseScores(`${base}/elements/`);
-    expect(scores.performance).toBeGreaterThanOrEqual(85);
+    expect(scores.performance).toBeGreaterThanOrEqual(90);
     expect(scores.accessibility).toBeGreaterThanOrEqual(100);
-    expect(scores.bestPractices).toBeGreaterThanOrEqual(90);
-    expect(scores.seo).toBeGreaterThanOrEqual(90);
-    expect(scores.payload.js).toBeLessThan(561);
+    expect(scores.bestPractices).toBeGreaterThanOrEqual(96);
+    expect(scores.seo).toBeGreaterThanOrEqual(100);
+    expect(scores.payload.js).toBeLessThan(160);
+    expect(scores.payload.js).toBeGreaterThanOrEqual(1);
     expect(scores.payload.css).toBe(0); // css should be 0 as we inline all css
   });
 
   test('installation page', async () => {
     const scores = await getLighthouseScores(`${base}/elements/docs/integrations/installation/`);
-    expect(scores.performance).toBeGreaterThanOrEqual(85);
+    expect(scores.performance).toBeGreaterThanOrEqual(90);
     expect(scores.accessibility).toBeGreaterThanOrEqual(100);
     expect(scores.bestPractices).toBeGreaterThanOrEqual(90);
     expect(scores.seo).toBeGreaterThanOrEqual(90);
-    expect(scores.payload.js).toBeLessThan(190);
+    expect(scores.payload.js).toBeLessThan(160);
+    expect(scores.payload.js).toBeGreaterThanOrEqual(1);
     expect(scores.payload.css).toBe(0);
   });
 
@@ -129,7 +131,8 @@ describe('lighthouse', { concurrent: false }, () => {
     expect(scores.accessibility).toBeGreaterThanOrEqual(90);
     expect(scores.bestPractices).toBeGreaterThanOrEqual(90);
     expect(scores.seo).toBeGreaterThanOrEqual(90);
-    expect(scores.payload.js).toBeLessThan(137);
+    expect(scores.payload.js).toBeLessThan(99);
+    expect(scores.payload.js).toBeGreaterThanOrEqual(1);
     expect(scores.payload.css).toBeLessThan(0.5);
   });
 
@@ -139,7 +142,8 @@ describe('lighthouse', { concurrent: false }, () => {
     expect(scores.accessibility).toBeGreaterThanOrEqual(95);
     expect(scores.bestPractices).toBeGreaterThanOrEqual(90);
     expect(scores.seo).toBeGreaterThanOrEqual(90);
-    expect(scores.payload.js).toBeLessThan(211);
+    expect(scores.payload.js).toBeLessThan(167);
+    expect(scores.payload.js).toBeGreaterThanOrEqual(1);
     expect(scores.payload.css).toBe(0);
   });
 
@@ -149,7 +153,8 @@ describe('lighthouse', { concurrent: false }, () => {
     expect(scores.accessibility).toBeGreaterThanOrEqual(100);
     expect(scores.bestPractices).toBeGreaterThanOrEqual(90);
     expect(scores.seo).toBeGreaterThanOrEqual(90);
-    expect(scores.payload.js).toBeLessThan(200);
+    expect(scores.payload.js).toBeLessThan(155);
+    expect(scores.payload.js).toBeGreaterThanOrEqual(1);
     expect(scores.payload.css).toBe(0);
   });
 
@@ -159,7 +164,8 @@ describe('lighthouse', { concurrent: false }, () => {
     expect(scores.accessibility).toBeGreaterThanOrEqual(100);
     expect(scores.bestPractices).toBeGreaterThanOrEqual(90);
     expect(scores.seo).toBeGreaterThanOrEqual(90);
-    expect(scores.payload.js).toBeLessThan(200);
+    expect(scores.payload.js).toBeLessThan(155);
+    expect(scores.payload.js).toBeGreaterThanOrEqual(1);
     expect(scores.payload.css).toBe(0);
   });
 });