diff --git a/projects/internals/eslint/src/local/example-approved-domains.js b/projects/internals/eslint/src/local/example-approved-domains.js
index ccf45f383..ed59feffa 100644
--- a/projects/internals/eslint/src/local/example-approved-domains.js
+++ b/projects/internals/eslint/src/local/example-approved-domains.js
@@ -1,6 +1,6 @@
 import { findHtmlTemplate, getTemplateText, hasTag } from './example-helpers.js';
 
-const APPROVED_DOMAINS = ['nvidia.com', 'github.com'];
+const APPROVED_DOMAINS = ['nvidia.com', 'github.com', 'huggingface.co'];
 const URL_ATTRIBUTES = ['href', 'src', 'srcset'];
 const URL_ATTRIBUTE_PATTERN = new RegExp(`\\b(${URL_ATTRIBUTES.join('|')})\\s*=\\s*("([^"]*)"|'([^']*)')`, 'gi');
 
diff --git a/projects/lint/README.md b/projects/lint/README.md
index 39a8c76b9..5245c6014 100644
--- a/projects/lint/README.md
+++ b/projects/lint/README.md
@@ -4,6 +4,8 @@ NVIDIA Design System and UI Agent Harness for AI/ML Factories, Robotics, and Aut
 
 The `@nvidia-elements/lint` package is a utility library that provides Elements-specific lint rules to enforce best practices and prevent common errors when using Elements.
 
+The HTML configuration checks HTML in `src/**/*.html`, supported JavaScript and TypeScript templates, and Markdown files under `src/**/*.md`. Markdown linting includes rendered markup and HTML examples in fenced code blocks.
+
 ## Getting Started
 
 ```shell
diff --git a/projects/lint/src/eslint/configs/html.ts b/projects/lint/src/eslint/configs/html.ts
index e2623b899..3ac660069 100644
--- a/projects/lint/src/eslint/configs/html.ts
+++ b/projects/lint/src/eslint/configs/html.ts
@@ -37,7 +37,7 @@ import noUnstyledTypography from '../rules/no-unstyled-typography.js';
 import noTailwindClasses from '../rules/no-tailwind-classes.js';
 import preferAriaLabelInCompactContainers from '../rules/prefer-aria-label-in-compact-containers.js';
 
-const source = ['src/**/*.html', 'src/**/*.js', 'src/**/*.ts', 'src/**/*.tsx'];
+const source = ['src/**/*.html', 'src/**/*.js', 'src/**/*.md', 'src/**/*.ts', 'src/**/*.tsx'];
 
 const ignores = [
   'node_modules/',
diff --git a/projects/lint/src/eslint/index.test.ts b/projects/lint/src/eslint/index.test.ts
index 6fd4b3f71..e809a9e42 100644
--- a/projects/lint/src/eslint/index.test.ts
+++ b/projects/lint/src/eslint/index.test.ts
@@ -1,11 +1,43 @@
 // SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { ESLint } from 'eslint';
 import { describe, expect, it } from 'vitest';
-import { VERSION } from './index.js';
+import { elementsHtmlConfig, VERSION } from './index.js';
 
 describe('VERSION', () => {
   it('should export a VERSION const', () => {
     expect(VERSION).toBe('0.0.0');
   });
 });
+
+describe('elementsHtmlConfig', () => {
+  it('should lint rendered and fenced HTML in Markdown files', async () => {
+    const eslint = new ESLint({
+      overrideConfigFile: true,
+      overrideConfig: [elementsHtmlConfig]
+    });
+    const markdown = `---
+title: Example
+---
+
+<nve-invalid-rendered></nve-invalid-rendered>
+
+\`\`\`html
+<nve-invalid-fenced></nve-invalid-fenced>
+\`\`\``;
+
+    const [result] = await eslint.lintText(markdown, { filePath: 'src/example.md' });
+
+    expect(result.messages).toEqual([
+      expect.objectContaining({
+        ruleId: '@nvidia-elements/lint/no-unknown-tags',
+        line: 5
+      }),
+      expect.objectContaining({
+        ruleId: '@nvidia-elements/lint/no-unknown-tags',
+        line: 8
+      })
+    ]);
+  });
+});
diff --git a/projects/lint/src/eslint/rules/no-excessive-primary-actions.test.ts b/projects/lint/src/eslint/rules/no-excessive-primary-actions.test.ts
index a7415afa8..a688f7044 100644
--- a/projects/lint/src/eslint/rules/no-excessive-primary-actions.test.ts
+++ b/projects/lint/src/eslint/rules/no-excessive-primary-actions.test.ts
@@ -80,6 +80,51 @@ describe('noExcessivePrimaryActions', () => {
     });
   });
 
