From c188399d32bc55b03d4daf150fd1894c87ae50f2 Mon Sep 17 00:00:00 2001
From: Cory Rylan <crylan@nvidia.com>
Date: Fri, 31 Jul 2026 11:24:41 -0500
Subject: [PATCH] chore(docs): add component preview to card list

- add small inline preview of the component to the card
- large components like monaco have small mock html/css inlined visuals

Signed-off-by: Cory Rylan <crylan@nvidia.com>
---
 projects/core/src/dialog/dialog.ts            |   2 +-
 projects/core/src/drawer/drawer.ts            |   2 +-
 projects/core/src/gauge/gauge.examples.ts     |   5 +-
 .../core/src/notification/notification.ts     |   2 +-
 projects/core/src/toast/toast.ts              |   2 +-
 projects/core/src/tooltip/tooltip.ts          |   2 +-
 .../src/markdown/markdown.examples.ts         |   2 +-
 projects/site/package.json                    |  10 +-
 projects/site/src/_11ty/layouts/common.js     |  33 +-
 projects/site/src/_11ty/layouts/docs.css      |  29 +-
 projects/site/src/_11ty/libraries/markdown.js |  28 +-
 projects/site/src/_11ty/shortcodes/api.js     |  36 +-
 projects/site/src/_11ty/shortcodes/example.js |   1 +
 projects/site/src/docs/elements/index.11ty.js | 547 +++++++++++++++++-
 14 files changed, 610 insertions(+), 91 deletions(-)

diff --git a/projects/core/src/dialog/dialog.ts b/projects/core/src/dialog/dialog.ts
index 0492ceb136..744e6b93e1 100644
--- a/projects/core/src/dialog/dialog.ts
+++ b/projects/core/src/dialog/dialog.ts
@@ -21,7 +21,7 @@ import styles from './dialog.css?inline';
 
 /**
  * @element nve-dialog
- * @description Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @description Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow.
  * @documentation https://nvidia.github.io/elements/docs/elements/dialog/
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/dialog
diff --git a/projects/core/src/drawer/drawer.ts b/projects/core/src/drawer/drawer.ts
index da9a02c59d..37369391ce 100644
--- a/projects/core/src/drawer/drawer.ts
+++ b/projects/core/src/drawer/drawer.ts
@@ -18,7 +18,7 @@ import styles from './drawer.css?inline';
 
 /**
  * @element nve-drawer
- * @description Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings). Or use [Panel](./docs/elements/panel/) inline as its content couples with or closely relates to the content on the page (details, extra actions/options). [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @description Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings).
  * @documentation https://nvidia.github.io/elements/docs/elements/drawer/
  * @since 0.16.0
  * @entrypoint \@nvidia-elements/core/drawer
diff --git a/projects/core/src/gauge/gauge.examples.ts b/projects/core/src/gauge/gauge.examples.ts
index 7c5156b76e..da9c5203b5 100644
--- a/projects/core/src/gauge/gauge.examples.ts
+++ b/projects/core/src/gauge/gauge.examples.ts
@@ -14,10 +14,7 @@ export default {
  */
 export const Default = {
   render: () => html`
-    <div nve-layout="row gap:sm">
-      <nve-gauge value="50">50%</nve-gauge>
-      <nve-gauge status="accent" value="66">66%</nve-gauge>
-    </div>
+    <nve-gauge status="accent" value="66">66%</nve-gauge>
 `};
 
 /**
diff --git a/projects/core/src/notification/notification.ts b/projects/core/src/notification/notification.ts
index 9cb402e4b6..77e2146f88 100644
--- a/projects/core/src/notification/notification.ts
+++ b/projects/core/src/notification/notification.ts
@@ -20,7 +20,7 @@ import styles from './notification.css?inline';
 
 /**
  * @element nve-notification
- * @description Displays real time updates without interrupting the user's workflow to communicate an important message or status. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @description Displays real time updates without interrupting the user's workflow to communicate an important message or status.
  * @documentation https://nvidia.github.io/elements/docs/elements/notification/
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/notification
diff --git a/projects/core/src/toast/toast.ts b/projects/core/src/toast/toast.ts
index 87f3ce44ed..e7e4b9f064 100644
--- a/projects/core/src/toast/toast.ts
+++ b/projects/core/src/toast/toast.ts
@@ -21,7 +21,7 @@ import styles from './toast.css?inline';
 
 /**
  * @element nve-toast
- * @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them.
  * @documentation https://nvidia.github.io/elements/docs/elements/toast/
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/toast
diff --git a/projects/core/src/tooltip/tooltip.ts b/projects/core/src/tooltip/tooltip.ts
index 107a38d588..fd5963a3e0 100644
--- a/projects/core/src/tooltip/tooltip.ts
+++ b/projects/core/src/tooltip/tooltip.ts
@@ -17,7 +17,7 @@ import styles from './tooltip.css?inline';
 
 /**
  * @element nve-tooltip
- * @description A contextual popup that displays a plaintext description. Tooltips are [triggered](https://w3c.github.io/aria/#tooltip) by hovering, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @description A contextual popup that displays a plaintext description. Trigger tooltips by hovering, focusing, or tapping an element and cannot have interactive elements within them.
  * @documentation https://nvidia.github.io/elements/docs/elements/tooltip/
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/tooltip
diff --git a/projects/markdown/src/markdown/markdown.examples.ts b/projects/markdown/src/markdown/markdown.examples.ts
index 7ba4f9c7b4..eec79f7979 100644
--- a/projects/markdown/src/markdown/markdown.examples.ts
+++ b/projects/markdown/src/markdown/markdown.examples.ts
@@ -17,7 +17,7 @@ export const Default = {
   render: () => html`
 <nve-markdown>
   <template>
-    # Default
+    ## Markdown
 
     This is a default markdown component in its initial state.
 
diff --git a/projects/site/package.json b/projects/site/package.json
index c9402121e5..9f878d395b 100644
--- a/projects/site/package.json
+++ b/projects/site/package.json
@@ -167,7 +167,15 @@
       "env": {
         "PAGES_BASE_URL": {
           "external": true,
-          "default": "/elements/preview/"
+          "default": "/"
+        },
+        "ELEMENTS_SITE_URL": {
+          "external": true,
+          "default": "http://localhost:4173/"
+        },
+        "LOCAL_PREVIEW": {
+          "external": true,
+          "default": "false"
         }
       }
     },
diff --git a/projects/site/src/_11ty/layouts/common.js b/projects/site/src/_11ty/layouts/common.js
index de8027b741..6db752b648 100644
--- a/projects/site/src/_11ty/layouts/common.js
+++ b/projects/site/src/_11ty/layouts/common.js
@@ -77,7 +77,8 @@ export const renderBaseHead = data => {
     /* hide non-ssr elements until defined */
     nve-tree:not(:defined),
     nve-grid:not(:defined),
