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>

Author: coryrylan

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
- * @descriptionDrawer 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)
+ * @descriptionA 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 {
  */
 exportconstDefault={
 render: ()=>html`
-<divnve-layout="row gap:sm">
-<nve-gaugevalue="50">50%</nve-gauge>
-<nve-gaugestatus="accent" value="66">66%</nve-gauge>
-</div>
+<nve-gaugestatus="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;