+  it('should ignore emphasis buttons inside popover elements', () => {
+    tester.run('popover emphasis buttons', rule, {
+      valid: [
+        `<nve-button interaction="emphasis">Page action one</nve-button>
+         <nve-dialog>
+           <nve-dialog-footer>
+             <nve-button interaction="emphasis">Dialog action one</nve-button>
+           </nve-dialog-footer>
+         </nve-dialog>
+         <nve-dialog>
+           <nve-dialog-footer>
+             <nve-button interaction="emphasis">Dialog action two</nve-button>
+           </nve-dialog-footer>
+         </nve-dialog>
+         <nve-button interaction="emphasis">Page action two</nve-button>`,
+        `<nve-drawer><nve-button interaction="emphasis">Drawer action</nve-button></nve-drawer>
+         <nve-dropdown><nve-button interaction="emphasis">Dropdown action</nve-button></nve-dropdown>
+         <nve-notification><nve-button interaction="emphasis">Notification action</nve-button></nve-notification>
+         <nve-notification-group><nve-button interaction="emphasis">Group action</nve-button></nve-notification-group>
+         <nve-page-loader><nve-button interaction="emphasis">Loader action</nve-button></nve-page-loader>
+         <nve-toast><nve-button interaction="emphasis">Toast action</nve-button></nve-toast>
+         <nve-toggletip><nve-button interaction="emphasis">Toggletip action</nve-button></nve-toggletip>
+         <nve-tooltip><nve-button interaction="emphasis">Tooltip action</nve-button></nve-tooltip>`
+      ],
+      invalid: []
+    });
+  });
+
+  it('should continue counting emphasis buttons outside popover elements', () => {
+    tester.run('page emphasis buttons around popovers', rule, {
+      valid: [],
+      invalid: [
+        {
+          code: `<nve-button interaction="emphasis">Page action one</nve-button>
+                 <nve-dialog>
+                   <nve-button interaction="emphasis">Dialog action</nve-button>
+                 </nve-dialog>
+                 <nve-button interaction="emphasis">Page action two</nve-button>
+                 <nve-button interaction="emphasis">Page action three</nve-button>`,
+          errors: [error]
+        }
+      ]
+    });
+  });
+
   it('should count separate tagged templates independently', () => {
     const javascriptTester = new RuleTester({
       languageOptions: {
diff --git a/projects/lint/src/eslint/rules/no-excessive-primary-actions.ts b/projects/lint/src/eslint/rules/no-excessive-primary-actions.ts
index 1dd17be2c..50278f5e5 100644
--- a/projects/lint/src/eslint/rules/no-excessive-primary-actions.ts
+++ b/projects/lint/src/eslint/rules/no-excessive-primary-actions.ts
@@ -4,10 +4,29 @@
 import type { Rule } from 'eslint';
 import { createVisitors } from '@html-eslint/eslint-plugin/lib/rules/utils/visitors.js';
 import { findAttr } from '@html-eslint/eslint-plugin/lib/rules/utils/node.js';
+import { elements } from '../internals/metadata.js';
 import type { HtmlTagNode } from '../rule-types.js';
 
 declare const __ELEMENTS_PAGES_BASE_URL__: string;
 const MAX_EMPHASIS_BUTTONS = 2;
+const POPOVER_ELEMENTS: ReadonlySet<string> = new Set(
+  elements
+    .filter(element => element.manifest?.metadata?.behavior === 'popover')
+    .map(element => element.name.toLowerCase())
+);
+
+function hasPopoverAncestor(node: HtmlTagNode): boolean {
+  let current = node.parent;
+
+  while (current) {
+    if (current.name && POPOVER_ELEMENTS.has(current.name.toLowerCase())) {
+      return true;
+    }
+    current = current.parent;
+  }
+
+  return false;
+}
 
 const rule = {
   meta: {
@@ -32,7 +51,7 @@ const rule = {
         emphasisButtonCount = 0;
       },
       Tag(node: HtmlTagNode) {
-        if (node.name.toLowerCase() !== 'nve-button') {
+        if (node.name.toLowerCase() !== 'nve-button' || hasPopoverAncestor(node)) {
           return;
         }
 
diff --git a/projects/site/eslint.config.js b/projects/site/eslint.config.js
index 1b45c4891..72a44ca06 100644
--- a/projects/site/eslint.config.js
+++ b/projects/site/eslint.config.js
@@ -11,6 +11,33 @@ export default [
   ...browserTypescriptConfig,
   ...appConfig,
   ...jsonConfig,
+  {
+    // These examples intentionally demonstrate incomplete and hypothetical component APIs.
+    files: ['src/docs/api-design/**/*.md', 'src/docs/internal/guidelines/**/*.md'],
+    rules: {
+      '@nvidia-elements/lint/no-missing-control-label': 'off',
+      '@nvidia-elements/lint/no-missing-slotted-elements': 'off',
+      '@nvidia-elements/lint/no-unknown-tags': 'off'
+    }
+  },
+  {
+    // These examples intentionally demonstrate deprecated APIs.
+    files: ['src/docs/about/migration.md'],
+    rules: {
+      '@nvidia-elements/lint/no-deprecated-tags': 'off',
+      '@nvidia-elements/lint/no-deprecated-attributes': 'off',
+      '@nvidia-elements/lint/no-deprecated-global-attributes': 'off',
+      '@nvidia-elements/lint/no-deprecated-popover-attributes': 'off',
+      '@nvidia-elements/lint/no-deprecated-icon-names': 'off',
+      '@nvidia-elements/lint/no-unexpected-attribute-value': 'off',
+      '@nvidia-elements/lint/no-unstyled-typography': 'off',
+      '@nvidia-elements/lint/no-missing-control-label': 'off',
+      '@nvidia-elements/lint/no-missing-slotted-elements': 'off',
+      '@nvidia-elements/lint/no-unexpected-global-attribute-value': 'off',
+      '@nvidia-elements/lint/no-restricted-container-full': 'off',
+      '@nvidia-elements/lint/no-unknown-tags': 'off'
+    }
+  },
   {
     files: ['src/_11ty/**/*.js'],
     rules: {
diff --git a/projects/site/package.json b/projects/site/package.json
index 6112013fb..eb3de8bc1 100644
--- a/projects/site/package.json
+++ b/projects/site/package.json
@@ -201,6 +201,7 @@
       "command": "eslint -c ./eslint.config.js --color --cache --cache-location .eslintcache/",
       "files": [
         "src/**/*.js",
+        "src/**/*.md",
         "src/**/*.ts",
         "eslint.config.js"
       ],
diff --git a/projects/site/src/docs/api-design/composition.md b/projects/site/src/docs/api-design/composition.md
index 3fec91388..d9346df3c 100644
--- a/projects/site/src/docs/api-design/composition.md
+++ b/projects/site/src/docs/api-design/composition.md
@@ -16,7 +16,7 @@ Elements should default to using composition when possible. This approach is to
 
 ```html
 <nve-button>
-  button <nve-icon name="info"></nve-icon>
+  button <nve-icon name="information-circle"></nve-icon>
 </nve-button>
 ```
 
@@ -36,7 +36,7 @@ Going further this runs into layout conflicts. If the icon needs to change posit
 
 ```html
 <nve-button>
-  <nve-icon name="info"></nve-icon> button
+  <nve-icon name="information-circle"></nve-icon> button
 </nve-button>
 ```
 
@@ -64,6 +64,8 @@ Elements should provide reasonable defaults for better developer experience for
 
 The alert can internally provide the default icon style for the status in the system. But as above with the button, the alert element runs the risk of absorbing parts of the icon API. To mitigate this, use a documented named slot as the customization hook.
 
+<!-- eslint-disable @nvidia-elements/lint/no-unexpected-attribute-value -->
+
 ```html
 <!-- nve-alert template -->
 <div>
@@ -80,12 +82,16 @@ The alert can internally provide the default icon style for the status in the sy
 </nve-alert>
 ```
 
+<!-- eslint-enable @nvidia-elements/lint/no-unexpected-attribute-value -->
+
 Slots can provide default content if the consumer supplies no content. Here the template sets an internal icon with a status icon that matches the status of the alert. If the consumer wants to customize the icon, they can project their own icon into the `icon` slot and override the default. This makes `icon` an explicit public slot API, while avoiding a series of icon-specific inherited attributes or properties on the alert.
 
 ## Semantic Obfuscation - anti-pattern
 
 When building composition based APIs the developer should push the semantics of the HTML up into the light DOM or the control of the consumer. In this example the card element embeds the h1 heading. This creates an incorrect DOM structure as only one given h1 can exist within the page. This also applies as the page structure should work down from h1-h6.
 
+<!-- eslint-disable @nvidia-elements/lint/no-unexpected-slot-value -->
+
 {% dodont %}
 
 ```html
@@ -100,15 +106,15 @@ When building composition based APIs the developer should push the semantics of
 
 <!-- consumer API -->
 <nve-card status="warning">
-  <h2 slot="header">Card Header</h2>
-  <p>card content</p>
+  <h2 slot="header" nve-text="heading">Card Header</h2>
+  <p nve-text="body">card content</p>
 </nve-card>
 ```
 
 ```html
 <!-- nve-card template -->
 <div>
-  <h1><slot name="header"></slot></h1>
+  <h1 nve-text="heading"><slot name="header"></slot></h1>
   <div>
   	<slot></slot>
   </div>
@@ -118,12 +124,14 @@ When building composition based APIs the developer should push the semantics of
 <!-- consumer API -->
 <nve-card status="warning">
   <div slot="header">Card Header</div>
-  <p>card content</p>
+  <p nve-text="body">card content</p>
 </nve-card>
 ```
 
 {% enddodont %}
 
+<!-- eslint-enable @nvidia-elements/lint/no-unexpected-slot-value -->
+
 While composition based APIs may be more verbose at times, they lower the API surface area to learn in the system and help ensure there is a singular way to use the element. Once a consumer learns an element API, that API usage remains predictable and reliable throughout the system.
 
 Consumer apps/plugins can add opinionated abstractions. This can provide a more opinionated terse API in which consumers can always “escape” or access the elements of the base library as needed. It's easier to add abstraction layers, it's much more difficult to pull apart the wrong base abstraction.
diff --git a/projects/site/src/docs/api-design/index.md b/projects/site/src/docs/api-design/index.md
index d58ca35c3..1a6725050 100644
--- a/projects/site/src/docs/api-design/index.md
+++ b/projects/site/src/docs/api-design/index.md
@@ -23,9 +23,9 @@ This document is not intended to define the best practices and API design of hig
   <nve-alert status="danger">Don't: a practice to avoid</nve-alert>
   <nve-alert status="accent">Tip: helpful details on rationale for a given guideline</nve-alert>
   <nve-alert status="warning">details on the risks of not following a guideline</nve-alert>
-  <nve-alert><nve-icon slot="icon">🏁</nve-icon> Performance: detail about how a guideline impacts performance</nve-alert>
-  <nve-alert><nve-icon slot="icon">🎓</nve-icon> Learn: resource to learn more about a guideline topic</nve-alert>
-  <nve-alert><nve-icon slot="icon">🚧</nve-icon> WIP: details on any work in progress guidance</nve-alert>
+  <nve-alert><nve-icon slot="icon" name="flag"></nve-icon> Performance: detail about how a guideline impacts performance</nve-alert>
+  <nve-alert><nve-icon slot="icon" name="academic-cap"></nve-icon> Learn: resource to learn more about a guideline topic</nve-alert>
+  <nve-alert><nve-icon slot="icon" name="traffic-cone"></nve-icon> WIP: details on any work in progress guidance</nve-alert>
 </div>
 
 ## Terminology
@@ -70,7 +70,7 @@ Consistent element APIs provide consistent developer experience. The recommendat
 ```html
 <!-- HTML/JavaScript -->
 <nve-alert status="success">
-  <p>hello there!</p>
+  <p nve-text="body">hello there!</p>
 </nve-alert>
 
 <script type="module">
@@ -82,22 +82,22 @@ Consistent element APIs provide consistent developer experience. The recommendat
 
 <!-- Angular -->
 <nve-alert status="success" [closable]="boolProp" (close)="handle($event)">
-  <p>hello there!</p>
+  <p nve-text="body">hello there!</p>
 </nve-alert>
 
 <!-- Lit -->
 <nve-alert status="success" ?closable=${boolProp} @close=${e => this.handle(e)}>
-  <p>hello there!</p>
+  <p nve-text="body">hello there!</p>
 </nve-alert>
 
 <!-- Vue -->
 <nve-alert status="success" :closable="boolProp" @close="handle">
-  <p>hello there!</p>
+  <p nve-text="body">hello there!</p>
 </nve-alert>
 
 <!-- React/Preact -->
 <nve-alert status="success" closable={this.state.boolProp} onClose={this.handle}>
-  <p>hello there!</p>
+  <p nve-text="body">hello there!</p>
 </nve-alert>
 ```
 
diff --git a/projects/site/src/docs/api-design/logs.md b/projects/site/src/docs/api-design/logs.md
index e3465c6e9..d1fe9e525 100644
--- a/projects/site/src/docs/api-design/logs.md
+++ b/projects/site/src/docs/api-design/logs.md
@@ -60,7 +60,7 @@ This warning appears when invalid elements are slotted into a component. Example
 
 ```html
 <nve-tree>
-  <nve-tree-node></nve-tree-node>
+  <nve-tree-node>Node</nve-tree-node>
 </nve-tree>
 
 <nve-grid-row>
@@ -73,7 +73,7 @@ This warning appears when invalid elements are slotted into a component. Example
 ```html
 <nve-tree>
   <div>
-    <nve-tree-node></nve-tree-node>
+    <nve-tree-node>Node</nve-tree-node>
   </div>
 </nve-tree>
 
@@ -102,11 +102,15 @@ This warning appears when a component tries to reference an element by ID that d
 
 <nve-alert status="danger">Invalid</nve-alert>
 
+<!-- eslint-disable @nvidia-elements/lint/no-missing-popover-trigger -->
+
 ```html
 <nve-button popovertarget="my-popover">show tooltip</nve-button>
 <nve-tooltip id="incorrect-id">tooltip</nve-tooltip>
 ```
 
+<!-- eslint-enable @nvidia-elements/lint/no-missing-popover-trigger -->
+
 To resolve this warning:
 
 - Ensure the referenced element exists in the DOM
diff --git a/projects/site/src/docs/api-design/packaging.md b/projects/site/src/docs/api-design/packaging.md
index 3fec9b7a8..26311f404 100644
--- a/projects/site/src/docs/api-design/packaging.md
+++ b/projects/site/src/docs/api-design/packaging.md
@@ -45,7 +45,7 @@ Build outputs should target the latest ES2020+. Build outputs should not compile
 
 <nve-alert status="warning">Warning: avoid alternate build targets as it increases complexity and is unnecessary with modern build tools and browsers.</nve-alert>
 
-<nve-alert><nve-icon slot="icon">🎓</nve-icon> Learn: <a href="https://justinfagnani.com/2019/11/01/how-to-publish-web-components-to-npm/">publishing Web Components</a></nve-alert>
+<nve-alert><nve-icon slot="icon" name="academic-cap"></nve-icon> Learn: <a href="https://justinfagnani.com/2019/11/01/how-to-publish-web-components-to-npm/">publishing Web Components</a></nve-alert>
 
 ## Entrypoints
 
@@ -95,8 +95,8 @@ The `package.json` should use a `sideEffects` array that lists registration and
 
 This enables tools like Webpack and Rollup to preserve explicit registration entrypoints while still tree-shaking side-effect-free component modules.
 
-<nve-alert><nve-icon slot="icon">🎓</nve-icon> Learn about <a href="/docs/integrations/lit-library/">Lit Library integration</a></nve-alert>
+<nve-alert><nve-icon slot="icon" name="academic-cap"></nve-icon> Learn about <a href="/docs/integrations/lit-library/">Lit Library integration</a></nve-alert>
 
-<nve-alert><nve-icon slot="icon">🎓</nve-icon> Learn: <a href="https://github.com/webcomponents/polyfills/tree/master/packages/scoped-custom-element-registry">scoped element registry</a></nve-alert>
+<nve-alert><nve-icon slot="icon" name="academic-cap"></nve-icon> Learn: <a href="https://github.com/webcomponents/polyfills/tree/master/packages/scoped-custom-element-registry">scoped element registry</a></nve-alert>
 
-<nve-alert><nve-icon slot="icon">🎓</nve-icon> Learn: <a href="https://www.youtube.com/watch?v=QmDToR6mLhk">case study</a></nve-alert>
+<nve-alert><nve-icon slot="icon" name="academic-cap"></nve-icon> Learn: <a href="https://www.youtube.com/watch?v=QmDToR6mLhk">case study</a></nve-alert>
diff --git a/projects/site/src/docs/api-design/properties-attributes.md b/projects/site/src/docs/api-design/properties-attributes.md
index 7717413ed..e33aec27d 100644
--- a/projects/site/src/docs/api-design/properties-attributes.md
+++ b/projects/site/src/docs/api-design/properties-attributes.md
@@ -30,7 +30,7 @@ Properties (`@property`) in Lit enable setting the property on the element via J
 ```
 
 <nve-alert>
-  <nve-icon slot="icon">🎓</nve-icon> 
+  <nve-icon slot="icon" name="academic-cap"></nve-icon>
   <p nve-text="body">Learn: by default when you set a property, Lit does not update the corresponding attribute in the DOM for performance. If the attribute serves as a style hook example, <code nve-text="code">:host([disabled])</code> then you can add the <code nve-text="code">reflect</code> option to the property decorator.</p>
 </nve-alert>
 
@@ -56,7 +56,7 @@ Properties/Attributes should avoid enabling “impossible states”. Conflicting
 
 {% enddodont %}
 
-<nve-alert><nve-icon slot="icon">🎓</nve-icon> Learn:&nbsp;<a href="https://kentcdodds.com/blog/make-impossible-states-impossible" nve-text="link">make impossible states impossible</a></nve-alert>
+<nve-alert><nve-icon slot="icon" name="academic-cap"></nve-icon> Learn:&nbsp;<a href="https://kentcdodds.com/blog/make-impossible-states-impossible" nve-text="link">make impossible states impossible</a></nve-alert>
 
 ## Boolean Types
 
@@ -81,20 +81,20 @@ Boolean property/attribute type behave the same as native HTML element boolean t
 While Lit keeps both properties and attributes in sync, do not use complex types like `object` and `array` on the API. Since HTML cannot represent JavaScript objects, Lit must JSON parse attributes and reflect them anytime there is a change to ensure the JavaScript property and HTML attribute are in sync. This can be expensive to parse when using an object or array and cause unexpected behaviors such as lost object references for the user.
 
 <nve-alert status="success">
-  Use <code>string | number | boolean</code>
+  Use <code nve-text="code">string | number | boolean</code>
 </nve-alert>
 
 <nve-alert status="danger">
-  Avoid <code>object | array</code>
+  Avoid <code nve-text="code">object | array</code>
 </nve-alert>
 
 Complex types cause compatibility and usability issues as it can require the developer to use JavaScript to render content. This can make it difficult for user-generated content like CMS systems or SSR (Server Side Rendering) to easily render static HTML.
 
 <nve-alert status="warning">
-  Warning: avoid using <code>@property</code> on built in properties/attributes on the <code>HTMLElement</code> as the decorator overrides the getter/setter and can cause unexpected behavior.&nbsp;<a href="https://github.com/vmware-clarity/core/blob/main/projects/core/build/eslint-rules/reserved-property-names.js" nve-text="link">read more</a>
+  Warning: avoid using <code nve-text="code">@property</code> on built in properties/attributes on the <code nve-text="code">HTMLElement</code> as the decorator overrides the getter/setter and can cause unexpected behavior.&nbsp;<a href="https://github.com/vmware-clarity/core/blob/main/projects/core/build/eslint-rules/reserved-property-names.js" nve-text="link">read more</a>
 </nve-alert>
 
-<nve-alert><nve-icon slot="icon">🎓</nve-icon>
+<nve-alert><nve-icon slot="icon" name="academic-cap"></nve-icon>
 Learn about <a href="https://developers.google.com/web/fundamentals/web-components/best-practices#attributes-properties" nve-text="link">Web Fundamentals Attributes vs Properties</a>.
 </nve-alert>
 
@@ -147,6 +147,6 @@ export class Sparkline extends LitElement implements DataElement<number[]> {
 
 <nve-alert status="warning">
   <p nve-text="relaxed">
-    Warning: only use <code>DataElement</code> for data structures that have no reasonable declarative HTML representation. If primitive attributes, slots, or child elements can represent the content, prefer those approaches.
+    Warning: only use <code nve-text="code">DataElement</code> for data structures that have no reasonable declarative HTML representation. If primitive attributes, slots, or child elements can represent the content, prefer those approaches.
   </p>
 </nve-alert>
diff --git a/projects/site/src/docs/api-design/registration.md b/projects/site/src/docs/api-design/registration.md
index 8bbcf0b21..6815c797f 100644
--- a/projects/site/src/docs/api-design/registration.md
+++ b/projects/site/src/docs/api-design/registration.md
@@ -31,6 +31,6 @@ Tag names should avoid using verbs or actions within the name. The properties an
 
 {% enddodont %}
 
-<nve-alert><nve-icon slot="icon">🎓</nve-icon> Learn: elements should follow common and established names for existing UI patterns. See &nbsp;<a href="https://open-ui.org" nve-text="link">openui.org</a>&nbsp; for more details on upcoming specs.</nve-alert>
+<nve-alert><nve-icon slot="icon" name="academic-cap"></nve-icon> Learn: elements should follow common and established names for existing UI patterns. See &nbsp;<a href="https://open-ui.org" nve-text="link">openui.org</a>&nbsp; for more details on upcoming specs.</nve-alert>
 
-<nve-alert><nve-icon slot="icon">🎓</nve-icon> Learn: learn common component names from the Open UI &nbsp;<a href="https://open-ui.org/research/component-matrix" nve-text="link">component name matrix</a>.</nve-alert>
+<nve-alert><nve-icon slot="icon" name="academic-cap"></nve-icon> Learn: learn common component names from the Open UI &nbsp;<a href="https://open-ui.org/research/component-matrix" nve-text="link">component name matrix</a>.</nve-alert>
diff --git a/projects/site/src/docs/api-design/slots.md b/projects/site/src/docs/api-design/slots.md
index bf44bd9e2..44bb5684a 100644
--- a/projects/site/src/docs/api-design/slots.md
+++ b/projects/site/src/docs/api-design/slots.md
@@ -20,7 +20,7 @@ Slots provide flexibility for content controlled by the host application that a
 
 ```html
 <nve-alert status="success">
-  <p>Hello <strong>There</strong>!</p>
+  <p nve-text="body">Hello <strong>There</strong>!</p>
 </nve-alert>
 ```
 
@@ -31,12 +31,12 @@ Slots enable an easy way for component composition and decoupling from precise u
 ```html
 <nve-card>
   <nve-card-header>
-    <h3>Plugin</h3>
+    <h3 nve-text="heading">Plugin</h3>
     <a href="#">Learn More</a>
   </nve-card-header>
-  <nve-card-body>
-    <p>Cool new plugin features!</p>
-  </nve-card-body>
+  <nve-card-content>
+    <p nve-text="body">Cool new plugin features!</p>
+  </nve-card-content>
   <nve-card-footer>
     <nve-button>Enable</nve-button>
   </nve-card-footer>
@@ -73,21 +73,21 @@ Composition based APIs also provide flexibility for the host application to choo
 
 ```html
 <nve-tree>
-  <nve-tree-item>item</nve-tree-item>
-  <nve-tree-item>item</nve-tree-item>
-  <nve-tree-item>item</nve-tree-item>
+  <nve-tree-node>item</nve-tree-node>
+  <nve-tree-node>item</nve-tree-node>
+  <nve-tree-node>item</nve-tree-node>
 </nve-tree>
 ```
 
 ```html
 <nve-tree>
-  <nve-tree-item>item</nve-tree-item>
-  <nve-tree-item>item</nve-tree-item>
-  <nve-tree-item expanded>
-  	<nve-tree-item>item</nve-tree-item>
-    <nve-tree-item>item</nve-tree-item>
-    <nve-tree-item>item</nve-tree-item>
-  </nve-tree-item>
+  <nve-tree-node>item</nve-tree-node>
+  <nve-tree-node>item</nve-tree-node>
+  <nve-tree-node expanded>
+	<nve-tree-node>item</nve-tree-node>
+    <nve-tree-node>item</nve-tree-node>
+    <nve-tree-node>item</nve-tree-node>
+  </nve-tree-node>
 </nve-tree>
 ```
 
@@ -96,14 +96,14 @@ By leveraging composition the host application has full render control in their
 ```html
 <!-- Angular -->
 <nve-tree>
-  <nve-tree-item *ngFor="let item of items">{{item.id}}</nve-tree-item>
+  <nve-tree-node *ngFor="let item of items">{{item.id}}</nve-tree-node>
 </nve-tree>
 ```
 
 ```tsx
 // JSX
 <nve-tree>
-  {items.map(item => <nve-tree-item>{item.id}</nve-tree-item>)}
+  {items.map(item => <nve-tree-node>{item.id}</nve-tree-node>)}
 </nve-tree>
 ```
 
@@ -113,7 +113,7 @@ This enables full control of conditional rendering of tree nodes as well as more
 <!-- Angular, only create nodes if the item meets a certain condition -->
 <nve-tree>
   <ng-container *ngFor="let item of items">
-    <nve-tree-item *ngIf="item.active">{{item.id}}</nve-tree-item>
+    <nve-tree-node *ngIf="item.active">{{item.id}}</nve-tree-node>
   </ng-container>
 </nve-tree>
 ```
diff --git a/projects/site/src/docs/api-design/stateless.md b/projects/site/src/docs/api-design/stateless.md
index 6f1df3838..27e139cb7 100644
--- a/projects/site/src/docs/api-design/stateless.md
+++ b/projects/site/src/docs/api-design/stateless.md
@@ -50,14 +50,14 @@ export class AppComponent {
 
 Because the application manages the state, the developer now has the flexibility to intercept and run extra checks before closing the modal. While this is a subtle difference when compared to the stateful version, it provides a more flexible element and keeps the public API surface small.
 
-<nve-alert status=”accent”>Tip: a guiding principle for element API design is to ask, “Can you prototype/demo any visual state of the element with using only HTML?”</nve-alert>
+<nve-alert status="accent">Tip: a guiding principle for element API design is to ask, “Can you prototype/demo any visual state of the element with using only HTML?”</nve-alert>
 
 ## Synchronizing State
 
 Stateless elements also prevent the state from becoming out of sync. If the modal retains an internal visibility state, this opens up the potential for bugs where the element is out of sync with the application state. View the demos below to learn more detail about the risks of stateful leaf elements.
 
-<nve-alert><nve-icon slot="icon">🎓</nve-icon> Learn:&nbsp;<a href="https://stackblitz.com/edit/angular-ivy-cjr3hj?file=src%2Fapp%2Fapp.component.html">stateless vs stateful demo in Angular</a></nve-alert>
-<nve-alert><nve-icon slot="icon">🎓</nve-icon> Learn:&nbsp;<a href="https://stackblitz.com/edit/http-server-kojqdg?file=src%2FApp.tsx">stateless vs stateful demo in React</a></nve-alert>
+<nve-alert><nve-icon slot="icon" name="academic-cap"></nve-icon> Learn:&nbsp;<a href="https://stackblitz.com/edit/angular-ivy-cjr3hj?file=src%2Fapp%2Fapp.component.html">stateless vs stateful demo in Angular</a></nve-alert>
+<nve-alert><nve-icon slot="icon" name="academic-cap"></nve-icon> Learn:&nbsp;<a href="https://stackblitz.com/edit/http-server-kojqdg?file=src%2FApp.tsx">stateless vs stateful demo in React</a></nve-alert>
 
 ## Stateful Events - anti-pattern
 
@@ -67,6 +67,6 @@ Do not emit/reflect events in response to setting state on the element. This is
 
 Always derive internal state from incoming properties and not user actions. Example, setting a expanded property on an element can cause the element to set css classes and aria-\* attributes to visually and semantically represent the expanded state.
 
-<nve-alert><nve-icon slot="icon">🎓</nve-icon> Learn: web.dev&nbsp;<a href="https://web.dev/custom-elements-best-practices/#events">Custom Element Event Best Practices</a></nve-alert>
+<nve-alert><nve-icon slot="icon" name="academic-cap"></nve-icon> Learn: web.dev&nbsp;<a href="https://web.dev/custom-elements-best-practices/#events">Custom Element Event Best Practices</a></nve-alert>
 
-<nve-alert><nve-icon slot="icon">🎓</nve-icon> Case Study:&nbsp;<a href="https://github.com/vmware-clarity/core/blob/main/projects/core/src/tag/tag.element.ts#L74">a tag element setting child badge component to align visual status</a></nve-alert>
+<nve-alert><nve-icon slot="icon" name="academic-cap"></nve-icon> Case Study:&nbsp;<a href="https://github.com/vmware-clarity/core/blob/main/projects/core/src/tag/tag.element.ts#L74">a tag element setting child badge component to align visual status</a></nve-alert>
diff --git a/projects/site/src/docs/api-design/styles.md b/projects/site/src/docs/api-design/styles.md
index d2ff8659f..5429ee9de 100644
--- a/projects/site/src/docs/api-design/styles.md
+++ b/projects/site/src/docs/api-design/styles.md
@@ -261,7 +261,7 @@ CSS Custom Properties defined on the host should use Design Tokens that appropri
 
 {% enddodont %}
 
-<nve-alert><nve-icon slot="icon">🏁</nve-icon> Performance: leveraging design tokens with defined intent drastically reduces the amount of CSS bundled and maintained within the system.</nve-alert>
+<nve-alert><nve-icon slot="icon" name="flag"></nve-icon> Performance: leveraging design tokens with defined intent drastically reduces the amount of CSS bundled and maintained within the system.</nve-alert>
 
 ## Element Style APIs
 
@@ -271,6 +271,8 @@ For custom states and behaviors, styles can hook into the public API of a reflec
 - states `expanded` | `selected` | `disabled`
 - behaviors `closable` | `draggable`
 
+<!-- eslint-disable @nvidia-elements/lint/no-unknown-css-variable, @nvidia-elements/lint/no-unstyled-typography -->
+
 ```html
 <nve-accordion-panel expanded>
   <p>hello there!</p>
@@ -289,21 +291,23 @@ nve-accordion-panel[expanded] {
 </style>
 ```
 
+<!-- eslint-enable @nvidia-elements/lint/no-unknown-css-variable, @nvidia-elements/lint/no-unstyled-typography -->
+
 ## Margins & Whitespace
 
 Elements should not have any external margins or whitespace outside the bounds of the host element. Margins on a host element make assumptions about the layout that is external to their responsibility. A design token/layout system allows designers and developers to layout elements/utilities consistently and with explicit intent and constraint.
 
-<nve-badge><nve-icon slot="icon">🏁</nve-icon> Performance: avoiding margins enables &nbsp;<a href="https://developer.chrome.com/blog/css-containment/">CSS containment for better performance</a></nve-badge>
-<nve-badge><nve-icon slot="icon">🎓</nve-icon> Learn: &nbsp;<a href="https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202">leading trim</a></nve-badge>
-<nve-badge><nve-icon slot="icon">🎓</nve-icon> Learn about &nbsp;<a href="https://seek-oss.github.io/capsize/">Capsize CSS</a></nve-badge>
+<nve-alert><nve-icon slot="icon" name="flag"></nve-icon> Performance: avoiding margins enables &nbsp;<a href="https://developer.chrome.com/blog/css-containment/">CSS containment for better performance</a></nve-alert>
+<nve-alert><nve-icon slot="icon" name="academic-cap"></nve-icon> Learn: &nbsp;<a href="https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202">leading trim</a></nve-alert>
+<nve-alert><nve-icon slot="icon" name="academic-cap"></nve-icon> Learn about &nbsp;<a href="https://seek-oss.github.io/capsize/">Capsize CSS</a></nve-alert>
 
 ## Logical Properties
 
 Use CSS Logical Properties when applying styles to text content that may invert with reading style. By using logical properties the styles follow the reading direction of the element. i18n support requires this
 when the user preferences in the browser reverse the reading order.
 
-<nve-badge><nve-icon slot="icon">🎓</nve-icon> Learn about &nbsp;<a href="https://web.dev/logical-property-shorthands/">CSS Logical Properties</a></nve-badge>
-<nve-badge><nve-icon slot="icon">🎓</nve-icon> Case Study: &nbsp;<a href="https://storybook.core.clarity.design/?path=/docs/stories-forms--internationalization">example of inverted form controls </a></nve-badge>
+<nve-alert><nve-icon slot="icon" name="academic-cap"></nve-icon> Learn about &nbsp;<a href="https://web.dev/logical-property-shorthands/">CSS Logical Properties</a></nve-alert>
+<nve-alert><nve-icon slot="icon" name="academic-cap"></nve-icon> Case Study: &nbsp;<a href="https://storybook.core.clarity.design/?path=/docs/stories-forms--internationalization">example of inverted form controls </a></nve-alert>
 
 ## CSS Parts
 
@@ -329,7 +333,7 @@ You can more safely expose elements that are part of the library's public API si
 
 ```html
 <!-- nve-dialog internal template -->
-<nve-icon-button part="icon-button"></nve-icon-button>
+<nve-icon-button part="icon-button" icon-name="placeholder"></nve-icon-button>
 
 <!-- consumer css -->
 <style>
@@ -344,8 +348,8 @@ You can more safely expose elements that are part of the library's public API si
 When naming a part use the name of the custom element without the `nve-` prefix for API consistency. If a component has many internal part references of the same type use both the generalize element name as well as a semantic name. This allows generalized selectors for theming as well as precise selections when needed.
 
 ```html
-<nve-icon-button part="icon-button previous-icon-button"></nve-icon-button>
-<nve-icon-button part="icon-button next-icon-button"></nve-icon-button>
+<nve-icon-button part="icon-button previous-icon-button" icon-name="placeholder"></nve-icon-button>
+<nve-icon-button part="icon-button next-icon-button" icon-name="placeholder"></nve-icon-button>
 ```
 
 ```css
diff --git a/projects/site/src/docs/elements/control.md b/projects/site/src/docs/elements/control.md
index 9043dab87..80662017d 100644
--- a/projects/site/src/docs/elements/control.md
+++ b/projects/site/src/docs/elements/control.md
@@ -13,7 +13,7 @@
 import '@nvidia-elements/core/forms/define.js';
 ```
 
-The `<nve-control>` element is the base control that the `<nve-*` form controls extend. It works for generic input type as well as custom or third party form controls.
+The `nve-control` element is the base control that the `nve-*` form controls extend. It works for generic input type as well as custom or third party form controls.
 
 ## Responsive
 
@@ -70,7 +70,7 @@ Many of the form controls wrap the native HTML form element or `<input>` element
 But Elements includes [Form Associated Elements](https://web.dev/more-capable-form-controls) which emit `change` / `input`
 events and work with native HTML `<form>` validation and [FormData](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects) submission.
 
-On these elements, subscribe to event changes and set the `value` directly on the custom `<nve-*` elements rather than on an `<input>`:
+On these elements, subscribe to event changes and set the `value` directly on the custom `nve-*` elements rather than on an `input`:
 
 ```html
 <nve-resize-handle min="0" max="100" step="10" value="50"></nve-resize-handle>
diff --git a/projects/site/src/docs/elements/data-grid/column-action.md b/projects/site/src/docs/elements/data-grid/column-action.md
index a3370f766..4dc97472d 100644
--- a/projects/site/src/docs/elements/data-grid/column-action.md
+++ b/projects/site/src/docs/elements/data-grid/column-action.md
@@ -13,7 +13,7 @@
 <nve-grid>
   <nve-grid-header>
     <nve-grid-column>
-      Column 1 <nve-icon-button slot="actions"></nve-icon-button>
+      Column 1 <nve-icon-button slot="actions" icon-name="more-actions" aria-label="Column actions"></nve-icon-button>
     </nve-grid-column>
     <nve-grid-column>Column 2</nve-grid-column>
     <nve-grid-column>Column 3</nve-grid-column>
diff --git a/projects/site/src/docs/elements/data-grid/column-alignment.md b/projects/site/src/docs/elements/data-grid/column-alignment.md
index 6416b4951..5a6e75603 100644
--- a/projects/site/src/docs/elements/data-grid/column-alignment.md
+++ b/projects/site/src/docs/elements/data-grid/column-alignment.md
@@ -11,8 +11,8 @@
 ```html
 <nve-grid>
   <nve-grid-header>
-    <nve-grid-column column-align="left">Column 1</nve-grid-column>
-    <nve-grid-column column-align="right">Column 2</nve-grid-column>
+    <nve-grid-column column-align="start">Column 1</nve-grid-column>
+    <nve-grid-column column-align="end">Column 2</nve-grid-column>
     <nve-grid-column column-align="center">Column 3</nve-grid-column>
     <nve-grid-column>Column 4</nve-grid-column>
   </nve-grid-header>
diff --git a/projects/site/src/docs/elements/data-grid/display-settings.md b/projects/site/src/docs/elements/data-grid/display-settings.md
index 1e1650251..9937764d4 100644
--- a/projects/site/src/docs/elements/data-grid/display-settings.md
+++ b/projects/site/src/docs/elements/data-grid/display-settings.md
@@ -9,18 +9,18 @@
 ---
 
 ```html
-<section nve-layout="row gap:md align:stretch">
-  <nve-panel expanded closable>
-    ...
-  </nve-panel>
-
-  <div nve-layout="column gap:md">
-    <nve-button>display settings</nve-button>
-    <nve-grid>
-      ...
-    </nve-grid>
+<div nve-layout="column gap:md full">
+  <nve-dropdown closable id="column-settings-dropdown">
+    settings...
+  </nve-dropdown>
+  <div nve-layout="row gap:sm align:vertical-center">
+    <p nve-text="body muted">1,145 results found</p>
+    <nve-button popovertarget="column-settings-dropdown">
+      Display Settings
+    <nve-button>
   </div>
-</section>
+  <nve-grid>...</nve-grid>
+</div>
 ```
 
 {% example '@nvidia-elements/core/grid/grid.examples.json' 'DisplaySettings' %}
diff --git a/projects/site/src/docs/elements/data-grid/panel-detail.md b/projects/site/src/docs/elements/data-grid/panel-detail.md
index 7a4e34cb1..5613b045e 100644
--- a/projects/site/src/docs/elements/data-grid/panel-detail.md
+++ b/projects/site/src/docs/elements/data-grid/panel-detail.md
@@ -23,7 +23,7 @@
       <nve-grid-cell>Cell 1-2</nve-grid-cell>
       <nve-grid-cell>Cell 1-3</nve-grid-cell>
       <nve-grid-cell>
-        <nve-icon-button container="flat" icon-name="additional-actions" aria-label="view item 1"></nve-icon-button>
+        <nve-icon-button container="flat" icon-name="more-actions" aria-label="view item 1"></nve-icon-button>
       </nve-grid-cell>
     </nve-grid-row>
   </nve-grid>
diff --git a/projects/site/src/docs/elements/data-grid/panel-grid.md b/projects/site/src/docs/elements/data-grid/panel-grid.md
index 8fd3d8fa0..9949a2b43 100644
--- a/projects/site/src/docs/elements/data-grid/panel-grid.md
+++ b/projects/site/src/docs/elements/data-grid/panel-grid.md
@@ -9,16 +9,27 @@
 ---
 
 ```html
-<main nve-layout="row gap:sm full">
-  <section nve-layout="column gap:md full align:stretch">
-    page content
-  </section>
-  <nve-panel expanded>
+<nve-page>
+  <nve-page-header slot="header">
+    <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
+    <h2 nve-text="heading" slot="prefix">Infrastructure</h2>
+  </nve-page-header>
+  <nve-page-panel slot="right" expanded closable>
+    <nve-page-panel-header>
+      <h3 nve-text="heading medium sm">Recording</h3>
+    </nve-page-panel-header>
     <nve-grid container="flat" stripe>
-      ...
+      <nve-grid-header>
+        <nve-grid-column style="height: 0; overflow: hidden;">Key<nve-grid-column>
+        <nve-grid-column style="height: 0; overflow: hidden;">Value<nve-grid-column>
+      </nve-grid-header>
+      <nve-grid-row>
+        <nve-grid-cell><p nve-text="label muted">Session ID</p></nve-grid-cell>
+        <nve-grid-cell><p nve-text="label">123456</p></nve-grid-cell>
+      </nve-grid-row>
     </nve-grid>
-  </nve-panel>
-</main>
+  </nve-page-panel>
+</nve-page>
 ```
 
 {% example '@nvidia-elements/core/grid/grid.examples.json' 'PanelGrid' %}
diff --git a/projects/site/src/docs/elements/data-grid/row-action.md b/projects/site/src/docs/elements/data-grid/row-action.md
index 811d716fe..28b3d194b 100644
--- a/projects/site/src/docs/elements/data-grid/row-action.md
+++ b/projects/site/src/docs/elements/data-grid/row-action.md
@@ -15,7 +15,7 @@
     <nve-grid-column>Column 1</nve-grid-column>
     <nve-grid-column>Column 2</nve-grid-column>
     <nve-grid-column>Column 3</nve-grid-column>
-    <nve-grid-column width="max-content" position="fixed" aria-label="additonal actions"></nve-grid-column>
+      <nve-grid-column width="max-content" position="fixed" aria-label="additional actions"></nve-grid-column>
   </nve-grid-header>
   ...
   <nve-grid-row>
@@ -23,7 +23,7 @@
     <nve-grid-cell>Cell 1-2</nve-grid-cell>
     <nve-grid-cell>Cell 1-3</nve-grid-cell>
     <nve-grid-cell>
-      <nve-icon-button container="flat" icon-name="additional-actions" aria-label="row 1 actions"></nve-icon-button>
+      <nve-icon-button container="flat" icon-name="more-actions" aria-label="row 1 actions"></nve-icon-button>
     </nve-grid-cell>
   </nve-grid-row>
   ...
diff --git a/projects/site/src/docs/elements/data-grid/row-sort.md b/projects/site/src/docs/elements/data-grid/row-sort.md
index 003a58091..6f3e4950f 100644
--- a/projects/site/src/docs/elements/data-grid/row-sort.md
+++ b/projects/site/src/docs/elements/data-grid/row-sort.md
@@ -36,6 +36,8 @@
 
 ## Lit {% svg-logo 'lit' '28' %}
 
+<!-- eslint-disable @nvidia-elements/lint/no-unexpected-slot-value -->
+
 ```typescript
 class RowSortDemo extends LitElement {
   @state() sort: 'none' | 'ascending' | 'descending' = 'none';
@@ -62,3 +64,5 @@ class RowSortDemo extends LitElement {
   }
 }
 ```
+
+<!-- eslint-enable @nvidia-elements/lint/no-unexpected-slot-value -->
diff --git a/projects/site/src/docs/elements/tabs.md b/projects/site/src/docs/elements/tabs.md
index 7cb0fa268..29a105b13 100644
--- a/projects/site/src/docs/elements/tabs.md
+++ b/projects/site/src/docs/elements/tabs.md
@@ -31,7 +31,7 @@ You can change the border styles by overriding `--indicator-background` and `--i
 
 ## Tabs with Dot Indicators
 
-Add dots and icons by simply slotting in `<nve-icon>` or `<nve-dot>` into your `<nve-tabs-item>`
+Add dots and icons by simply slotting in `nve-icon` or `nve-dot` into your `nve-tabs-item`.
 
 {% example '@nvidia-elements/core/tabs/tabs.examples.json' 'WithDots' %}
 
diff --git a/projects/site/src/docs/elements/tooltip.md b/projects/site/src/docs/elements/tooltip.md
index c23eefaf7..8d8e7f3e3 100644
--- a/projects/site/src/docs/elements/tooltip.md
+++ b/projects/site/src/docs/elements/tooltip.md
@@ -78,7 +78,7 @@ class DynamicAnchorPositionDemo extends LitElement {
   render() {
     return html`
       <div ${ref(this.#anchor)} id="anchor"></div>
-      <nve-tooltip anchor="anchor">tooltip</nve-tooltip>
+      <nve-tooltip anchor="anchor" hidden>tooltip</nve-tooltip>
     `;
   }
 
diff --git a/projects/site/src/docs/foundations/i18n.md b/projects/site/src/docs/foundations/i18n.md
index f77d59253..e7aa28aed 100644
--- a/projects/site/src/docs/foundations/i18n.md
+++ b/projects/site/src/docs/foundations/i18n.md
@@ -37,7 +37,8 @@ Components may need to provide context to the action they are describing. For ex
 Using the `i18n` property/attribute, the i18n values can be overridden per component instance rather than across the entire application.
 
 ```html
-<nve-dialog closable nve-i18n="{ 'close': 'dismiss task failure warning'}">
+<nve-button popovertarget="task-failure">Show task failure warning</nve-button>
+<nve-dialog id="task-failure" closable nve-i18n="{ 'close': 'dismiss task failure warning'}">
   Warning, pending task failed, <a href="#">retry task</a>?
 </nve-dialog>
 ```
diff --git a/projects/site/src/docs/foundations/iconography.md b/projects/site/src/docs/foundations/iconography.md
index 6a9db89a3..9a7f85769 100644
--- a/projects/site/src/docs/foundations/iconography.md
+++ b/projects/site/src/docs/foundations/iconography.md
@@ -8,11 +8,11 @@
 
 # {{ title }}
 
-The Iconography system builds on exposing an SVG-based icon library to the `<nve-icon>` element. Elements bases its icon SVG set on [Lucide](https://github.com/lucide-icons/lucide).
+The Iconography system builds on exposing an SVG-based icon library to the `nve-icon` element. Elements bases its icon SVG set on [Lucide](https://github.com/lucide-icons/lucide).
 
 [Icon Element Documentation](/docs/elements/icon/)
 
 <icon-demo></icon-demo>
-<nve-notification-group position="bottom" alignment="end"></nve-notification-group>
+<nve-notification-group position="bottom" alignment="end" hidden></nve-notification-group>
 
 <script type="module" src="/_internal/stories/icon/icon-demo.js"></script>
diff --git a/projects/site/src/docs/foundations/layout/grid.md b/projects/site/src/docs/foundations/layout/grid.md
index c8de1ecd4..0a9f80bed 100644
--- a/projects/site/src/docs/foundations/layout/grid.md
+++ b/projects/site/src/docs/foundations/layout/grid.md
@@ -254,7 +254,7 @@ You can mix both approaches for the most flexibility. Items with explicit `span`
 <main nve-layout="grid gap:lg">
   <!-- Header spans full width -->
   <header nve-layout="span:12">
-    <h1>Dashboard</h1>
+    <h1 nve-text="heading">Dashboard</h1>
   </header>
 
   <!-- Metrics cards in quarters -->
@@ -274,28 +274,34 @@ You can mix both approaches for the most flexibility. Items with explicit `span`
 ```html
 <form nve-layout="grid gap:md">
   <!-- Full width fields -->
-  <nve-input nve-layout="span:12" label="Email">
+  <nve-input nve-layout="span:12">
+    <label>Email</label>
     <input type="email" placeholder="Email" />
   </nve-input>
 
   <!-- Half width fields -->
-  <nve-input nve-layout="span:6" label="First Name">
+  <nve-input nve-layout="span:6">
+    <label>First Name</label>
     <input type="text" placeholder="First Name" />
   </nve-input>
-  <nve-input nve-layout="span:6" label="Last Name">
+  <nve-input nve-layout="span:6">
+    <label>Last Name</label>
     <input type="text" placeholder="Last Name" />
   </nve-input>
 
   <!-- Third width fields -->
-  <nve-input nve-layout="span:4" label="City">
+  <nve-input nve-layout="span:4">
+    <label>City</label>
     <input type="text" placeholder="City" />
   </nve-input>
-  <nve-select nve-layout="span:4" label="State">
+  <nve-select nve-layout="span:4">
+    <label>State</label>
     <select>
       <option value selected disabled hidden>Select State</option>
     </select>
   </nve-select>
-  <nve-input nve-layout="span:4" label="Zip">
+  <nve-input nve-layout="span:4">
+    <label>Zip</label>
     <input type="text" placeholder="Zip" />
   </nve-input>
 </form>
diff --git a/projects/site/src/docs/foundations/layout/horizontal.md b/projects/site/src/docs/foundations/layout/horizontal.md
index 3369ac0ea..154778bd7 100644
--- a/projects/site/src/docs/foundations/layout/horizontal.md
+++ b/projects/site/src/docs/foundations/layout/horizontal.md
@@ -66,7 +66,7 @@ Set `nve-layout="row"` on a container element to create a horizontal layout:
 
 ```html
 <!-- Simple horizontal layout -->
-<nav nve-layout="row">
+<nav nve-layout="row gap:sm">
   <a href="/">Home</a>
   <a href="/about">About</a>
   <a href="/contact">Contact</a>
@@ -79,9 +79,9 @@ Set `nve-layout="row"` on a container element to create a horizontal layout:
 </div>
 
 <!-- With alignment -->
-<header nve-layout="row align:vertical-center align:space-between">
-  <nve-logo></nve-logo>
-  <h1>Menu items</h1>
+<header nve-layout="row gap:sm align:vertical-center align:space-between">
+  <nve-logo>NV</nve-logo>
+  <h1 nve-text="heading">Menu items</h1>
 </header>
 ```
 
@@ -126,7 +126,7 @@ Horizontal layouts support alignment along both axes:
 ## Horizontal Layout Examples
 
 ```html
-<section nve-layout="row align:...">
+<section nve-layout="row gap:sm align:center">
 ```
 
 ### Align Left
diff --git a/projects/site/src/docs/foundations/layout/index.md b/projects/site/src/docs/foundations/layout/index.md
index f2573e96c..8dea81361 100644
--- a/projects/site/src/docs/foundations/layout/index.md
+++ b/projects/site/src/docs/foundations/layout/index.md
@@ -76,8 +76,8 @@ Each layout mode supports spacing, alignment, and responsive behavior through a
 
 <!-- Centered vertical layout with padding -->
 <section nve-layout="column gap:md pad:lg align:center">
-  <h2>Welcome</h2>
-  <p>Create beautiful layouts with ease</p>
+  <h2 nve-text="heading">Welcome</h2>
+  <p nve-text="body">Create beautiful layouts with ease</p>
   <nve-button>Get Started</nve-button>
 </section>
 
@@ -94,7 +94,7 @@ Each layout mode supports spacing, alignment, and responsive behavior through a
 <nve-alert-group status="warning">
   <nve-alert style="--align-items: start">
     <div nve-text="relaxed">
-      Elements components use Web Components with Shadow DOM encapsulation. Many components manage their own internal layout, for example: <code>nve-card</code> components have built-in layout for <code>nve-card-header</code>, <code>nve-card-content</code>, and <code>nve-card-footer</code>. Applying <code>nve-layout</code> directly to these components may not work as expected due to Shadow DOM boundaries.
+      Elements components use Web Components with Shadow DOM encapsulation. Many components manage their own internal layout, for example: <code nve-text="code">nve-card</code> components have built-in layout for <code nve-text="code">nve-card-header</code>, <code nve-text="code">nve-card-content</code>, and <code nve-text="code">nve-card-footer</code>. Applying <code nve-text="code">nve-layout</code> directly to these components may not work as expected due to Shadow DOM boundaries.
     </div>
   </nve-alert>
 </nve-alert-group>
@@ -103,6 +103,8 @@ Apply the `nve-layout` attribute to **native HTML elements** rather than Element
 
 For more details, see the documentation on the [internal-host pattern](/docs/api-design/styles/#removed-host) and [slots](/docs/api-design/slots/) which the library uses in development, as well as [MDN docs](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) on the Shadow DOM.
 
+<!-- eslint-disable @nvidia-elements/lint/no-restricted-attributes -->
+
 ```html
 <!-- ✓ Correct: Apply to native HTML elements -->
 <section nve-layout="row gap:md">
@@ -116,6 +118,8 @@ For more details, see the documentation on the [internal-host pattern](/docs/api
 </nve-card>
 ```
 
+<!-- eslint-enable @nvidia-elements/lint/no-restricted-attributes -->
+
 ## When to Use Each Layout Type
 
 ### Use Horizontal Layout (`row`) when:
@@ -214,7 +218,7 @@ Or use the short hand to just pad the x and y axes.
 - `pad-y:md`
 
 ```html
-<section nve-layout="row pad-left:md">
+<section nve-layout="row gap:none pad-left:md">
 ```
 
 ### Padding Top
@@ -299,11 +303,11 @@ You can compose layout attributes to create sophisticated designs:
 ```html
 <!-- Centered hero section with vertical layout -->
 <section nve-layout="column gap:lg pad:xxl align:center full">
-  <nve-logo size="xl"></nve-logo>
+  <nve-logo size="lg">NV</nve-logo>
   <h1 nve-text="heading xl">Build Faster</h1>
   <p nve-text="lg muted">Create stunning layouts without writing CSS</p>
   <div nve-layout="row gap:sm">
-    <nve-button variant="primary">Start Building</nve-button>
+    <nve-button interaction="emphasis">Start Building</nve-button>
     <nve-button>Learn More</nve-button>
   </div>
 </section>
@@ -311,19 +315,19 @@ You can compose layout attributes to create sophisticated designs:
 <!-- Complex dashboard layout using semantic HTML -->
 <div nve-layout="row gap:md pad:lg align:horizontal-stretch full">
   <aside style="width: 250px">
-    <nve-panel expanded>
-      <nve-panel-header>
-        <div slot="title">Navigation menu</div>
-      </nve-panel-header>
-      <nve-panel-content>
+    <nve-page-panel expanded>
+      <nve-page-panel-header>
+        <div>Navigation menu</div>
+      </nve-page-panel-header>
+      <nve-page-panel-content>
         User profile
-      </nve-panel-content>
-    </nve-panel>
+      </nve-page-panel-content>
+    </nve-page-panel>
   </aside>
 
   <main nve-layout="column gap:lg pad:xl">
     <header nve-layout="row gap:md align:vertical-center align:space-between">
-      <h1>Dashboard</h1>
+      <h1 nve-text="heading">Dashboard</h1>
       <nve-button>Settings</nve-button>
     </header>
 
diff --git a/projects/site/src/docs/foundations/layout/responsive/container.md b/projects/site/src/docs/foundations/layout/responsive/container.md
index a8adb4b9a..c19d2a8a0 100644
--- a/projects/site/src/docs/foundations/layout/responsive/container.md
+++ b/projects/site/src/docs/foundations/layout/responsive/container.md
@@ -43,7 +43,7 @@ Conditional gap sizing example: `nve-layout="row &sm|gap:xxs &md|gap:md &lg|gap:
 
 ```html
 <div> <!-- This parent div element is the containing element - its width will be queried -->
-  <section nve-layout="row &sm|gap:xxs &md|gap:md &lg|gap:xl &xl|gap:xxl">
+  <section nve-layout="row gap:sm &sm|gap:xxs &md|gap:md &lg|gap:xl &xl|gap:xxl">
     <nve-card></nve-card>
     <nve-card></nve-card>
     <nve-card></nve-card>
@@ -56,7 +56,7 @@ Conditional gap sizing example: `nve-layout="row &sm|gap:xxs &md|gap:md &lg|gap:
 <nve-alert-group status="accent">
   <nve-alert style="--align-items: start">
     <div nve-text="relaxed">
-      The extra <code>div</code> wrapper explicitly defines the container element for queries. This design keeps the utility minimal—elements with <code>&</code> syntax automatically use their parent as the container without requiring manual container specification.
+      The extra <code nve-text="code">div</code> wrapper explicitly defines the container element for queries. This design keeps the utility minimal—elements with <code nve-text="code">&</code> syntax automatically use their parent as the container without requiring manual container specification.
     </div>
   </nve-alert>
 </nve-alert-group>
@@ -141,10 +141,10 @@ Or:
 
 ```html
 <section nve-layout="grid gap:md">
-  <nve-card nve-layout="span-items:12 &sm|span:4 &md|span:6 &lg|span:8"></nve-card>
-  <nve-card nve-layout="span-items:12 &sm|span:8 &md|span:6 &lg|span:4"></nve-card>
-  <nve-card nve-layout="span-items:12 &sm|span:8 &md|span:6 &lg|span:4"></nve-card>
-  <nve-card nve-layout="span-items:12 &sm|span:4 &md|span:6 &lg|span:8"></nve-card>
+  <div nve-layout="span-items:12 &sm|span:4 &md|span:6 &lg|span:8"><nve-card></nve-card></div>
+  <div nve-layout="span-items:12 &sm|span:8 &md|span:6 &lg|span:4"><nve-card></nve-card></div>
+  <div nve-layout="span-items:12 &sm|span:8 &md|span:6 &lg|span:4"><nve-card></nve-card></div>
+  <div nve-layout="span-items:12 &sm|span:4 &md|span:6 &lg|span:8"><nve-card></nve-card></div>
 </section>
 ```
 
@@ -163,7 +163,7 @@ Since hiding elements only affects the display of the element itself and not the
 <nve-alert-group status="accent">
   <nve-alert style="--align-items: start">
     <div nve-text="relaxed">
-      Element visibility (hiding) uses the separate <code>nve-display</code> attribute rather than <code>nve-layout</code>. This distinction exists because visibility control only affects the element itself, while layout properties affect how the parent arranges children.
+      Element visibility (hiding) uses the separate <code nve-text="code">nve-display</code> attribute rather than <code nve-text="code">nve-layout</code>. This distinction exists because visibility control only affects the element itself, while layout properties affect how the parent arranges children.
     </div>
   </nve-alert>
 </nve-alert-group>
@@ -203,7 +203,7 @@ Example combining both:
 
 ```html
 <div>
-  <section nve-layout="row &md|gap:lg">
+  <section nve-layout="row gap:sm &md|gap:lg">
     <div>Always visible</div>
     <div nve-display="&sm|hide">Hidden when container ≥ 320px</div>
   </section>
diff --git a/projects/site/src/docs/foundations/layout/responsive/index.md b/projects/site/src/docs/foundations/layout/responsive/index.md
index 3e890544a..c9e355a5b 100644
--- a/projects/site/src/docs/foundations/layout/responsive/index.md
+++ b/projects/site/src/docs/foundations/layout/responsive/index.md
@@ -61,7 +61,7 @@ Container queries respond to the **width of the parent container**, making them
 ```html
 <!-- Responds to the container's width, not the browser width -->
 <div>
-  <section nve-layout="column &md|row &lg|gap:xl">
+  <section nve-layout="column gap:sm &md|row &lg|gap:xl">
     <nve-card></nve-card>
     <nve-card nve-display="&lg|hide"></nve-card>
   </section>
@@ -98,7 +98,7 @@ Viewport queries respond to the **browser window width**, providing traditional
 
 ```html
 <!-- Responds to the browser viewport width -->
-<section nve-layout="column @md|row @lg|gap:xl">
+<section nve-layout="column gap:sm @md|row @lg|gap:xl">
   <nve-card></nve-card>
   <nve-card nve-display="@lg|hide"></nve-card>
 </section>
@@ -164,8 +164,8 @@ You can use both systems together for the most flexibility:
           <h3 nve-text="heading lg">Responsive Card Example</h3>
         </nve-card-header>
         <nve-card-content>
-          <nve-logo size="lg" nve-display="&sm|hide"></nve-logo>
-          <p>This card demonstrates combining container and viewport queries.</p>
+          <nve-logo size="lg" nve-display="&sm|hide">NV</nve-logo>
+          <p nve-text="body">This card demonstrates combining container and viewport queries.</p>
         </nve-card-content>
       </nve-card>
 
@@ -174,8 +174,8 @@ You can use both systems together for the most flexibility:
           <h3 nve-text="heading lg">Responsive Card Example</h3>
         </nve-card-header>
         <nve-card-content>
-          <nve-logo size="lg" nve-display="&sm|hide"></nve-logo>
-          <p>This card demonstrates combining container and viewport queries.</p>
+          <nve-logo size="lg" nve-display="&sm|hide">NV</nve-logo>
+          <p nve-text="body">This card demonstrates combining container and viewport queries.</p>
         </nve-card-content>
       </nve-card>
 
diff --git a/projects/site/src/docs/foundations/layout/responsive/viewport.md b/projects/site/src/docs/foundations/layout/responsive/viewport.md
index c351dffcf..2fe5e7c29 100644
--- a/projects/site/src/docs/foundations/layout/responsive/viewport.md
+++ b/projects/site/src/docs/foundations/layout/responsive/viewport.md
@@ -41,7 +41,7 @@ The at-symbol-based `@breakpoint-size|...` API adds the breakpoint size before t
 Conditional gap sizing example: `nve-layout="row @sm|gap:xs @md|gap:md @lg|gap:xxl"`. The size value after the `:` corresponds to one of the nine [spacing](/docs/foundations/layout/#layout-gap-spacing)/[padding](/docs/foundations/layout/#layout-padding) system values.
 
 ```html
-<section nve-layout="row @sm|gap:xxs @md|gap:md @lg|gap:xl @xl|gap:xl">
+<section nve-layout="row gap:sm @sm|gap:xxs @md|gap:md @lg|gap:xl @xl|gap:xl">
   <nve-card></nve-card>
   <nve-card></nve-card>
   <nve-card></nve-card>
@@ -134,10 +134,10 @@ Or:
 
 ```html
 <section nve-layout="grid gap:md">
-  <nve-card nve-layout="span-items:12 @sm|span:4 @md|span:6 @lg|span:8"></nve-card>
-  <nve-card nve-layout="span-items:12 @sm|span:8 @md|span:6 @lg|span:4"></nve-card>
-  <nve-card nve-layout="span-items:12 @sm|span:8 @md|span:6 @lg|span:4"></nve-card>
-  <nve-card nve-layout="span-items:12 @sm|span:4 @md|span:6 @lg|span:8"></nve-card>
+  <div nve-layout="span-items:12 @sm|span:4 @md|span:6 @lg|span:8"><nve-card></nve-card></div>
+  <div nve-layout="span-items:12 @sm|span:8 @md|span:6 @lg|span:4"><nve-card></nve-card></div>
+  <div nve-layout="span-items:12 @sm|span:8 @md|span:6 @lg|span:4"><nve-card></nve-card></div>
+  <div nve-layout="span-items:12 @sm|span:4 @md|span:6 @lg|span:8"><nve-card></nve-card></div>
 </section>
 ```
 
@@ -156,7 +156,7 @@ Since hiding elements only affects the display of the element itself and not the
 <nve-alert-group status="warning">
   <nve-alert style="--align-items: start">
     <div nve-text="relaxed">
-      Element visibility (hiding) uses the separate <code>nve-display</code> attribute rather than <code>nve-layout</code>. This distinction exists because visibility control only affects the element itself, while layout properties affect how the parent arranges children.
+      Element visibility (hiding) uses the separate <code nve-text="code">nve-display</code> attribute rather than <code nve-text="code">nve-layout</code>. This distinction exists because visibility control only affects the element itself, while layout properties affect how the parent arranges children.
     </div>
   </nve-alert>
 </nve-alert-group>
@@ -193,7 +193,7 @@ The viewport query responsive system allows elements to adapt based on the brows
 Example combining both:
 
 ```html
-<section nve-layout="row @md|gap:lg">
+<section nve-layout="row gap:sm @md|gap:lg">
   <div>Always visible</div>
   <div nve-display="@md|hide">Hidden when viewport ≥ 768px</div>
 </section>
diff --git a/projects/site/src/docs/foundations/layout/vertical.md b/projects/site/src/docs/foundations/layout/vertical.md
index 09d0236d9..5b37b0e4d 100644
--- a/projects/site/src/docs/foundations/layout/vertical.md
+++ b/projects/site/src/docs/foundations/layout/vertical.md
@@ -66,26 +66,28 @@ Set `nve-layout="column"` on a container element to create a vertical layout:
 
 ```html
 <!-- Simple vertical layout -->
-<aside nve-layout="column">
-  <h2>Title</h2>
-  <p>Content goes here...</p>
+<aside nve-layout="column gap:sm">
+  <h2 nve-text="heading">Title</h2>
+  <p nve-text="body">Content goes here...</p>
   <footer>Published today</footer>
-</article>
+</aside>
 
-!-- With gap spacing -->
+<!-- With gap spacing -->
 <form nve-layout="column gap:md">
-  <nve-input label="Email">
+  <nve-input>
+    <label>Email</label>
     <input type="text" placeholder="Email..."/>
   </nve-input>
-  <nve-input label="Password" type="password">
-    <input type="text" placeholder="Password..."/>
-  </nve-input>
+  <nve-password>
+    <label>Password</label>
+    <input type="password" placeholder="Password..."/>
+  </nve-password>
   <nve-button>Sign In</nve-button>
 </form>
 
 <!-- With alignment -->
 <section nve-layout="column align:center gap:xl">
-  <nve-logo size="lg"></nve-logo>
+  <nve-logo size="lg">NV</nve-logo>
   <h1 nve-text="display lg">Welcome</h1>
   <p nve-text="heading sm">Get started with our platform</p>
 </section>
@@ -129,7 +131,7 @@ Vertical layouts support alignment along both axes:
 ## Vertical Layout Examples
 
 ```html
-<section nve-layout="column align:...">
+<section nve-layout="column gap:sm align:center">
 ```
 
 ### Align Top
diff --git a/projects/site/src/docs/integrations/angular.md b/projects/site/src/docs/integrations/angular.md
index 13c6915a7..177c02894 100644
--- a/projects/site/src/docs/integrations/angular.md
+++ b/projects/site/src/docs/integrations/angular.md
@@ -47,7 +47,7 @@ Properties and events then work via the standard Angular template syntax.
 
 Elements provides a suite of form components that leverage standard HTML input types. This enables frameworks to take advantage of built in framework features like [Angular Reactive Forms](https://angular.io/guide/reactive-forms) for managing form validation and state.
 
-<nve-alert>To integrate custom form control types into Elements checkout the <a nve-text="link" href="/docs/elements/control/#custom-controls" onClick="location.reload()">custom control</a> documentation.</nve-alert>
+<nve-alert>To integrate custom form control types into Elements checkout the <a nve-text="link" href="/docs/elements/control/#custom-controls">custom control</a> documentation.</nve-alert>
 
 ```html
 <form [formGroup]="form" (ngSubmit)="submit()">
diff --git a/projects/site/src/docs/lint/index.md b/projects/site/src/docs/lint/index.md
index 5b5e862f6..a917c1962 100644
--- a/projects/site/src/docs/lint/index.md
+++ b/projects/site/src/docs/lint/index.md
@@ -10,6 +10,8 @@
 
 <h2 nve-text="heading sm muted">The @nvidia-elements/lint package is a utility library that provides Elements-specific lint rules to enforce best practices and prevent common errors when using Elements</h2>
 
+The HTML configuration checks HTML in `src/**/*.html`, supported JavaScript and TypeScript templates, and Markdown files under `src/**/*.md`. Markdown linting includes rendered markup and HTML examples in fenced code blocks.
+
 {% install-artifactory %}
 
 ```shell
diff --git a/projects/site/src/docs/monaco/diff-editor.md b/projects/site/src/docs/monaco/diff-editor.md
index b85fea4de..fe0851e73 100644
--- a/projects/site/src/docs/monaco/diff-editor.md
+++ b/projects/site/src/docs/monaco/diff-editor.md
@@ -10,8 +10,8 @@
 <nve-alert-group status="warning">
   <nve-alert style="--align-items: start">
     <div nve-layout="column pad:xs gap:xs" nve-text="relaxed">
-      <div><code>nve-monaco-diff-editor</code> is only intended for advanced use cases. Elements provides no API stability guarantees for the direct access to the <a href="https://microsoft.github.io/monaco-editor/docs.html">Monaco Editor API</a> provided here, as the API changes at the pace of this third-party dependency.</div>
-      <div>Start with <a href="/docs/monaco/diff-input/"><code>nve-monaco-diff-input</code></a> for most use cases.</div>
+      <div><code nve-text="code">nve-monaco-diff-editor</code> is only intended for advanced use cases. Elements provides no API stability guarantees for the direct access to the <a href="https://microsoft.github.io/monaco-editor/docs.html">Monaco Editor API</a> provided here, as the API changes at the pace of this third-party dependency.</div>
+      <div>Start with <a href="/docs/monaco/diff-input/"><code nve-text="code">nve-monaco-diff-input</code></a> for most use cases.</div>
     </div>
   </nve-alert>
 </nve-alert-group>
diff --git a/projects/site/src/docs/monaco/editor.md b/projects/site/src/docs/monaco/editor.md
index 4e18a82e8..34839719f 100644
--- a/projects/site/src/docs/monaco/editor.md
+++ b/projects/site/src/docs/monaco/editor.md
@@ -10,8 +10,8 @@
 <nve-alert-group status="warning">
   <nve-alert style="--align-items: start">
     <div nve-layout="column pad:xs gap:xs" nve-text="relaxed">
-      <div><code>nve-monaco-editor</code> is only intended for advanced use cases. Elements provides no API stability guarantees for the direct access to the <a href="https://microsoft.github.io/monaco-editor/docs.html">Monaco Editor API</a> provided here, as the API changes at the pace of this third-party dependency.</div>
-      <div>Start with <a href="/docs/monaco/input/"><code>nve-monaco-input</code></a> for most use cases.</div>
+      <div><code nve-text="code">nve-monaco-editor</code> is only intended for advanced use cases. Elements provides no API stability guarantees for the direct access to the <a href="https://microsoft.github.io/monaco-editor/docs.html">Monaco Editor API</a> provided here, as the API changes at the pace of this third-party dependency.</div>
+      <div>Start with <a href="/docs/monaco/input/"><code nve-text="code">nve-monaco-input</code></a> for most use cases.</div>
     </div>
   </nve-alert>
 </nve-alert-group>
diff --git a/projects/site/src/docs/patterns/index.md b/projects/site/src/docs/patterns/index.md
index ee9b4f0c9..22bd14153 100644
--- a/projects/site/src/docs/patterns/index.md
+++ b/projects/site/src/docs/patterns/index.md
@@ -90,7 +90,7 @@ Patterns are an essential component of creating a cohesive and consistent user e
     <nve-card style="--border-radius: var(--nve-ref-border-radius-md)">
       <div nve-layout="row gap:sm align:vertical-center">
         <nve-logo color="gray-denim" size="lg" style="--border-radius: 0">
-          <nve-icon name="question-mark-circle-stroke"></nve-icon>
+<nve-icon name="question-mark-circle"></nve-icon>
         </nve-logo>
         <div nve-layout="column pad:xs gap:xs">
           <h2 nve-text="label medium emphasis">Empty States</h2>
diff --git a/projects/site/src/docs/whats-new/05-2026.md b/projects/site/src/docs/whats-new/05-2026.md
index 5a6f211a6..7063e9122 100644
--- a/projects/site/src/docs/whats-new/05-2026.md
+++ b/projects/site/src/docs/whats-new/05-2026.md
@@ -32,7 +32,14 @@ The new [Format Number](/docs/elements/format-number/) component brings locale-a
 <!-- vale write-good.TooWordy = NO -->
 
 ```html
-<nve-combobox tag-layout="wrap" multiple></nve-combobox>
+<nve-combobox tag-layout="wrap" multiple>
+  <label>Filters</label>
+  <input type="search" />
+  <datalist>
+    <option value="status"></option>
+    <option value="priority"></option>
+  </datalist>
+</nve-combobox>
 ```
 
 <!-- vale write-good.TooWordy = YES -->