chore(starters): cleanup starter readme and templates

AGENTS.md

@@ -273,3 +273,12 @@ When adding new technical terms, component names, or abbreviations that Vale fla
 - `projects/*/DEVELOPMENT.md` - When working within a specific project; lists all available pnpm scripts for that project
 - `/projects/internals/BUILD.md` - When modifying build configuration, Wireit scripts, or CI/CD pipeline
 - `/projects/internals/RELEASE.md` - When creating new projects or modifying release process; covers semantic release setup, CI artifacts, commit scopes, initial tags
+
+## Cloud Agent Specific Instructions
+
+These notes are for cloud agents running in the prebuilt VM (dependencies already installed by the startup update script). They capture non-obvious caveats, not full setup steps.
+
+### Toolchain access
+
+- **mise** manages the toolchain, and the VM image already includes it. `~/.local/bin` sits on `PATH` and `mise activate` runs from `~/.bashrc`, so `node` (26.4.0), `pnpm` (11.9.0), `go`, `vale`, and `git-lfs` resolve directly. If a fresh shell ever lacks them, prefix commands with `mise exec --` (for example, `mise exec -- pnpm ...`) or run `mise run <task>`.
+- Run all repo commands through mise to guarantee the pinned versions, exactly as the root `AGENTS.md` examples show.

projects/site/src/_11ty/layouts/common.js