-    nvd-canvas:not(:defined) {
+    nvd-canvas:not(:defined),
+    nve-button:not(:defined) {
       visibility: hidden !important;
     }
 
@@ -219,7 +220,7 @@ export const renderDocsNav = data => /* html */ `
     <nve-tree-node ${data.page.url.includes('/docs/design-md/') ? 'highlighted selected' : ''}><a href="/docs/design-md/">DESIGN.md</a></nve-tree-node>
   </nve-tree-node>
 
-  <nve-tree-node ${data.page.url.includes('/docs/elements/') ? 'expanded' : ''} ${data.page.url === '/docs/elements/' ? 'highlighted selected' : ''}>
+  <nve-tree-node ${data.page.url.includes('/docs/elements/') || data.page.url.includes('/docs/monaco/') || data.page.url.includes('/docs/markdown/') || data.page.url.includes('/docs/code/') ? 'expanded' : ''} ${data.page.url === '/docs/elements/' ? 'highlighted selected' : ''}>
     <a href="/docs/elements/">Elements</a>
     <nve-tree-node ${data.page.url.includes('/docs/elements/accordion/') ? 'highlighted selected' : ''}><a href="/docs/elements/accordion/">Accordion</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/alert/') ? 'highlighted selected' : ''}><a href="/docs/elements/alert/">Alert</a></nve-tree-node>
@@ -231,6 +232,7 @@ export const renderDocsNav = data => /* html */ `
     <nve-tree-node ${data.page.url.includes('/docs/elements/card/') ? 'highlighted selected' : ''}><a href="/docs/elements/card/">Card</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/chat-message/') ? 'highlighted selected' : ''}><a href="/docs/elements/chat-message/">Chat Message</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/checkbox/') ? 'highlighted selected' : ''}><a href="/docs/elements/checkbox/">Checkbox</a></nve-tree-node>
+    <nve-tree-node ${data.page.url.includes('/docs/code/codeblock/') ? 'highlighted selected' : ''}><a href="/docs/code/codeblock/">Codeblock</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/color/') ? 'highlighted selected' : ''}><a href="/docs/elements/color/">Color</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/combobox/') ? 'highlighted selected' : ''}><a href="/docs/elements/combobox/">Combobox</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/copy-button/') ? 'highlighted selected' : ''}><a href="/docs/elements/copy-button/">Copy Button</a></nve-tree-node>
@@ -285,8 +287,15 @@ export const renderDocsNav = data => /* html */ `
     <nve-tree-node ${data.page.url.includes('/docs/elements/input/') ? 'highlighted selected' : ''}><a href="/docs/elements/input/">Input</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/input-group/') ? 'highlighted selected' : ''}><a href="/docs/elements/input-group/">Input Group</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/logo/') ? 'highlighted selected' : ''}><a href="/docs/elements/logo/">Logo</a></nve-tree-node>
+    <nve-tree-node ${data.page.url.endsWith('/docs/markdown/') ? 'highlighted selected' : ''}><a href="/docs/markdown/">Markdown</a></nve-tree-node>
+    <nve-tree-node ${data.page.url.includes('/docs/markdown/styles/') ? 'highlighted selected' : ''}><a href="/docs/markdown/styles/">Markdown CSS</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/menu/') ? 'highlighted selected' : ''}><a href="/docs/elements/menu/">Menu</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/month/') ? 'highlighted selected' : ''}><a href="/docs/elements/month/">Month</a></nve-tree-node>
+    <nve-tree-node ${data.page.url.includes('/docs/monaco/input/') ? 'highlighted selected' : ''}><a href="/docs/monaco/input/">Monaco Input</a></nve-tree-node>
+    <nve-tree-node ${data.page.url.includes('/docs/monaco/diff-input/') ? 'highlighted selected' : ''}><a href="/docs/monaco/diff-input/">Monaco Diff Input</a></nve-tree-node>
+    <nve-tree-node ${data.page.url.includes('/docs/monaco/editor/') ? 'highlighted selected' : ''}><a href="/docs/monaco/editor/">Monaco Editor</a></nve-tree-node>
+    <nve-tree-node ${data.page.url.includes('/docs/monaco/diff-editor/') ? 'highlighted selected' : ''}><a href="/docs/monaco/diff-editor/">Monaco Diff Editor</a></nve-tree-node>
+    <nve-tree-node ${data.page.url.includes('/docs/monaco/problems/') ? 'highlighted selected' : ''}><a href="/docs/monaco/problems/">Monaco Problems</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/notification/') ? 'highlighted selected' : ''}><a href="/docs/elements/notification/">Notification</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/page/') ? 'highlighted selected' : ''}><a href="/docs/elements/page/">Page</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/elements/page-header/') ? 'highlighted selected' : ''}><a href="/docs/elements/page-header/">Page Header</a></nve-tree-node>
@@ -342,26 +351,6 @@ export const renderDocsNav = data => /* html */ `
     <nve-tree-node ${data.page.url.includes('/docs/patterns/trend/') ? 'highlighted selected' : ''}><a href="/docs/patterns/trend/">Trend</a></nve-tree-node>
   </nve-tree-node>
 
