Topic tool cleanup

pnpm-workspace.yaml

@@ -86,6 +86,7 @@ catalog:
   '@lit/reactive-element': 2.1.2
   '@modelcontextprotocol/ext-apps': 1.7.5
   '@modelcontextprotocol/sdk': 1.30.0
+  '@modelcontextprotocol/server': 2.0.0
   '@types/node': 25.6.2
   '@types/react': 19.2.14
   '@types/react-dom': 19.2.3

projects/cli/package.json

@@ -4,12 +4,15 @@
   "release": {
     "extends": "../../release.config.js"
   },
-  "description": "Command-line interface for Elements development and tooling, providing interactive prompts, project scaffolding, and integration with AI assistants via Model Context Protocol.",
+  "description": "Command-line interface for NVIDIA Elements development and tooling, providing interactive prompts, project scaffolding, and integration with AI assistants via Model Context Protocol.",
   "keywords": [
+    "nvidia",
+    "web-components",
+    "design-system",
     "cli",
+    "project-scaffolding",
     "mcp",
-    "elements",
-    "web-components"
+    "model-context-protocol"
   ],
   "homepage": "https://NVIDIA.github.io/elements/",
   "type": "module",
@@ -48,7 +51,7 @@
   "dependencies": {
     "@inquirer/prompts": "8.5.0",
     "@modelcontextprotocol/ext-apps": "catalog:",
-    "@modelcontextprotocol/server": "2.0.0",
+    "@modelcontextprotocol/server": "catalog:",
     "@nvidia-elements/code": "workspace:*",
     "@nvidia-elements/lint": "workspace:^",
     "adm-zip": "0.5.17",

projects/code/package.json

@@ -6,9 +6,13 @@
   },
   "description": "Code authoring related components. Providing syntax-highlighted code blocks with support for multiple programming languages.",
   "keywords": [
+    "nvidia",
     "web-components",
-    "syntax-highlight",
-    "code-blocks"
+    "custom-elements",
+    "code-blocks",
+    "syntax-highlighting",
+    "highlight.js",
+    "lit"
   ],
   "homepage": "https://NVIDIA.github.io/elements/",
   "repository": {

projects/core/eslint.config.js

@@ -35,6 +35,12 @@ export default [
       '@nvidia-elements/lint/no-missing-gap-space': ['off']
     }
   },