@@ -150,6 +150,7 @@ export const renderDocsNav = data => /* html */ `
     <nve-tree-node ${data.page.url.includes('/docs/integrations/bundles/') ? 'highlighted selected' : ''}><a href="/docs/integrations/bundles/">Bundles</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/integrations/cdn/') ? 'highlighted selected' : ''}><a href="/docs/integrations/cdn/">CDN</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/integrations/custom-elements/') ? 'highlighted selected' : ''}><a href="/docs/integrations/custom-elements/">Custom Elements</a></nve-tree-node>
+    <nve-tree-node ${data.page.url.includes('/docs/integrations/eleventy/') ? 'highlighted selected' : ''}><a href="/docs/integrations/eleventy/">Eleventy</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/integrations/go/') ? 'highlighted selected' : ''}><a href="/docs/integrations/go/">Golang</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/integrations/go-htmx/') ? 'highlighted selected' : ''}><a href="/docs/integrations/go-htmx/">HTMX + Go</a></nve-tree-node>
     <nve-tree-node ${data.page.url.includes('/docs/integrations/hugo/') ? 'highlighted selected' : ''}><a href="/docs/integrations/hugo/">Hugo</a></nve-tree-node>

projects/site/src/docs/integrations/eleventy.md

@@ -0,0 +1,155 @@
+---
+{
+  title: 'Eleventy',
+  description: 'Use NVIDIA Elements in Eleventy with Vite-bundled component definitions and styles, template markup, and optional Lit server-side rendering.',
+  layout: 'docs.11ty.js'
+}
+---
+
+# {{ title }}
+
+{% integration 'eleventy' %}
+
+{% installation 'eleventy' %}
+
+Elements are standard Web Components, so Eleventy can emit their tags from any template language. For most sites, render the element markup at build time and register the components in the browser. Use Lit server-side rendering (SSR) only when component shadow DOM must be present in the generated HTML.
+
+## Client-Side Rendering
+
+The [Eleventy starter]({{ELEMENTS_REPO_BASE_URL}}/tree/main/projects/starters/eleventy) uses [Eleventy Plugin Vite](https://github.com/11ty/eleventy-plugin-vite) to bundle Elements styles and component definitions. This approach supports tree-shaking and keeps the Eleventy build environment separate from browser component registration.
+
+Install the Vite integration in an existing Eleventy project:
+
+```shell
+npm install --save-dev @11ty/eleventy-plugin-vite vite
+```
+
+### Configure Eleventy and Vite
+
+Register the Vite plugin and copy the browser entry files into Eleventy's output for Vite to process:
+
+```javascript
+// eleventy.config.js
+import EleventyPluginVite from '@11ty/eleventy-plugin-vite';
+
+export default function (eleventyConfig) {
+  eleventyConfig.addPassthroughCopy('src/**/*.ts');
+  eleventyConfig.addPassthroughCopy('src/**/*.css');
+
+  eleventyConfig.addPlugin(EleventyPluginVite, {
+    viteOptions: {
+      build: {
+        target: 'esnext'
+      }
+    }
+  });
+
+  return {
+    dir: {
+      input: 'src',
+      output: 'dist',
+      layouts: '_layouts'
+    }
+  };
+}
+```
+
+If you deploy the site below the domain root, set the same base path in the Vite `base` option and the document's `<base>` element. Keeping those values aligned lets entry points and generated links resolve from the deployment path.
+
+### Add Browser Entry Points
+
+Create a TypeScript entry point for component registration. Import each `define.js` module that the site uses:
+
+```typescript
+// src/_layouts/elements.ts
+import './elements.css';
+import '@nvidia-elements/core/alert/define.js';
+import '@nvidia-elements/core/button/define.js';
+```
+
+Create a CSS entry point for the global theme, font, and utility styles:
+
+```css
+/* src/_layouts/elements.css */
+@import '@nvidia-elements/themes/fonts/inter.css';
+@import '@nvidia-elements/themes/index.css';
+@import '@nvidia-elements/themes/dark.css';
+@import '@nvidia-elements/styles/layout.css';
+@import '@nvidia-elements/styles/typography.css';
+@import '@nvidia-elements/styles/view-transitions.css';
+```
+
+Load the entry points from the shared Eleventy layout:
+
+{% raw %}
+
+```html
+<!doctype html>
+<html lang="en" nve-theme="dark" nve-transition="auto">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/_layouts/elements.css" />
+    <script type="module" src="/_layouts/elements.ts"></script>
+  </head>
+  <body nve-text="body">
+    {{ content | safe }}
+  </body>
+</html>
+```
+
+{% endraw %}
+
+Keep `define.js` imports in the browser entry point. The Eleventy configuration runs in Node.js and should not register browser components unless you configure SSR.
+
+### Use Elements in Templates
+
+Write Elements markup in HTML, JavaScript, or Markdown templates:
+
+```html
+<div nve-layout="column gap:md">
+  <nve-alert status="success" closable>Site generated successfully.</nve-alert>
+  <nve-button interaction="emphasis">
+    <a href="/docs/">View documentation</a>
+  </nve-button>
+</div>
+```
+
+When configuring a custom Markdown library, enable inline HTML so Markdown pages can emit `nve-*` tags. The starter also extends the Markdown renderer to add `nve-text` and `nve-layout` attributes to generated headings, paragraphs, links, and lists.
+
+## Server-Side Rendering
+
+The [`@lit-labs/eleventy-plugin-lit`](https://github.com/lit/lit/tree/main/packages/labs/eleventy-plugin-lit) plugin can render Lit components into declarative shadow DOM during the Eleventy build. Lit SSR and the Eleventy plugin are experimental, so verify component compatibility before using this path in production. The [Eleventy SSR starter]({{ELEMENTS_REPO_BASE_URL}}/tree/main/projects/starters/eleventy-ssr) provides a working testbed.
+
+Install the SSR plugin and client hydration support:
+
+```shell
+npm install @lit-labs/eleventy-plugin-lit @lit-labs/ssr-client
+```
+
+Register every component that Eleventy must render. Load the server-compatible icon module before components that can render icons:
+
+```javascript
+// eleventy.config.js
+import litPlugin from '@lit-labs/eleventy-plugin-lit';
+
+export default function (eleventyConfig) {
+  eleventyConfig.addPlugin(litPlugin, {
+    mode: 'worker',
+    componentModules: [
+      'node_modules/@nvidia-elements/core/dist/icon/server.js',
+      'node_modules/@nvidia-elements/core/dist/alert/define.js'
+    ]
+  });
+}
+```
+
+For interactive components, load Lit hydration support before the client-side component definitions:
+
+```typescript
+// src/_layouts/elements.ts
+import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
+import '@nvidia-elements/core/alert/define.js';
+```
+
+The server `componentModules` list and the browser `define.js` imports must include the same interactive components. Components that do not load in the browser remain static after Eleventy renders them.

projects/site/src/docs/integrations/index.11ty.js

@@ -1,131 +1,10 @@
+import { siteData } from '../../index.11tydata.js';
+
 export const data = {
   title: 'Integrations',
   layout: 'docs.11ty.js'
 };
 
-const integrations = [
-  {
-    href: '/docs/integrations/angular/',
-    icon: 'angular.svg',
-    title: 'Angular',
-    description: 'Use Elements with Angular templates and events.'
-  },
-  {
-    href: '/docs/integrations/bundles/',
-    icon: 'javascript.svg',
-    title: 'Bundles',
-    description: 'Load prebuilt Elements bundles in static pages.'
-  },
-  {
-    href: '/docs/integrations/cdn/',
-    nveIcon: 'globe-alt-stroke',
-    title: 'CDN',
-    description: 'Load Elements from CDN-hosted npm packages.'
-  },
-  {
-    href: '/docs/integrations/custom-elements/',
-    nveIcon: 'code',
-    title: 'Custom Elements',
-    description: 'Use Elements package metadata with Web Component tooling.'
-  },
-  {
-    href: '/docs/integrations/go/',
-    icon: 'go.svg',
-    iconSize: '48',
-    title: 'Golang',
-    description: 'Use Elements with Go-backed web applications.'
-  },
-  {
-    href: '/docs/integrations/go-htmx/',
-    icon: 'htmx.svg',
-    iconHeight: '32',
-    iconWidth: '48',
-    title: 'HTMX + Go',
-    description: 'Use Elements with HTMX and Go template fragments.'
-  },
-  {
-    href: '/docs/integrations/hugo/',
-    icon: 'hugo.svg',
-    iconSize: '28px',
-    title: 'Hugo',
-    description: 'Use Elements in Hugo static sites.'
-  },
-  {
-    href: '/docs/integrations/importmaps/',
-    icon: 'javascript.svg',
-    title: 'Import Maps',
-    description: 'Load Elements from browser-native import maps.'
-  },
-  {
-    href: '/docs/integrations/lit/',
-    icon: 'lit.svg',
-    title: 'Lit',
-    description: 'Use Elements alongside Lit components and SSR.'
-  },
-  {
-    href: '/docs/integrations/lit-library/',
-    icon: 'lit.svg',
-    title: 'Lit Library',
-    description: 'Build a distributable Custom Element library with Lit and Elements.'
-  },
-  {
-    href: '/docs/integrations/mcp-apps/',
-    nveIcon: 'connected-blocks',
-    title: 'MCP Apps',
-    description: 'Use Elements in iframe-based MCP UI hosts.'
-  },
-  {
-    href: '/docs/integrations/nextjs/',
-    icon: 'nextjs.svg',
-    iconSize: '28px',
-    title: 'NextJS',
-    description: 'Use Elements with NextJS and React.'
-  },
-  {
-    href: '/docs/integrations/nuxt/',
-    icon: 'nuxt.svg',
-    iconSize: '38px',
-    title: 'Nuxt',
-    description: 'Use Elements with Nuxt applications.'
-  },
-  {
-    href: '/docs/integrations/preact/',
-    icon: 'preact.svg',
-    title: 'Preact',
-    description: 'Use Elements with Preact JSX and custom events.'
-  },
-  {
-    href: '/docs/integrations/react/',
-    icon: 'react.svg',
-    title: 'React',
-    description: 'Use Elements with React and native custom events.'
-  },
-  {
-    href: '/docs/integrations/solidjs/',
-    icon: 'solidjs.svg',
-    title: 'SolidJS',
-    description: 'Use Elements with SolidJS and Vite.'
-  },
-  {
-    href: '/docs/integrations/svelte/',
-    icon: 'svelte.svg',
-    title: 'Svelte',
-    description: 'Use Elements with Svelte and Vite.'
-  },
-  {
-    href: '/docs/integrations/typescript/',
-    icon: 'typescript.svg',
-    title: 'TypeScript',
-    description: 'Use Elements with TypeScript and Vite.'
-  },
-  {
-    href: '/docs/integrations/vue/',
-    icon: 'vue.svg',
-    title: 'Vue',
-    description: 'Use Elements with Vue and Vite.'
-  }
-];
-
 const renderLogo = ({ icon, iconHeight, iconSize = '36px', iconWidth, nveIcon, title, color = 'gray-denim' }) => {
   if (icon) {
     return /* html */ `<nve-logo color="${color}" size="lg">