-  <nve-tree-node ${data.page.url.includes('/docs/code/') ? 'expanded' : ''}>
-    <a href="/docs/code/codeblock/">Code</a>
-    <nve-tree-node ${data.page.url.includes('/docs/code/codeblock/') ? 'highlighted selected' : ''}><a href="/docs/code/codeblock/">Codeblock</a></nve-tree-node>
-  </nve-tree-node>
-
-  <nve-tree-node ${data.page.url.includes('/docs/monaco/') ? 'expanded' : ''}>
-    <a href="/docs/monaco/input/">Monaco</a>
-    <nve-tree-node ${data.page.url.includes('/docs/monaco/input/') ? 'highlighted selected' : ''}><a href="/docs/monaco/input/">Input</a></nve-tree-node>
-    <nve-tree-node ${data.page.url.includes('/docs/monaco/diff-input/') ? 'highlighted selected' : ''}><a href="/docs/monaco/diff-input/">Diff Input</a></nve-tree-node>
-    <nve-tree-node ${data.page.url.includes('/docs/monaco/editor/') ? 'highlighted selected' : ''}><a href="/docs/monaco/editor/">Editor</a></nve-tree-node>
-    <nve-tree-node ${data.page.url.includes('/docs/monaco/diff-editor/') ? 'highlighted selected' : ''}><a href="/docs/monaco/diff-editor/">Diff Editor</a></nve-tree-node>
-    <nve-tree-node ${data.page.url.includes('/docs/monaco/problems/') ? 'highlighted selected' : ''}><a href="/docs/monaco/problems/">Problems</a></nve-tree-node>
-  </nve-tree-node>
-
-  <nve-tree-node ${data.page.url.includes('/docs/markdown/') ? 'expanded' : ''}>
-    <a href="/docs/markdown/">Markdown</a>
-    <nve-tree-node ${data.page.url.endsWith('/docs/markdown/') ? 'highlighted selected' : ''}><a href="/docs/markdown/">Markdown</a></nve-tree-node>
-    <nve-tree-node ${data.page.url.includes('/docs/markdown/styles/') ? 'highlighted selected' : ''}><a href="/docs/markdown/styles/">CSS Utility</a></nve-tree-node>
-  </nve-tree-node>
-
   <nve-tree-node ${data.page.url.includes('/docs/labs/') ? 'expanded' : ''} ${data.page.url === '/docs/labs/' ? 'highlighted' : ''}>
     <a href="/docs/labs/">Labs</a>
     <nve-tree-node ${data.page.url.includes('/docs/labs/layout/responsive/') ? 'expanded' : ''} ${data.page.url === '/docs/labs/layout/responsive/' ? 'highlighted' : ''}>
diff --git a/projects/site/src/_11ty/layouts/docs.css b/projects/site/src/_11ty/layouts/docs.css
index 67fc187e3a..4dab2367cb 100644
--- a/projects/site/src/_11ty/layouts/docs.css
+++ b/projects/site/src/_11ty/layouts/docs.css
@@ -205,10 +205,6 @@ p[nve-text~='mkd']:has(*:not(code, a, pre)) {
   text-box: initial !important;
 }
 