+  {
+    files: ['src/alert/alert-group.test.visual.ts'],
+    rules: {
+      '@nvidia-elements/lint/no-restricted-container-full': ['off']
+    }
+  },
   {
     files: ['src/button/button.test.visual.ts'],
     rules: {

projects/core/package.json

@@ -6,9 +6,13 @@
   },
   "description": "The Design Language for AI/ML Factories Building at the Speed of Light. Provides a set of accessible and themeable UI elements.",
   "keywords": [
+    "nvidia",
     "web-components",
+    "custom-elements",
     "design-system",
-    "ui-components"
+    "ui-components",
+    "accessibility",
+    "lit"
   ],
   "homepage": "https://NVIDIA.github.io/elements/",
   "repository": {

projects/core/src/alert/alert.examples.ts

@@ -5,6 +5,7 @@ import { html } from 'lit';
 import '@nvidia-elements/core/alert/define.js';
 import '@nvidia-elements/core/button/define.js';
 import '@nvidia-elements/core/divider/define.js';
+import '@nvidia-elements/core/page/define.js';
 
 export default {
   title: 'Elements/Alert',
@@ -20,6 +21,7 @@ export const Default = {
 
 /**
  * @summary Alert status variants for semantic messaging. Use accent for informational updates, warning for cautionary messages requiring attention, success for confirmations, and danger for errors or critical issues that may block user progress.
+ * @tags test-case
  */
 export const SupportStatus = {
   render: () => html`
@@ -35,6 +37,7 @@ export const SupportStatus = {
 
 /**
  * @summary Extended status variants for workflow and process state communication. Use these specialized states (scheduled, queued, running, failed, etc.) in dashboards, build pipelines, or task management interfaces where users need detailed visibility into process lifecycle stages.
+ * @tags test-case
  */
 export const Status = {
   render: () => html`
@@ -196,27 +199,27 @@ export const Actions = {
  */
 export const Prominence = {
   render: () => html`
-    <div nve-layout="column gap:md">
-      <nve-alert-group prominence="emphasis" container="full">
+    <nve-page document-scroll>
+      <nve-alert-group slot="header" prominence="emphasis" container="full">
         <nve-alert closable><span slot="prefix">Standard</span> banner message <a href="#" nve-text="link" slot="actions">view details</a></nve-alert>
       </nve-alert-group>
 
-      <nve-alert-group status="accent" prominence="emphasis" container="full">
+      <nve-alert-group slot="header" status="accent" prominence="emphasis" container="full">
         <nve-alert closable><span slot="prefix">Accent</span> banner message <a href="#" nve-text="link" slot="actions">view details</a></nve-alert>
       </nve-alert-group>
 
-      <nve-alert-group status="warning" prominence="emphasis" container="full">
+      <nve-alert-group slot="header" status="warning" prominence="emphasis" container="full">
         <nve-alert closable><span slot="prefix">Warning</span> banner message <a href="#" nve-text="link" slot="actions">view details</a></nve-alert>
       </nve-alert-group>
 
-      <nve-alert-group status="success" prominence="emphasis" container="full">
+      <nve-alert-group slot="header" status="success" prominence="emphasis" container="full">
         <nve-alert closable><span slot="prefix">Success</span> banner message <a href="#" nve-text="link" slot="actions">view details</a></nve-alert>
       </nve-alert-group>
 
-      <nve-alert-group status="danger" prominence="emphasis" container="full">
+      <nve-alert-group slot="header" status="danger" prominence="emphasis" container="full">
         <nve-alert closable><span slot="prefix">Danger</span> banner message <a href="#" nve-text="link" slot="actions">view details</a></nve-alert>
       </nve-alert-group>
-    </div>
+    </nve-page>
   `
 }
 

projects/core/src/card/card.examples.ts

@@ -8,6 +8,7 @@ import '@nvidia-elements/core/icon-button/define.js';
 import '@nvidia-elements/core/icon/define.js';
 import '@nvidia-elements/core/tabs/define.js';
 import '@nvidia-elements/core/divider/define.js';
+import '@nvidia-elements/core/page/define.js';
 
 export default {
   title: 'Elements/Card',
@@ -148,19 +149,23 @@ export const WithTabs = {
 
 /**
  * @summary Card with full container styling that extends to the edges, suitable for full-width layouts or when you want the card to blend with its container.
+ * @tags test-case
  */
 export const ContainerFull = {
   render: () => html`
-  <nve-card container="full">
-    <nve-card-content>
-      <p nve-text="body">container full</p>
-    </nve-card-content>
-  </nve-card>
+  <nve-page document-scroll>
+    <nve-card container="full">
+      <nve-card-content>
+        <p nve-text="body">container full</p>
+      </nve-card-content>
+    </nve-card>
+  </nve-page>
   `
 }
 
 /**
  * @summary Card with flat container styling that removes the default card elevation, ideal for subtle content containers or when you want a more minimal appearance.
+ * @tags test-case
  */
 export const ContainerFlat = {
   render: () => html`
@@ -198,6 +203,7 @@ export const Audit = {
 
 /**
  * @summary Card with overflow content, where the card body scrolls when content exceeds the card height.
+ * @tags test-case
  */
 export const OverflowContent = {
   render: () => html`

projects/core/src/grid/grid.examples.ts

@@ -1084,6 +1084,7 @@ export const Placeholder = {
 
 /**
  * @summary Full-width grid container for max space use, providing edge-to-edge data display for comprehensive information presentation.
+ * @tags test-case
  */
 export const Full = {
   render: () => html`
@@ -1102,6 +1103,7 @@ export const Full = {
 
 /**
  * @summary Flat container styling for minimal visual weight, providing subtle grid presentation that integrates seamlessly with surrounding content.
+ * @tags test-case
  */
 export const Flat = {
   render: () => html`

projects/core/src/grid/grid.test.ts

@@ -58,6 +58,11 @@ describe(Grid.metadata.tag, () => {
     expect(element.matches(':state(scrolling)')).toBe(false);
   });
 
+  it('should default to no scroll target before rendering', () => {
+    const detachedElement = document.createElement(Grid.metadata.tag) as Grid;
+    expect(detachedElement.stateScrollConfig.target).toBeUndefined();
+  });
+
   it('should enable keynav control from keynav controller', async () => {
     await elementIsStable(element);
     expect(element.keynavGridConfig.cells[0].tabIndex).toBe(0);

projects/core/src/grid/grid.test.visual.ts

@@ -11,6 +11,7 @@ function head(theme: '' | 'dark' = '') {
     import '@nvidia-elements/core/checkbox/define.js';
     import '@nvidia-elements/core/radio/define.js';
     import '@nvidia-elements/core/icon-button/define.js';
+    import '@nvidia-elements/core/page/define.js';
     document.documentElement.setAttribute('nve-theme', '${theme}');
   </script>
   <style>
@@ -411,27 +412,29 @@ function columnAlignEnd(theme: '' | 'dark' = '') {
 function containerFull(theme: '' | 'dark' = '') {
   return /* html */ `
   ${head(theme)}
-  <nve-grid container="full">
-    <nve-grid-header>
-      ${Array(5)
-        .fill('')
-        .map(() => `<nve-grid-column>•︎•︎•︎•︎•︎•︎</nve-grid-column> `)
-        .join('')}
-    </nve-grid-header>
-    ${Array(6)
-      .fill('')
-      .map(
-        () => `
-      <nve-grid-row>
+  <nve-page document-scroll>
+    <nve-grid container="full">
+      <nve-grid-header>
         ${Array(5)
           .fill('')
-          .map(() => `<nve-grid-cell>•︎•︎•︎•︎•︎•︎</nve-grid-cell> `)
+          .map(() => `<nve-grid-column>•︎•︎•︎•︎•︎•︎</nve-grid-column> `)
           .join('')}
-      </nve-grid-row>
-    `
-      )
-      .join('')}
-  </nve-grid>`;
+      </nve-grid-header>
+      ${Array(6)
+        .fill('')
+        .map(
+          () => `
+        <nve-grid-row>
+          ${Array(5)
+            .fill('')
+            .map(() => `<nve-grid-cell>•︎•︎•︎•︎•︎•︎</nve-grid-cell> `)
+            .join('')}
+        </nve-grid-row>
+      `
+        )
+        .join('')}
+    </nve-grid>
+  </nve-page>`;
 }
 
 function containerFlat(theme: '' | 'dark' = '') {

projects/core/src/page/page.css

@@ -4,6 +4,7 @@
 :host {
   --background: var(--nve-sys-layer-canvas-background);
   --color: var(--nve-sys-layer-canvas-color);
+  --gap: var(--nve-ref-space-md);
   --padding: 0;
   display: block;
   height: 100vh;
@@ -151,7 +152,7 @@ slot {
 }
 
 slot:not([name]) {
-  gap: var(--nve-ref-space-md);
+  gap: var(--gap);
   padding: var(--padding);
   display: flex;
   flex-direction: column;

projects/core/src/page/page.ts

@@ -29,6 +29,7 @@ import styles from './page.css?inline';
  * @cssprop --border-radius
  * @cssprop --box-shadow
  * @cssprop --min-height
+ * @cssprop --gap - Vertical gap spacing between main content items
  * @aria https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/
  * @responsive false
  *

projects/core/src/toggletip/toggletip.examples.ts

@@ -136,7 +136,7 @@ export const AlertGroup = {
   render: () => html`
 <nve-toggletip id="toggletip-alert-group">
   <nve-toggletip-header>
-    <nve-alert-group status="danger" container="full" prominence="emphasis">
+    <nve-alert-group status="danger" prominence="emphasis">
       <nve-alert>Workflow Failed</nve-alert>
     </nve-alert-group>
   </nve-toggletip-header>

projects/core/src/toolbar/toolbar.examples.ts

@@ -10,6 +10,7 @@ import '@nvidia-elements/core/button/define.js';
 import '@nvidia-elements/core/divider/define.js';
 import '@nvidia-elements/core/progressive-filter-chip/define.js';
 import '@nvidia-elements/core/input/define.js';
+import '@nvidia-elements/core/page/define.js';
 
 export default {
   title: 'Elements/Toolbar',
@@ -60,11 +61,13 @@ export const ContainerInset = {
  */
 export const ContainerFull = {
   render: () => html`
-    <nve-toolbar container="full">
-      <nve-button><nve-icon name="add"></nve-icon> create</nve-button>
-      <nve-button><nve-icon name="delete"></nve-icon> delete</nve-button>
-      <nve-icon-button container="flat" icon-name="gear" slot="suffix" aria-label="settings"></nve-icon-button>
-    </nve-toolbar>
+    <nve-page document-scroll>
+      <nve-toolbar slot="subheader" container="full">
+        <nve-button><nve-icon name="add"></nve-icon> create</nve-button>
+        <nve-button><nve-icon name="delete"></nve-icon> delete</nve-button>
+        <nve-icon-button container="flat" icon-name="gear" slot="suffix" aria-label="settings"></nve-icon-button>
+      </nve-toolbar>
+    </nve-page>
   `
 };
 
@@ -223,4 +226,4 @@ export const Container = {
       </nve-toolbar>
     </div>
   `
-};
+};

projects/forms/package.json

@@ -6,9 +6,13 @@
   },
   "description": "Form control utilities and validation providing mixins, validators, and schema-based validation. Includes form association, event handling, and support for complex data types.",
   "keywords": [
+    "nvidia",
+    "web-components",
+    "custom-elements",
     "forms",
-    "validation",
-    "web-components"
+    "form-validation",
+    "form-associated-custom-elements",
+    "lit"
   ],
   "homepage": "https://NVIDIA.github.io/elements/",
   "repository": {

projects/internals/patterns/src/browse.examples.ts

@@ -27,7 +27,7 @@ export default {
  */
 export const ContentRow = {
   render: () => html`
-  <nve-card role="listitem" container="full">
+  <nve-card role="listitem" container="flat">
     <nve-card-content>
       <div nve-layout="grid align:vertical-center align:space-between gap:md">
         <div nve-layout="span:4 row gap:md align:vertical-center">