@@ -176,7 +55,7 @@ export function render(data) {
 <h2 nve-text="heading sm muted">Use NVIDIA Elements across frameworks, runtimes, and Web Component tooling.</h2>
 
 <div class="integrations-page" nve-layout="grid gap:md span-items:12 &md|span-items:6 &lg|span-items:4">
-${integrations.map(renderIntegration).join('\n')}
+${Object.values(siteData.integrations).map(renderIntegration).join('\n')}
 </div>`,
     'md'
   );

projects/site/src/docs/integrations/nuxt.md

@@ -1,7 +1,7 @@
 ---
 {
   title: 'Nuxt',
-  description: 'Use NVIDIA Elements in a Nuxt app: register the components, configure SSR, and bind to events in Vue single-file components.',
+  description: 'Use NVIDIA Elements in a Nuxt app: register components, configure SSR, bind native form controls with v-model, and handle custom events.',
   layout: 'docs.11ty.js'
 }
 ---
@@ -96,6 +96,39 @@ Properties and events then work via the standard Vue template syntax.
 </nve-alert-group>
 ```
 
+## Form controls
+
+Place `v-model` on the nested native `<input>`, not on the `nve-input`, `nve-range`, or `nve-switch` wrapper. The native control owns the value or checked state that Vue updates.
+
+```typescript
+import { ref } from 'vue';
+import '@nvidia-elements/core/forms/define.js';
+import '@nvidia-elements/core/input/define.js';
+import '@nvidia-elements/core/range/define.js';
+import '@nvidia-elements/core/switch/define.js';
+
+const name = ref('');
+const volume = ref(50);
+const notifications = ref(false);
+```
+
+```html
+<nve-input>
+  <label>Name</label>
+  <input v-model="name" type="text" />
+</nve-input>
+
+<nve-range>
+  <label>Volume</label>
+  <input v-model.number="volume" type="range" min="0" max="100" />
+</nve-range>
+
+<nve-switch>
+  <label>Notifications</label>
+  <input v-model="notifications" type="checkbox" />
+</nve-switch>
+```
+
 ## Layouts
 
 Use Elements within Nuxt layouts to create consistent page structures.