chore(docs): add component preview to card list

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

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 A drawer displays content separate from the rest of the page, such as notifications, navigation, and settings.
  * @documentation https://nvidia.github.io/elements/docs/elements/drawer/
  * @since 0.16.0
  * @entrypoint \@nvidia-elements/core/drawer

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>
 `};
 
 /**

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

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

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

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.
 

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"
         }
       }
     },

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' : ''}>

projects/site/src/_11ty/layouts/docs.css

@@ -205,25 +205,26 @@ p[nve-text~='mkd']:has(*:not(code, a, pre)) {
   text-box: initial !important;
 }
 
-code:has(nve-codeblock) {
-  display: contents;
-}
-
 pre {
   display: block;
   margin: 0;
   padding: 0;
   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;

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',

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(

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>