-code:has(nve-codeblock) {
-  display: contents;
-}
-
 pre {
   display: block;
   margin: 0;
@@ -216,14 +212,19 @@ pre {
   width: 100%;
 }
 
-code > nve-codeblock {
-  --padding: var(--nve-ref-space-lg);
-  min-height: 65px;
+.markdown-codeblock {
+  anchor-scope: --codeblock;
   width: 100%;
-  anchor-name: --codeblock;
+
+  nve-codeblock {
+    --padding: var(--nve-ref-space-lg);
+    anchor-name: --codeblock;
+    min-height: 65px;
+    width: 100%;
+  }
 }
 
-nve-copy-button.markdown-copy-button {
+.markdown-copy-button {
   position: absolute;
   position-anchor: --codeblock;
   bottom: calc(anchor(bottom) + var(--nve-ref-space-md));
@@ -232,17 +233,11 @@ nve-copy-button.markdown-copy-button {
   transition: opacity 0.15s ease-in-out;
 }
 
-code:has(nve-codeblock:hover) nve-copy-button.markdown-copy-button,
-nve-copy-button.markdown-copy-button:hover {
+.markdown-codeblock:has(nve-codeblock:hover) .markdown-copy-button,
+.markdown-copy-button:hover {
   opacity: 1;
 }
 
-pre:has(nve-codeblock),
-code:has(nve-codeblock) {
-  display: contents;
-  anchor-scope: --codeblock;
-}
-
 /* Canvas Styles */
 nvd-canvas {
   min-height: 120px;
diff --git a/projects/site/src/_11ty/libraries/markdown.js b/projects/site/src/_11ty/libraries/markdown.js
index df0b56020b..5fd6387c0b 100644
--- a/projects/site/src/_11ty/libraries/markdown.js
+++ b/projects/site/src/_11ty/libraries/markdown.js
@@ -7,9 +7,12 @@ const markdown = markdownIt({
   linkify: true,
   highlight: function (str, lang) {
     lang = lang === 'javascript' ? 'typescript' : lang; // alias javascript to typescript
-    return /* html */ `<nve-codeblock language="${lang}"><template>${markdown.utils.escapeHtml(str)}</template></nve-codeblock>
-    <nve-copy-button class="markdown-copy-button" role="button" aria-label="copy" behavior-copy container="flat"></nve-copy-button>
-
+    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>
+      <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;
@@ -19,6 +22,25 @@ const markdown = markdownIt({
   }
 });
 
+markdown.renderer.rules.fence = function (tokens, idx, options, env, slf) {
+  const token = tokens[idx];
+  const info = token.info ? markdown.utils.unescapeAll(token.info).trim() : '';
+  let langName = '';
+  let highlighted;
+
+  if (info) {
+    langName = info.split(/\s+/g)[0];
+  }
+
+  if (options.highlight) {
+    highlighted = options.highlight(token.content, langName) || markdown.utils.escapeHtml(token.content);
+  } else {
+    highlighted = markdown.utils.escapeHtml(token.content);
+  }
+
+  return highlighted + '\n';
+};
+
 const formats = {
   h1: 'display emphasis',
   h2: 'heading xl emphasis',
diff --git a/projects/site/src/_11ty/shortcodes/api.js b/projects/site/src/_11ty/shortcodes/api.js
index 1188a20628..199451ae35 100644
--- a/projects/site/src/_11ty/shortcodes/api.js
+++ b/projects/site/src/_11ty/shortcodes/api.js
@@ -56,17 +56,17 @@ export function renderAPINameTable(apiValue) {
       .render(apiValue.descriptionText ?? apiValue.description ?? '')
       .trim()
       .replaceAll('<p>', '<p nve-text="body relaxed">')}
-    <nve-grid container="flat">
-      <nve-grid-header>
-        <nve-grid-column width="200px">${apiValue.name.charAt(0).toUpperCase() + apiValue.name.slice(1)}</nve-grid-column>
-        <nve-grid-column>Description</nve-grid-column>
+    <nve-grid role="grid" container="flat">
+      <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>
       </nve-grid-header>
       ${values
         .filter(i => !i.deprecated)
         .map(
-          i => /* html */ `<nve-grid-row>
-        <nve-grid-cell><span nve-text="code nowrap">${escapeHtml(i.value)}</span></nve-grid-cell>
-        <nve-grid-cell>${i.description ?? ''}</nve-grid-cell>
+          i => /* html */ `<nve-grid-row role="row">
+        <nve-grid-cell role="gridcell"><span nve-text="code nowrap">${escapeHtml(i.value)}</span></nve-grid-cell>
+        <nve-grid-cell role="gridcell">${i.description ?? ''}</nve-grid-cell>
       </nve-grid-row>`
         )
         .join('')}
@@ -95,12 +95,12 @@ 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 container="${options.container}" style="min-height: 100px">
-      <nve-grid-header>
-        <nve-grid-column width="200px">${type.charAt(0).toUpperCase() + type.slice(1)}</nve-grid-column>
-        ${type === 'property' ? '<nve-grid-column width="200px">Attribute</nve-grid-column>' : ''}
-        <nve-grid-column>Description</nve-grid-column>
-        ${type === 'property' ? '<nve-grid-column>Values</nve-grid-column>' : ''}
+    <nve-grid role="grid" 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>' : ''}
+        <nve-grid-column role="columnheader">Description</nve-grid-column>
+        ${type === 'property' ? '<nve-grid-column role="columnheader">Values</nve-grid-column>' : ''}
       </nve-grid-header>
       ${items
         .map(i => {
@@ -112,15 +112,15 @@ export function renderAPITable(element, type, options = { container: 'flat' }) {
                 .replaceAll('<p', `<p nve-text="body relaxed sm${i.deprecated ? ' muted' : ''}"`)
                 .replaceAll('<code', '<code nve-text="code nowrap"')
             : '';
-          return /* html */ `<nve-grid-row>
-        <nve-grid-cell><span nve-text="code nowrap">${escapeHtml(i.name === '' ? 'default' : i.name)}</span></nve-grid-cell>
-        ${type === 'property' ? /* html */ `<nve-grid-cell><span nve-text="code nowrap">${escapeHtml(getMemberAttributeName(element.manifest, i) ?? 'none')}</span></nve-grid-cell>` : ''}
-        <nve-grid-cell>
+          return /* html */ `<nve-grid-row role="row">
+        <nve-grid-cell role="gridcell"><span nve-text="code nowrap">${escapeHtml(i.name === '' ? 'default' : i.name)}</span></nve-grid-cell>
+        ${type === 'property' ? /* html */ `<nve-grid-cell role="gridcell"><span nve-text="code nowrap">${escapeHtml(getMemberAttributeName(element.manifest, i) ?? 'none')}</span></nve-grid-cell>` : ''}
+        <nve-grid-cell role="gridcell">
           <div nve-layout="column gap:xs">${i.deprecated ? '<nve-badge status="warning" container="flat">deprecated</nve-badge>' : ''}${description}</div>
         </nve-grid-cell>
         ${
           type === 'property'
-            ? /* html */ `<nve-grid-cell>
+            ? /* html */ `<nve-grid-cell role="gridcell">
           <div nve-layout="${i.type?.values?.some(v => v.description) ? 'column gap:xs' : 'row gap:xxs align:wrap'}">
           ${(i.type?.values ?? [])
             .map(
diff --git a/projects/site/src/_11ty/shortcodes/example.js b/projects/site/src/_11ty/shortcodes/example.js
index b862aa95ce..4701fbd595 100644
--- a/projects/site/src/_11ty/shortcodes/example.js
+++ b/projects/site/src/_11ty/shortcodes/example.js
@@ -80,6 +80,7 @@ export async function exampleShortcode(
     ? /* html */ `
 <div class="example-shortcode" nve-layout="column gap:sm">
 ${config.summary ? summary : ''}
+<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}${playgroundButton}
 </nvd-canvas>
diff --git a/projects/site/src/docs/elements/index.11ty.js b/projects/site/src/docs/elements/index.11ty.js
index f72877630b..1398595f43 100644
--- a/projects/site/src/docs/elements/index.11ty.js
+++ b/projects/site/src/docs/elements/index.11ty.js
@@ -1,4 +1,5 @@
 import { siteData } from '../../index.11tydata.js';
+import { parseFragment, serialize } from 'parse5';
 
 export const data = {
   title: 'Components',
@@ -27,6 +28,225 @@ const escapeHtml = value =>
 
 const sortByTitle = (a, b) => a.title.localeCompare(b.title);
 
+const defaultExamplesByTag = new Map(
+  siteData.examples
+    .filter(example => example.name === 'Default' && !example.element.includes('nve-panel'))
+    .map(example => [example.element, example])
+);
+
+const disallowedPreviewElements = new Set(['base', 'embed', 'iframe', 'link', 'meta', 'object', 'script']);
+const previewUrlAttributes = new Set(['action', 'formaction', 'href', 'poster', 'src', 'xlink:href']);
+const safePreviewProtocols = new Set(['http:', 'https:', 'mailto:', 'tel:']);
+
+const isSafePreviewUrl = value => {
+  try {
+    return safePreviewProtocols.has(new URL(value, 'https://elements.invalid').protocol);
+  } catch {
+    return false;
+  }
+};
+
+const sanitizePreviewNode = node => {
+  if (!Array.isArray(node.childNodes)) return;
+  node.childNodes = node.childNodes.filter(child => !disallowedPreviewElements.has(child.nodeName));
+  node.childNodes.forEach(child => {
+    if (Array.isArray(child.attrs)) {
+      child.attrs = child.attrs.filter(attribute => {
+        const name = attribute.name.toLowerCase();
+        if (name.startsWith('on') || name === 'srcdoc') return false;
+        if (previewUrlAttributes.has(name)) return isSafePreviewUrl(attribute.value);
+        return true;
+      });
+    }
+
+    sanitizePreviewNode(child);
+    if (child.content) sanitizePreviewNode(child.content);
+  });
+};
+
+const sanitizePreviewTemplate = template => {
+  const fragment = parseFragment(String(template ?? ''));
+  sanitizePreviewNode(fragment);
+  return serialize(fragment).trim();
+};
+
+const flattenNestedContainers = template =>
+  template.replace(/<(nve-(?:grid|accordion-group|accordion))(?=[\s>])([^>]*)>/g, (match, tag, attributes) =>
+    attributes.includes('container=') ? match : `<${tag} container="flat"${attributes}>`
+  );
+
+const renderPopoverMock = ({ title, content, type = 'popover' }) => /* html */ `
+  <div class="preview-mock preview-mock-${type}" nve-layout="column gap:sm">
+    <div nve-layout="row align:space-between gap:md">
+      <span nve-text="label sm medium">${title}</span>
+      <span nve-text="body sm muted">×</span>
+    </div>
+    <p nve-text="body sm">${content}</p>
+  </div>`;
+
+const renderMonacoMock = tag => {
+  const isDiff = tag.includes('diff');
+  const isProblems = tag.includes('problems');
+  const title = isProblems ? 'Problems' : isDiff ? 'Changes' : 'pipeline.ts';
+
+  if (isProblems) {
+    return /* html */ `
+      <div class="preview-editor">
+        <div class="preview-editor-tab" nve-text="label sm medium">${title}</div>
+        <div class="preview-problems" nve-layout="column gap:xs">
+          <p nve-text="body sm"><span class="preview-problems-marker">×</span> Type mismatch in deployment config</p>
+          <p nve-text="body sm"><span class="preview-problems-marker">!</span> Unused environment variable</p>
+          <p nve-text="body sm muted">2 problems in 2 files</p>
+        </div>
+      </div>`;
+  }
+
+  const codePane = (label, value) => /* html */ `
+    <div class="preview-editor-pane">
+      ${label ? `<div class="preview-editor-pane-label" nve-text="label sm muted">${label}</div>` : ''}
+      <div class="preview-editor-code" nve-text="code">
+        <span>1</span><code nve-text="code">const model = '${value}';</code>
+        <span>2</span><code nve-text="code">deploy(model);</code>
+        <span>3</span><code nve-text="code">monitor('gpu');</code>
+      </div>
+    </div>`;
+
+  return /* html */ `
+    <div class="preview-editor">
+      <div class="preview-editor-tab" nve-text="label sm medium">${title}</div>
+      <div class="preview-editor-panes">
+        ${isDiff ? codePane('Original', 'v1') + codePane('Modified', 'v2') : codePane('', 'nemotron')}
+      </div>
+    </div>`;
+};
+
+const previewOverrides = {
+  'nve-dialog': renderPopoverMock({
+    title: 'Deploy model?',
+    content: 'Review the configuration before continuing.',
+    type: 'dialog'
+  }),
+  'nve-drawer': /* html */ `
+    <div class="preview-drawer" nve-layout="column gap:md">
+      <div nve-layout="row align:space-between">
+        <span nve-text="label sm medium">Session details</span>
+        <span nve-text="body sm muted">×</span>
+      </div>
+      <div class="preview-mock-lines"><span></span><span></span><span></span></div>
+    </div>`,
+  'nve-dropdown': /* html */ `
+    <div class="preview-dropdown" nve-layout="column gap:xs">
+      <span nve-text="label sm medium">Actions</span>
+      <span nve-text="body sm">Open details</span>
+      <span nve-text="body sm">Duplicate</span>
+      <span nve-text="body sm">Archive</span>
+    </div>`,
+  'nve-dropdown-group': /* html */ `
+    <div class="preview-dropdown-group">
+      <div class="preview-dropdown" nve-layout="column gap:xs">
+        <span nve-text="label sm medium">Create</span>
+        <span nve-text="body sm">Workspace&nbsp;›</span>
+        <span nve-text="body sm">Deployment</span>
+      </div>
+      <div class="preview-dropdown preview-dropdown-nested" nve-layout="column gap:xs">
+        <span nve-text="body sm">Training</span>
+        <span nve-text="body sm">Inference</span>
+      </div>
+    </div>`,
+  'nve-grid': /* html */ `
+    <nve-grid>
+      <nve-grid-header>
+        <nve-grid-column>Model</nve-grid-column>
+        <nve-grid-column>Status</nve-grid-column>
+        <nve-grid-column>GPUs</nve-grid-column>
+      </nve-grid-header>
+      <nve-grid-row>
+        <nve-grid-cell>Nemotron</nve-grid-cell>
+        <nve-grid-cell>Running</nve-grid-cell>
+        <nve-grid-cell>8</nve-grid-cell>
+      </nve-grid-row>
+      <nve-grid-row>
+        <nve-grid-cell>Cosmos</nve-grid-cell>
+        <nve-grid-cell>Ready</nve-grid-cell>
+        <nve-grid-cell>4</nve-grid-cell>
+      </nve-grid-row>
+    </nve-grid>`,
+  'nve-notification': renderPopoverMock({
+    title: 'Deployment ready',
+    content: 'The new endpoint is available.',
+    type: 'notification'
+  }),
+  'nve-page': /* html */ `
+    <div class="preview-page">
+      <div class="preview-page-header" nve-layout="row align:space-between">
+        <span nve-text="label sm medium">Infrastructure</span>
+        <span nve-text="body sm muted">Deploy</span>
+      </div>
+      <div class="preview-page-body">
+        <div class="preview-page-nav" nve-layout="column gap:sm">
+          <span></span><span></span><span></span>
+        </div>
+        <div class="preview-page-main" nve-layout="column gap:sm">
+          <span nve-text="label sm medium">Models</span>
+          <div class="preview-mock-lines"><span></span><span></span><span></span></div>
+        </div>
+      </div>
+    </div>`,
+  'nve-page-loader': /* html */ `
+    <div class="preview-page-loader" nve-layout="column gap:sm align:center">
+      <nve-progress-ring status="accent"></nve-progress-ring>
+      <span nve-text="body sm muted">Loading workspace</span>
+    </div>`,
+  'nve-panel': /* html */ `
+    <div class="preview-panel" nve-layout="column gap:md">
+      <div nve-layout="column gap:xs">
+        <span nve-text="label medium">Deployment</span>
+        <span nve-text="body sm muted">Session details</span>
+      </div>
+      <div nve-layout="column gap:md">
+        <div nve-layout="column gap:xs">
+          <span nve-text="body sm muted">Status</span>
+          <span nve-text="label sm">Ready</span>
+        </div>
+        <div nve-layout="column gap:xs">
+          <span nve-text="body sm muted">GPUs</span>
+          <span nve-text="label sm">8 × H100</span>
+        </div>
+      </div>
+    </div>`,
+  'nve-toast': renderPopoverMock({ title: 'Changes saved', content: 'Your settings are up to date.', type: 'toast' }),
+  'nve-toggletip': renderPopoverMock({
+    title: 'GPU allocation',
+    content: 'Choose a pool that matches the workload.',
+    type: 'toggletip'
+  }),
+  'nve-tooltip': /* html */ `
+    <div class="preview-tooltip" nve-text="body sm">Copy deployment ID</div>`,
+  'nve-tree': /* html */ `
+    <nve-tree behavior-expand>
+      <nve-tree-node expanded>
+        Infrastructure
+        <nve-tree-node>Training</nve-tree-node>
+        <nve-tree-node>Inference</nve-tree-node>
+      </nve-tree-node>
+      <nve-tree-node>Datasets</nve-tree-node>
+    </nve-tree>`,
+  'nve-monaco-diff-editor': renderMonacoMock('nve-monaco-diff-editor'),
+  'nve-monaco-diff-input': renderMonacoMock('nve-monaco-diff-input'),
+  'nve-monaco-editor': renderMonacoMock('nve-monaco-editor'),
+  'nve-monaco-input': renderMonacoMock('nve-monaco-input'),
+  'nve-monaco-problems': renderMonacoMock('nve-monaco-problems')
+};
+
+const getPreviewTemplate = tag => {
+  const defaultTemplate = defaultExamplesByTag.get(tag)?.template;
+  const template =
+    previewOverrides[tag] ??
+    (defaultTemplate ? sanitizePreviewTemplate(defaultTemplate) : `<code nve-text="code">${escapeHtml(tag)}</code>`);
+
+  return flattenNestedContainers(template);
+};
+
 const createComponentCatalog = componentDocs => {
   const docsByTag = new Map(componentDocs.filter(hasComponentTag).map(component => [component.data.tag, component]));
 
@@ -44,43 +264,328 @@ const createComponentCatalog = componentDocs => {
           description: element.manifest?.description?.trim() ?? `Documentation for ${doc.data.title}.`,
           href: doc.url,
           packageName: element.package,
+          preview: '',
           tag: element.name,
           title: doc.data.title,
           version: element.version
         };
       })
+      .map(component => {
+        const preview = getPreviewTemplate(component.tag);
+
+        return {
+          ...component,
+          preview
+        };
+      })
       .sort(sortByTitle);
 
   return [...createCatalogSection(isElementsComponentDoc), ...createCatalogSection(isLibraryComponentDoc)];
 };
 
-const renderComponentLink = component => /* html */ `
-  <a href="${escapeHtml(component.href)}">
-    <nve-card style="height: 100%; min-height: 150px">
-      <nve-card-header>
-        <div nve-layout="row align:space-between">
-          <h3 nve-text="label medium">${escapeHtml(component.title)}</h3>
-          <p nve-text="body sm muted"><code nve-text="code">${escapeHtml(component.tag)}</code></p>
-        </div>
-      </nve-card-header>
-      <nve-card-content>
+const renderComponentCard = component => /* html */ `
+  <nve-card class="component-card">
+    <div
+      class="component-preview"
+      data-component-preview="${escapeHtml(component.tag)}"
+      aria-hidden="true"
+      inert
+    >
+      <div class="component-preview-content">${component.preview}</div>
+    </div>
+    <nve-card-content>
+      <div nve-layout="column gap:sm">
+        <h3 nve-text="label medium">${escapeHtml(component.title)}</h3>
         <p nve-text="body sm">${escapeHtml(component.description)}</p>
-      </nve-card-content>
-    </nve-card>
-  </a>`;
+      </div>
+    </nve-card-content>
+    <a
+      class="component-card-link"
+      href="${escapeHtml(component.href)}"
+      aria-label="View ${escapeHtml(component.title)} documentation"
+    ></a>
+  </nve-card>`;
+
+const renderPreviewScript = () => /* html */ `
+<script type="module">
+  const loadPreview = async preview => {
+    const tag = preview.dataset.componentPreview;
+
+    try {
+      const customElementNames = new Set(
+        [...preview.querySelectorAll('*')]
+          .map(element => element.localName)
+          .filter(name => name.startsWith('nve-'))
+      );
+      await Promise.all([...customElementNames].map(name => customElements.whenDefined(name)));
+
+      if (tag === 'nve-sparkline') {
+        preview.querySelector('nve-sparkline').data = [18, 22, 20, 24, 19, 28, 25, 30];
+      }
+
+      const updates = [...preview.querySelectorAll('*')]
+        .map(element => element.updateComplete)
+        .filter(Boolean);
+      await Promise.all(updates);
+      await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+    } catch (error) {
+      console.error('Unable to load component preview', { error, tag });
+      preview.dataset.previewError = '';
+    }
+
+    preview.dataset.previewReady = '';
+  };
+
+  const previews = document.querySelectorAll('[data-component-preview]');
+
+  if ('IntersectionObserver' in globalThis) {
+    const observer = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          if (!entry.isIntersecting) return;
+          observer.unobserve(entry.target);
+          void loadPreview(entry.target);
+        });
+      },
+      { rootMargin: '300px 0px' }
+    );
+
+    previews.forEach(preview => observer.observe(preview));
+  } else {
+    previews.forEach(preview => void loadPreview(preview));
+  }
+</script>`;
 
 export function render(data) {
   const components = createComponentCatalog(data.collections.componentDocs);
 
   return /* html */ `
 <style>
-  a:has(nve-card) {
-    text-decoration: none;
+  #doc-content {
+    max-width: 1400px !important;
+  }
+
+  .component-card {
+    position: relative;
+    height: 100%;
+    min-height: 300px;
+  }
+
+  .component-card-link {
+    position: absolute;
+    z-index: 2;
+    inset: 0;
+    border-radius: var(--nve-ref-border-radius-lg);
+    cursor: pointer;
+  }
+
+  .component-card-link:focus-visible {
+    outline: var(--nve-ref-outline);
+    outline-offset: calc(-1 * var(--nve-ref-size-50));
+  }
+
+  .component-preview {
+    position: relative;
+    display: grid;
+    place-items: center;
+    height: 180px;
+    overflow: hidden;
+    border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);
+    background: color-mix(
+      in oklab,
+      var(--nve-sys-layer-container-accent-background) 70%,
+      transparent
+    );
+  }
+
+  .component-preview-content {
+    display: grid;
+    place-items: center;
+    width: 100%;
+    height: 100%;
+    transform: scale(0.85);
+  }
+
+  .preview-mock,
+  .preview-dropdown,
+  .preview-tooltip,
+  .preview-drawer,
+  .preview-editor,
+  .preview-page,
+  .preview-panel {
+    border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);
+    border-radius: var(--nve-ref-border-radius-md);
+    background: var(--nve-sys-layer-container-background);
+    color: var(--nve-sys-layer-container-color);
+    box-shadow: var(--nve-ref-shadow-200);
+  }
+
+  .preview-mock {
+    width: 280px;
+    padding: var(--nve-ref-space-md);
+  }
+
+  .preview-mock-notification {
+    border-inline-start: var(--nve-ref-border-width-lg) solid var(--nve-sys-support-accent-color);
+  }
+
+  .preview-tooltip {
+    position: relative;
+    padding: var(--nve-ref-space-xs) var(--nve-ref-space-sm);
+  }
+
+  .preview-tooltip::after {
+    position: absolute;
+    bottom: calc(-1 * var(--nve-ref-space-xs));
+    left: 50%;
+    width: var(--nve-ref-space-sm);
+    height: var(--nve-ref-space-sm);
+    background: inherit;
+    content: '';
+    transform: translateX(-50%) rotate(45deg);
+  }
+
+  .preview-drawer {
+    width: 250px;
+    height: 170px;
+    padding: var(--nve-ref-space-md);
+    border-radius: 0;
+    border-inline-start: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);
+  }
+
+  .preview-panel {
+    width: 260px;
+    height: 180px;
+    padding: var(--nve-ref-space-md);
+    border-radius: 0;
+  }
+
+  .preview-page {
+    width: 560px;
+    height: 260px;
+    overflow: hidden;
+    background: var(--nve-sys-layer-canvas-background);
+  }
+
+  .preview-page-header {
+    min-height: var(--nve-ref-size-900);
+    padding: var(--nve-ref-space-sm) var(--nve-ref-space-md);
+    border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);
+    background: var(--nve-sys-layer-shell-background);
+  }
+
+  .preview-page-body {
+    display: grid;
+    grid-template-columns: 140px 1fr;
+    height: calc(100% - var(--nve-ref-size-900));
+  }
 
-    * {
-      cursor: pointer;
+  .preview-page-nav,
+  .preview-page-main {
+    padding: var(--nve-ref-space-md);
+  }
+
+  .preview-page-nav {
+    border-inline-end: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);
+    background: var(--nve-sys-layer-container-background);
+
+    > span {
+      display: block;
+      width: 100%;
+      height: var(--nve-ref-space-sm);
+      border-radius: var(--nve-ref-border-radius-sm);
+      background: var(--nve-sys-interaction-background);
     }
   }
+
+  .preview-mock-lines {
+    display: grid;
+    gap: var(--nve-ref-space-sm);
+
+    span {
+      display: block;
+      width: 100%;
+      height: var(--nve-ref-space-sm);
+      border-radius: var(--nve-ref-border-radius-sm);
+      background: var(--nve-sys-interaction-background);
+    }
+
+    span:nth-child(2) {
+      width: 80%;
+    }
+
+    span:nth-child(3) {
+      width: 60%;
+    }
+  }
+
+  .preview-dropdown {
+    min-width: 170px;
+    padding: var(--nve-ref-space-sm);
+  }
+
+  .preview-dropdown-group {
+    position: relative;
+    width: 310px;
+    height: 140px;
+  }
+
+  .preview-dropdown-nested {
+    position: absolute;
+    top: var(--nve-ref-space-lg);
+    right: 0;
+  }
+
+  .preview-editor {
+    width: 430px;
+    height: 180px;
+    overflow: hidden;
+    background: var(--nve-sys-layer-container-background);
+    color: var(--nve-sys-layer-container-color);
+    box-shadow: none;
+  }
+
+  .preview-editor-tab,
+  .preview-editor-pane-label {
+    padding: var(--nve-ref-space-xs) var(--nve-ref-space-sm);
+    border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);
+  }
+
+  .preview-editor-panes {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    height: calc(100% - var(--nve-ref-space-xl));
+  }
+
+  .preview-editor-pane + .preview-editor-pane {
+    border-inline-start: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);
+  }
+
+  .preview-editor-code {
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    gap: var(--nve-ref-space-xs) var(--nve-ref-space-sm);
+    padding: var(--nve-ref-space-sm);
+
+    > span {
+      color: var(--nve-sys-text-muted-color);
+      text-align: end;
+    }
+  }
+
+  .preview-problems {
+    padding: var(--nve-ref-space-sm);
+  }
+
+  .preview-problems-marker {
+    display: inline-grid;
+    place-items: center;
+    width: var(--nve-ref-space-md);
+    margin-inline-end: var(--nve-ref-space-xs);
+    border-radius: var(--nve-ref-border-radius-full);
+    background: var(--nve-sys-interaction-background);
+  }
 </style>
 
 <h1 nve-text="heading xl mkd">NVIDIA Elements Components</h1>
@@ -91,7 +596,9 @@ export function render(data) {
   stable <code nve-text="code">nve-*</code> APIs, design tokens, accessibility guidance, and examples.
 </p>
 
-<div nve-layout="grid gap:md align:vertical-stretch span-items:12 &md|span-items:6 &xl|span-items:4">
-  ${components.map(renderComponentLink).join('')}
-</div>`;
+<div nve-layout="grid gap:md align:vertical-stretch span-items:12 &lg|span-items:6 &xl|span-items:4 &xxl|span-items:3">
+  ${components.map(renderComponentCard).join('')}
+</div>
+
+${renderPreviewScript()}`;
 }