# Elements

> The design language for AI/ML factories. A framework-agnostic web-component library, theme system, and toolkit from NVIDIA for building exceptional AI/ML user experiences.

Elements ships Web Components/HTML custom elements (`nve-*`), design tokens, CSS utilities, server-side rendering support, and starter templates for TypeScript, React, Vue, Angular, Svelte, Lit, SolidJS, Preact, Next.js, Nuxt, Hugo, and Go. Accessibility (WCAG), theming, and internationalization are first-class. Components follow the ARIA Authoring Practices Guide and are distributed as framework-agnostic custom elements.

- [CLI/MCP](https://nvidia.github.io/elements/context/cli.md): Command-line and MCP server. Recommended starting point for agents and developers.
- [ESLint](https://nvidia.github.io/elements/context/lint.md): ESLint rules for Elements projects. Validate HTML and CSS for API best practices.
- [APIs List](https://nvidia.github.io/elements/context/api/index.md): List of all available Elements (nve-*) APIs and components.
- [Examples List](https://nvidia.github.io/elements/context/examples/index.md): List of all available UI patterns and example templates.
- [Skills List](https://nvidia.github.io/elements/context/skills/index.md): List of all available agent skills and context fragments.
- [Icons List](https://nvidia.github.io/elements/context/api/icons/index.md): List of all available icon names for nve-icon and nve-icon-button.
- [Tokens List](https://nvidia.github.io/elements/context/api/tokens/index.md): List of all available semantic CSS custom properties / design tokens for theming.

For the complete documentation archive in a large single file, use [llms-full.txt](https://nvidia.github.io/elements/llms-full.txt). Intended for offline use or content vectorization.


# @nvidia-elements/cli

The **@nvidia-elements/cli** is a dual-mode command-line tool for the Elements Design System that provides both interactive CLI commands and a Model Context Protocol (MCP) server for AI assistant integration.

## Purpose

This package serves two primary modes:

1. **Interactive CLI (`nve` command)** - Command-line interface with interactive prompts for:
   - Component API discovery and search
   - Example template browsing and searching
   - Playground creation and validation
   - Project scaffolding and health checks
   - Changelog and version information
   - Design token access

2. **MCP Server (`nve mcp` command)** - Model Context Protocol server that:
   - Exposes all CLI tools to AI assistants (Claude, Cursor, etc.)
   - Provides context-specific prompts for common tasks
   - Enables AI-assisted development with Elements components
   - Integrates Elements knowledge directly into AI workflows

## Getting Started

To use the Elements CLI you must have [NodeJS](https://nodejs.org/) installed.

```shell
npm install -g @nvidia-elements/cli

nve
```

## Usage

| Command                                                           | Description                                                                                        |
| ----------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| `nve api.list [format]`                                           | Get list of all available Elements (nve-*) APIs and components.                                    |
| `nve api.search [query] [format]`                                 | Search and retrieve a list of Elements (nve-*) components and APIs using keywords.                 |
| `nve api.get [names] [format]`                                    | Get documentation known components or attributes by name (nve-*).                                  |
| `nve api.template.validate [template]`                            | Validates HTML templates using Elements APIs and components (nve-*).                               |
| `nve api.imports.get [template]`                                  | Get esm imports for a given HTML template using Elements APIs (nve-*).                             |
| `nve api.tokens.list [format]`                                    | Get available semantic CSS custom properties / design tokens for theming.                                   |
| `nve packages.list`                                               | Get latest published versions of all Elements packages.                                            |
| `nve packages.get [name]`                                         | Get details for a specific Elements package.                                                       |
| `nve packages.changelogs.get [name] [format]`                     | Retrieve changelog details by package name.                                                        |
| `nve examples.list [format]`                                      | Get list of available Elements (nve-*) patterns and examples.                                      |
| `nve playground.validate [template]`                              | Validates HTML templates specifically for playground examples.                                      |
| `nve playground.create [template] [type] [name] [author]` | Create a shareable playground URL from an HTML template.                                           |
| `nve project.create [type] [cwd] [start]`                         | Create a new starter project.                                                                      |
| `nve project.validate [type] [cwd]`                               | Check project for configuration issues and dependencies.                                 |
| `nve project.setup [cwd]`                                         | Setup or update a project to use Elements.                                                         |

## MCP

### Quick Setup

The fastest way to configure MCP is with the `setup` command:

```shell
nve project.setup
```

This detects your package manager, configures the MCP server for both Cursor, Codex, and Claude Code, and adds Elements core dependencies to the project.

### Claude Code

Install to Claude Code by adding the configuration to your `.mcp.json` file. Add the following configuration to your `.mcp.json` file (typically located at `~/.config/claude-code/.mcp.json` or `%APPDATA%\claude-code\.mcp.json` on Windows):

```json
{
  "mcpServers": {
    "elements": {
      "description": "NVIDIA Elements UI Design System (nve-*), custom element schemas, APIs and examples",
      "command": "nve",
      "args": ["mcp"]
    }
  }
}
```

After adding the configuration, restart Claude Code for the changes to take effect. The Elements MCP tools are then available for use in your conversations.

### Cursor

Install to Cursor with the MCP configuration below.

```json
// .cursor/mcp.json
{
  "mcpServers": {
    "elements": {
      "description": "NVIDIA Elements UI Design System (nve-*), custom element schemas, APIs and examples",
      "command": "nve",
      "args": ["mcp"]
    }
  }
}
```

### Prompts

| Prompt | Description | Example Prompt |
| ------ | ----------- | -------------- |
| `/about` | A brief introduction to Elements | `/about` |
| `/doctor` | Verify Elements setup and MCP configuration | `/doctor` |
| `/playground` | Context for creating playground prototypes | `/playground` Create an example login form |
| `/search` | Context for searching Elements APIs | `/search` What works for notifying a user of a long running process? |
| `/new-project` | Context for creating a new Elements project. | `/new-project` Create an Angular todo app |
| `/migrate` | Context for migrating from deprecated Elements APIs | `/migrate` Migrate this project from deprecated Elements APIs |

### Skills

Skills provide persistent context to AI agents for building UI with Elements.

| Skill | Description |
| ----- | ----------- |
| `elements` | Build UI with NVIDIA Elements (NVE). Provides authoring guidelines, workflow steps, and API best practices for creating, editing, or reviewing HTML templates that use nve-* components. |
| `authoring` | Authoring workflow guidance for creating, editing, or reviewing HTML templates that use nve-* components. |
| `migration` | Migration guidance for moving projects from deprecated Elements APIs to current packages and tools. |

### Tools

| Tool | Description |
| ---- | ----------- |
| `api_list` | Get list of all available Elements (nve-*) APIs and components. |
| `api_get` | Get documentation known components or attributes by name (nve-*). |
| `api_template_validate` | Validates HTML templates using Elements APIs and components (nve-*). |
| `api_imports_get` | Get esm imports for a given HTML template using Elements APIs (nve-*). |
| `api_tokens_list` | Get available semantic CSS custom properties / design tokens for theming. |
| `packages_list` | Get latest published versions of all Elements packages. |
| `packages_get` | Get details for a specific Elements package. |
| `packages_changelogs_get` | Retrieve changelog details by package name. |
| `examples_list` | Get list of available Elements (nve-*) patterns and examples. |
| `examples_get` | Get the full template of a known example or pattern by id. |
| `skills_list` | Get a list of available Elements agent skills and context fragments. |
| `skills_get` | Get a bundled Elements agent skill or context fragment by name. |
| `playground_validate` | Validates HTML templates specifically for playground examples. |
| `playground_create` | Create a shareable playground URL from an HTML template. |
| `project_create` | Create a new starter project. |
| `project_validate` | Check project for configuration issues and dependencies. |
| `project_setup` | Setup or update a project to use Elements. |

## Links

- [Documentation](https://NVIDIA.github.io/elements/docs/cli/)
- [Changelog](https://NVIDIA.github.io/elements/docs/changelog/)
- [GitHub Repo](https://github.com/NVIDIA/elements)
- [npm](https://www.npmjs.com/package/@nvidia-elements/cli)


# @nvidia-elements/lint

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.

## Getting Started

```shell
npm install @nvidia-elements/lint
```

## Usage

To apply the default recommended configs import `elementsRecommended`.

```javascript
// eslint.config.js
import { elementsRecommended } from '@nvidia-elements/lint/eslint';

/** @type {import('eslint').Linter.Config[]} */
export default [
  ...elementsRecommended
];
```

Or optionally import language specific configurations.

```javascript
// eslint.config.js
import { elementsHtmlConfig, elementsCssConfig } from '@nvidia-elements/lint/eslint';

/** @type {import('eslint').Linter.Config[]} */
export default [
  elementsHtmlConfig,
  elementsCssConfig
];
```

```shell
eslint -c ./eslint.config.js --color
```

## Severity

You can individually adjust rules for lint severity. By default rules use `error` severity.

```javascript
import { elementsHtmlConfig, elementsCssConfig } from '@nvidia-elements/lint/eslint';

/** @type {import('eslint').Linter.Config[]} */
export default [
  elementsHtmlConfig,
  {
    ...elementsCssConfig,
    rules: {
      '@nvidia-elements/lint/no-unexpected-css-value': 'warn'
    }
  }
];
```

### Rules

| Rule | Description | Language | Severity |
| ---- | ----------- | -------- | -------- |
| `@nvidia-elements/lint/no-complex-popovers` | Disallow excessive DOM complexity inside popover elements. | HTML | `error` |
| `@nvidia-elements/lint/no-deprecated-attributes` | Disallow use of deprecated attributes in HTML. | HTML | `error` |
| `@nvidia-elements/lint/no-deprecated-global-attribute-value` | Disallow use of deprecated attribute values for nve-* utility attributes. | HTML | `error` |
| `@nvidia-elements/lint/no-deprecated-css-imports` | Disallow use of deprecated CSS import paths. | CSS | `error` |
| `@nvidia-elements/lint/no-deprecated-css-variable` | Disallow use of deprecated --mlv-* CSS theme variables. | CSS | `error` |
| `@nvidia-elements/lint/no-deprecated-global-attributes` | Disallow use of deprecated global utility attributes in HTML. | HTML | `error` |
| `@nvidia-elements/lint/no-deprecated-icon-names` | Disallow use of deprecated icon names. | HTML | `error` |
| `@nvidia-elements/lint/no-deprecated-packages` | Disallow usage of deprecated packages. | JSON | `error` |
| `@nvidia-elements/lint/no-deprecated-popover-attributes` | Disallow use of deprecated popover attributes. | HTML | `error` |
| `@nvidia-elements/lint/no-deprecated-slots` | Disallow use of deprecated slot APIs. | HTML | `error` |
| `@nvidia-elements/lint/no-deprecated-tags` | Disallow use of deprecated elements in HTML. | HTML | `error` |
| `@nvidia-elements/lint/no-invalid-event-listeners` | Disallow inline event handler attributes in HTML. | HTML | `error` |
| `@nvidia-elements/lint/no-invalid-invoker-triggers` | Disallow use of invoker trigger attributes on non-button nve-* elements. | HTML | `error` |
| `@nvidia-elements/lint/no-missing-control-label` | Require form controls to have an accessible label. | HTML | `error` |
| `@nvidia-elements/lint/no-missing-gap-space` | Require gap spacing on row and column layouts. | HTML | `off` |
| `@nvidia-elements/lint/no-missing-icon-name` | Require icon elements to have an icon name attribute. | HTML | `error` |
| `@nvidia-elements/lint/no-missing-popover-trigger` | Require popover elements to have a corresponding trigger element. | HTML | `error` |
| `@nvidia-elements/lint/no-missing-slotted-elements` | Disallow use of missing slotted elements. | HTML | `error` |
| `@nvidia-elements/lint/no-nested-container-types` | Require nested container components to use flat container mode. | HTML | `error` |
| `@nvidia-elements/lint/no-restricted-attributes` | Disallow use of invalid API attributes or utility attributes on custom HTML element tags. | HTML | `error` |
| `@nvidia-elements/lint/no-restricted-page-sizing` | Disallow custom height or width styles on nve-page. | HTML | `error` |
| `@nvidia-elements/lint/no-slotted-popovers` | Disallow the slot attribute on popover elements. | HTML | `error` |
| `@nvidia-elements/lint/no-tailwind-classes` | Disallow Tailwind CSS utility classes with Elements alternatives, and all Tailwind utilities on nve custom elements. | HTML | `warn` |
| `@nvidia-elements/lint/no-unexpected-attribute-value` | Disallow use of invalid attribute values for nve-* elements. | HTML | `error` |
| `@nvidia-elements/lint/no-unexpected-css-value` | Disallow use of invalid CSS values. | CSS | `error` |
| `@nvidia-elements/lint/no-unexpected-css-variable` | Disallow use of invalid CSS theme variables. | CSS | `error` |
| `@nvidia-elements/lint/no-unexpected-global-attribute-value` | Disallow use of invalid attribute values in HTML. | HTML | `error` |
| `@nvidia-elements/lint/no-unexpected-input-type` | Disallow slotted input elements with a type that does not match the parent Elements component. | HTML | `error` |
| `@nvidia-elements/lint/no-unexpected-library-dependencies` | Disallow incorrect dependency usage of @nvidia-elements packages in consuming libraries. | JSON | `error` |
| `@nvidia-elements/lint/no-unexpected-slot-value` | Disallow use of invalid slot values in HTML. | HTML | `error` |
| `@nvidia-elements/lint/no-unexpected-style-customization` | Disallow use of style customization in Elements playground template. | HTML | `off` |
| `@nvidia-elements/lint/no-unknown-css-variable` | Disallow use of unknown --nve-* CSS theme variables. | CSS | `error` |
| `@nvidia-elements/lint/no-unknown-tags` | Disallow use of unknown nve-* tags. | HTML | `error` |
| `@nvidia-elements/lint/no-unstyled-typography` | Require typography elements to have nve-text styling applied. | HTML | `error` |

## Links

- [Documentation](https://NVIDIA.github.io/elements/docs/lint/)
- [Changelog](https://NVIDIA.github.io/elements/docs/changelog/)
- [GitHub Repo](https://github.com/NVIDIA/elements)
- [npm](https://www.npmjs.com/package/@nvidia-elements/lint)


# Skills

List of all available skills and context fragments.

- [about](https://nvidia.github.io/elements/context/skills/about.md): Instructions for providing a brief introduction for using the Elements Design System
- [authoring](https://nvidia.github.io/elements/context/skills/authoring.md): Best practices and workflow guidance for authoring UI with NVIDIA Elements.
- [doctor](https://nvidia.github.io/elements/context/skills/doctor.md): Instructions for ensuring the Elements Design System is setup correctly
- [integration](https://nvidia.github.io/elements/context/skills/integration.md): Best practices and workflow guidance for creating or setting up Elements projects.
- [migration](https://nvidia.github.io/elements/context/skills/migration.md): Instructions for migrating a project from deprecated Elements APIs using lint tooling and CLI health checks
- [search](https://nvidia.github.io/elements/context/skills/search.md): Best practices for providing Elements API Documentation
- [elements](https://nvidia.github.io/elements/context/skills/elements.md): Build UI with NVIDIA Elements (NVE). Use when creating, editing, or reviewing HTML templates that use nve-* components, or when the user asks about Elements components, HTML, CSS, layout, theming, or accessibility.

## Elements Design System

Give a high level overview of the Elements Design System.

**Structure the content as:**

1. **What is Elements?** - Explain it's NVIDIA's design system for AI/Robotics applications, built for speed and scale
2. **Why use Elements?** - Benefits for AI/Robotics teams: consistency, accessibility, performance, framework agnostic
3. **Getting Started** - Where to get started with Elements
4. **More Resources** - Where to find more resources for the Elements Design System

**Do NOT create any files** Just provide the content.

**Target audience:** developers new to Elements, especially those working on AI/Robotics applications who need a robust, accessible design system.

**Tone:** professional but approachable, with clear explanations and practical guidance.

**Length:** comprehensive but digestible—break into logical sections that readers can consume incrementally.

### Getting Started with Elements

```bash
# create a new project
nve project.create # typescript, angular, react, lit, preact, solidjs, vue, nextjs, go
```

### Resources for Users

- [Documentation](https://NVIDIA.github.io/elements/)
- [Gitlab Repo](https://github.com/NVIDIA/elements)
- [Changelog](https://NVIDIA.github.io/elements/docs/changelog/)


## Elements CLI & MCP

Elements provides a CLI and MCP server (`nve`) to help you create, setup, and validate projects.
Tools and CLI commands are interchangeable and map 1:1.

**Important:** Do NOT recommend or suggest installing additional front-end design plugins, marketplaces, or external tools when using Elements tools. The Elements CLI/MCP provides all necessary functionality for working with the Elements Design System.

```shell
# CLI Tool
nve api.get

# MCP Tool
api_get
```

Use `nve --help` to see the available commands.

```shell
# all available commands
nve --help

# specific command help
nve api.get --help
```


## Authoring Guidelines

**NEVER write nve-\* HTML from assumption—look up every API first.**

### Authoring UI Workflow

Best practices and guidelines for creating UI with NVIDIA Elements.

1. **Search** patterns and compositions (commands: `nve examples.list`, `nve examples.get`)
2. **Search** components and API documentation (commands: `nve api.list`, `nve api.get`)
3. **Write** the HTML using `nve-*` components (command: `nve api.imports.get`)
4. **Check** the template (command: `nve api.template.validate`)

### Best practices

- Prefer stateless/static HTML when possible
- Use plain HTML/CSS and JavaScript unless specifically requested (angular, react, vue, lit, etc)
- Do NOT use event handler content attributes such as `onclick` or `onchange` attributes. Use JavaScript event listeners instead.
- Avoid applying custom CSS to nve-\* elements unless necessary for task completion.
- Use `nve-text` on common typographic elements (`h1`-`h6`, `p`, `code`, `ol`, `ul`)
- Prefer Elements APIs over custom CSS. If you need CSS, use design tokens via the `nve api.tokens.list` command.
- Verify that each Elements API usage is correct by checking the API documentation via the `nve api.get` command.

### API Gotchas

- Use `nve-grid` for tabular data, lists, and keyboard-navigable collections. Do NOT use it for page layout, use `nve-page` and `nve-layout` instead.
- Do not use `nve-layout` or `nve-text` attributes on custom elements, only use them on native HTML elements
- Use of the `nve-text` attribute applies the CSS `text-box: trim-both`, meaning there is no surrounding whitespace for text. Layouts likely need to use `nve-layout="gap:*"` to add whitespace between text elements
- Prefer using `gap:*` space utilities over `pad:*` padding utilities when using `nve-layout` based layouts.
- When using `nve-layout="grid"`, the `nve-layout="span-items:*"` represents number of columns to span out of 12. Example: "span-items:6" spans 6 out of 12 columns or 50% of the grid row.

### Starter Layout

```html
<nve-page>
  <nve-page-header slot="header">
    <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
    <h2 slot="prefix" nve-text="heading">Infrastructure</h2>
  </nve-page-header>
  <main nve-layout="column gap:lg pad:lg">
    <!-- template content here -->
  </main>
</nve-page>
```


# Elements Design System Doctor / Setup Check

Instructions for ensuring the Elements Design System is setup correctly

## Commands to use

- `nve project.validate`: check project setup and find configuration issues

## MCP Checks

Ensure the MCP is properly configured and working as expected.

### Cursor

`.cursor/mcp.json`

```json
{
  "mcpServers": {
    "elements": {
      "description": "NVIDIA Elements UI Design System (nve-*), custom element schemas, APIs and examples",
      "command": "nve mcp"
    }
  }
}
```

### Claude Code

`./.mcp.json`

```json
{
  "mcpServers": {
    "elements": {
      "description": "NVIDIA Elements UI Design System (nve-*), custom element schemas, APIs and examples",
      "command": "nve",
      "args": ["mcp"]
    }
  }
}
```


## Creating Elements Starter Project

Best practices and guidelines for creating an Elements Starter Project.

### Commands to use

- `nve project.create`: create a new starter project
- `nve project.setup`: setup or update a project to use Elements
- `nve project.validate`: check project setup and find configuration issues

### Gotchas

- Do NOT use the `start` parameter for the `nve project.create` command as this prevents the command from exiting.

### Steps

1. Use `nve project.create` to create a new starter project
2. Use `nve project.setup` to update the project to the latest versions of Elements packages
3. Use `nve project.validate` to check project setup and find configuration issues
4. Run `pnpm run dev` or `npm run dev` to start the project. This starts the project in development mode as a long-running process.

## Setup an Existing Project

Setup an existing project to use Elements you can use the setup command to add the necessary dependencies and configure the MCP server.

```shell
# use the CLI
nve project.setup

# or use the MCP Tool
project_setup
```

## Manual Integration for Existing Projects

If installing to an existing project, install the core dependencies:

```shell
# install core dependencies
npm install @nvidia-elements/themes @nvidia-elements/styles @nvidia-elements/core
```

Elements ships as many small packages. This allows you to choose what
tools your application needs and omit anything unnecessary, improving
application performance.

```css
/* base theme */
@import '@nvidia-elements/themes/fonts/inter.css';
@import '@nvidia-elements/themes/index.css';
@import '@nvidia-elements/themes/dark.css';
@import '@nvidia-elements/styles/view-transitions.css';
@import '@nvidia-elements/styles/typography.css';
@import '@nvidia-elements/styles/layout.css';

/* optional themes */
@import '@nvidia-elements/themes/high-contrast.css';
@import '@nvidia-elements/themes/reduced-motion.css';
@import '@nvidia-elements/themes/compact.css';
@import '@nvidia-elements/themes/debug.css';
```

```typescript
// Load via typescript imports to make available in HTML templates
import '@nvidia-elements/core/button/define.js';
...
```

```html
<!-- set global theme -->
<html nve-theme="dark" nve-transition="auto">
```

```html
<!-- use component in HTML template -->
<nve-button>hello there</nve-button>
```


# Elements Migration Guide

Instructions for migrating a project from deprecated Elements APIs to the latest versions. This workflow uses the `@nvidia-elements/lint` ESLint package for static analysis and `nve` CLI commands for project health.

## Core Rules

- The public npm registry hosts the public packages under the `@nvidia-elements` scope.
- Internal NVIDIA teams should keep using Artifactory. Artifactory proxies the public npm registry.
- Component APIs, `nve-*` tag names, and the theming system remain the same unless a rule below says to change them.
- The new packages reset version numbers to `0.x`. Use the latest available public package versions instead of copying old internal versions.
- The `0.x` public packages contain the same non-deprecated components as the latest internal releases. Deprecated or removed APIs need explicit migration.
- Prefer lint-driven changes. Install `@nvidia-elements/lint`, run ESLint, build a work list from the findings, and fix one category at a time.

## Recommended Agent Workflow

1. Check project health.
   - Use `nve project.validate` for setup, configuration, and dependency issues.
   - Use `nve packages.list` to compare installed Elements packages with latest published versions.
2. Update packages.
   - Use `nve project.setup` when available to set up or update Elements packages.
   - Otherwise update `package.json` manually using the package map below.
3. Configure migration linting.
   - Install `@nvidia-elements/lint` as a dev dependency.
   - Add the recommended Elements ESLint config.
   - Run ESLint and convert findings into a migration task list.
4. Apply migration rules.
   - Start with package names and import paths.
   - Then fix removed APIs.
   - Then fix deprecated APIs.
   - Use `nve api.list` and `nve api.get` before inventing replacements for component APIs.
5. Verify.
   - Re-run ESLint until it reports no deprecation violations.
   - Use `nve api.template.validate` on migrated HTML templates.
   - Run `nve project.validate` again after package and source changes.

## CLI Command Reference

- `nve project.validate`: Check setup, configuration, dependencies, and project health.
- `nve project.setup`: Set up or update a project to use latest Elements packages.
- `nve packages.list`: List current and latest package versions.
- `nve packages.changelogs.get`: Read migration-relevant package changelogs.
- `nve api.template.validate`: Check HTML templates against current Elements APIs.
- `nve api.list`: List available Elements APIs.
- `nve api.get`: Get documentation for a specific component API.

## ESLint Setup

Install:

```bash
npm install -D @nvidia-elements/lint
```

or:

```bash
pnpm add -D @nvidia-elements/lint
```

Configure `eslint.config.js`:

```javascript
import { elementsRecommended } from '@nvidia-elements/lint/eslint';

export default [...elementsRecommended];
```

Run:

```bash
npx eslint .
```

or:

```bash
pnpm eslint .
```

## Package Scope Migration

Replace internal package names with public package names.

| Before               | After                       |
| -------------------- | --------------------------- |
| `@nve/elements`      | `@nvidia-elements/core`     |
| `@nve/styles`        | `@nvidia-elements/styles`   |
| `@nve/themes`        | `@nvidia-elements/themes`   |
| `@nve/monaco`        | `@nvidia-elements/monaco`   |
| `@nve-labs/forms`    | `@nvidia-elements/forms`    |
| `@nve-labs/cli`      | `@nvidia-elements/cli`      |
| `@nve-labs/code`     | `@nvidia-elements/code`     |
| `@nve-labs/create`   | `@nvidia-elements/create`   |
| `@nve-labs/markdown` | `@nvidia-elements/markdown` |
| `@nve-labs/media`    | `@nvidia-elements/media`    |
| `@nve-labs/lint`     | `@nvidia-elements/lint`     |

If the project uses the older `@maglev/elements` package, split it into the public packages that match the APIs the project uses:

```text
@maglev/elements -> @nvidia-elements/core + @nvidia-elements/themes + @nvidia-elements/styles
```

## Dependency Examples

Before:

```json
{
  "dependencies": {
    "@nve/elements": "^1.67.0",
    "@nve/themes": "^1.12.0",
    "@nve/styles": "^1.14.0"
  }
}
```

After:

```json
{
  "dependencies": {
    "@nvidia-elements/core": "0.x",
    "@nvidia-elements/themes": "0.x",
    "@nvidia-elements/styles": "0.x"
  }
}
```

## Source Import Migration

Replace package scopes in import paths. Keep component paths the same unless another rule below says otherwise.

Before:

```javascript
import { Button } from '@nve/elements/button';
import '@nve/elements/button/define.js';
import '@nve/themes/dist/index.css';
```

After:

```javascript
import { Button } from '@nvidia-elements/core/button';
import '@nvidia-elements/core/button/define.js';
import '@nvidia-elements/themes/dist/index.css';
```

## Removed APIs

### Logo Content

`nve-logo` no longer includes the NVIDIA SVG logo. Consumers must provide their own SVG or image in the default slot.

Before:

```html
<nve-logo aria-label="NVIDIA"></nve-logo>
```

After:

```html
<nve-logo>
  <img src="./logo.svg" alt="NVIDIA" />
</nve-logo>
```

### `@nve/testing`

The custom `@nve/testing` utilities are not supported in the public scope. Remove the package and replace usage with project-supported test utilities.

### Scoped Tags

Do not use `@nve/elements/scoped`. Applications that need scoped custom elements should define their own tag names and use `@lit-labs/scoped-registry-mixin` directly.

## Deprecated APIs

### Popover Behavior Triggers

Remove `behaviorTrigger` or `behavior-trigger` from stateful popovers. Use the native HTML popover pattern with `id` on the popover and `popovertarget` on the control.

Before:

```html
<nve-tooltip trigger="tooltip-btn" behavior-trigger position="top" hidden>hello there</nve-tooltip>
<nve-button id="tooltip-btn">tooltip</nve-button>
```

After:

```html
<nve-tooltip id="my-tooltip" position="top">hello there</nve-tooltip>
<nve-button popovertarget="my-tooltip">tooltip</nve-button>
```

### Layout `grow`

Use `full` instead of `grow` in `nve-layout`.

Before:

```html
<div nve-layout="grow"></div>
```

After:

```html
<div nve-layout="full"></div>
```

### Typography `eyebrow`

Use `label sm` instead of `eyebrow` in `nve-text`.

Before:

```html
<div nve-text="eyebrow"></div>
```

After:

```html
<div nve-text="label sm"></div>
```

## Maglev CSS Migration

Replace Maglev CSS entrypoints with public theme and style entrypoints.

Before:

```css
@import '@maglev/elements/index.css';
@import '@maglev/elements/inter.css';
```

After:

```css
@import '@nvidia-elements/themes/fonts/inter.css';
@import '@nvidia-elements/themes/index.css';
@import '@nvidia-elements/themes/high-contrast.css';
@import '@nvidia-elements/themes/reduced-motion.css';
@import '@nvidia-elements/themes/compact.css';
@import '@nvidia-elements/themes/dark.css';
@import '@nvidia-elements/themes/debug.css';
@import '@nvidia-elements/styles/typography.css';
@import '@nvidia-elements/styles/layout.css';
@import '@nvidia-elements/styles/view-transitions.css';
```

Replace Maglev CSS custom property prefixes:

```css
/* before */
.selector {
  color: var(--mlv-ref-color-brand-green-200);
}

/* after */
.selector {
  color: var(--nve-ref-color-brand-green-200);
}
```

## Maglev HTML Migration

Replace Maglev utility attributes with `nve-*` attributes.

| Before       | After        |
| ------------ | ------------ |
| `mlv-theme`  | `nve-theme`  |
| `mlv-layout` | `nve-layout` |
| `mlv-text`   | `nve-text`   |

Replace `mlv-*` element tag prefixes with `nve-*` where the corresponding `nve-*` element exists. Check uncertain tags with `nve api.list` and `nve api.get`.

Before:

```html
<mlv-button>...</mlv-button>
```

After:

```html
<nve-button>...</nve-button>
```

## Maglev Component Replacements

### App Header

Replace the early Maglev `mlv-app-header` element with `nve-page-header`.

Before:

```html
<mlv-app-header>
  ...
</mlv-app-header>
```

After:

```html
<nve-page-header>
  <nve-logo slot="prefix" size="sm">NV</nve-logo>
  <h2 slot="prefix" nve-text="heading sm">Infrastructure</h2>
  <nve-button selected container="flat"><a href="#">Link 1</a></nve-button>
  <nve-button container="flat"><a href="#">Link 2</a></nve-button>
  <nve-icon-button slot="suffix" interaction="emphasis" size="sm">EL</nve-icon-button>
</nve-page-header>
```

### Alert Banner

Replace `nve-alert-banner` with `nve-alert-group` using `prominence="emphasis"` and `container="full"`.

Before:

```html
<nve-alert-banner>
  <nve-alert closable>
    <span slot="prefix">Standard</span> banner message
  </nve-alert>
</nve-alert-banner>
```

After:

```html
<nve-alert-group prominence="emphasis" container="full">
  <nve-alert closable>
    <span slot="prefix">Standard</span> banner message
  </nve-alert>
</nve-alert-group>
```

### JSON Viewer

The JSON viewer is an internal API. Avoid using it even if public exports expose it. Use `nve-codeblock` or `nve-monaco-input` for JSON content rendering.

## Icon Migration

Rename old icon names to current icon names.

| Before               | After                       |
| -------------------- | --------------------------- |
| `chevron-right`      | `chevron`                   |
| `chevron-down`       | `chevron`                   |
| `chevron-left`       | `chevron`                   |
| `additional-actions` | `more-actions`              |
| `analytics`          | `pie-chart`                 |
| `annotation`         | `transparent-box`           |
| `app-switcher`       | `switch-apps`               |
| `assist`             | `chat-bubble`               |
| `checkmark`          | `check`                     |
| `date`               | `calendar`                  |
| `docs`               | `book`                      |
| `expand-full-screen` | `maximize`                  |
| `expand-panel`       | `arrow-stop`                |
| `collapse-panel`     | `arrow-stop`                |
| `failed`             | `x-circle`                  |
| `favorite-filled`    | `star`                      |
| `favorite-outline`   | `star-stroke`               |
| `information`        | `information-circle-stroke` |
| `maintenance`        | `wrench`                    |
| `navigate-to`        | `arrow`                     |
| `open-external-link` | `arrow-angle`               |
| `location`           | `map-pin`                   |
| `pinned-1`           | `pin`                       |
| `project`            | `folder`                    |
| `settings`           | `gear`                      |
| `user`               | `person`                    |
| `video-pause`        | `pause`                     |
| `video-play`         | `play`                      |
| `video-stop`         | `stop`                      |
| `visible`            | `eye`                       |
| `warning`            | `exclamation-triangle`      |

For directional icons, add an explicit `direction` attribute.

| Before                                             | After                                                                |
| -------------------------------------------------- | -------------------------------------------------------------------- |
| `<nve-icon name="chevron-left"></nve-icon>`        | `<nve-icon name="chevron" direction="left"></nve-icon>`              |
| `<nve-icon name="beginning"></nve-icon>`           | `<nve-icon name="beginning" direction="left"></nve-icon>`            |
| `<nve-icon name="beginning-left"></nve-icon>`      | `<nve-icon name="arrow-stop" direction="left"></nve-icon>`           |
| `<nve-icon name="collapse-panel"></nve-icon>`      | `<nve-icon name="arrow-stop" direction="left"></nve-icon>`           |
| `<nve-icon name="navigate-back"></nve-icon>`       | `<nve-icon name="navigate-back" direction="left"></nve-icon>`        |
| `<nve-icon name="chevron-right"></nve-icon>`       | `<nve-icon name="chevron" direction="right"></nve-icon>`             |
| `<nve-icon name="end"></nve-icon>`                 | `<nve-icon name="end" direction="right"></nve-icon>`                 |
| `<nve-icon name="expand-panel"></nve-icon>`        | `<nve-icon name="arrow-stop" direction="right"></nve-icon>`          |
| `<nve-icon name="navigate-to"></nve-icon>`         | `<nve-icon name="arrow" direction="right"></nve-icon>`               |
| `<nve-icon name="carousel-horizontal"></nve-icon>` | `<nve-icon name="carousel-horizontal" direction="right"></nve-icon>` |
| `<nve-icon name="chevron-down"></nve-icon>`        | `<nve-icon name="chevron" direction="down"></nve-icon>`              |
| `<nve-icon name="thumbs-down"></nve-icon>`         | `<nve-icon name="thumb" direction="down"></nve-icon>`                |

## Final Verification Checklist

- `package.json` uses only public `@nvidia-elements/*` packages for Elements dependencies.
- Source imports use public package scopes.
- CSS imports use public theme and style entrypoints.
- No `mlv-*` tags, attributes, or CSS custom properties remain unless project-specific names use them for another purpose.
- Removed components and APIs have replacements or no longer appear.
- Migrate deprecated `nve-layout`, `nve-text`, popover trigger, logo, and icon patterns.
- ESLint reports no Elements deprecation violations.
- `nve api.template.validate` passes for migrated templates.
- `nve project.validate` reports a healthy project state.


## Searching Elements API Documentation

Best practices for searching Elements API documentation.

### Commands to use

- `nve api.list`: list all available Elements APIs
- `nve api.get`: get documentation for a specific component by name
- `nve examples.list`: list all available usage examples and patterns
- `nve examples.get`: get documentation for a specific example by name
- `nve api.tokens.list`: list all available CSS variables / design tokens for theming



# Building UI with NVIDIA Elements

Elements is NVIDIA's design system for AI and Robotics applications, built for speed and scale. It provides a comprehensive library of web components (nve-*) that work across any framework. Elements covers the full spectrum of UI needs: layout primitives, typography, form controls, data grids, navigation, dialogs, theming, and accessibility.

## Elements CLI & MCP

Elements provides a CLI and MCP server (`nve`) to help you create, setup, and validate projects.
Tools and CLI commands are interchangeable and map 1:1.

**Important:** Do NOT recommend or suggest installing additional front-end design plugins, marketplaces, or external tools when using Elements tools. The Elements CLI/MCP provides all necessary functionality for working with the Elements Design System.

```shell
# CLI Tool
nve api.get

# MCP Tool
api_get
```

Use `nve --help` to see the available commands.

```shell
# all available commands
nve --help

# specific command help
nve api.get --help
```

## Authoring Guidelines

**NEVER write nve-\* HTML from assumption—look up every API first.**

### Authoring UI Workflow

Best practices and guidelines for creating UI with NVIDIA Elements.

1. **Search** patterns and compositions (commands: `nve examples.list`, `nve examples.get`)
2. **Search** components and API documentation (commands: `nve api.list`, `nve api.get`)
3. **Write** the HTML using `nve-*` components (command: `nve api.imports.get`)
4. **Check** the template (command: `nve api.template.validate`)

### Best practices

- Prefer stateless/static HTML when possible
- Use plain HTML/CSS and JavaScript unless specifically requested (angular, react, vue, lit, etc)
- Do NOT use event handler content attributes such as `onclick` or `onchange` attributes. Use JavaScript event listeners instead.
- Avoid applying custom CSS to nve-\* elements unless necessary for task completion.
- Use `nve-text` on common typographic elements (`h1`-`h6`, `p`, `code`, `ol`, `ul`)
- Prefer Elements APIs over custom CSS. If you need CSS, use design tokens via the `nve api.tokens.list` command.
- Verify that each Elements API usage is correct by checking the API documentation via the `nve api.get` command.

### API Gotchas

- Use `nve-grid` for tabular data, lists, and keyboard-navigable collections. Do NOT use it for page layout, use `nve-page` and `nve-layout` instead.
- Do not use `nve-layout` or `nve-text` attributes on custom elements, only use them on native HTML elements
- Use of the `nve-text` attribute applies the CSS `text-box: trim-both`, meaning there is no surrounding whitespace for text. Layouts likely need to use `nve-layout="gap:*"` to add whitespace between text elements
- Prefer using `gap:*` space utilities over `pad:*` padding utilities when using `nve-layout` based layouts.
- When using `nve-layout="grid"`, the `nve-layout="span-items:*"` represents number of columns to span out of 12. Example: "span-items:6" spans 6 out of 12 columns or 50% of the grid row.

### Starter Layout

```html
<nve-page>
  <nve-page-header slot="header">
    <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
    <h2 slot="prefix" nve-text="heading">Infrastructure</h2>
  </nve-page-header>
  <main nve-layout="column gap:lg pad:lg">
    <!-- template content here -->
  </main>
</nve-page>
```


## Creating Elements Starter Project

Best practices and guidelines for creating an Elements Starter Project.

### Commands to use

- `nve project.create`: create a new starter project
- `nve project.setup`: setup or update a project to use Elements
- `nve project.validate`: check project setup and find configuration issues

### Gotchas

- Do NOT use the `start` parameter for the `nve project.create` command as this prevents the command from exiting.

### Steps

1. Use `nve project.create` to create a new starter project
2. Use `nve project.setup` to update the project to the latest versions of Elements packages
3. Use `nve project.validate` to check project setup and find configuration issues
4. Run `pnpm run dev` or `npm run dev` to start the project. This starts the project in development mode as a long-running process.

## Setup an Existing Project

Setup an existing project to use Elements you can use the setup command to add the necessary dependencies and configure the MCP server.

```shell
# use the CLI
nve project.setup

# or use the MCP Tool
project_setup
```

## Manual Integration for Existing Projects

If installing to an existing project, install the core dependencies:

```shell
# install core dependencies
npm install @nvidia-elements/themes @nvidia-elements/styles @nvidia-elements/core
```

Elements ships as many small packages. This allows you to choose what
tools your application needs and omit anything unnecessary, improving
application performance.

```css
/* base theme */
@import '@nvidia-elements/themes/fonts/inter.css';
@import '@nvidia-elements/themes/index.css';
@import '@nvidia-elements/themes/dark.css';
@import '@nvidia-elements/styles/view-transitions.css';
@import '@nvidia-elements/styles/typography.css';
@import '@nvidia-elements/styles/layout.css';

/* optional themes */
@import '@nvidia-elements/themes/high-contrast.css';
@import '@nvidia-elements/themes/reduced-motion.css';
@import '@nvidia-elements/themes/compact.css';
@import '@nvidia-elements/themes/debug.css';
```

```typescript
// Load via typescript imports to make available in HTML templates
import '@nvidia-elements/core/button/define.js';
...
```

```html
<!-- set global theme -->
<html nve-theme="dark" nve-transition="auto">
```

```html
<!-- use component in HTML template -->
<nve-button>hello there</nve-button>
```


## APIs

Available APIs: `nve-*` custom elements and `nve-*` global style utility attributes.

- [accordion](https://nvidia.github.io/elements/context/api/accordion.md): An accordion is a vertical stack of interactive headings used to toggle the display of further information.
- [accordion-content](https://nvidia.github.io/elements/context/api/accordion-content.md): Contains the collapsible body content that reveals or hides when the parent accordion expands or collapses.
- [accordion-group](https://nvidia.github.io/elements/context/api/accordion-group.md): Organizes many accordions into a cohesive group, enabling coordinated expand/collapse behavior such as single-item expansion.
- [accordion-header](https://nvidia.github.io/elements/context/api/accordion-header.md): Provides the clickable heading region of an accordion that toggles the visibility of associated content.
- [alert](https://nvidia.github.io/elements/context/api/alert.md): Alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
- [alert-group](https://nvidia.github.io/elements/context/api/alert-group.md): An alert group is an element that displays a group of related and important messages in a way that attracts the user's attention without interrupting the user's task.
- [avatar](https://nvidia.github.io/elements/context/api/avatar.md): Avatar represents a user/bot within a UI. Typically with text or image content.
- [avatar-group](https://nvidia.github.io/elements/context/api/avatar-group.md): An avatar group displays a collection of user avatars in a compact and organized layout, showcasing many participants or contributors in a space-efficient way.
- [badge](https://nvidia.github.io/elements/context/api/badge.md): A visual indicator that communicates a status description of an associated component. Status badges use short text, color, built in icons for quick recognition and render near the relevant content.
- [breadcrumb](https://nvidia.github.io/elements/context/api/breadcrumb.md): Breadcrumb is a component that can help users establish their location while navigating a website with complex URLs and navigation paths.
- [button](https://nvidia.github.io/elements/context/api/button.md): A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
- [button-group](https://nvidia.github.io/elements/context/api/button-group.md): A button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars.
- [card](https://nvidia.github.io/elements/context/api/card.md): A container for content representing a single entity.
- [card-content](https://nvidia.github.io/elements/context/api/card-content.md): Contains the primary body content of a card, providing a structured region for the main information or media.
- [card-footer](https://nvidia.github.io/elements/context/api/card-footer.md): Provides a designated area at the bottom of a card for actions, metadata, or supplementary information.
- [card-header](https://nvidia.github.io/elements/context/api/card-header.md): Displays the title and optional actions at the top of a card, establishing the card's identity and purpose.
- [chat-message](https://nvidia.github.io/elements/context/api/chat-message.md): A chat message component displays a text message within a conversation, sent between users or bots
- [checkbox](https://nvidia.github.io/elements/context/api/checkbox.md): A checkbox is a control that enables users to choose between two distinct mutually exclusive options (checked or unchecked, on or off) through a single click or tap.
- [checkbox-group](https://nvidia.github.io/elements/context/api/checkbox-group.md): Groups related checkboxes together with a shared label and validation messaging for multi-select form inputs.
- [color](https://nvidia.github.io/elements/context/api/color.md): A color picker is a control that enables users to choose a color value.
- [combobox](https://nvidia.github.io/elements/context/api/combobox.md): An editable combobox with autocomplete behavior and selection support.
- [control](https://nvidia.github.io/elements/context/api/control.md): Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.
- [control-group](https://nvidia.github.io/elements/context/api/control-group.md): Groups many related form controls under a shared label and validation context for semantically linked inputs.
- [control-message](https://nvidia.github.io/elements/context/api/control-message.md): Defining a Validity State on a control-message allows messages to show conditionally based on the current HTML5 validity state.
- [copy-button](https://nvidia.github.io/elements/context/api/copy-button.md): A copy button is a button that easily enables the copy to clipboard pattern.
- [date](https://nvidia.github.io/elements/context/api/date.md): A date picker is a control that enables users to choose a date value.
- [datetime](https://nvidia.github.io/elements/context/api/datetime.md): A datetime picker is a control that enables users to choose a datetime value.
- [dialog](https://nvidia.github.io/elements/context/api/dialog.md): Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
- [dialog-footer](https://nvidia.github.io/elements/context/api/dialog-footer.md): Contains the action buttons and controls at the bottom of a dialog for confirming, canceling, or navigating.
- [dialog-header](https://nvidia.github.io/elements/context/api/dialog-header.md): Displays the title and contextual information at the top of a dialog to orient users to the dialog's purpose.
- [divider](https://nvidia.github.io/elements/context/api/divider.md): Divider is a component that separates and distinguishes sections of content or groups of menuitems.
- [dot](https://nvidia.github.io/elements/context/api/dot.md): A visual indicator that communicates a status or notification of an associated component.
- [drawer](https://nvidia.github.io/elements/context/api/drawer.md): Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings). Or use [Panel](./docs/elements/panel/) inline as its content couples with or closely relates to the content on the page (details, extra actions/options). [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
- [drawer-content](https://nvidia.github.io/elements/context/api/drawer-content.md): Contains the scrollable main body content within a drawer panel.
- [drawer-footer](https://nvidia.github.io/elements/context/api/drawer-footer.md): Provides a fixed action area at the bottom of a drawer for primary actions such as save or cancel.
- [drawer-header](https://nvidia.github.io/elements/context/api/drawer-header.md): Displays the title and optional close control at the top of a drawer to identify its purpose.
- [dropdown](https://nvidia.github.io/elements/context/api/dropdown.md): Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
- [dropdown-footer](https://nvidia.github.io/elements/context/api/dropdown-footer.md): Provides a fixed area at the bottom of a dropdown menu for extra actions or supplementary controls.
- [dropdown-group](https://nvidia.github.io/elements/context/api/dropdown-group.md): A Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience
- [dropdown-header](https://nvidia.github.io/elements/context/api/dropdown-header.md): Displays a title or contextual label at the top of a dropdown menu to categorize its contents.
- [dropzone](https://nvidia.github.io/elements/context/api/dropzone.md): A dropzone form control that enables users to drag and drop files onto it.
- [file](https://nvidia.github.io/elements/context/api/file.md): A file picker is a control that enables users to choose a file value.
- [format-datetime](https://nvidia.github.io/elements/context/api/format-datetime.md): Formats a date/time value as localized text using the Intl.DateTimeFormat API. Renders inside a semantic time element.
Granular options (weekday, year, month, day, hour, minute, second) mirror the Intl.DateTimeFormat API. 'numeric' omits zero-padding, '2-digit' zero-pads.
- [format-number](https://nvidia.github.io/elements/context/api/format-number.md): A localized number formatter for currencies, percentages, units, and compact notation, backed by Intl.NumberFormat.
Provide a `currency` attribute when `formatStyle` is `currency`, and a `unit` attribute when `formatStyle` is `unit`.
- [format-relative-time](https://nvidia.github.io/elements/context/api/format-relative-time.md): Formats a date/time value as localized relative text using the Intl.RelativeTimeFormat API. Renders inside a semantic time element.
Options mirror the Intl.RelativeTimeFormat API. When unit is 'auto', the component selects the best unit based on the time difference.
- [grid](https://nvidia.github.io/elements/context/api/grid.md): A versatile table/datagrid component with built-in keyboard navigation for displaying and interacting with structured data. Use it for anything from simple read-only tables to fully interactive, spreadsheet experiences.
- [grid-cell](https://nvidia.github.io/elements/context/api/grid-cell.md): Represents an individual data cell within a grid row, displaying content aligned to its parent column.
- [grid-column](https://nvidia.github.io/elements/context/api/grid-column.md): Defines a column header within a grid, specifying the column's label, width, and alignment for all cells beneath it.
- [grid-footer](https://nvidia.github.io/elements/context/api/grid-footer.md): Grid footer displays contextual information or user actions such as pagination.
- [grid-header](https://nvidia.github.io/elements/context/api/grid-header.md): Contains the column headers of a grid, managing column widths and providing structural context for the data rows below.
- [grid-placeholder](https://nvidia.github.io/elements/context/api/grid-placeholder.md): Placeholder displays a message while data loads for the grid or shows empty states for datasets.
- [grid-row](https://nvidia.github.io/elements/context/api/grid-row.md): Represents a horizontal row of data cells within a grid, supporting selection and interactive states.
- [icon](https://nvidia.github.io/elements/context/api/icon.md): An icon is a graphic symbol designed to visually show the purpose of an interface element.
- [icon-button](https://nvidia.github.io/elements/context/api/icon-button.md): An icon button is a button that displays only an icon without a visual label.
- [input](https://nvidia.github.io/elements/context/api/input.md): An input is a control that enables users to enter text.
- [input-group](https://nvidia.github.io/elements/context/api/input-group.md): Visually combines many related input controls into a unified composite field with shared styling.
- [logo](https://nvidia.github.io/elements/context/api/logo.md): A visual indicator for a brand or application.
- [menu](https://nvidia.github.io/elements/context/api/menu.md): A menu offers a list of choices to the user, such as a set of actions or functions. Choosing an item in a menu typically opens a sub menu, or invokes a command.
- [menu-item](https://nvidia.github.io/elements/context/api/menu-item.md): Represents a selectable option within a menu, providing an interactive button for navigation or actions.
- [month](https://nvidia.github.io/elements/context/api/month.md): A month picker is a control that enables users to choose a month value.
- [notification](https://nvidia.github.io/elements/context/api/notification.md): Displays real time updates without interrupting the user's workflow to communicate an important message or status. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
- [notification-group](https://nvidia.github.io/elements/context/api/notification-group.md): Displays real time updates without interrupting the user's workflow to communicate an important message or status.
- [page](https://nvidia.github.io/elements/context/api/page.md): Provide a consistent page structure across the applications, ensuring a seamless user experience.
- [page-header](https://nvidia.github.io/elements/context/api/page-header.md): An element that appears across the top of all pages containing the application name and primary navigation.
- [page-loader](https://nvidia.github.io/elements/context/api/page-loader.md): Page Loader is a full-screen version of the `progress-ring` component, for use when the page should remain unusable as the loader displays.
- [page-panel](https://nvidia.github.io/elements/context/api/page-panel.md): Child panel for embedded panels within the page component. Typically used for left/right/bottom page slot positions.
- [page-panel-content](https://nvidia.github.io/elements/context/api/page-panel-content.md): Contains the scrollable main body content within a page panel region.
- [page-panel-footer](https://nvidia.github.io/elements/context/api/page-panel-footer.md): Provides a fixed action area at the bottom of a page panel for persistent controls or status information.
- [page-panel-header](https://nvidia.github.io/elements/context/api/page-panel-header.md): Displays the title and contextual controls at the top of a page panel to identify its purpose.
- [pagination](https://nvidia.github.io/elements/context/api/pagination.md): Pagination is a control that enables users to navigate through pages of content.
- [panel](https://nvidia.github.io/elements/context/api/panel.md): Panel is inline container for content that couples to the content on the page (details, extra actions/options). Or [Drawer](./docs/elements/drawer/) is out of context of the rest of the page (notifications, navigations, settings).
- [panel-content](https://nvidia.github.io/elements/context/api/panel-content.md): Contains the main body content within a panel, providing a structured region for detailed information.
- [panel-footer](https://nvidia.github.io/elements/context/api/panel-footer.md): Provides a designated area at the bottom of a panel for actions or supplementary controls.
- [password](https://nvidia.github.io/elements/context/api/password.md): A password is a control that enables users to enter password text.
- [preferences-input](https://nvidia.github.io/elements/context/api/preferences-input.md): A preferences input is a widget for controlling apperance. Stylesheets register to the preferences input by including a css-property, see Standard for an example.
- [progress-bar](https://nvidia.github.io/elements/context/api/progress-bar.md): A progress bar is a visual indicator of the status of a running task. Under the hood, the component uses the native HTML `progress` element to achieve proper a11y concerns.
- [progress-ring](https://nvidia.github.io/elements/context/api/progress-ring.md): The `progress-ring` component shows the status of a pending task. It also serves the basis of the page loading element.
- [progressive-filter-chip](https://nvidia.github.io/elements/context/api/progressive-filter-chip.md): A filter chip is a control that enables users to select many options from a set of choices.
- [pulse](https://nvidia.github.io/elements/context/api/pulse.md): Pulse component signals attention for a particular area of a UI. This helps with tutorial/getting started guides for new users.
- [radio](https://nvidia.github.io/elements/context/api/radio.md): A radio button is a control that enables users to choose one option from a list of mutually exclusive options.
- [radio-group](https://nvidia.github.io/elements/context/api/radio-group.md): Groups related radio buttons together with a shared label and validation messaging for single-select form inputs.
- [range](https://nvidia.github.io/elements/context/api/range.md): A range slider is a control that enables users to choose a value from a continuous range of values.
- [resize-handle](https://nvidia.github.io/elements/context/api/resize-handle.md): A resize-handle slider is a control that enables users to resize views or panels vertically or horizontally.
- [search](https://nvidia.github.io/elements/context/api/search.md): A search is a control that enables users to enter text to search.
- [select](https://nvidia.github.io/elements/context/api/select.md): A select is a control that enables users to select an option from a list of options.
- [skeleton](https://nvidia.github.io/elements/context/api/skeleton.md): A loading placeholder component that displays animated placeholder shapes while content loads.
- [sort-button](https://nvidia.github.io/elements/context/api/sort-button.md): A sort button is a control that enables users to sort a list of items in ascending or descending order.
- [sparkline](https://nvidia.github.io/elements/context/api/sparkline.md): A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).
- [star-rating](https://nvidia.github.io/elements/context/api/star-rating.md): A star rating component lets users rate something using stars, providing a quick visual representation of feedback
- [steps](https://nvidia.github.io/elements/context/api/steps.md): Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.
- [steps-item](https://nvidia.github.io/elements/context/api/steps-item.md): Represents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.
- [switch](https://nvidia.github.io/elements/context/api/switch.md): A switch is a control that enables users to switch between two mutually exclusive options (on or off, checked or unchecked) through a single click or tap.
- [switch-group](https://nvidia.github.io/elements/context/api/switch-group.md): A switch group is a container for a group of switches.
- [tabs](https://nvidia.github.io/elements/context/api/tabs.md): Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.
- [tabs-group](https://nvidia.github.io/elements/context/api/tabs-group.md): Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.
- [tabs-item](https://nvidia.github.io/elements/context/api/tabs-item.md): Represents an individual tab within a tablist, providing a selectable button for switching between content views.
- [tag](https://nvidia.github.io/elements/context/api/tag.md): A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.
- [textarea](https://nvidia.github.io/elements/context/api/textarea.md): A textarea is a control that enables users to enter and edit text.
- [time](https://nvidia.github.io/elements/context/api/time.md): A time picker is a control that enables users to choose a time value.
- [toast](https://nvidia.github.io/elements/context/api/toast.md): A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
- [toggletip](https://nvidia.github.io/elements/context/api/toggletip.md): Generic toggletip element for rendering a variety of different interactive content. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
- [toggletip-footer](https://nvidia.github.io/elements/context/api/toggletip-footer.md): Provides a designated area at the bottom of a toggletip for actions or supplementary information.
- [toggletip-header](https://nvidia.github.io/elements/context/api/toggletip-header.md): Displays a title or contextual label at the top of a toggletip to categorize its contents.
- [toolbar](https://nvidia.github.io/elements/context/api/toolbar.md): A toolbar is a container for grouping a set of controls, such as buttons, icon buttons and combobox search.
- [tooltip](https://nvidia.github.io/elements/context/api/tooltip.md): A contextual popup that displays a plaintext description. Tooltips are [triggered](https://w3c.github.io/aria/#tooltip) by hovering, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
- [tree](https://nvidia.github.io/elements/context/api/tree.md): A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.
- [tree-node](https://nvidia.github.io/elements/context/api/tree-node.md): A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.
- [week](https://nvidia.github.io/elements/context/api/week.md): A week picker is a control that enables users to choose a week value.
- [codeblock](https://nvidia.github.io/elements/context/api/codeblock.md): A container for content representing programming languages.
- [markdown](https://nvidia.github.io/elements/context/api/markdown.md): A Web Component that inputs markdown content and renders it as HTML formatted with Elements styles.
- [monaco-diff-editor](https://nvidia.github.io/elements/context/api/monaco-diff-editor.md): A low-level Monaco Editor wrapper that provides direct access to a diff editor instance and API.
- [monaco-diff-input](https://nvidia.github.io/elements/context/api/monaco-diff-input.md): An input control for editing diffs for JSON, YAML and code with syntax highlighting and validation.
- [monaco-editor](https://nvidia.github.io/elements/context/api/monaco-editor.md): A low-level Monaco Editor wrapper that provides direct access to an editor instance and API.
- [monaco-input](https://nvidia.github.io/elements/context/api/monaco-input.md): An input control for editing JSON, YAML and code with syntax highlighting and validation.
- [monaco-problems](https://nvidia.github.io/elements/context/api/monaco-problems.md): A Monaco Editor based tree view for presenting problems (i.e. diagnostics markers).
- [layout (attribute utility)](https://nvidia.github.io/elements/context/api/layout.md): Layout utility for native HTML elements
- [text (attribute utility)](https://nvidia.github.io/elements/context/api/text.md): Typography style utility for native HTML elements

## nve-accordion

An accordion is a vertical stack of interactive headings used to toggle the display of further information.

### Example

```html
<nve-accordion-group behavior-expand>
  <nve-accordion>
    <nve-accordion-header>
      <h2 nve-text="heading xs medium" slot="prefix">Workspace Settings</h2>
    </nve-accordion-header>
    <nve-accordion-content
      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
    >
  </nve-accordion>
</nve-accordion-group>
```

### Import

```javascript
import '@nvidia-elements/core/accordion/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | This is a default/unnamed slot for accordion content |
| icon-button | `string` | icon elements to display for expand/collapse |
| header | `string` | header element (Use `accordion-header` or custom content) |
| content | `string` | content element (Use `accordion-content` or custom content) |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| i18n |  | Enables updating internal string values for internationalization. |
| container | `'flat' \| 'inset' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inset` Element container optimizes for embedding or inset placement inside another containing element. |
| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |
| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. |
| behaviorExpand (behavior-expand) | `boolean` | Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless) |

### Invoker Commands

| name | value | description |
| ---- | ----- | ----------- |
| --open | `CommandEvent` | use to open the accordion |
| --close | `CommandEvent` | use to close the accordion |
| --toggle | `CommandEvent` | use to toggle the accordion |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --header-padding | `string` |  |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --transition | `string` | [MDN](https://mdn.dev/CSS/transition) |

## nve-accordion-content

Contains the collapsible body content that reveals or hides when the parent accordion expands or collapses.

### Example

```html
<nve-accordion-group behavior-expand>
  <nve-accordion>
    <nve-accordion-header>
      <h2 nve-text="heading xs medium" slot="prefix">Workspace Settings</h2>
    </nve-accordion-header>
    <nve-accordion-content
      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
    >
  </nve-accordion>
</nve-accordion-group>
```

### Import

```javascript
import '@nvidia-elements/core/accordion/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | This is a default/unnamed slot for accordion content |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |

## nve-accordion-group

Organizes many accordions into a cohesive group, enabling coordinated expand/collapse behavior such as single-item expansion.

### Example

```html
<nve-accordion-group behavior-expand>
  <nve-accordion>
    <nve-accordion-header>
      <h2 nve-text="heading xs medium" slot="prefix">Workspace Settings</h2>
    </nve-accordion-header>
    <nve-accordion-content
      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
    >
  </nve-accordion>
</nve-accordion-group>
```

### Import

```javascript
import '@nvidia-elements/core/accordion/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | This is a default slot for accordions within the group |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| behaviorExpand (behavior-expand) | `boolean` | Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless) |
| behaviorExpandSingle (behavior-expand-single) | `boolean` | Determines whether the accordion should opt-in to stateful expansion of a single accordion at a time |
| container | `'flat' \| 'inset' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inset` Element container optimizes for embedding or inset placement inside another containing element. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |

## nve-accordion-header

Provides the clickable heading region of an accordion that toggles the visibility of associated content.

### Example

```html
<nve-accordion-group behavior-expand>
  <nve-accordion>
    <nve-accordion-header>
      <h2 nve-text="heading xs medium" slot="prefix">Workspace Settings</h2>
    </nve-accordion-header>
    <nve-accordion-content
      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
    >
  </nve-accordion>
</nve-accordion-group>
```

### Import

```javascript
import '@nvidia-elements/core/accordion/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default content slot |
| prefix | `string` | slot for prefix content |
| suffix | `string` | slot for suffix content |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| slot | `string` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |

## nve-alert

Alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.

### Example

```html
<nve-alert>alert message</nve-alert>
```

### Import

```javascript
import '@nvidia-elements/core/alert/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| icon | `string` | Icon slot renders on the left side of the alert. Icons typically represent the alert's status. |
| prefix | `string` | Prefix slot renders between the icon and the content. Prefixes typically represent the alert's status. |
| actions | `string` | Actions render on the right side of the alert. Actions are typically buttons, but can also be links. Use actions for steps the user can take to resolve the alert. |
| content | `string` | Content for large overflow text. |
| (default) | `string` | Default content placed inside of the alert. |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| status | `'accent' \| 'warning' \| 'success' \| 'danger' \| 'scheduled' \| 'queued' \| 'pending' \| 'starting' \| 'running' \| 'restarting' \| 'stopping' \| 'finished' \| 'failed' \| 'unknown' \| 'ignored' \| 'muted' \| "default"` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. - `scheduled` Task has a scheduled future execution at a specific time. - `queued` Task is waiting in line to begin after other tasks complete. - `pending` Task is awaiting approval, user input, or external conditions before proceeding. - `starting` Task is initializing and preparing to begin active execution. - `running` Task is actively executing and making progress. - `restarting` Task restarts after an interruption or reset. - `stopping` Task is gracefully shutting down and completing cleanup operations. - `finished` Task has completed successfully with the expected outcome. - `failed` Task encountered an error and did not complete as intended. - `unknown` Task status remains unknown or unavailable. - `ignored` Task was intentionally skipped or excluded from execution. |
| closable | `boolean` | Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. |
| i18n |  | Enables updating internal string values for internationalization. |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| close | `CustomEvent` | Dispatched when the alert closes within an alert group. |

### Invoker Commands

| name | value | description |
| ---- | ----- | ----------- |
| --close | `CommandEvent` | Use to set the alert closed/hidden state. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --icon-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --icon-size | `string` |  |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --justify-content | `string` | [MDN](https://mdn.dev/CSS/justify-content) |
| --align-items | `string` | [MDN](https://mdn.dev/CSS/align-items) |
| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |
| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |

## nve-alert-group

An alert group is an element that displays a group of related and important messages in a way that attracts the user's attention without interrupting the user's task.

### Import

```javascript
import '@nvidia-elements/core/alert/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for nve-alert |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| status | `'accent' \| 'warning' \| 'success' \| 'danger' \| "default"` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. |
| prominence | `'emphasis' \| "default"` | Controls the visual prominence to establish hierarchy and guide user attention. - `emphasis` Increases visual weight to draw attention and highlight important elements. |
| color | `'red-cardinal' \| 'gray-slate' \| 'gray-denim' \| 'blue-indigo' \| 'blue-cobalt' \| 'blue-sky' \| 'teal-cyan' \| 'green-mint' \| 'teal-seafoam' \| 'green-grass' \| 'yellow-amber' \| 'orange-pumpkin' \| 'red-tomato' \| 'pink-magenta' \| 'purple-plum' \| 'purple-violet' \| 'purple-lavender' \| 'pink-rose' \| 'green-jade' \| 'lime-pear' \| 'yellow-nova' \| 'brand-green'` | Defines a base color from the theme color palette |
| container | `'full' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `full` Element container optimizes for filling its container bounds. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |

## nve-avatar

Avatar represents a user/bot within a UI. Typically with text or image content.

### Example

```html
<nve-avatar>AV</nve-avatar>
```

### Import

```javascript
import '@nvidia-elements/core/avatar/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for content |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| size | `'sm' \| 'md' \| 'lg' \| 'xs' \| "default"` | Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. |
| color | `'red-cardinal' \| 'gray-slate' \| 'gray-denim' \| 'blue-indigo' \| 'blue-cobalt' \| 'blue-sky' \| 'teal-cyan' \| 'green-mint' \| 'teal-seafoam' \| 'green-grass' \| 'yellow-amber' \| 'orange-pumpkin' \| 'red-tomato' \| 'pink-magenta' \| 'purple-plum' \| 'purple-violet' \| 'purple-lavender' \| 'pink-rose' \| 'green-jade' \| 'lime-pear' \| 'yellow-nova' \| 'brand-green'` | Defines a base color from the theme color palette |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |

## nve-avatar-group

An avatar group displays a collection of user avatars in a compact and organized layout, showcasing many participants or contributors in a space-efficient way.

### Import

```javascript
import '@nvidia-elements/core/avatar/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for content |

## nve-badge

A visual indicator that communicates a status description of an associated component. Status badges use short text, color, built in icons for quick recognition and render near the relevant content.

### Example

```html
<nve-badge>badge</nve-badge>
```

### Import

```javascript
import '@nvidia-elements/core/badge/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for content |
| prefix-icon | `string` | slot for prefix icon |
| suffix-icon | `string` | slot for suffix icon |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| status | `'scheduled' \| 'queued' \| 'pending' \| 'starting' \| 'running' \| 'restarting' \| 'stopping' \| 'finished' \| 'failed' \| 'unknown' \| 'ignored' \| 'accent' \| 'warning' \| 'success' \| 'danger'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. - `scheduled` Task has a scheduled future execution at a specific time. - `queued` Task is waiting in line to begin after other tasks complete. - `pending` Task is awaiting approval, user input, or external conditions before proceeding. - `starting` Task is initializing and preparing to begin active execution. - `running` Task is actively executing and making progress. - `restarting` Task restarts after an interruption or reset. - `stopping` Task is gracefully shutting down and completing cleanup operations. - `finished` Task has completed successfully with the expected outcome. - `failed` Task encountered an error and did not complete as intended. - `unknown` Task status remains unknown or unavailable. - `ignored` Task was intentionally skipped or excluded from execution. |
| color | `'red-cardinal' \| 'gray-slate' \| 'gray-denim' \| 'blue-indigo' \| 'blue-cobalt' \| 'blue-sky' \| 'teal-cyan' \| 'green-mint' \| 'teal-seafoam' \| 'green-grass' \| 'yellow-amber' \| 'orange-pumpkin' \| 'red-tomato' \| 'pink-magenta' \| 'purple-plum' \| 'purple-violet' \| 'purple-lavender' \| 'pink-rose' \| 'green-jade' \| 'lime-pear' \| 'yellow-nova' \| 'brand-green'` | Defines a base color from the theme color palette |
| container | `'flat' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |
| prominence | `'emphasis' \| "default"` | Controls the visual prominence to establish hierarchy and guide user attention. - `emphasis` Increases visual weight to draw attention and highlight important elements. |
| i18n |  | Enables updating internal string values for internationalization. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --icon-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-breadcrumb

Breadcrumb is a component that can help users establish their location while navigating a website with complex URLs and navigation paths.

### Example

```html
<nve-breadcrumb>
  <nve-button><a href="#" target="_self">Item 1</a></nve-button>
  <nve-button><a href="#" target="_self">Item 2</a></nve-button>
  <nve-button><a href="#" target="_self">Item 3</a></nve-button>
  <span>You Are Here</span>
</nve-breadcrumb>
```

### Import

```javascript
import '@nvidia-elements/core/breadcrumb/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for `nve-button` and anchor elements |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --icon-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --icon-height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --text-decoration | `string` | [MDN](https://mdn.dev/CSS/text-decoration) |
| --breadcrumb-height | `string` | deprecated |
| --item-text-size | `string` | deprecated |
| --item-color | `string` | deprecated |
| --item-active-color | `string` | deprecated |
| --item-active-font-weight | `string` | deprecated |

## nve-button

A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

### Example

```html
<nve-button>standard</nve-button>
```

### Import

```javascript
import '@nvidia-elements/core/button/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | slot for button text content or icon, icon placement depends on whether `icon` appears before or after text content. |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| container | `'flat' \| 'inline' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inline` Element container reduces to fit within inline content such as a block of text. |
| size | `'sm' \| 'md' \| 'lg' \| "default"` | Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. |
| interaction | `'emphasis' \| 'destructive'` | The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors. - `emphasis` Shows the interaction targets emphasis or highlighting primary actions. - `destructive` Shows the interaction targets destructive actions such as deleting or removing. |
| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. |
| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |
| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |
| form | `HTMLFormElement \| null \| string` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |
| name | `string` | The name of the button, submitted as a pair with the button's value as part of the form data, when that button submits the form. https://mdn.dev/HTML/Element/button#attr-name |
| value | `string` | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |
| type | `'button' \| 'submit' \| 'reset'` | Defines the button behavior when associated within an <form> element. https://mdn.dev/HTML/Element/button#attr-type |
| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. |
| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. |
| current | `'page' \| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. |
| popoverTargetElement | `HTMLElement \| null` | Establishing a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |
| popovertarget | `string` | The idref of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |
| popoverTargetAction (popovertargetaction) | `'show' \| 'hide' \| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |
| commandForElement | `HTMLElement \| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |
| commandfor | `string \| null` | The idref of the element that receives the command. https://mdn.dev/Invoker_Commands_API |
| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |
| interestForElement | `HTMLElement \| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |
| interestfor | `string \| null` | The idref of the element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --text-decoration | `string` | [MDN](https://mdn.dev/CSS/text-decoration) |
| --text-align | `string` | [MDN](https://mdn.dev/CSS/text-align) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |
| --line-height | `string` | [MDN](https://mdn.dev/CSS/line-height) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |

## nve-button-group

A button group organizes related buttons and can support either mutually exclusive single or multi selection. Prefer usage within toolbars.

### Example

```html
<nve-button-group>
  <nve-icon-button selected icon-name="copy"></nve-icon-button>
  <nve-icon-button icon-name="add-comment"></nve-icon-button>
  <nve-icon-button icon-name="download"></nve-icon-button>
</nve-button-group>
```

### Import

```javascript
import '@nvidia-elements/core/button-group/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for `nve-button` or `nve-icon-button` |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| behaviorSelect (behavior-select) | `'single' \| 'multi'` | By default the button group is stateless. Add the `behavior-select` attribute and set to `single` or `multi` to enable stateful selction handling. |
| container | `'flat' \| 'rounded' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |
| orientation | `'horizontal' \| 'vertical' \| "default"` | Controls the directional flow of the element's layout and interaction pattern. - `horizontal` Element orients horizontally with left-to-right flow. - `vertical` Element orients vertically with top-to-bottom flow. |
| interaction | `'emphasis' \| 'destructive'` | The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors. - `emphasis` Shows the interaction targets emphasis or highlighting primary actions. - `destructive` Shows the interaction targets destructive actions such as deleting or removing. |
| size | `'sm' \| 'md' \| 'lg' \| "default"` | Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |

## nve-card

A container for content representing a single entity.

### Example

```html
<nve-card>
  <nve-card-header>
    <h2 nve-text="heading sm medium">Heading</h2>
  </nve-card-header>
  <nve-card-content>
    <p nve-text="body" style="min-height: 64px">card content</p>
  </nve-card-content>
  <nve-card-footer>
    <p nve-text="body">card footer</p>
  </nve-card-footer>
</nve-card>
```

### Import

```javascript
import '@nvidia-elements/core/card/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | use `<nve-card-header>`,`<nve-card-content>`,`<nve-card-footer>` for card content layout |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| container | `'flat' \| 'full' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `full` Element container optimizes for filling its container bounds. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |

## nve-card-content

Contains the primary body content of a card, providing a structured region for the main information or media.

### Example

```html
<nve-card>
  <nve-card-header>
    <h2 nve-text="heading sm medium">Heading</h2>
  </nve-card-header>
  <nve-card-content>
    <p nve-text="body" style="min-height: 64px">card content</p>
  </nve-card-content>
  <nve-card-footer>
    <p nve-text="body">card footer</p>
  </nve-card-footer>
</nve-card>
```

### Import

```javascript
import '@nvidia-elements/core/card/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | This is a default/unnamed slot for card content |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |

## nve-card-footer

Provides a designated area at the bottom of a card for actions, metadata, or supplementary information.

### Example

```html
<nve-card>
  <nve-card-header>
    <h2 nve-text="heading sm medium">Heading</h2>
  </nve-card-header>
  <nve-card-content>
    <p nve-text="body" style="min-height: 64px">card content</p>
  </nve-card-content>
  <nve-card-footer>
    <p nve-text="body">card footer</p>
  </nve-card-footer>
</nve-card>
```

### Import

```javascript
import '@nvidia-elements/core/card/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | This is a default/unnamed slot for card footer content |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| slot | `string` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |

## nve-card-header

Displays the title and optional actions at the top of a card, establishing the card's identity and purpose.

### Example

```html
<nve-card>
  <nve-card-header>
    <h2 nve-text="heading sm medium">Heading</h2>
  </nve-card-header>
  <nve-card-content>
    <p nve-text="body" style="min-height: 64px">card content</p>
  </nve-card-content>
  <nve-card-footer>
    <p nve-text="body">card footer</p>
  </nve-card-footer>
</nve-card>
```

### Import

```javascript
import '@nvidia-elements/core/card/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| slot | `string` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |
| --line-height | `string` | [MDN](https://mdn.dev/CSS/line-height) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |

## nve-chat-message

A chat message component displays a text message within a conversation, sent between users or bots

### Example

```html
<nve-chat-message> Your deployment completed successfully. All services are running as expected. </nve-chat-message>
```

### Import

```javascript
import '@nvidia-elements/core/chat-message/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for content |
| prefix | `string` | for avatar/img content |
| suffix | `string` | for avatar/img content |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| container | `'flat'` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |
| color | `'red-cardinal' \| 'gray-slate' \| 'gray-denim' \| 'blue-indigo' \| 'blue-cobalt' \| 'blue-sky' \| 'teal-cyan' \| 'green-mint' \| 'teal-seafoam' \| 'green-grass' \| 'yellow-amber' \| 'orange-pumpkin' \| 'red-tomato' \| 'pink-magenta' \| 'purple-plum' \| 'purple-violet' \| 'purple-lavender' \| 'pink-rose' \| 'green-jade' \| 'lime-pear' \| 'yellow-nova' \| 'brand-green'` | Defines a base color from the theme color palette |
| arrowPosition (arrow-position) | `\| 'top-start'
    \| 'top-end'
    \| 'bottom-start'
    \| 'bottom-end'` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --line-height | `string` | [MDN](https://mdn.dev/CSS/line-height) |
| --overflow | `string` | [MDN](https://mdn.dev/CSS/overflow) |
| --top-offset | `string` | Vertical offset for aligning message with avatar |

## nve-checkbox

A checkbox is a control that enables users to choose between two distinct mutually exclusive options (checked or unchecked, on or off) through a single click or tap.

### Example

```html
<nve-checkbox>
  <label>label</label>
  <input type="checkbox" checked />
</nve-checkbox>
```

### Import

```javascript
import '@nvidia-elements/core/checkbox/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input element |
| label | `string` | Label element |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| nveControl | `string` |  |
| status | `'warning' \| 'error' \| 'success' \| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| i18n |  | Enables updating internal string values for internationalization. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| reset |  | Resets control value to initial attribute value and clears any active validation rules. |
| showPicker |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| reset | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --border-width | `string` | [MDN](https://mdn.dev/CSS/border-width) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --border-color | `string` | [MDN](https://mdn.dev/CSS/border-color) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --check-color | `string` |  |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-checkbox-group

Groups related checkboxes together with a shared label and validation messaging for multi-select form inputs.

### Import

```javascript
import '@nvidia-elements/core/checkbox/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input elements |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |

## nve-color

A color picker is a control that enables users to choose a color value.

### Example

```html
<nve-color>
  <label>label</label>
  <input type="color" />
  <nve-control-message>message</nve-control-message>
</nve-color>
```

### Import

```javascript
import '@nvidia-elements/core/color/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input element |
| label | `string` | Label element |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| container | `'flat' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |
| status | `'warning' \| 'error' \| 'success' \| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |
| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |
| i18n |  | Enables updating internal string values for internationalization. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| nveControl | `string` |  |
| reset |  | Resets control value to initial attribute value and clears any active validation rules. |
| showPicker |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| reset | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-combobox

An editable combobox with autocomplete behavior and selection support.

### Example

```html
<nve-combobox>
  <label>label</label>
  <input type="search" />
  <datalist>
    <option value="status"></option>
    <option value="priority"></option>
    <option value="date"></option>
    <option value="session"></option>
    <option value="configuration"></option>
    <option value="contains"></option>
  </datalist>
  <nve-control-message>message</nve-control-message>
</nve-combobox>
```

### Import

```javascript
import '@nvidia-elements/core/combobox/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for an input and a datalist/select element |
| prefix-icon | `string` | slot for icon before the input |
| footer | `string` | slot for dropdown footer content |
| label | `string` | Label element |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| container | `'flat'` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |
| notags | `boolean` | Disable rendering of inline tags for many-item select |
| behaviorCreate (behavior-create) | `boolean` | Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. |
| reset |  | Resets control value to initial attribute value and clears any active validation rules. |
| selectAll |  | Select all options provided |
| status | `'warning' \| 'error' \| 'success' \| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |
| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |
| i18n |  | Enables updating internal string values for internationalization. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| nveControl | `string` |  |
| showPicker |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| create | `CustomEvent` | Fires when the user confirms a value that doesn't match any existing option and the `behavior-create` attribute exists. `detail: { value }`. |
| scroll | `CustomEvent` | Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`. |
| reset | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --scroll-height | `string` |  |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --border-color | `string` | [MDN](https://mdn.dev/CSS/border-color) |
| --max-height | `string` | [MDN](https://mdn.dev/CSS/max-height) |
| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-control

Wraps a form input with its associated label and validation messages, managing layout and accessibility associations.

### Example

```html
<nve-control>
  <label>label</label>
  <input />
  <nve-control-message>message</nve-control-message>
</nve-control>
```

### Import

```javascript
import '@nvidia-elements/core/forms/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input element |
| label | `string` | Label element |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| status | `'warning' \| 'error' \| 'success' \| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |
| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |
| i18n |  | Enables updating internal string values for internationalization. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| nveControl | `string` |  |
| reset |  | Resets control value to initial attribute value and clears any active validation rules. |
| showPicker |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| reset | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-control-group

Groups many related form controls under a shared label and validation context for semantically linked inputs.

### Import

```javascript
import '@nvidia-elements/core/forms/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input elements |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |

## nve-control-message

Defining a Validity State on a control-message allows messages to show conditionally based on the current HTML5 validity state.

### Import

```javascript
import '@nvidia-elements/core/forms/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for content |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| status | `'warning' \| 'error' \| 'success' \| 'disabled' \| "default"` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| error | `'badInput' \| 'customError' \| 'patternMismatch' \| 'rangeOverflow' \| 'rangeUnderflow' \| 'stepMismatch' \| 'tooLong' \| 'tooShort' \| 'typeMismatch' \| 'valid' \| 'valueMissing' \| null` | Validation error code for current form control https://mdn.dev/ValidityState |
| slot | `string` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |

## nve-copy-button

A copy button is a button that easily enables the copy to clipboard pattern.

### Example

```html
<nve-copy-button value="hello" aria-label="copy value" behavior-copy></nve-copy-button>
```

### Import

```javascript
import '@nvidia-elements/core/copy-button/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default |
| icon | `string` | slot for custom icon |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| i18n |  | Enables updating internal string values for internationalization. |
| behaviorCopy (behavior-copy) | `boolean` | Determines if the copy button should auto write to clipboard by the trigger. |
| value | `string` | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |
| container | `'flat' \| 'inline' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inline` Element container reduces to fit within inline content such as a block of text. |
| size | `'sm' \| 'md' \| 'lg' \| "default"` | Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. |
| interaction | `'emphasis' \| 'destructive'` | The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors. - `emphasis` Shows the interaction targets emphasis or highlighting primary actions. - `destructive` Shows the interaction targets destructive actions such as deleting or removing. |
| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. |
| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |
| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |
| form | `HTMLFormElement \| null \| string` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |
| name | `string` | The name of the button, submitted as a pair with the button's value as part of the form data, when that button submits the form. https://mdn.dev/HTML/Element/button#attr-name |
| type | `'button' \| 'submit' \| 'reset'` | Defines the button behavior when associated within an <form> element. https://mdn.dev/HTML/Element/button#attr-type |
| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. |
| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. |
| current | `'page' \| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. |
| popoverTargetElement | `HTMLElement \| null` | Establishing a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |
| popovertarget | `string` | The idref of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |
| popoverTargetAction (popovertargetaction) | `'show' \| 'hide' \| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |
| commandForElement | `HTMLElement \| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |
| commandfor | `string \| null` | The idref of the element that receives the command. https://mdn.dev/Invoker_Commands_API |
| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |
| interestForElement | `HTMLElement \| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |
| interestfor | `string \| null` | The idref of the element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --line-height | `string` | [MDN](https://mdn.dev/CSS/line-height) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --text-decoration | `string` | [MDN](https://mdn.dev/CSS/text-decoration) |
| --text-align | `string` | [MDN](https://mdn.dev/CSS/text-align) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |

## nve-date

A date picker is a control that enables users to choose a date value.

### Example

```html
<nve-date>
  <label>date</label>
  <input type="date" />
  <nve-control-message>message</nve-control-message>
</nve-date>
```

### Import

```javascript
import '@nvidia-elements/core/date/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input element |
| label | `string` | Label element |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| container | `'flat' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |
| status | `'warning' \| 'error' \| 'success' \| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |
| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |
| i18n |  | Enables updating internal string values for internationalization. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| nveControl | `string` |  |
| reset |  | Resets control value to initial attribute value and clears any active validation rules. |
| showPicker |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| reset | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |
| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-datetime

A datetime picker is a control that enables users to choose a datetime value.

### Example

```html
<nve-datetime>
  <label>date</label>
  <input type="datetime-local" />
  <nve-control-message>message</nve-control-message>
</nve-datetime>
```

### Import

```javascript
import '@nvidia-elements/core/datetime/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input element |
| label | `string` | Label element |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| container | `'flat' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |
| status | `'warning' \| 'error' \| 'success' \| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |
| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |
| i18n |  | Enables updating internal string values for internationalization. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| nveControl | `string` |  |
| reset |  | Resets control value to initial attribute value and clears any active validation rules. |
| showPicker |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| reset | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |
| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-dialog

Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)

### Example

```html
<nve-button popovertarget="dialog">button</nve-button>
<nve-dialog id="dialog" modal closable>
  <nve-dialog-header>
    <h3 nve-text="heading semibold">title</h3>
  </nve-dialog-header>
  <p nve-text="body">some text content in a closable dialog</p>
</nve-dialog>
```

### Import

```javascript
import '@nvidia-elements/core/dialog/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default content slot |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| position | `'center' \| 'top' \| 'bottom' \| 'left' \| 'right'` | Determines the position of an element along both inline and block axis. [MDN](https://mdn.dev/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) - `center` Centers the popover directly over the anchor element. - `top` Positions the popover above the anchor element. - `bottom` Positions the popover below the anchor element. - `left` Positions the popover to the left side of the anchor element. - `right` Positions the popover to the right side of the anchor element. |
| alignment | `'start' \| 'end' \| 'center'` | Determines the alignment of the popover relative to the provided anchor element. - `start` Aligns the popover to the beginning edge of the anchor for left or top alignment. - `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment. - `center` Centers the popover along the anchor's edge for balanced positioning. |
| size | `'sm' \| 'md' \| 'lg' \| "default"` | Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. |
| closable | `boolean` | Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. |
| modal | `boolean` | Determines if a dialog should have a modal backdrop that visually overlays the UI. |
| anchor | `string \| HTMLElement` | Provides the element that the popover should position relative to. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference. |
| i18n |  | Enables updating internal string values for internationalization. |
| typeNativePopoverController |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| beforetoggle | `CustomEvent` | Dispatched on a popover just before showing or hiding. [MDN](https://mdn.dev/HTMLElement/beforetoggle_event) |
| toggle | `CustomEvent` | Dispatched on a popover element just after showing or hiding. [MDN](https://mdn.dev/HTMLElement/toggle_event) |
| open | `CustomEvent` | Dispatched when the dialog opens. |
| close | `CustomEvent` | Dispatched when the dialog closes. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |
| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |
| --max-height | `string` | [MDN](https://mdn.dev/CSS/max-height) |
| --animation-duration | `string` | Duration of dialog open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |

## nve-dialog-footer

Contains the action buttons and controls at the bottom of a dialog for confirming, canceling, or navigating.

### Import

```javascript
import '@nvidia-elements/core/dialog/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for the dialog footer |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |

## nve-dialog-header

Displays the title and contextual information at the top of a dialog to orient users to the dialog's purpose.

### Import

```javascript
import '@nvidia-elements/core/dialog/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for the dialog header |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |

## nve-divider

Divider is a component that separates and distinguishes sections of content or groups of menuitems.

### Example

```html
<nve-divider></nve-divider>
```

### Import

```javascript
import '@nvidia-elements/core/divider/define.js';
```

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| orientation | `'vertical' \| 'horizontal'` | Controls the directional flow of the element's layout and interaction pattern. - `vertical` Element orients vertically with top-to-bottom flow. - `horizontal` Element orients horizontally with left-to-right flow. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --size | `string` |  |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |

## nve-dot

A visual indicator that communicates a status or notification of an associated component.

### Example

```html
<nve-dot status="starting"></nve-dot>
```

### Import

```javascript
import '@nvidia-elements/core/dot/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default text content no more than 2 characters in length |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| status | `'accent' \| 'warning' \| 'success' \| 'danger' \| 'scheduled' \| 'queued' \| 'pending' \| 'starting' \| 'running' \| 'restarting' \| 'stopping' \| 'finished' \| 'failed' \| 'unknown' \| 'ignored'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. - `scheduled` Task has a scheduled future execution at a specific time. - `queued` Task is waiting in line to begin after other tasks complete. - `pending` Task is awaiting approval, user input, or external conditions before proceeding. - `starting` Task is initializing and preparing to begin active execution. - `running` Task is actively executing and making progress. - `restarting` Task restarts after an interruption or reset. - `stopping` Task is gracefully shutting down and completing cleanup operations. - `finished` Task has completed successfully with the expected outcome. - `failed` Task encountered an error and did not complete as intended. - `unknown` Task status remains unknown or unavailable. - `ignored` Task was intentionally skipped or excluded from execution. |
| size | `'sm' \| 'md' \| 'lg'` | Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |

## nve-drawer

Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings). Or use [Panel](./docs/elements/panel/) inline as its content couples with or closely relates to the content on the page (details, extra actions/options). [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)

### Example

```html
<nve-drawer id="drawer" closable modal>
  <nve-drawer-header>
    <h3 nve-text="heading semibold sm">Drawer Header</h3>
  </nve-drawer-header>
  <nve-drawer-content>
    <p nve-text="body">drawer content</p>
  </nve-drawer-content>
  <nve-drawer-footer>
    <p nve-text="body">drawer footer</p>
  </nve-drawer-footer>
</nve-drawer>
<nve-button popovertarget="drawer">button</nve-button>
```

### Import

```javascript
import '@nvidia-elements/core/drawer/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default content slot |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| position | `'left' \| 'right' \| 'bottom' \| 'top'` | Determines the position of an element along both inline and block axis. [MDN](https://mdn.dev/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) |
| size | `'sm' \| 'md' \| 'lg' \| "default"` | Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. |
| closable | `boolean` | Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. |
| modal | `boolean` | Determines if a drawer should have a modal backdrop that visually overlays the UI. |
| anchor | `string \| HTMLElement` | Provides the element that the popover should position relative to. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference. |
| inline | `boolean` | Create a inline layout effect while retaining the a11y characteristics and top layer behavior (light dismiss, focus trap, non interactive background) https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ |
| i18n |  | Enables updating internal string values for internationalization. |
| typeNativePopoverController |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| beforetoggle | `CustomEvent` | Dispatched on a popover just before showing or hiding. [MDN](https://mdn.dev/HTMLElement/beforetoggle_event) |
| toggle | `CustomEvent` | Dispatched on a popover element just after showing or hiding. [MDN](https://mdn.dev/HTMLElement/toggle_event) |
| open | `CustomEvent` | Dispatched when the drawer opens. |
| close | `CustomEvent` | Dispatched when the drawer closes. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --top | `string` | [MDN](https://mdn.dev/CSS/top) |
| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --animation-duration | `string` | Duration of drawer open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |

## nve-drawer-content

Contains the scrollable main body content within a drawer panel.

### Import

```javascript
import '@nvidia-elements/core/drawer/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for the drawer content |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |

## nve-drawer-footer

Provides a fixed action area at the bottom of a drawer for primary actions such as save or cancel.

### Import

```javascript
import '@nvidia-elements/core/drawer/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for the drawer footer |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |

## nve-drawer-header

Displays the title and optional close control at the top of a drawer to identify its purpose.

### Import

```javascript
import '@nvidia-elements/core/drawer/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for the drawer header |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |
| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |

## nve-dropdown

Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)

### Example

```html
<nve-button popovertarget="dropdown">button</nve-button>
<nve-dropdown id="dropdown">dropdown content</nve-dropdown>
```

### Import

```javascript
import '@nvidia-elements/core/dropdown/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for dropdown content |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| anchor | `string \| HTMLElement` | Provides the element that the popover should position relative to. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference. |
| position | `'center' \| 'top' \| 'bottom' \| 'left' \| 'right'` | Determines the position of an element along both inline and block axis. [MDN](https://mdn.dev/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) - `center` Centers the popover directly over the anchor element. - `top` Positions the popover above the anchor element. - `bottom` Positions the popover below the anchor element. - `left` Positions the popover to the left side of the anchor element. - `right` Positions the popover to the right side of the anchor element. |
| alignment | `'start' \| 'end' \| 'center'` | Determines the alignment of the popover relative to the provided anchor element. - `start` Aligns the popover to the beginning edge of the anchor for left or top alignment. - `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment. - `center` Centers the popover along the anchor's edge for balanced positioning. |
| closable | `boolean` | Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. |
| arrow | `boolean` | Determines if an arrow renders. |
| popoverArrow | `HTMLElement` |  |
| typeNativePopoverController |  |  |
| i18n |  | Enables updating internal string values for internationalization. |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| beforetoggle | `CustomEvent` | Dispatched on a popover just before showing or hiding. [MDN](https://mdn.dev/HTMLElement/beforetoggle_event) |
| toggle | `CustomEvent` | Dispatched on a popover element just after showing or hiding. [MDN](https://mdn.dev/HTMLElement/toggle_event) |
| open | `CustomEvent` | Dispatched when the dropdown opens. |
| close | `CustomEvent` | Dispatched when the dropdown closes. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --arrow-transform | `string` | Transform applied to the popover arrow |
| --animation-duration | `string` | Duration of dropdown open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |

## nve-dropdown-footer

Provides a fixed area at the bottom of a dropdown menu for extra actions or supplementary controls.

### Import

```javascript
import '@nvidia-elements/core/dropdown/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for the dropdown footer |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |

## nve-dropdown-group

A Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience

### Example

```html
<nve-button popovertarget="menu-1">menu</nve-button>
<nve-dropdown-group>
  <nve-dropdown id="menu-1">
    <nve-menu>
      <nve-menu-item popovertarget="menu-2">
        item 1-1 <nve-icon name="caret" direction="right" size="sm" slot="suffix"></nve-icon>
      </nve-menu-item>
      <nve-menu-item>item 1-2</nve-menu-item>
      <nve-menu-item>item 1-3</nve-menu-item>
    </nve-menu>
  </nve-dropdown>
  <nve-dropdown id="menu-2" position="right">
    <nve-menu>
      <nve-menu-item>item 2-1</nve-menu-item>
      <nve-menu-item popovertarget="menu-3">
        item 2-2 <nve-icon name="caret" direction="right" size="sm" slot="suffix"></nve-icon>
      </nve-menu-item>
      <nve-menu-item>item 2-3</nve-menu-item>
    </nve-menu>
  </nve-dropdown>
  <nve-dropdown id="menu-3" position="right">
    <nve-menu>
      <nve-menu-item>item 3-1</nve-menu-item>
      <nve-menu-item>item 3-2</nve-menu-item>
      <nve-menu-item>item 3-3</nve-menu-item>
    </nve-menu>
  </nve-dropdown>
</nve-dropdown-group>
```

### Import

```javascript
import '@nvidia-elements/core/dropdown-group/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for dropdown content |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| dropdowns | `Dropdown[]` |  |
| close |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| open | `CustomEvent` | Dispatched when a dropdown in the group opens |
| close | `CustomEvent` | Dispatched when a dropdown in the group closes |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --nve-dropdown-group-spacing | `string` |  |
| --nve-dropdown-group-transition | `string` |  |
| --arrow-transform | `string` | Transform applied to the popover arrow |

## nve-dropdown-header

Displays a title or contextual label at the top of a dropdown menu to categorize its contents.

### Import

```javascript
import '@nvidia-elements/core/dropdown/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for the dropdown header |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |

## nve-dropzone

A dropzone form control that enables users to drag and drop files onto it.

### Example

```html
<nve-dropzone name="files" style="--min-height: 200px"></nve-dropzone>
```

### Import

```javascript
import '@nvidia-elements/core/dropzone/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | use only when custom messaging requires it |
| icon | `string` | default slot for icon |
| content | `string` | default slot for content |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| accept | `string` |  |
| maxFileSize (max-file-size) | `number` |  |
| i18n |  | Enables updating internal string values for internationalization. |
| formResetCallback |  |  |
| value | `array` | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| change | `CustomEvent` | Dispatched when the value has changed (files located in event.target) |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --border-color | `string` | [MDN](https://mdn.dev/CSS/border-color) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |

## nve-file

A file picker is a control that enables users to choose a file value.

### Example

```html
<nve-file>
  <label>file</label>
  <input type="file" />
  <nve-control-message>message</nve-control-message>
</nve-file>
```

### Import

```javascript
import '@nvidia-elements/core/file/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input element |
| label | `string` | Label element |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| status | `'warning' \| 'error' \| 'success' \| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |
| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |
| i18n |  | Enables updating internal string values for internationalization. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| nveControl | `string` |  |
| reset |  | Resets control value to initial attribute value and clears any active validation rules. |
| showPicker |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| reset | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --text-decoration | `string` | [MDN](https://mdn.dev/CSS/text-decoration) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-format-datetime

Formats a date/time value as localized text using the Intl.DateTimeFormat API. Renders inside a semantic time element.
Granular options (weekday, year, month, day, hour, minute, second) mirror the Intl.DateTimeFormat API. 'numeric' omits zero-padding, '2-digit' zero-pads.

### Example

```html
<nve-format-datetime date-style="long">2023-07-28T04:20:17.434Z</nve-format-datetime>
```

### Import

```javascript
import '@nvidia-elements/core/format-datetime/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration. |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| date | `string \| "default"` | Optional date string for values supplied by JavaScript or bound data. By default, the component formats the element's text content, which also serves as the SSR fallback. When both are present, this property takes precedence. |
| locale | `string \| "default"` | Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default. |
| weekday | `'long' \| 'short' \| 'narrow' \| "default"` | Weekday representation: 'long' \| 'short' \| 'narrow'. |
| year | `'numeric' \| '2-digit' \| "default"` | Year representation: 'numeric' \| '2-digit'. |
| month | `'numeric' \| '2-digit' \| 'long' \| 'short' \| 'narrow' \| "default"` | Month representation: 'numeric' \| '2-digit' \| 'long' \| 'short' \| 'narrow'. |
| day | `'numeric' \| '2-digit' \| "default"` | Day representation: 'numeric' \| '2-digit'. |
| hour | `'numeric' \| '2-digit' \| "default"` | Hour representation: 'numeric' \| '2-digit'. |
| minute | `'numeric' \| '2-digit' \| "default"` | Minute representation: 'numeric' \| '2-digit'. |
| second | `'numeric' \| '2-digit' \| "default"` | Second representation: 'numeric' \| '2-digit'. |
| dateStyle (date-style) | `'full' \| 'long' \| 'medium' \| 'short' \| "default"` | Preset date formatting style: 'full' \| 'long' \| 'medium' \| 'short'. Preset styles take precedence over granular date and time part options. |
| timeStyle (time-style) | `'full' \| 'long' \| 'medium' \| 'short' \| "default"` | Preset time formatting style: 'full' \| 'long' \| 'medium' \| 'short'. Preset styles take precedence over granular date and time part options. |
| timeZoneName (time-zone-name) | `'long' \| 'short' \| "default"` | Time zone name display: 'long' \| 'short'. Use it with granular options only; preset styles ignore it. |
| timeZone (time-zone) | `string \| "default"` | IANA time zone identifier (such as 'America/New_York', 'UTC'). |

## nve-format-number

A localized number formatter for currencies, percentages, units, and compact notation, backed by Intl.NumberFormat.
Provide a `currency` attribute when `formatStyle` is `currency`, and a `unit` attribute when `formatStyle` is `unit`.

### Example

```html
<nve-format-number>1234567.89</nve-format-number>
```

### Import

```javascript
import '@nvidia-elements/core/format-number/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Numeric string to format (such as 1234567 or 1234.56). Serves as fallback before hydration. |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| number | `string \| "default"` | Optional numeric string for values supplied by JavaScript or bound data. By default, the component formats the element's text content, which also serves as the SSR fallback. When both are present, this property takes precedence. |
| locale | `string \| "default"` | Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default. |
| formatStyle (format-style) | `'decimal' \| 'currency' \| 'percent' \| 'unit'` | Formatting style: 'decimal' \| 'currency' \| 'percent' \| 'unit'. |
| currency | `string \| "default"` | ISO 4217 currency code (such as USD or EUR). Required when formatStyle is currency. |
| currencySign (currency-sign) | `'standard' \| 'accounting' \| "default"` | Currency sign style: 'standard' \| 'accounting'. |
| currencyDisplay (currency-display) | `'symbol' \| 'code' \| 'name' \| 'narrowSymbol' \| "default"` | Currency display style: 'symbol' \| 'code' \| 'name' \| 'narrowSymbol'. |
| unit | `string \| "default"` | Unit identifier (such as kilometer or byte). Required when formatStyle is unit. |
| unitDisplay (unit-display) | `'short' \| 'long' \| 'narrow' \| "default"` | Unit display style: 'short' \| 'long' \| 'narrow'. |
| notation | `'standard' \| 'scientific' \| 'engineering' \| 'compact' \| "default"` | Number notation: 'standard' \| 'scientific' \| 'engineering' \| 'compact'. |
| compactDisplay (compact-display) | `'short' \| 'long' \| "default"` | Compact notation display: 'short' \| 'long'. Only applies when notation is compact. |
| signDisplay (sign-display) | `'auto' \| 'never' \| 'always' \| 'exceptZero' \| "default"` | Sign display: 'auto' \| 'never' \| 'always' \| 'exceptZero'. |
| useGrouping (use-grouping) | `string \| "default"` | Grouping separators: 'auto' \| 'always' \| 'min2' \| 'true' \| 'false'. |
| minimumFractionDigits (minimum-fraction-digits) | `number \| "default"` | Pad fraction output to at least this many digits (0-20). |
| maximumFractionDigits (maximum-fraction-digits) | `number \| "default"` | Round fraction output to at most this many digits (0-20). |
| minimumIntegerDigits (minimum-integer-digits) | `number \| "default"` | Pad integer output to at least this many digits (1-21). |

## nve-format-relative-time

Formats a date/time value as localized relative text using the Intl.RelativeTimeFormat API. Renders inside a semantic time element.
Options mirror the Intl.RelativeTimeFormat API. When unit is 'auto', the component selects the best unit based on the time difference.

### Example

```html
<div nve-layout="column gap:sm">
  <nve-format-relative-time>2020-01-15T12:00:00.000Z</nve-format-relative-time>
  <nve-format-relative-time>2024-06-15T12:00:00.000Z</nve-format-relative-time>
  <nve-format-relative-time>2025-12-01T12:00:00.000Z</nve-format-relative-time>
</div>
```

### Import

```javascript
import '@nvidia-elements/core/format-relative-time/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration. |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| date | `string \| "default"` | Optional date string for values supplied by JavaScript or bound data. By default, the component formats the element's text content, which also serves as the SSR fallback. When both are present, this property takes precedence. |
| locale | `string \| "default"` | Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default. |
| numeric | `'always' \| 'auto'` | Numeric formatting: 'always' \| 'auto'. When 'auto', enables natural language forms such as 'yesterday' instead of '1 day ago'. |
| formatStyle (format-style) | `'long' \| 'short' \| 'narrow'` | Formatting length: 'long' \| 'short' \| 'narrow'. Controls verbosity (such as '3 days ago' vs '3d ago'). Maps to Intl.RelativeTimeFormat style option. |
| unit | `'second' \| 'minute' \| 'hour' \| 'day' \| 'week' \| 'month' \| 'year' \| 'auto'` | Time unit: 'second' \| 'minute' \| 'hour' \| 'day' \| 'week' \| 'month' \| 'year' \| 'auto'. Use 'auto' to let the component select the most appropriate unit based on the time difference. |
| sync | `boolean` | When present, auto-updates the displayed relative time at appropriate intervals. |

## nve-grid

A versatile table/datagrid component with built-in keyboard navigation for displaying and interacting with structured data. Use it for anything from simple read-only tables to fully interactive, spreadsheet experiences.

### Example

```html
<nve-grid>
  <nve-grid-header>
    <nve-grid-column>column 0</nve-grid-column><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>column 4</nve-grid-column>
  </nve-grid-header>

  <nve-grid-row>
    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell
    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>
  </nve-grid-row>

  <nve-grid-row>
    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell
    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>
  </nve-grid-row>

  <nve-grid-row>
    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell
    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>
  </nve-grid-row>

  <nve-grid-row>
    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell
    ><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>
  </nve-grid-row>

  <nve-grid-row>
    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell
    ><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>
  </nve-grid-row>

  <nve-grid-row>
    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell
    ><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>
  </nve-grid-row>

  <nve-grid-row>
    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell
    ><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>
  </nve-grid-row>

  <nve-grid-row>
    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell
    ><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>
  </nve-grid-row>

  <nve-grid-row>
    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell
    ><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>
  </nve-grid-row>

  <nve-grid-row>
    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell
    ><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>
  </nve-grid-row>
</nve-grid>
```

### Import

```javascript
import '@nvidia-elements/core/grid/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for content |
| footer | `string` | slot for grid-footer or toolbar |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| container | `'flat' \| 'full' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `full` Element container optimizes for filling its container bounds. |
| stripe | `boolean` | Determine style variant stripe rows |
| scrollTo |  | Scroll to a specific position in the grid. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --row-height | `string` | fixed height of each row |
| --scroll-height | `string` | height of the scrollable area |

## nve-grid-cell

Represents an individual data cell within a grid row, displaying content aligned to its parent column.

### Import

```javascript
import '@nvidia-elements/core/grid/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for content |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |
| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --border-left | `string` | [MDN](https://mdn.dev/CSS/border-left) |
| --border-right | `string` | [MDN](https://mdn.dev/CSS/border-right) |
| --justify-content | `string` | [MDN](https://mdn.dev/CSS/justify-content) |

## nve-grid-column

Defines a column header within a grid, specifying the column's label, width, and alignment for all cells beneath it.

### Import

```javascript
import '@nvidia-elements/core/grid/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for content |
| actions | `string` | slot for column actions |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| width | `string` | Only set a fixed px width when you know the grid width. Most cases this should remain unset. If the total width of all columns is less than the grid width then the last column fills the remaining space. By default column widths are evenly divided unless width is explicitly provided. |
| position | `'fixed' \| 'sticky' \| ''` | Determines the position of an element along both inline and block axis. [MDN](https://mdn.dev/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) |
| columnAlign (column-align) | `'start' \| 'center' \| 'end'` | Control the content alignment within a given column. |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| nve-grid-column-resize | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |
| --justify-content | `string` | [MDN](https://mdn.dev/CSS/justify-content) |
| --border-left | `string` | [MDN](https://mdn.dev/CSS/border-left) |
| --border-right | `string` | [MDN](https://mdn.dev/CSS/border-right) |

## nve-grid-footer

Grid footer displays contextual information or user actions such as pagination.

### Import

```javascript
import '@nvidia-elements/core/grid/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for content |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| slot | `string` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-grid-header

Contains the column headers of a grid, managing column widths and providing structural context for the data rows below.

### Import

```javascript
import '@nvidia-elements/core/grid/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for `nve-grid-column` |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |

## nve-grid-placeholder

Placeholder displays a message while data loads for the grid or shows empty states for datasets.

### Import

```javascript
import '@nvidia-elements/core/grid/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for content |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |

## nve-grid-row

Represents a horizontal row of data cells within a grid, supporting selection and interactive states.

### Import

```javascript
import '@nvidia-elements/core/grid/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for `nve-grid-cell` |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |

## nve-icon

An icon is a graphic symbol designed to visually show the purpose of an interface element.

### Example

```html
<nve-icon name="person"></nve-icon>
```

### Import

```javascript
import '@nvidia-elements/core/icon/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Custom SVG content to override the named icon |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| status | `'warning' \| 'danger' \| 'success' \| 'accent' \| "default"` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. - `success` Represents positive outcomes, confirmations, or constructive actions. - `accent` Highlights important actions or draws attention to primary interactive elements. |
| size | `'sm' \| 'md' \| 'lg' \| 'xs' \| 'xl' \| "default"` | Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. |
| direction | `'up' \| 'down' \| 'left' \| 'right' \| "default"` | Sets the direction of the icon. Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions) |
| name | `placeholder` \| `caret` \| `person` \| `menu` \| `cancel` \| `gear` \| `chevron` \| `logout` \| `copy` \| `more-actions` \| `add` \| `arrow` \| `delete` \| `download` \| `search` \| `split-vertical` \| `sparkles` \| `branch` \| `refresh` \| `double-chevron` ... (use `icons_list` tool for full list) | The name of the icon SVG sprite to render. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-icon-button

An icon button is a button that displays only an icon without a visual label.

### Example

```html
<nve-icon-button icon-name="menu"></nve-icon-button>
```

### Import

```javascript
import '@nvidia-elements/core/icon-button/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for custom icons |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| iconName (icon-name) | `'placeholder' \| 'caret' \| 'person' \| 'menu' \| 'cancel' \| 'gear' \| 'chevron' \| 'logout' \| 'copy' \| 'more-actions' \| 'add' \| 'arrow' \| 'delete' \| 'download' \| 'search' \| 'split-vertical' \| 'sparkles' \| 'branch' \| 'refresh' \| 'double-chevron' \| 'academic-cap' \| 'add-asset' \| 'add-comment' \| 'add-grid' \| 'add-user' \| 'ancestors' \| 'archive' \| 'arrow-angle' \| 'arrow-both' \| 'arrow-cycle' \| 'arrow-path-rounded-square' \| 'arrow-stop' \| 'at-symbol' \| 'backspace' \| 'bar-pill-stack' \| 'bars-3' \| 'bars-3-bottom-left' \| 'bars-3-bottom-right' \| 'bars-3-center-left' \| 'bars-4' \| 'beaker' \| 'bell' \| 'bell-slash' \| 'bell-stroke' \| 'bold' \| 'book' \| 'bookmark' \| 'bookmark-stroke' \| 'bounding-box' \| 'briefcase' \| 'broadcast' \| 'browser' \| 'bug' \| 'calendar' \| 'camera' \| 'carets-closed-square' \| 'carousel' \| 'category-list' \| 'chart-bar' \| 'chat-bubble' \| 'chat-bubbles' \| 'check' \| 'check-badge' \| 'checklist' \| 'checkmark-circle' \| 'chip' \| 'circle' \| 'circle-angled-line' \| 'circle-dash' \| 'circle-dot' \| 'circle-dot-arrows' \| 'circle-half' \| 'circle-rule' \| 'circle-tick' \| 'clipboard' \| 'clock' \| 'clock-circle-arrow' \| 'cloud' \| 'cloud-download' \| 'cloud-upload' \| 'code' \| 'collapse-all' \| 'collapse-details' \| 'color-palette' \| 'columns' \| 'compare' \| 'computer' \| 'connect-node' \| 'connected-blocks' \| 'cross-hairs' \| 'cursor-rays' \| 'cursor-ripples' \| 'data-management' \| 'delete-node' \| 'doc-checkmark' \| 'dock-bottom' \| 'dock-none' \| 'dock-side' \| 'document' \| 'document-clipboard' \| 'dot' \| 'dot-stroke' \| 'drag' \| 'dropper' \| 'duplicate' \| 'edit' \| 'ellipses' \| 'envelope' \| 'exclamation-circle' \| 'exclamation-mark' \| 'exclamation-triangle' \| 'expand-all' \| 'expand-details' \| 'expression' \| 'eye' \| 'eye-hidden' \| 'face-frown' \| 'face-smile' \| 'fast-forward' \| 'fast-forward-10' \| 'film' \| 'filter' \| 'filter-stroke' \| 'flag' \| 'flag-stroke' \| 'fold' \| 'folder' \| 'fork' \| 'globe' \| 'globe-alt-stroke' \| 'group' \| 'group-boxes' \| 'hand' \| 'hash' \| 'heading' \| 'home' \| 'horizontal-rule' \| 'hourglass' \| 'hourglass-end' \| 'hourglass-mid' \| 'hourglass-start' \| 'identification' \| 'image' \| 'inbox' \| 'infinity' \| 'information-circle-stroke' \| 'inspect' \| 'italic' \| 'key' \| 'keyboard' \| 'laptop-phone' \| 'layers' \| 'lifebuoy' \| 'lightbulb' \| 'lightning-bolt' \| 'link' \| 'list-ordered' \| 'list-unordered' \| 'lock' \| 'login' \| 'looping' \| 'looping-off' \| 'map' \| 'map-drives' \| 'map-pin' \| 'markdown' \| 'maximize' \| 'megaphone' \| 'merge' \| 'meter' \| 'minimize' \| 'minus' \| 'minus-circle' \| 'moon' \| 'multiselect' \| 'music-note' \| 'newspaper' \| 'not-allowed' \| 'numbers' \| 'office-building' \| 'outline' \| 'paper-airplane' \| 'paper-clip' \| 'pause' \| 'pencil-square' \| 'person-2' \| 'person-3' \| 'person-circle' \| 'phone' \| 'picture-in-picture' \| 'pie-chart' \| 'pin' \| 'pizza-slice' \| 'play' \| 'plug' \| 'plus-circle' \| 'plus-minus' \| 'pointer' \| 'pointer-stroke' \| 'priority-high' \| 'priority-low' \| 'priority-medium' \| 'projector' \| 'pull-close' \| 'pull-draft' \| 'pull-open' \| 'pulse' \| 'puzzle-piece' \| 'question-mark-circle' \| 'question-mark-circle-stroke' \| 'rectangle-group' \| 'rectangle-stack-horizontal' \| 'rectangle-stack-vertical' \| 'redo' \| 'reply' \| 'rewind' \| 'rewind-10' \| 'rocketship' \| 'running' \| 'scale' \| 'scissors' \| 'sensor' \| 'server' \| 'server-stack' \| 'shapes' \| 'share' \| 'signal' \| 'signal-slash' \| 'signpost' \| 'sort-ascending' \| 'sort-descending' \| 'soundwave' \| 'split-horizontal' \| 'split-none' \| 'star' \| 'star-half' \| 'star-stroke' \| 'start' \| 'status-offline' \| 'status-online' \| 'stop' \| 'stop-sign' \| 'stopwatch' \| 'strikethrough' \| 'sun' \| 'swatch' \| 'switch' \| 'switch-apps' \| 'table' \| 'tag' \| 'task' \| 'telescope' \| 'template' \| 'terminal' \| 'thumb' \| 'thumb-stroke' \| 'traffic-cone' \| 'transparent-box' \| 'trend-down' \| 'trend-up' \| 'trophy' \| 'truck' \| 'typography' \| 'undo' \| 'unlock' \| 'upload' \| 'video-camera' \| 'view-as-grid' \| 'volume' \| 'volume-muted' \| 'wifi' \| 'wrench' \| 'x-circle' \| 'zoom-in' \| 'zoom-out'` | Sets the icon name, which determines which icon to display. |
| direction | `'up' \| 'down' \| 'left' \| 'right'` | Sets the direction of the icon. Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions) |
| size | `'sm' \| 'md' \| 'lg' \| "default"` | Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. |
| container | `'flat' \| 'inline' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inline` Element container reduces to fit within inline content such as a block of text. |
| interaction | `'emphasis' \| 'destructive'` | The Interaction type provides a way to show the intent of an interactive element. This can help users quickly understand what each interaction does and reduce the potential for confusion or errors. - `emphasis` Shows the interaction targets emphasis or highlighting primary actions. - `destructive` Shows the interaction targets destructive actions such as deleting or removing. |
| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. |
| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |
| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |
| form | `HTMLFormElement \| null \| string` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |
| name | `string` ... (use `icons_list` tool for full list) | The name of the button, submitted as a pair with the button's value as part of the form data, when that button submits the form. https://mdn.dev/HTML/Element/button#attr-name |
| value | `string` | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |
| type | `'button' \| 'submit' \| 'reset'` | Defines the button behavior when associated within an <form> element. https://mdn.dev/HTML/Element/button#attr-type |
| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. |
| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. |
| current | `'page' \| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. |
| popoverTargetElement | `HTMLElement \| null` | Establishing a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |
| popovertarget | `string` | The idref of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |
| popoverTargetAction (popovertargetaction) | `'show' \| 'hide' \| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |
| commandForElement | `HTMLElement \| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |
| commandfor | `string \| null` | The idref of the element that receives the command. https://mdn.dev/Invoker_Commands_API |
| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |
| interestForElement | `HTMLElement \| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |
| interestfor | `string \| null` | The idref of the element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --line-height | `string` | [MDN](https://mdn.dev/CSS/line-height) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --text-decoration | `string` | [MDN](https://mdn.dev/CSS/text-decoration) |
| --text-align | `string` | [MDN](https://mdn.dev/CSS/text-align) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |
| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |

## nve-input

An input is a control that enables users to enter text.

### Example

```html
<nve-input>
  <label>label</label>
  <input type="text" />
  <nve-control-message>message</nve-control-message>
</nve-input>
```

### Import

```javascript
import '@nvidia-elements/core/input/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input element |
| label | `string` | Label element |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| container | `'flat' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |
| rounded | `boolean` | Sets the rounded visual style of the input. |
| status | `'warning' \| 'error' \| 'success' \| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |
| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |
| i18n |  | Enables updating internal string values for internationalization. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| nveControl | `string` |  |
| reset |  | Resets control value to initial attribute value and clears any active validation rules. |
| showPicker |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| reset | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |
| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |
| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |
| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-input-group

Visually combines many related input controls into a unified composite field with shared styling.

### Example

```html
<nve-input-group>
  <label>domain</label>
  <nve-select style="width: 130px">
    <select aria-label="protocol">
      <option>https://</option>
      <option>http://</option>
    </select>
  </nve-select>
  <nve-input>
    <input placeholder="example" type="url" aria-label="host" />
    <nve-button container="flat" readonly>.com</nve-button>
  </nve-input>
  <nve-control-message>host: 123456</nve-control-message>
</nve-input-group>
```

### Import

```javascript
import '@nvidia-elements/core/input/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input elements |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |

## nve-logo

A visual indicator for a brand or application.

### Example

```html
<nve-logo aria-label="NVIDIA">NV</nve-logo>
```

### Import

```javascript
import '@nvidia-elements/core/logo/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for content |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| color | `'red-cardinal' \| 'gray-slate' \| 'gray-denim' \| 'blue-indigo' \| 'blue-cobalt' \| 'blue-sky' \| 'teal-cyan' \| 'green-mint' \| 'teal-seafoam' \| 'green-grass' \| 'yellow-amber' \| 'orange-pumpkin' \| 'red-tomato' \| 'pink-magenta' \| 'purple-plum' \| 'purple-violet' \| 'purple-lavender' \| 'pink-rose' \| 'green-jade' \| 'lime-pear' \| 'yellow-nova' \| 'brand-green'` | Defines a base color from the theme color palette |
| size | `'sm' \| 'md' \| 'lg' \| "default"` | Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |

## nve-menu

A menu offers a list of choices to the user, such as a set of actions or functions. Choosing an item in a menu typically opens a sub menu, or invokes a command.

### Example

```html
<nve-menu>
  <nve-menu-item>item 1</nve-menu-item>
  <nve-menu-item>item 2</nve-menu-item>
  <nve-menu-item>item 3</nve-menu-item>
  <nve-menu-item>item 4</nve-menu-item>
</nve-menu>
```

### Import

```javascript
import '@nvidia-elements/core/menu/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for `nve-menu-item` |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| items | `MenuItem[]` |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| scroll | `CustomEvent` | Fires when the user scrolls the menu list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |
| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |
| --max-height | `string` | [MDN](https://mdn.dev/CSS/max-height) |

## nve-menu-item

Represents a selectable option within a menu, providing an interactive button for navigation or actions.

### Import

```javascript
import '@nvidia-elements/core/menu/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for content |
| suffix | `string` | slot for suffix icon |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| status | `'danger'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. |
| type | `'button' \| 'submit' \| 'reset'` | Defines the button behavior when associated within an <form> element. https://mdn.dev/HTML/Element/button#attr-type |
| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. |
| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |
| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |
| form | `HTMLFormElement \| null \| string` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |
| name | `string` | The name of the button, submitted as a pair with the button's value as part of the form data, when that button submits the form. https://mdn.dev/HTML/Element/button#attr-name |
| value | `string` | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |
| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. |
| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. |
| current | `'page' \| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. |
| popoverTargetElement | `HTMLElement \| null` | Establishing a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |
| popovertarget | `string` | The idref of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |
| popoverTargetAction (popovertargetaction) | `'show' \| 'hide' \| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |
| commandForElement | `HTMLElement \| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |
| commandfor | `string \| null` | The idref of the element that receives the command. https://mdn.dev/Invoker_Commands_API |
| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |
| interestForElement | `HTMLElement \| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |
| interestfor | `string \| null` | The idref of the element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --border-background | `string` |  |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |
| --line-height | `string` | [MDN](https://mdn.dev/CSS/line-height) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --opacity | `string` | [MDN](https://mdn.dev/CSS/opacity) |
| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |

## nve-month

A month picker is a control that enables users to choose a month value.

### Example

```html
<nve-month>
  <label>label</label>
  <input type="month" />
  <nve-control-message>message</nve-control-message>
</nve-month>
```

### Import

```javascript
import '@nvidia-elements/core/month/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input element |
| label | `string` | Label element |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| container | `'flat' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |
| status | `'warning' \| 'error' \| 'success' \| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |
| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |
| i18n |  | Enables updating internal string values for internationalization. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| nveControl | `string` |  |
| reset |  | Resets control value to initial attribute value and clears any active validation rules. |
| showPicker |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| reset | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-notification

Displays real time updates without interrupting the user's workflow to communicate an important message or status. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)

### Example

```html
<nve-notification id="notification" position="top" close-timeout="2000">
  <h3 nve-text="label">Notification</h3>
  <p nve-text="body">some text content in a notification</p>
</nve-notification>
<nve-button popovertarget="notification">button</nve-button>
```

### Import

```javascript
import '@nvidia-elements/core/notification/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default content slot |
| icon | `string` | content slot for the status icon |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| anchor | `string \| HTMLElement` | Provides the element that the popover should position relative to. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference. |
| position | `'center' \| 'top' \| 'bottom' \| 'left' \| 'right'` | Determines the position of an element along both inline and block axis. [MDN](https://mdn.dev/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) - `center` Centers the popover directly over the anchor element. - `top` Positions the popover above the anchor element. - `bottom` Positions the popover below the anchor element. - `left` Positions the popover to the left side of the anchor element. - `right` Positions the popover to the right side of the anchor element. |
| alignment | `'start' \| 'end' \| 'center'` | Determines the alignment of the popover relative to the provided anchor element. - `start` Aligns the popover to the beginning edge of the anchor for left or top alignment. - `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment. - `center` Centers the popover along the anchor's edge for balanced positioning. |
| closable | `boolean` | Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. |
| closeTimeout (close-timeout) | `number` | Sets the automatic dismissal time in milliseconds before the element emits a `close` event. Allow ~200-250ms per word for comfortable reading. - `0` Warning or error messages requiring immediate acknowledgment. - `3000` Brief success or confirmation messages. - `7000` Standard informational messages. - `10000` Messages with actions or requiring user decision. |
| status | `'accent' \| 'warning' \| 'success' \| 'danger'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. |
| container | `'flat' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |
| i18n |  | Enables updating internal string values for internationalization. |
| typeNativePopoverController | `TypeNativePopoverController<Notification>` |  |
| hidePopover |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| close | `CustomEvent` | Dispatched when the notification closes. |
| beforetoggle | `CustomEvent` | Dispatched on a popover just before showing or hiding. [MDN](https://mdn.dev/HTMLElement/beforetoggle_event) |
| toggle | `CustomEvent` | Dispatched on a popover element just after showing or hiding. [MDN](https://mdn.dev/HTMLElement/toggle_event) |
| open | `CustomEvent` | Dispatched when the notification opens. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |
| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --status-border | `string` |  |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --status-color | `string` |  |
| --animation-duration | `string` | Duration of notification open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |

## nve-notification-group

Displays real time updates without interrupting the user's workflow to communicate an important message or status.

### Import

```javascript
import '@nvidia-elements/core/notification/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for `nve-notification` |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| anchor | `string \| HTMLElement` | Provides the element that the popover should position relative to. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference. |
| position | `'center' \| 'top' \| 'bottom' \| 'left' \| 'right'` | Determines the position of an element along both inline and block axis. [MDN](https://mdn.dev/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) - `center` Centers the popover directly over the anchor element. - `top` Positions the popover above the anchor element. - `bottom` Positions the popover below the anchor element. - `left` Positions the popover to the left side of the anchor element. - `right` Positions the popover to the right side of the anchor element. |
| alignment | `'start' \| 'end' \| 'center'` | Determines the alignment of the popover relative to the provided anchor element. - `start` Aligns the popover to the beginning edge of the anchor for left or top alignment. - `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment. - `center` Centers the popover along the anchor's edge for balanced positioning. |
| typeNativePopoverController |  |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |
| --animation-duration | `string` | Duration of notification group open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |

## nve-page

Provide a consistent page structure across the applications, ensuring a seamless user experience.

### Example

```html
<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-button selected container="flat">Link 1</nve-button>
    <nve-button container="flat">Link 2</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-page-panel slot="left" size="sm">
    <nve-page-panel-content>panel</nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column gap:lg pad:lg align:horizontal-stretch">
    <h1 nve-text="heading">main</h1>
    <p nve-text="body">page content</p>
  </main>
</nve-page>
```

### Import

```javascript
import '@nvidia-elements/core/page/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | The central content area of the page, where the primary focus of the user's attention should be. |
| header | `string` | The topmost section of the page, typically containing navigation, branding, or other global elements. |
| subheader | `string` | A secondary section below the header, often used for breadcrumbs, filters, or other contextual information. |
| left-aside | `string` | A narrow section on the left side of the page, commonly used for navigation, filters, or other secondary content. |
| left | `string` | The main content area on the left side of the page, typically containing primary navigation or features. |
| bottom | `string` | A section for extra tooling outputs such as console outputs. |
| right | `string` | The main content area on the right side of the page, typically containing secondary navigation or features. |
| right-aside | `string` | A narrow section on the right side of the page, commonly used for navigation, filters, or other secondary content. |
| subfooter | `string` | A secondary section below the main content area, often used for more information or calls to action. |
| footer | `string` | The bottommost section of the page, typically containing global elements, such as copyright information. |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| documentScroll (document-scroll) | `boolean` | Enables the page to use the document content scroll rather than its internal fixed scroll. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |
| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |

## nve-page-header

An element that appears across the top of all pages containing the application name and primary navigation.

### Example

```html
<nve-page-header>
  <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
  <h2 slot="prefix" nve-text="heading sm">Infrastructure</h2>
  <nve-button selected container="flat"><a href="#">Link 1</a></nve-button>
  <nve-button container="flat"><a href="#">Link 2</a></nve-button>
  <nve-icon-button slot="suffix" container="flat" icon-name="chat-bubble"></nve-icon-button>
  <nve-icon-button slot="suffix" container="flat" icon-name="search"></nve-icon-button>
  <nve-icon-button slot="suffix" container="flat" icon-name="switch-apps"></nve-icon-button>
  <nve-icon-button slot="suffix" interaction="emphasis" size="sm">EL</nve-icon-button>
</nve-page-header>
```

### Import

```javascript
import '@nvidia-elements/core/page-header/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | The default content slot |
| prefix | `string` | Content displayed at the start of the header |
| suffix | `string` | Content displayed at the end of the header |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | Background color of the header [MDN](https://mdn.dev/CSS/background) |
| --padding | `string` | Padding inside the header [MDN](https://mdn.dev/CSS/padding) |
| --border-bottom | `string` | Border below the header [MDN](https://mdn.dev/CSS/border-bottom) |
| --gap | `string` | Gap between the prefix, default, and suffix slots [MDN](https://mdn.dev/CSS/gap) |
| --margin-inline | `string` | left and right margin applied to the default content slot |

## nve-page-loader

Page Loader is a full-screen version of the `progress-ring` component, for use when the page should remain unusable as the loader displays.

### Example

```html
<nve-page-loader></nve-page-loader>
```

### Import

```javascript
import '@nvidia-elements/core/page-loader/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for content |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --animation-duration | `string` | Duration of page loader open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |

## nve-page-panel

Child panel for embedded panels within the page component. Typically used for left/right/bottom page slot positions.

### Import

```javascript
import '@nvidia-elements/core/page/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default content slot |
| actions | `string` | slot for action / dismiss buttons |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| size | `'sm' \| 'md' \| 'lg' \| "default"` | Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. |
| i18n |  | Enables updating internal string values for internationalization. |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| open | `CustomEvent` |  |
| close | `CustomEvent` |  |

### Invoker Commands

| name | value | description |
| ---- | ----- | ----------- |
| --open | `CommandEvent` | use to open the panel |
| --close | `CommandEvent` | use to close the panel |
| --toggle | `CommandEvent` | use to toggle the panel |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |
| --max-height | `string` | [MDN](https://mdn.dev/CSS/max-height) |
| --animation-duration | `string` | Duration of panel open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |

## nve-page-panel-content

Contains the scrollable main body content within a page panel region.

### Import

```javascript
import '@nvidia-elements/core/page/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for the page-panel content |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |

## nve-page-panel-footer

Provides a fixed action area at the bottom of a page panel for persistent controls or status information.

### Import

```javascript
import '@nvidia-elements/core/page/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for the page-panel footer |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| slot | `string` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |

## nve-page-panel-header

Displays the title and contextual controls at the top of a page panel to identify its purpose.

### Import

```javascript
import '@nvidia-elements/core/page/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for the page panel header |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| slot | `string` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |
| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |

## nve-pagination

Pagination is a control that enables users to navigate through pages of content.

### Example

```html
<nve-pagination value="1" items="100" step="10"></nve-pagination>
<script type="module">
  const pagination = document.querySelector("nve-pagination");
  pagination.addEventListener("change", (e) => console.log(e.target.value));
</script>
```

### Import

```javascript
import '@nvidia-elements/core/pagination/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for content |
| suffix-label | `string` | slot for overriding the "n of total" label when total is an approximation |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| step | `number` | The number of items per page. |
| stepSizes | `array` | The array of custom step-size. |
| items | `number` | The total number of items. |
| skippable | `boolean` | Whether the pagination is skippable to start/end. |
| disableStep (disable-step) | `boolean` | Whether the step selector has a disabled state. |
| container | `'flat' \| 'inline' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inline` Element container reduces to fit within inline content such as a block of text. |
| i18n |  | Enables updating internal string values for internationalization. |
| value | `number` | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| step-change | `CustomEvent` |  |
| last-page | `CustomEvent` | Dispatched when the last page is active |
| first-page | `CustomEvent` | Dispatched when the first page is active |
| input | `CustomEvent` | Dispatched when the value (page) has changed |
| change | `CustomEvent` | Dispatched when the value (page) has changed |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |

## nve-panel

Panel is inline container for content that couples to the content on the page (details, extra actions/options). Or [Drawer](./docs/elements/drawer/) is out of context of the rest of the page (notifications, navigations, settings).

### Example

```html
<section nve-layout="row align:space-between pad:sm">
  <div nve-theme="root">
    <nve-panel behavior-expand expanded side="left" style="width: 280px; height: 550px">
      <nve-panel-header>
        <div slot="title">Title</div>
        <div slot="subtitle"></div>
      </nve-panel-header>
      <nve-panel-content nve-layout="column gap:md">
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Release</label>
          <p nve-text="label semibold sm">RainbowBridge/08-18-2021AM/A2A</p>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Date</label>
          <p nve-text="label semibold sm">2021-08-18</p>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">State</label>
          <nve-badge status="finished">Indexed</nve-badge>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Driver</label>
          <p nve-text="label semibold sm">Kenjiro Ono</p>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Copilot</label>
          <p nve-text="label semibold sm">Kenichi Yoshii</p>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">GVS</label>
          <a href="#" nve-text="link body sm">http://testbot/testbot/view/content...</a>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Session ID</label>
          <a href="#" nve-text="link body sm">Experiment 12345</a>
        </div>
      </nve-panel-content>
    </nve-panel>
  </div>
</section>
```

### Import

```javascript
import '@nvidia-elements/core/panel/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | This is a default/unnamed slot for panel content |
| header | `string` | header element (Use `panel-header` or custom content) |
| content | `string` | content element (Use `panel-content` or custom content) |
| footer | `string` | footer element (Use `panel-footer` or custom content) |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |
| closable | `boolean` | Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. |
| behaviorExpand (behavior-expand) | `boolean` | Determines whether the panel should handle auto-closing behavior vs. defaults to off. |
| side | `'left' \| 'right'` | Sets the proper collapse icon and collapse animation, based on which side of the page the panel occupies. |
| i18n |  | Enables updating internal string values for internationalization. |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| open | `CustomEvent` | Dispatched when the panel opens. |
| close | `CustomEvent` | Dispatched when the panel closes. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |
| --panel-button-border-radius | `string` | Border radius of the panel expand/collapse button |

## nve-panel-content

Contains the main body content within a panel, providing a structured region for detailed information.

### Example

```html
<section nve-layout="row align:space-between pad:sm">
  <div nve-theme="root">
    <nve-panel behavior-expand expanded side="left" style="width: 280px; height: 550px">
      <nve-panel-header>
        <div slot="title">Title</div>
        <div slot="subtitle"></div>
      </nve-panel-header>
      <nve-panel-content nve-layout="column gap:md">
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Release</label>
          <p nve-text="label semibold sm">RainbowBridge/08-18-2021AM/A2A</p>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Date</label>
          <p nve-text="label semibold sm">2021-08-18</p>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">State</label>
          <nve-badge status="finished">Indexed</nve-badge>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Driver</label>
          <p nve-text="label semibold sm">Kenjiro Ono</p>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Copilot</label>
          <p nve-text="label semibold sm">Kenichi Yoshii</p>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">GVS</label>
          <a href="#" nve-text="link body sm">http://testbot/testbot/view/content...</a>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Session ID</label>
          <a href="#" nve-text="link body sm">Experiment 12345</a>
        </div>
      </nve-panel-content>
    </nve-panel>
  </div>
</section>
```

### Import

```javascript
import '@nvidia-elements/core/panel/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | This is a default/unnamed slot for panel content |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |

## nve-panel-footer

Provides a designated area at the bottom of a panel for actions or supplementary controls.

### Example

```html
<section nve-layout="row align:space-between pad:sm">
  <div nve-theme="root">
    <nve-panel behavior-expand expanded side="left" style="width: 280px; height: 550px">
      <nve-panel-header>
        <div slot="title">Title</div>
        <div slot="subtitle"></div>
      </nve-panel-header>
      <nve-panel-content nve-layout="column gap:md">
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Release</label>
          <p nve-text="label semibold sm">RainbowBridge/08-18-2021AM/A2A</p>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Date</label>
          <p nve-text="label semibold sm">2021-08-18</p>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">State</label>
          <nve-badge status="finished">Indexed</nve-badge>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Driver</label>
          <p nve-text="label semibold sm">Kenjiro Ono</p>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Copilot</label>
          <p nve-text="label semibold sm">Kenichi Yoshii</p>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">GVS</label>
          <a href="#" nve-text="link body sm">http://testbot/testbot/view/content...</a>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Session ID</label>
          <a href="#" nve-text="link body sm">Experiment 12345</a>
        </div>
      </nve-panel-content>
    </nve-panel>
  </div>
</section>
```

### Import

```javascript
import '@nvidia-elements/core/panel/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | This is a default/unnamed slot for panel footer content |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |

## nve-password

A password is a control that enables users to enter password text.

### Example

```html
<nve-password>
  <label>label</label>
  <input type="password" value="123456" />
  <nve-control-message>message</nve-control-message>
</nve-password>
```

### Import

```javascript
import '@nvidia-elements/core/password/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input element |
| label | `string` | Label element |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| container | `'flat' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |
| status | `'warning' \| 'error' \| 'success' \| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |
| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |
| i18n |  | Enables updating internal string values for internationalization. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| nveControl | `string` |  |
| reset |  | Resets control value to initial attribute value and clears any active validation rules. |
| showPicker |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| reset | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-preferences-input

A preferences input is a widget for controlling apperance. Stylesheets register to the preferences input by including a css-property, see Standard for an example.

### Example

```html
<nve-preferences-input
  name="theme"
  value='{ "color-scheme": "dark", "scale": "compact", "reduced-motion": "true" }'
></nve-preferences-input>
```

### Import

```javascript
import '@nvidia-elements/core/preferences-input/define.js';
```

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| i18n |  | Enables updating internal string values for internationalization. |
| value | `object` | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| input | `CustomEvent` | Dispatched when the value has changed |
| change | `CustomEvent` | Dispatched when the value has changed |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |

## nve-progress-bar

A progress bar is a visual indicator of the status of a running task. Under the hood, the component uses the native HTML `progress` element to achieve proper a11y concerns.

### Example

```html
<nve-progress-bar value="50"></nve-progress-bar>
```

### Import

```javascript
import '@nvidia-elements/core/progress-bar/define.js';
```

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| value | `number \| "default"` | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |
| max | `number` | The `max` property sets the highest value that `value` scales to. |
| status | `'accent' \| 'warning' \| 'success' \| 'danger'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --opacity | `string` | [MDN](https://mdn.dev/CSS/opacity) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --indeterminate-gradient | `string` | Gradient used for indeterminate state animation |

## nve-progress-ring

The `progress-ring` component shows the status of a pending task. It also serves the basis of the page loading element.

### Example

```html
<div nve-layout="row gap:sm">
  <nve-progress-ring status="accent"></nve-progress-ring>

  <nve-progress-ring status="accent" value="66"></nve-progress-ring>
</div>
```

### Import

```javascript
import '@nvidia-elements/core/progress-ring/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Content to display in the ring center. Defaults to a status icon. |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| value | `number \| "default"` | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |
| max | `number` | The `max` value of the progress ring that the `value` is proportionally scaled to. |
| status | `'accent' \| 'warning' \| 'success' \| 'danger' \| 'neutral' \| "default"` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. |
| size | `'sm' \| 'md' \| 'lg' \| 'xxs' \| 'xs' \| 'xl' \| "default"` | Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. |
| i18n |  | Enables updating internal string values for internationalization. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background-color | `string` |  |
| --ring-color | `string` |  |
| --ring-background-opacity | `string` |  |
| --ring-width | `string` |  |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --animation-duration | `string` | [MDN](https://mdn.dev/CSS/animation-duration) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |

## nve-progressive-filter-chip

A filter chip is a control that enables users to select many options from a set of choices.

### Example

```html
<nve-progressive-filter-chip closable>
  <nve-select>
    <select aria-label="dataset">
      <option>workload</option>
      <option selected>instance</option>
    </select>
  </nve-select>
  <nve-select>
    <select aria-label="condition">
      <option>sort by</option>
      <option selected>filter by</option>
    </select>
  </nve-select>
  <nve-select>
    <select aria-label="filter">
      <option selected>utilization</option>
      <option>status</option>
    </select>
  </nve-select>
</nve-progressive-filter-chip>
```

### Import

```javascript
import '@nvidia-elements/core/progressive-filter-chip/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for content |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| closable | `boolean` | Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. |
| i18n |  | Enables updating internal string values for internationalization. |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| close | `CustomEvent` | Dispatched when the filter chip closes. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |

## nve-pulse

Pulse component signals attention for a particular area of a UI. This helps with tutorial/getting started guides for new users.

### Example

```html
<div nve-layout="row align:center">
  <nve-pulse aria-label="pulse component"></nve-pulse>
</div>
```

### Import

```javascript
import '@nvidia-elements/core/pulse/define.js';
```

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| size | `'sm' \| 'md' \| 'lg' \| 'xs' \| "default"` | Controls the visual scale of an element to match its importance and available space. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. |
| status | `'accent' \| 'warning' \| 'danger' \| "default"` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --animation-duration | `string` | [MDN](https://mdn.dev/CSS/animation-duration) |

## nve-radio

A radio button is a control that enables users to choose one option from a list of mutually exclusive options.

### Example

```html
<nve-radio-group>
  <label>label</label>
  <nve-radio>
    <label>radio 1</label>
    <input type="radio" checked />
  </nve-radio>
  <nve-radio>
    <label>radio 2</label>
    <input type="radio" />
  </nve-radio>
  <nve-radio>
    <label>radio 3</label>
    <input type="radio" />
  </nve-radio>
  <nve-control-message>message</nve-control-message>
</nve-radio-group>
```

### Import

```javascript
import '@nvidia-elements/core/radio/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input element |
| label | `string` | Label element |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| nveControl | `string` |  |
| status | `'warning' \| 'error' \| 'success' \| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| i18n |  | Enables updating internal string values for internationalization. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| reset |  | Resets control value to initial attribute value and clears any active validation rules. |
| showPicker |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| reset | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --border-width | `string` | [MDN](https://mdn.dev/CSS/border-width) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --border-color | `string` | [MDN](https://mdn.dev/CSS/border-color) |
| --radio-color | `string` |  |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-radio-group

Groups related radio buttons together with a shared label and validation messaging for single-select form inputs.

### Import

```javascript
import '@nvidia-elements/core/radio/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input elements |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |

## nve-range

A range slider is a control that enables users to choose a value from a continuous range of values.

### Example

```html
<nve-range>
  <label>label</label>
  <input type="range" />
  <nve-control-message>message</nve-control-message>
</nve-range>
```

### Import

```javascript
import '@nvidia-elements/core/range/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input element |
| label | `string` | Label element |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| orientation | `'vertical' \| 'horizontal'` | Controls the directional flow of the element's layout and interaction pattern. - `vertical` Element orients vertically with top-to-bottom flow. - `horizontal` Element orients horizontally with left-to-right flow. |
| status | `'warning' \| 'error' \| 'success' \| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |
| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |
| i18n |  | Enables updating internal string values for internationalization. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| nveControl | `string` |  |
| reset |  | Resets control value to initial attribute value and clears any active validation rules. |
| showPicker |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| reset | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --track-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --track-height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --track-border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --track-background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --thumb-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --thumb-height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --thumb-background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --thumb-border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |

## nve-resize-handle

A resize-handle slider is a control that enables users to resize views or panels vertically or horizontally.

### Example

```html
<nve-resize-handle></nve-resize-handle>
```

### Import

```javascript
import '@nvidia-elements/core/resize-handle/define.js';
```

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| orientation | `'horizontal' \| 'vertical' \| "default"` | Controls the directional flow of the element's layout and interaction pattern. - `horizontal` Element orients horizontally with left-to-right flow. - `vertical` Element orients vertically with top-to-bottom flow. |
| min | `number` | Determines the min resize value. |
| max | `number` | Determines the max resize value. |
| step | `number` | Determines the value step change. |
| i18n |  | Enables updating internal string values for internationalization. |
| value |  | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| toggle | `CustomEvent` | Dispatched when the resize handle is double clicked. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --line-width | `string` |  |
| --target-size | `string` |  |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |

## nve-search

A search is a control that enables users to enter text to search.

### Example

```html
<nve-search>
  <label>label</label>
  <input type="search" />
  <nve-control-message>message</nve-control-message>
</nve-search>
```

### Import

```javascript
import '@nvidia-elements/core/search/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input element |
| label | `string` | Label element |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| container | `'flat' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |
| rounded | `boolean` | Sets the rounded visual style of the input. |
| status | `'warning' \| 'error' \| 'success' \| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |
| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |
| i18n |  | Enables updating internal string values for internationalization. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| nveControl | `string` |  |
| reset |  | Resets control value to initial attribute value and clears any active validation rules. |
| showPicker |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| reset | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-select

A select is a control that enables users to select an option from a list of options.

### Example

```html
<nve-select>
  <label>label</label>
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <nve-control-message>message</nve-control-message>
</nve-select>
```

### Import

```javascript
import '@nvidia-elements/core/select/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Select input element |
| label | `string` | Label element |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| container | `'flat' \| 'inline' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inline` Element container reduces to fit within inline content such as a block of text. |
| i18n |  | Enables updating internal string values for internationalization. |
| status | `'warning' \| 'error' \| 'success' \| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |
| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| nveControl | `string` |  |
| reset |  | Resets control value to initial attribute value and clears any active validation rules. |
| showPicker |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| reset | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --text-align | `string` | [MDN](https://mdn.dev/CSS/text-align) |
| --scroll-height | `string` |  |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |
| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |
| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |
| --max-height | `string` | [MDN](https://mdn.dev/CSS/max-height) |
| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-skeleton

A loading placeholder component that displays animated placeholder shapes while content loads.

### Example

```html
<div nve-layout="column gap:xs align:stretch">
  <nve-skeleton></nve-skeleton>
  <nve-skeleton style="width: 90%"></nve-skeleton>
  <nve-skeleton style="width: 80%"></nve-skeleton>
</div>
```

### Import

```javascript
import '@nvidia-elements/core/skeleton/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default content slot |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| effect | `'shimmer' \| 'pulse'` | Visual animation style shown while content loads. |
| shape | `'round' \| 'pill'` | Geometry of the placeholder — rounded corners or a full pill outline. |
| hidden | `boolean` | Whether the skeleton hides its content |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |

## nve-sort-button

A sort button is a control that enables users to sort a list of items in ascending or descending order.

### Example

```html
<nve-sort-button></nve-sort-button>
```

### Import

```javascript
import '@nvidia-elements/core/sort-button/define.js';
```

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| sort | `'ascending' \| 'descending' \| 'none'` | The current sort value, can be ascending, descending, or none. |
| i18n |  | Enables updating internal string values for internationalization. |
| type | `'button' \| 'submit' \| 'reset'` | Defines the button behavior when associated within an <form> element. https://mdn.dev/HTML/Element/button#attr-type |
| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. |
| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |
| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |
| form | `HTMLFormElement \| null \| string` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |
| name | `string` | The name of the button, submitted as a pair with the button's value as part of the form data, when that button submits the form. https://mdn.dev/HTML/Element/button#attr-name |
| value | `string` | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |
| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. |
| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. |
| current | `'page' \| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. |
| popoverTargetElement | `HTMLElement \| null` | Establishing a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |
| popovertarget | `string` | The idref of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |
| popoverTargetAction (popovertargetaction) | `'show' \| 'hide' \| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |
| commandForElement | `HTMLElement \| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |
| commandfor | `string \| null` | The idref of the element that receives the command. https://mdn.dev/Invoker_Commands_API |
| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |
| interestForElement | `HTMLElement \| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |
| interestfor | `string \| null` | The idref of the element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| sort | `CustomEvent` | Dispatched on sort button click, returns the current sort value and the next sort value. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |

## nve-sparkline

A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).

### Example

```html
<nve-sparkline id="default"></nve-sparkline>
<script type="module">
  const sparkline = document.querySelector("nve-sparkline#default");
  sparkline.data = [18, 22, 20, 24, 19, 28, 25, 30];
</script>
```

### Import

```javascript
import '@nvidia-elements/core/sparkline/define.js';
```

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| data | `number[]` | Numeric values representing a data series. |
| mark | `'line' \| 'area' \| 'gradient' \| 'column' \| 'winloss'` | Controls the visual representation of data points. - `line` Renders data as a connected line to emphasize macro trend. - `area` Renders data as a filled area beneath a line to emphasize magnitude over time. - `gradient` Renders a line with gradient color treatment to communicate value intensity across the series. - `column` Renders data as vertical columns for easy comparison of discrete values. - `winloss` Renders outcomes as binary or ternary bars to highlight wins, losses, and optional ties. |
| interpolation | `'linear' \| 'smooth' \| 'step'` | Controls how the chart connects intermediate values between points in a data series. Defaults to `linear`. - `linear` Connects points with straight line segments. - `smooth` Connects points with smooth bezier curves. - `step` Connects points with horizontal and vertical step segments. |
| status | `'scheduled' \| 'queued' \| 'pending' \| 'starting' \| 'running' \| 'restarting' \| 'stopping' \| 'finished' \| 'failed' \| 'unknown' \| 'ignored' \| 'accent' \| 'warning' \| 'success' \| 'danger' \| "default"` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. - `scheduled` Task has a scheduled future execution at a specific time. - `queued` Task is waiting in line to begin after other tasks complete. - `pending` Task is awaiting approval, user input, or external conditions before proceeding. - `starting` Task is initializing and preparing to begin active execution. - `running` Task is actively executing and making progress. - `restarting` Task restarts after an interruption or reset. - `stopping` Task is gracefully shutting down and completing cleanup operations. - `finished` Task has completed successfully with the expected outcome. - `failed` Task encountered an error and did not complete as intended. - `unknown` Task status remains unknown or unavailable. - `ignored` Task was intentionally skipped or excluded from execution. |
| size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| "default"` | Controls the visual scale of an element to match its importance and available space. - `xs` Extra small size for minimal elements or highly dense layouts. - `sm` Compact size for dense layouts or secondary elements with less visual prominence. - `md` Standard size that works well in most contexts and provides balanced visibility. - `lg` Larger size for emphasizing important elements or improving touch targets in spacious layouts. - `xl` Extra large size for emphasizing elements or sparse layouts. |
| denoteFirst (denote-first) | `boolean` | Denotes the first data point by rendering a symbol at its position. |
| denoteLast (denote-last) | `boolean` | Denotes the last data point by rendering a symbol at its position. |
| denoteMin (denote-min) | `boolean` | Denotes all minimum-value data points by rendering symbols at their positions. |
| denoteMax (denote-max) | `boolean` | Denotes all maximum-value data points by rendering symbols at their positions. |
| intervalLength (interval-length) | `number` | Controls spacing between points in a line, in em (1 = chart height). Defaults to `0.6`. |
| min | `number \| "default"` | Lower bound for the y-axis domain. When undefined, derives the bound from data. |
| max | `number \| "default"` | Upper bound for the y-axis domain. When undefined, derives the bound from data. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --height | `string` | Height (defaults to 1em and scales with parent font-size). [MDN](https://mdn.dev/CSS/height) |
| --line-color | `string` |  |
| --line-width | `string` |  |
| --fill-color | `string` | Color used by area and column marks. |
| --gradient-max-color | `string` |  |
| --gradient-min-color | `string` |  |
| --zero-line-color | `string` |  |
| --zero-line-width | `string` |  |
| --win-color | `string` | Color used to represent positive values (wins). |
| --loss-color | `string` | Color used to represent negative values (losses). |
| --draw-color | `string` | Color used to represent zero values (draws / neutral outcomes). |
| --symbol-color | `string` |  |
| --symbol-border-color | `string` |  |
| --symbol-border-width | `string` |  |
| --symbol-radius | `string` | symbol circle radius in SVG units. |

## nve-star-rating

A star rating component lets users rate something using stars, providing a quick visual representation of feedback

### Example

```html
<nve-star-rating>
  <label>rate this input</label>
  <input id="range" type="range" max="5" value="3" min="0" />
  <nve-control-message>message</nve-control-message>
</nve-star-rating>
```

### Import

```javascript
import '@nvidia-elements/core/star-rating/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input element |
| label | `string` | Label element |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| status | `'warning' \| 'error' \| 'success' \| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |
| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |
| i18n |  | Enables updating internal string values for internationalization. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| nveControl | `string` |  |
| reset |  | Resets control value to initial attribute value and clears any active validation rules. |
| showPicker |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| reset | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --star-size | `string` |  |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --stroke-color | `string` |  |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-steps

Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.

### Example

```html
<nve-steps behavior-select>
  <nve-steps-item status="success">Step 1</nve-steps-item>
  <nve-steps-item status="danger">Step 2</nve-steps-item>
  <nve-steps-item selected>Step 3</nve-steps-item>
  <nve-steps-item status="pending">Step 4</nve-steps-item>
  <nve-steps-item disabled>Disabled</nve-steps-item>
</nve-steps>
```

### Import

```javascript
import '@nvidia-elements/core/steps/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for steps-item |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| vertical | `boolean` | Determines whether the steps should display in a vertical layout vs. defaulting to horizontal. |
| container | `'condensed' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inline` Element container reduces to fit within inline content such as a block of text. - `inset` Element container optimizes for embedding or inset placement inside another containing element. - `full` Element container optimizes for filling its container bounds. |
| behaviorSelect (behavior-select) | `boolean` | Determines whether the steps should handle selection behavior vs. defaults to off. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |

## nve-steps-item

Represents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.

### Example

```html
<nve-steps behavior-select>
  <nve-steps-item status="success">Step 1</nve-steps-item>
  <nve-steps-item status="danger">Step 2</nve-steps-item>
  <nve-steps-item selected>Step 3</nve-steps-item>
  <nve-steps-item status="pending">Step 4</nve-steps-item>
  <nve-steps-item disabled>Disabled</nve-steps-item>
</nve-steps>
```

### Import

```javascript
import '@nvidia-elements/core/steps/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for step text |
| status-icon | `string` | custom slotted step icon |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. |
| status | `'accent' \| 'danger' \| 'success' \| 'pending' \| "default"` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` Highlights important actions or draws attention to primary interactive elements. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| container | `'condensed' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inline` Element container reduces to fit within inline content such as a block of text. - `inset` Element container optimizes for embedding or inset placement inside another containing element. - `full` Element container optimizes for filling its container bounds. |
| type | `'button' \| 'submit' \| 'reset'` | Defines the button behavior when associated within an <form> element. https://mdn.dev/HTML/Element/button#attr-type |
| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. |
| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |
| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |
| form | `HTMLFormElement \| null \| string` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |
| name | `string` | The name of the button, submitted as a pair with the button's value as part of the form data, when that button submits the form. https://mdn.dev/HTML/Element/button#attr-name |
| value | `string` | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |
| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. |
| current | `'page' \| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. |
| popoverTargetElement | `HTMLElement \| null` | Establishing a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |
| popovertarget | `string` | The idref of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |
| popoverTargetAction (popovertargetaction) | `'show' \| 'hide' \| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |
| commandForElement | `HTMLElement \| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |
| commandfor | `string \| null` | The idref of the element that receives the command. https://mdn.dev/Invoker_Commands_API |
| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |
| interestForElement | `HTMLElement \| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |
| interestfor | `string \| null` | The idref of the element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |

## nve-switch

A switch is a control that enables users to switch between two mutually exclusive options (on or off, checked or unchecked) through a single click or tap.

### Example

```html
<nve-switch>
  <label>label</label>
  <input type="checkbox" />
</nve-switch>
```

### Import

```javascript
import '@nvidia-elements/core/switch/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input element |
| label | `string` | Label element |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| nveControl | `string` |  |
| status | `'warning' \| 'error' \| 'success' \| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |
| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |
| i18n |  | Enables updating internal string values for internationalization. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| reset |  | Resets control value to initial attribute value and clears any active validation rules. |
| showPicker |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| reset | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --border-width | `string` | [MDN](https://mdn.dev/CSS/border-width) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --anchor-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --anchor-height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --anchor-border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --anchor-background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-switch-group

A switch group is a container for a group of switches.

### Import

```javascript
import '@nvidia-elements/core/switch/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input elements |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |

## nve-tabs

Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.

### Example

```html
<nve-tabs-group id="tab-group-default">
  <nve-tabs>
    <nve-tabs-item selected command="--toggle" commandfor="tab-group-default" value="overview">Overview</nve-tabs-item>
    <nve-tabs-item command="--toggle" commandfor="tab-group-default" value="details">Details</nve-tabs-item>
    <nve-tabs-item command="--toggle" commandfor="tab-group-default" value="settings">Settings</nve-tabs-item>
  </nve-tabs>
  <div slot="overview">overview content</div>
  <div slot="details">details content</div>
  <div slot="settings">settings content</div>
</nve-tabs-group>
```

### Import

```javascript
import '@nvidia-elements/core/tabs/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for tab-item |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| vertical | `boolean` | Determines whether the tabs should display in a vertical layout vs. defaulting to horizontal. |
| borderless | `boolean` | Determines whether the tabs should display a border on selected items vs. defaults to show border. |
| behaviorSelect (behavior-select) | `boolean` | Determines whether the tabs should handle selection behavior vs. defaults to off. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --indicator-background | `string` |  |
| --indicator-border-radius | `string` |  |
| --indicator-height | `string` |  |
| --border-inset | `string` |  |

## nve-tabs-group

Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.

### Import

```javascript
import '@nvidia-elements/core/tabs/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group. |
| {value} | `string` | Named panel content where the slot name matches a nve-tabs-item value. |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| alignment | `'top' \| 'start' \| 'end'` | Determines the alignment of the popover relative to the provided anchor element. |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| select | `CustomEvent` | Dispatched when the selected tab value changes after an invoker `--toggle` updates selection |

### Invoker Commands

| name | value | description |
| ---- | ----- | ----------- |
| --toggle | `CommandEvent` | Select the matching tab and reveal the panel whose slot matches the invoker value. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |

## nve-tabs-item

Represents an individual tab within a tablist, providing a selectable button for switching between content views.

### Example

```html
<nve-tabs-group id="tab-group-default">
  <nve-tabs>
    <nve-tabs-item selected command="--toggle" commandfor="tab-group-default" value="overview">Overview</nve-tabs-item>
    <nve-tabs-item command="--toggle" commandfor="tab-group-default" value="details">Details</nve-tabs-item>
    <nve-tabs-item command="--toggle" commandfor="tab-group-default" value="settings">Settings</nve-tabs-item>
  </nve-tabs>
  <div slot="overview">overview content</div>
  <div slot="details">details content</div>
  <div slot="settings">settings content</div>
</nve-tabs-group>
```

### Import

```javascript
import '@nvidia-elements/core/tabs/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for content |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. |
| type | `'button' \| 'submit' \| 'reset'` | Defines the button behavior when associated within an <form> element. https://mdn.dev/HTML/Element/button#attr-type |
| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. |
| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |
| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |
| form | `HTMLFormElement \| null \| string` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |
| name | `string` | The name of the button, submitted as a pair with the button's value as part of the form data, when that button submits the form. https://mdn.dev/HTML/Element/button#attr-name |
| value | `string` | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |
| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. |
| current | `'page' \| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. |
| popoverTargetElement | `HTMLElement \| null` | Establishing a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |
| popovertarget | `string` | The idref of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |
| popoverTargetAction (popovertargetaction) | `'show' \| 'hide' \| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |
| commandForElement | `HTMLElement \| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |
| commandfor | `string \| null` | The idref of the element that receives the command. https://mdn.dev/Invoker_Commands_API |
| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |
| interestForElement | `HTMLElement \| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |
| interestfor | `string \| null` | The idref of the element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --border-width | `string` | [MDN](https://mdn.dev/CSS/border-width) |
| --border-height | `string` |  |
| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |
| --border-background | `string` |  |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |

## nve-tag

A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.

### Example

```html
<nve-tag>topic-tag</nve-tag>
```

### Import

```javascript
import '@nvidia-elements/core/tag/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for content |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| closable | `boolean` | Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. |
| color | `'red-cardinal' \| 'gray-slate' \| 'gray-denim' \| 'blue-indigo' \| 'blue-cobalt' \| 'blue-sky' \| 'teal-cyan' \| 'green-mint' \| 'teal-seafoam' \| 'green-grass' \| 'yellow-amber' \| 'orange-pumpkin' \| 'red-tomato' \| 'pink-magenta' \| 'purple-plum' \| 'purple-violet' \| 'purple-lavender' \| 'pink-rose' \| 'green-jade' \| 'lime-pear' \| 'yellow-nova' \| 'brand-green'` | Defines a base color from the theme color palette |
| prominence | `'emphasis' \| "default"` | Controls the visual prominence to establish hierarchy and guide user attention. - `emphasis` Increases visual weight to draw attention and highlight important elements. |
| i18n |  | Enables updating internal string values for internationalization. |
| type | `'button' \| 'submit' \| 'reset'` | Defines the button behavior when associated within an <form> element. https://mdn.dev/HTML/Element/button#attr-type |
| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. |
| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |
| readOnly (readonly) | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |
| form | `HTMLFormElement \| null \| string` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |
| name | `string` | The name of the button, submitted as a pair with the button's value as part of the form data, when that button submits the form. https://mdn.dev/HTML/Element/button#attr-name |
| value | `string` | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |
| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. |
| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. |
| current | `'page' \| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. |
| popoverTargetElement | `HTMLElement \| null` | Establishing a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |
| popovertarget | `string` | The idref of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |
| popoverTargetAction (popovertargetaction) | `'show' \| 'hide' \| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |
| commandForElement | `HTMLElement \| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |
| commandfor | `string \| null` | The idref of the element that receives the command. https://mdn.dev/Invoker_Commands_API |
| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |
| interestForElement | `HTMLElement \| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |
| interestfor | `string \| null` | The idref of the element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |
| --text-decoration | `string` | [MDN](https://mdn.dev/CSS/text-decoration) |

## nve-textarea

A textarea is a control that enables users to enter and edit text.

### Example

```html
<nve-textarea>
  <label>label</label>
  <textarea></textarea>
  <nve-control-message>message</nve-control-message>
</nve-textarea>
```

### Import

```javascript
import '@nvidia-elements/core/textarea/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input element |
| label | `string` | Label element |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| status | `'warning' \| 'error' \| 'success' \| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |
| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |
| i18n |  | Enables updating internal string values for internationalization. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| nveControl | `string` |  |
| reset |  | Resets control value to initial attribute value and clears any active validation rules. |
| showPicker |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| reset | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-time

A time picker is a control that enables users to choose a time value.

### Example

```html
<nve-time>
  <label>label</label>
  <input type="time" min="09:00" max="18:00" value="12:00" />
  <nve-control-message>message</nve-control-message>
</nve-time>
```

### Import

```javascript
import '@nvidia-elements/core/time/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input element |
| label | `string` | Label element |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| container | `'flat' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |
| status | `'warning' \| 'error' \| 'success' \| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |
| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |
| i18n |  | Enables updating internal string values for internationalization. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| nveControl | `string` |  |
| reset |  | Resets control value to initial attribute value and clears any active validation rules. |
| showPicker |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| reset | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-toast

A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)

### Example

```html
<nve-toast id="toast" close-timeout="1500">hello there</nve-toast>
<nve-button popovertarget="toast">button</nve-button>
```

### Import

```javascript
import '@nvidia-elements/core/toast/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default content slot |
| prefix | `string` | custom status icon slot |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| anchor | `string \| HTMLElement` | Provides the element that the popover should position relative to. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference. |
| position | `'center' \| 'top' \| 'bottom' \| 'left' \| 'right'` | Determines the position of an element along both inline and block axis. [MDN](https://mdn.dev/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) - `center` Centers the popover directly over the anchor element. - `top` Positions the popover above the anchor element. - `bottom` Positions the popover below the anchor element. - `left` Positions the popover to the left side of the anchor element. - `right` Positions the popover to the right side of the anchor element. |
| alignment | `'start' \| 'end' \| 'center'` | Determines the alignment of the popover relative to the provided anchor element. - `start` Aligns the popover to the beginning edge of the anchor for left or top alignment. - `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment. - `center` Centers the popover along the anchor's edge for balanced positioning. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| closable | `boolean` | Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. |
| closeTimeout (close-timeout) | `number` | Sets the automatic dismissal time in milliseconds before the element emits a `close` event. Allow ~200-250ms per word for comfortable reading. - `0` Warning or error messages requiring immediate acknowledgment. - `3000` Brief success or confirmation messages. - `7000` Standard informational messages. - `10000` Messages with actions or requiring user decision. |
| status | `'accent' \| 'warning' \| 'success' \| 'danger' \| 'muted'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` Highlights important actions or draws attention to primary interactive elements. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. |
| i18n |  | Enables updating internal string values for internationalization. |
| typeNativePopoverController |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| beforetoggle | `CustomEvent` | Dispatched on a popover just before showing or hiding. [MDN](https://mdn.dev/HTMLElement/beforetoggle_event) |
| toggle | `CustomEvent` | Dispatched on a popover element just after showing or hiding. [MDN](https://mdn.dev/HTMLElement/toggle_event) |
| open | `CustomEvent` | Dispatched when the toast opens. |
| close | `CustomEvent` | Dispatched when the toast closes. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --justify-content | `string` | [MDN](https://mdn.dev/CSS/justify-content) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --animation-duration | `string` | Duration of toast open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |

## nve-toggletip

Generic toggletip element for rendering a variety of different interactive content. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)

### Example

```html
<nve-toggletip id="toggletip">hello there</nve-toggletip>
<nve-button popovertarget="toggletip">button</nve-button>
```

### Import

```javascript
import '@nvidia-elements/core/toggletip/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for toggletip content |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| anchor | `string \| HTMLElement` | Provides the element that the popover should position relative to. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference. |
| position | `'center' \| 'top' \| 'bottom' \| 'left' \| 'right'` | Determines the position of an element along both inline and block axis. [MDN](https://mdn.dev/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) - `center` Centers the popover directly over the anchor element. - `top` Positions the popover above the anchor element. - `bottom` Positions the popover below the anchor element. - `left` Positions the popover to the left side of the anchor element. - `right` Positions the popover to the right side of the anchor element. |
| alignment | `'start' \| 'end' \| 'center'` | Determines the alignment of the popover relative to the provided anchor element. - `start` Aligns the popover to the beginning edge of the anchor for left or top alignment. - `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment. - `center` Centers the popover along the anchor's edge for balanced positioning. |
| closable | `boolean` | Indicates whether the user can dismiss or close the element. - `true` The element displays a close control and the user can dismiss it. - `false` The user cannot close the element and must dismiss it programmatically. |
| arrow | `boolean` | Determines if the component renders an arrow. |
| popoverArrow | `HTMLElement` |  |
| typeNativePopoverController |  |  |
| i18n |  | Enables updating internal string values for internationalization. |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| beforetoggle | `CustomEvent` | Dispatched on a popover just before showing or hiding. [MDN](https://mdn.dev/HTMLElement/beforetoggle_event) |
| toggle | `CustomEvent` | Dispatched on a popover element just after showing or hiding. [MDN](https://mdn.dev/HTMLElement/toggle_event) |
| open | `CustomEvent` | Dispatched when the toggletip opens. |
| close | `CustomEvent` | Dispatched when the toggletip closes. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --arrow-transform | `string` |  |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --min-width | `string` | [MDN](https://mdn.dev/CSS/min-width) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --animation-duration | `string` | Duration of toggletip open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |

## nve-toggletip-footer

Provides a designated area at the bottom of a toggletip for actions or supplementary information.

### Import

```javascript
import '@nvidia-elements/core/toggletip/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for the toggletip footer |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |

## nve-toggletip-header

Displays a title or contextual label at the top of a toggletip to categorize its contents.

### Import

```javascript
import '@nvidia-elements/core/toggletip/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for the toggletip header |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |

## nve-toolbar

A toolbar is a container for grouping a set of controls, such as buttons, icon buttons and combobox search.

### Example

```html
<nve-toolbar>
  <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 icon-name="gear" slot="suffix" aria-label="settings"></nve-icon-button>
</nve-toolbar>
```

### Import

```javascript
import '@nvidia-elements/core/toolbar/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default slot for content |
| prefix | `string` | slot for prefix content |
| suffix | `string` | slot for suffix content |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| container | `'flat' \| 'inset' \| 'full' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inset` Element container optimizes for embedding or inset placement inside another containing element. - `full` Element container optimizes for filling its container bounds. |
| content | `'scroll' \| 'wrap' \| "default"` | Determines the primary content overflow behavior. |
| orientation | `'horizontal' \| 'vertical' \| "default"` | Controls the directional flow of the element's layout and interaction pattern. - `horizontal` Element orients horizontally with left-to-right flow. - `vertical` Element orients vertically with top-to-bottom flow. |
| status | `'accent'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` Highlights important actions or draws attention to primary interactive elements. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --gap | `string` | [MDN](https://mdn.dev/CSS/gap) |
| --border-bottom | `string` | [MDN](https://mdn.dev/CSS/border-bottom) |
| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |

## nve-tooltip

A contextual popup that displays a plaintext description. Tooltips are [triggered](https://w3c.github.io/aria/#tooltip) by hovering, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)

### Example

```html
<nve-tooltip id="tooltip">hello there</nve-tooltip>
<nve-button interestfor="tooltip">button</nve-button>
```

### Import

```javascript
import '@nvidia-elements/core/tooltip/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | default content slot |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| anchor | `string \| HTMLElement` | Provides the element that the popover should position relative to. Anchor can accept a idref string within the same render root or a HTMLElement DOM reference. |
| position | `'center' \| 'top' \| 'bottom' \| 'left' \| 'right'` | Determines the position of an element along both inline and block axis. [MDN](https://mdn.dev/CSS/CSS_grid_layout/Box_alignment_in_grid_layout#the_two_axes_of_a_grid_layout) - `center` Centers the popover directly over the anchor element. - `top` Positions the popover above the anchor element. - `bottom` Positions the popover below the anchor element. - `left` Positions the popover to the left side of the anchor element. - `right` Positions the popover to the right side of the anchor element. |
| alignment | `'start' \| 'end' \| 'center'` | Determines the alignment of the popover relative to the provided anchor element. - `start` Aligns the popover to the beginning edge of the anchor for left or top alignment. - `end` Aligns the popover to the ending edge of the anchor for right or bottom alignment. - `center` Centers the popover along the anchor's edge for balanced positioning. |
| status | `'muted'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` - Highlights important actions or draws attention to primary interactive elements. - `warning` - Indicates cautionary actions that require careful consideration before proceeding. - `success` - Represents positive outcomes, confirmations, or constructive actions. - `danger` - Signals destructive or irreversible actions that need extra attention and confirmation. |
| popoverArrow | `HTMLElement` |  |
| typeNativePopoverController |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| beforetoggle | `CustomEvent` | Dispatched on a popover just before showing or hiding. [MDN](https://mdn.dev/HTMLElement/beforetoggle_event) |
| toggle | `CustomEvent` | Dispatched on a popover element just after showing or hiding. [MDN](https://mdn.dev/HTMLElement/toggle_event) |
| open | `CustomEvent` | Dispatched when the tooltip opens. |
| close | `CustomEvent` | Dispatched when the tooltip closes. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --box-shadow | `string` | [MDN](https://mdn.dev/CSS/box-shadow) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --arrow-transform | `string` |  |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --animation-duration | `string` | Duration of tooltip open/close animations [MDN](https://mdn.dev/CSS/animation-duration) |

## nve-tree

A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.

### Example

```html
<nve-tree behavior-expand>
  <nve-tree-node expanded>
    node 1
    <nve-tree-node>node 1-1</nve-tree-node>
    <nve-tree-node>node 1-2</nve-tree-node>
    <nve-tree-node>
      node 1-3
      <nve-tree-node>node 1-3-1</nve-tree-node>
      <nve-tree-node>node 1-3-2</nve-tree-node>
      <nve-tree-node>node 1-3-3</nve-tree-node>
    </nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    node 2
    <nve-tree-node>node 2-1</nve-tree-node>
    <nve-tree-node>node 2-2</nve-tree-node>
    <nve-tree-node>node 2-3</nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    node 3
    <nve-tree-node>node 3-1</nve-tree-node>
    <nve-tree-node>node 3-2</nve-tree-node>
    <nve-tree-node>
      node 3-3
      <nve-tree-node>node 3-3-1</nve-tree-node>
      <nve-tree-node>node 3-3-2</nve-tree-node>
      <nve-tree-node>node 3-3-3</nve-tree-node>
    </nve-tree-node>
  </nve-tree-node>
</nve-tree>
```

### Import

```javascript
import '@nvidia-elements/core/tree/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | tree nodes |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| selectable | `'single' \| 'multi'` | Determines whether all nodes can be in a selected state. Nodes can be in a single or multi select state. |
| behaviorExpand (behavior-expand) | `boolean` | Determines whether the tree nodes should handle auto-expanding behavior. |
| behaviorSelect (behavior-select) | `boolean` | Determines whether the tree nodes should handle auto-select behavior. |
| border | `boolean` | Determines if the node depth border renders. |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| open | `CustomEvent` | Dispatched from a child nve-tree-node when opened. |
| close | `CustomEvent` | Dispatched from a child nve-tree-node when closed. |
| select | `CustomEvent` | Dispatched from a child nve-tree-node when its selection state changes. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --max-width | `string` | [MDN](https://mdn.dev/CSS/max-width) |
| --node-border | `string` | Border style for tree node depth indicator |

## nve-tree-node

A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.

### Import

```javascript
import '@nvidia-elements/core/tree/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Use default slot for basic text content or nested <nve-tree-node> elements. |
| content | `string` | Use only for extended long form content containing interactive elements or form inputs. |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |
| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. |
| expandable | `boolean` | Determines whether a node can be expandable. Expandable by default if slotted nodes exist. |
| selectable | `'single' \| 'multi'` | Determines whether a node can be in a selected state. Nodes can be in a single or multi select state. |
| highlighted | `boolean` | Determines the highlighted state of the element. Highlighted states serve non-interactive selections where nodes may relate to other selected portions of the UI. |
| i18n |  | Enables updating internal string values for internationalization. |
| indeterminate | `boolean` |  |
| behaviorExpand | `boolean` |  |
| behaviorSelect | `boolean` |  |
| open |  | opens and sets the expanded state automatically if behaviorExpand is true |
| close |  | closes and sets the expanded state automatically if behaviorExpand is true |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| open | `CustomEvent` | Dispatched when the node opens. |
| close | `CustomEvent` | Dispatched when the node closes. |
| select | `CustomEvent` | Dispatched when the node selection state changes. |

### Invoker Commands

| name | value | description |
| ---- | ----- | ----------- |
| --select | `CommandEvent` | use to select the node |
| --deselect | `CommandEvent` | use to deselect the node |
| --toggle-select | `CommandEvent` | use to toggle the node selection state |
| --open | `CommandEvent` | use to open the node |
| --close | `CommandEvent` | use to close the node |
| --toggle | `CommandEvent` | use to toggle open / closed state of the node |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |
| --text-wrap | `string` | [MDN](https://mdn.dev/CSS/text-wrap) |
| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --width | `string` | [MDN](https://mdn.dev/CSS/width) |

## nve-week

A week picker is a control that enables users to choose a week value.

### Example

```html
<nve-week>
  <label>label</label>
  <input type="week" />
  <nve-control-message>message</nve-control-message>
</nve-week>
```

### Import

```javascript
import '@nvidia-elements/core/week/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | Control input element |
| label | `string` | Label element |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| container | `'flat' \| "default"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |
| status | `'warning' \| 'error' \| 'success' \| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |
| layout | `\| 'vertical'
    \| 'vertical-inline'
    \| 'horizontal'
    \| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |
| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |
| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |
| i18n |  | Enables updating internal string values for internationalization. |
| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |
| nveControl | `string` |  |
| reset |  | Resets control value to initial attribute value and clears any active validation rules. |
| showPicker |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| reset | `CustomEvent` |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --height | `string` | [MDN](https://mdn.dev/CSS/height) |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |
| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |
| --color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |
| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |
| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |
| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |
| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |

## nve-codeblock

A container for content representing programming languages.

### Example

```html
<nve-codeblock language="typescript"> function getTime(): number { return new Date().getTime(); } </nve-codeblock>
```

### Import

```javascript
import '@nvidia-elements/code/codeblock/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | for declarative slotting of source code and not using the `code` property |
| actions | `string` | slot for action bar |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| container | `'flat' \| 'inline' \| "default"` | Determines the container styles of component. Flat enables nesting within other containers. |
| language | `\| 'bash'
    \| 'css'
    \| 'go'
    \| 'html'
    \| 'javascript'
    \| 'json'
    \| 'markdown'
    \| 'python'
    \| 'shell'
    \| 'toml'
    \| 'typescript'
    \| 'xml'
    \| 'yaml'` | Programming language that processes the codeblock. |
| code | `string \| "default"` | Text code to be process into a codeblock. |
| lineNumbers (line-numbers) | `boolean \| "default"` | Adds styling to show the line numbers of the codeblock. |
| highlight | `string \| "default"` | Adds styling to highlight the provided code lines. For many lines: use Comma seperated values, ex: (1,5,7). For range of lines, use hyphen seperated values, ex: (1-5). You can combine both such as: ex: (1,5,10-15,20). |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --font-family | `string` | [MDN](https://mdn.dev/CSS/font-family) |
| --white-space | `string` | [MDN](https://mdn.dev/CSS/white-space) |

## nve-markdown

A Web Component that inputs markdown content and renders it as HTML formatted with Elements styles.

### Example

```html
<nve-markdown>
  <template>
    # Default

    This is a default markdown component in its initial state.

    - List item 1
    - List item 2
    - List item 3
  </template>
</nve-markdown>
```

### Import

```javascript
import '@nvidia-elements/markdown/markdown/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| (default) | `string` | The slot can contain a template element with markdown content |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| source | `string` | Markdown content source, settable programmatically |
| getUpdateComplete |  |  |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --padding | `string` | The padding of the component [MDN](https://mdn.dev/CSS/padding) |

## nve-monaco-diff-editor

A low-level Monaco Editor wrapper that provides direct access to a diff editor instance and API.

### Example

```html
<nve-monaco-diff-editor></nve-monaco-diff-editor>
<script type="module">
  const diffEditorEl = document.querySelector("nve-monaco-diff-editor");
  diffEditorEl.addEventListener("ready", (event) => {
    const { editor, monaco } = event.target;
    const original = monaco.editor.createModel(
      "Hello World!",
      "plaintext",
      monaco.Uri.parse("diff:///src/example.txt"),
    );
    const modified = monaco.editor.createModel(
      "Hello world!",
      "plaintext",
      monaco.Uri.parse("file:///src/example.txt"),
    );
    editor.setModel({ original, modified });
  });
</script>
```

### Import

```javascript
import '@nvidia-elements/monaco/diff-editor/define.js';
```

### Events

| name | value | description |
| ---- | ----- | ----------- |
| canceled | `CustomEvent` | Dispatched when the editor cancels initialization. |
| ready | `CustomEvent` | Dispatched when the editor finishes initialization and becomes ready. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |

## nve-monaco-diff-input

An input control for editing diffs for JSON, YAML and code with syntax highlighting and validation.

### Example

```html
<nve-monaco-diff-input
  language="typescript"
  original="console.log('Hello, World!');"
  value="console.log('Hello, world!');"
></nve-monaco-diff-input>
<script type="module">
  const input = document.querySelector("nve-monaco-diff-input");
  input.addEventListener("input", () => console.log("input: ", input.value));
  input.addEventListener("change", () => console.log("change: ", input.value));
</script>
```

### Import

```javascript
import '@nvidia-elements/monaco/diff-input/define.js';
```

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| disabled | `boolean` | Determines whether the input prevents editing. |
| language | `'css' \| 'go' \| 'html' \| 'javascript' \| 'json' \| 'markdown' \| 'plaintext' \| 'python' \| 'shell' \| 'sql' \| 'typescript' \| 'yaml' \| string` | Defines the programming language for syntax highlighting and validation. |
| original | `string` | Defines the original value of the diff. |
| originalLanguage | `'css' \| 'go' \| 'html' \| 'javascript' \| 'json' \| 'markdown' \| 'plaintext' \| 'python' \| 'shell' \| 'sql' \| 'typescript' \| 'yaml' \| string` | Defines the programming language for syntax highlighting of the original value. Falls back to the language property if not set. |
| readOnly | `boolean` | Determines whether the editor is in read-only mode. |
| sideBySide (side-by-side) | `boolean` | Defines whether to render the diff in side-by-side mode (if enough width is available). |
| updateOptions |  |  |
| updateOriginalEditorOptions |  |  |
| folding | `boolean` | Determines whether the editor supports code folding. |
| insertSpaces (insert-spaces) | `boolean` | Determines whether to insert spaces instead of tabs when pressing the tab key. |
| lineNumbers (line-numbers) | `LineNumbersType` | Controls the display of line numbers in the editor. |
| minimap | `boolean` | Determines whether to show the minimap (code overview) on the right side of the editor. |
| required | `boolean` | Determines whether the input requires a value. |
| schema | `JSONSchema \| "default"` | JSON schema for validation when the language equals 'json'. https://json-schema.org/ |
| tabSize (tab-size) | `number` | Determines the number of spaces to use for indentation. |
| value | `string` | The current value/content of the editor. |
| wordWrap (word-wrap) | `WordWrapOptions` | Controls how the editor wraps text. |
| noValidate | `boolean` | Determines whether to disable validation of the input. |
| focus |  |  |
| updateEditorOptions |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| syntax-validation-changed | `CustomEvent` | Dispatched when syntax validation state changes. |
| canceled | `CustomEvent` | Dispatched when the editor cancels initialization. |
| ready | `CustomEvent` | Dispatched when the editor finishes initialization and becomes ready. |
| input | `CustomEvent` | Dispatched when the element's value changes as a result of a user action. |
| change | `CustomEvent` | Dispatched when the user modifies and commits the element's value. |
| reset | `CustomEvent` | Dispatched when the control state is reset to its initial value. |
| invalid | `CustomEvent` | Dispatched when the control is invalid. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |

## nve-monaco-editor

A low-level Monaco Editor wrapper that provides direct access to an editor instance and API.

### Example

```html
<nve-monaco-editor></nve-monaco-editor>
<script type="module">
  const editor = document.querySelector("nve-monaco-editor");
  editor.addEventListener("ready", (event) => {
    const { editor, monaco } = event.target;
    const model = monaco.editor.createModel("Hello World!", "plaintext");
    editor.setModel(model);
  });
</script>
```

### Import

```javascript
import '@nvidia-elements/monaco/editor/define.js';
```

### Events

| name | value | description |
| ---- | ----- | ----------- |
| canceled | `CustomEvent` | Dispatched when the editor cancels initialization. |
| ready | `CustomEvent` | Dispatched when the editor finishes initialization and becomes ready. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |

## nve-monaco-input

An input control for editing JSON, YAML and code with syntax highlighting and validation.

### Example

```html
<nve-monaco-input language="typescript" value="console.log('Hello, world!');"></nve-monaco-input>
<script type="module">
  const input = document.querySelector("nve-monaco-input");
  input.addEventListener("input", () => console.log("input: ", input.value));
  input.addEventListener("change", () => console.log("change: ", input.value));
</script>
```

### Import

```javascript
import '@nvidia-elements/monaco/input/define.js';
```

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| language | `'css' \| 'go' \| 'html' \| 'javascript' \| 'json' \| 'markdown' \| 'plaintext' \| 'python' \| 'shell' \| 'sql' \| 'typescript' \| 'yaml' \| string` | Defines the programming language for syntax highlighting and validation. |
| disabled | `boolean` | Determines whether the input prevents editing. |
| folding | `boolean` | Determines whether the editor supports code folding. |
| insertSpaces (insert-spaces) | `boolean` | Determines whether to insert spaces instead of tabs when pressing the tab key. |
| lineNumbers (line-numbers) | `LineNumbersType` | Controls the display of line numbers in the editor. |
| minimap | `boolean` | Determines whether to show the minimap (code overview) on the right side of the editor. |
| readOnly | `boolean` | Determines whether the editor is in read-only mode. |
| required | `boolean` | Determines whether the input requires a value. |
| schema | `JSONSchema \| "default"` | JSON schema for validation when the language equals 'json'. https://json-schema.org/ |
| tabSize (tab-size) | `number` | Determines the number of spaces to use for indentation. |
| value | `string` | The current value/content of the editor. |
| wordWrap (word-wrap) | `WordWrapOptions` | Controls how the editor wraps text. |
| noValidate | `boolean` | Determines whether to disable validation of the input. |
| focus |  |  |
| updateEditorOptions |  |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| syntax-validation-changed | `CustomEvent` | Dispatched when syntax validation state changes. |
| canceled | `CustomEvent` | Dispatched when the editor cancels initialization. |
| ready | `CustomEvent` | Dispatched when the editor finishes initialization and becomes ready. |
| input | `CustomEvent` | Dispatched when the element's value changes as a result of a user action. |
| change | `CustomEvent` | Dispatched when the user modifies and commits the element's value. |
| reset | `CustomEvent` | Dispatched when the control state is reset to its initial value. |
| invalid | `CustomEvent` | Dispatched when the control is invalid. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --border | `string` | [MDN](https://mdn.dev/CSS/border) |
| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |
| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |
| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |

## nve-monaco-problems

A Monaco Editor based tree view for presenting problems (i.e. diagnostics markers).

### Example

```html
<nve-monaco-problems></nve-monaco-problems>
<script type="module">
  const problemsEl = document.querySelector("nve-monaco-problems");
  problemsEl.problems = [
    {
      resource: "file:///src/components/Button.ts",
      message: "Type 'string' is not assignable to type 'number'.",
      severity: 8, // ProblemSeverity.Error
      startLineNumber: 14,
      startColumn: 8,
      endLineNumber: 14,
      endColumn: 24,
      source: "ts",
      code: "2322",
      owner: "typescript",
    },
    {
      resource: "file:///src/components/Button.ts",
      message: "'index' is declared but its value is never read.",
      severity: 4, // ProblemSeverity.Warning
      startLineNumber: 16,
      startColumn: 5,
      endLineNumber: 16,
      endColumn: 10,
      source: "ts",
      code: "6133",
      owner: "typescript",
    },
    {
      resource: "file:///src/utils/styles.css",
      message: "Unknown property 'colr'. Did you mean 'color'?",
      severity: 2, // ProblemSeverity.Info
      startLineNumber: 40,
      startColumn: 2,
      endLineNumber: 40,
      endColumn: 6,
      source: "css",
      owner: "css",
    },
    {
      resource: "file:///src/utils/formatDate.ts",
      message: "Convert 'var' to 'let' or 'const'.",
      severity: 1, // ProblemSeverity.Hint
      startLineNumber: 57,
      startColumn: 1,
      endLineNumber: 57,
      endColumn: 4,
      source: "eslint",
      code: {
        value: "no-var",
        target: "https://eslint.org/docs/rules/no-var",
      },
      owner: "eslint",
    },
  ];
  problemsEl.addEventListener("problem-selected", (e) => {
    console.log("problem-selected", e.detail.problem);
  });
  problemsEl.addEventListener("problem-activated", (e) => {
    console.log("problem-activated", e.detail.problem);
  });
  problemsEl.addEventListener("problem-context-menu", (e) => {
    console.log("problem-context-menu", e.detail.problem);
  });
</script>
```

### Import

```javascript
import '@nvidia-elements/monaco/problems/define.js';
```

### Slots

| name | value | description |
| ---- | ----- | ----------- |
| empty | `string` | Slot for displaying a message when empty. |

### Properties / Attributes

| property (attribute) | value | description |
| -------------------- | ----- | ----------- |
| problems | `Problem[]` |  |

### Events

| name | value | description |
| ---- | ----- | ----------- |
| problem-selected | `CustomEvent` | Dispatched when the user selects a problem. |
| problem-activated | `CustomEvent` | Dispatched when the user activates a problem. |
| problem-context-menu | `CustomEvent` | Dispatched when the user requests a problem's context menu. |
| canceled | `CustomEvent` | Dispatched when the editor cancels initialization. |
| ready | `CustomEvent` | Dispatched when the editor finishes initialization and becomes ready. |

### CSS Properties

| name | value | description |
| ---- | ----- | ----------- |
| --background | `string` | [MDN](https://mdn.dev/CSS/background) |
| --min-height | `string` | [MDN](https://mdn.dev/CSS/min-height) |

## nve-layout

Layout utility for native HTML elements

### Example

```html
<section nve-layout="row gap:sm">
  <div></div>
  <div></div>
  <div></div>
</section>
<section nve-layout="column gap:sm">
  <div></div>
  <div></div>
  <div></div>
</section>
<section nve-layout="grid gap:sm span-items:6">
  <div>columns 1-6</div>
  <div>columns 7-12</div>
</section>
```

### Values

| name | type | value  |
| ---- | ---- | ------ |
| `nve-layout` | `string` |`column`, `row`, `full`, `grow`, `align:left`, `align:right`, `align:top`, `align:bottom`, `align:horizontal-center`, `align:vertical-center`, `align:horizontal-stretch`, `align:vertical-stretch`, `align:wrap`, `align:center`, `align:stretch`, `align:space-around`, `align:space-between`, `align:space-evenly`, `gap:xs`, `gap:sm`, `gap:lg`, `gap:xl`, `pad:xs`, `pad-top:xs`, `pad-left:xs`, `pad-right:xs`, `pad-bottom:xs`, `pad-x:xs`, `pad-y:xs`, `pad:sm`, `pad-top:sm`, `pad-left:sm`, `pad-right:sm`, `pad-bottom:sm`, `pad-x:sm`, `pad-y:sm`, `pad:lg`, `pad-top:lg`, `pad-left:lg`, `pad-right:lg`, `pad-bottom:lg`, `pad-x:lg`, `pad-y:lg`, `pad:xl`, `pad-top:xl`, `pad-left:xl`, `pad-right:xl`, `pad-bottom:xl`, `pad-x:xl`, `pad-y:xl`, `grid`, `span-items:1`, `span:1`, `span-items:2`, `span:2`, `span-items:3`, `span:3`, `span-items:4`, `span:4`, `span-items:5`, `span:5`, `span-items:6`, `span:6`, `span-items:7`, `span:7`, `span-items:8`, `span:8`, `span-items:9`, `span:9`, `span-items:10`, `span:10`, `span-items:11`, `span:11`, `span-items:12`, `span:12` |

## nve-text

Typography style utility for native HTML elements

### Example

```html
<h1 nve-text="heading">heading</h1>
<p nve-text="body">body</p>
<p nve-text="label">label</p>

<h2 nve-text="heading lg">heading large</h2>
<h2 nve-text="heading sm">heading small</h2>
<p nve-text="body sm">body content small</p>
<p nve-text="body lg">body content large</p>

<p nve-text="monospace">monospace</p>
<code nve-text="code">code</code>
<p nve-text="nowrap">nowrap</p>

<p nve-text="muted">muted</p>
<p nve-text="emphasis">emphasis</p>

<p nve-text="start">start</p>
<p nve-text="center">center</p>
<p nve-text="end">end</p>
```

### Values

| name | type | value  |
| ---- | ---- | ------ |
| `nve-text` | `string` |`body`, `heading`, `label`, `list`, `code`, `link`, `truncate`, `xl`, `lg`, `sm`, `xs`, `unstyled`, `nav`, `disabled`, `visited`, `no-visit`, `no-underline`, `emphasis`, `hover`, `muted`, `inherit`, `bold`, `semibold`, `regular`, `medium`, `light`, `uppercase`, `lowercase`, `capitalize`, `start`, `center`, `end`, `nowrap`, `monospace` |

## Icons

List of all available icon names for nve-icon and nve-icon-button.

## Available Icons (275)

`placeholder`, `caret`, `person`, `menu`, `cancel`, `gear`, `chevron`, `logout`, `copy`, `more-actions`, `add`, `arrow`, `delete`, `download`, `search`, `split-vertical`, `sparkles`, `branch`, `refresh`, `double-chevron`, `academic-cap`, `add-asset`, `add-comment`, `add-grid`, `add-user`, `ancestors`, `archive`, `arrow-angle`, `arrow-both`, `arrow-cycle`, `arrow-path-rounded-square`, `arrow-stop`, `at-symbol`, `backspace`, `bar-pill-stack`, `bars-3`, `bars-3-bottom-left`, `bars-3-bottom-right`, `bars-3-center-left`, `bars-4`, `beaker`, `bell`, `bell-slash`, `bell-stroke`, `bold`, `book`, `bookmark`, `bookmark-stroke`, `bounding-box`, `briefcase`, `broadcast`, `browser`, `bug`, `calendar`, `camera`, `carets-closed-square`, `carousel`, `category-list`, `chart-bar`, `chat-bubble`, `chat-bubbles`, `check`, `check-badge`, `checklist`, `checkmark-circle`, `chip`, `circle`, `circle-angled-line`, `circle-dash`, `circle-dot`, `circle-dot-arrows`, `circle-half`, `circle-rule`, `circle-tick`, `clipboard`, `clock`, `clock-circle-arrow`, `cloud`, `cloud-download`, `cloud-upload`, `code`, `collapse-all`, `collapse-details`, `color-palette`, `columns`, `compare`, `computer`, `connect-node`, `connected-blocks`, `cross-hairs`, `cursor-rays`, `cursor-ripples`, `data-management`, `delete-node`, `doc-checkmark`, `dock-bottom`, `dock-none`, `dock-side`, `document`, `document-clipboard`, `dot`, `dot-stroke`, `drag`, `dropper`, `duplicate`, `edit`, `ellipses`, `envelope`, `exclamation-circle`, `exclamation-mark`, `exclamation-triangle`, `expand-all`, `expand-details`, `expression`, `eye`, `eye-hidden`, `face-frown`, `face-smile`, `fast-forward`, `fast-forward-10`, `film`, `filter`, `filter-stroke`, `flag`, `flag-stroke`, `fold`, `folder`, `fork`, `globe`, `globe-alt-stroke`, `group`, `group-boxes`, `hand`, `hash`, `heading`, `home`, `horizontal-rule`, `hourglass`, `hourglass-end`, `hourglass-mid`, `hourglass-start`, `identification`, `image`, `inbox`, `infinity`, `information-circle-stroke`, `inspect`, `italic`, `key`, `keyboard`, `laptop-phone`, `layers`, `lifebuoy`, `lightbulb`, `lightning-bolt`, `link`, `list-ordered`, `list-unordered`, `lock`, `login`, `looping`, `looping-off`, `map`, `map-drives`, `map-pin`, `markdown`, `maximize`, `megaphone`, `merge`, `meter`, `minimize`, `minus`, `minus-circle`, `moon`, `multiselect`, `music-note`, `newspaper`, `not-allowed`, `numbers`, `office-building`, `outline`, `paper-airplane`, `paper-clip`, `pause`, `pencil-square`, `person-2`, `person-3`, `person-circle`, `phone`, `picture-in-picture`, `pie-chart`, `pin`, `pizza-slice`, `play`, `plug`, `plus-circle`, `plus-minus`, `pointer`, `pointer-stroke`, `priority-high`, `priority-low`, `priority-medium`, `projector`, `pull-close`, `pull-draft`, `pull-open`, `pulse`, `puzzle-piece`, `question-mark-circle`, `question-mark-circle-stroke`, `rectangle-group`, `rectangle-stack-horizontal`, `rectangle-stack-vertical`, `redo`, `reply`, `rewind`, `rewind-10`, `rocketship`, `running`, `scale`, `scissors`, `sensor`, `server`, `server-stack`, `shapes`, `share`, `signal`, `signal-slash`, `signpost`, `sort-ascending`, `sort-descending`, `soundwave`, `split-horizontal`, `split-none`, `star`, `star-half`, `star-stroke`, `start`, `status-offline`, `status-online`, `stop`, `stop-sign`, `stopwatch`, `strikethrough`, `sun`, `swatch`, `switch`, `switch-apps`, `table`, `tag`, `task`, `telescope`, `template`, `terminal`, `thumb`, `thumb-stroke`, `traffic-cone`, `transparent-box`, `trend-down`, `trend-up`, `trophy`, `truck`, `typography`, `undo`, `unlock`, `upload`, `video-camera`, `view-as-grid`, `volume`, `volume-muted`, `wifi`, `wrench`, `x-circle`, `zoom-in`, `zoom-out`

## Tokens

List of all available semantic CSS custom properties / design tokens for theming.

## CSS Variables

Available semantic design tokens for theming.
| name     | value | Description |
| -------- | ----- | ----------- |
| --nve-ref-animation-easing-100 | ease-in-out | Use for smooth transitions |
| --nve-ref-border-color | var(--nve-ref-color-neutral-800) | Use for default borders that match the standard color scheme |
| --nve-ref-border-color-emphasis | var(--nve-ref-color-neutral-1000) | Use for borders that need high contrast and emphasis |
| --nve-ref-border-color-inverse | var(--nve-ref-color-scheme-inverse) | Use for borders on inverse color scheme backgrounds |
| --nve-ref-border-color-muted | var(--nve-ref-color-neutral-700) | Use for subtle borders that blend with backgrounds |
| --nve-ref-border-radius-full | 999px | Use for fully rounded pill-shaped elements like buttons and badges |
| --nve-ref-border-radius-lg | 14px | Use for generous corner rounding on large containers |
| --nve-ref-border-radius-md | 8px | Use for standard corner rounding on cards and panels |
| --nve-ref-border-radius-none | 0px | Use for square corners with no rounding |
| --nve-ref-border-radius-sm | 6px | Use for slight corner rounding on form controls and small components |
| --nve-ref-border-radius-xl | 24px | Use for very rounded corners on prominent containers |
| --nve-ref-border-radius-xs | 4px | Use for subtle corner rounding on compact elements |
| --nve-ref-border-width-lg | 3px | Use for prominent borders on emphasized containers |
| --nve-ref-border-width-md | 2px | Use for standard borders on containers and panels |
| --nve-ref-border-width-sm | 1px | Use for subtle borders on cards and dividers |
| --nve-ref-border-width-xl | 4px | Use for very thick borders on highly emphasized elements |
| --nve-ref-font-family | var(--nve-ref-font-family-inter) | Use for default body text and UI elements |
| --nve-ref-font-size-100 | 12px | Use for small body text or compact labels |
| --nve-ref-font-size-1000 | 40px | Use for default display text |
| --nve-ref-font-size-1100 | 44px | Use for large display text |
| --nve-ref-font-size-1200 | 50px | Use for extra large display text |
| --nve-ref-font-size-200 | 14px | Use for default body text, labels, and small headings |
| --nve-ref-font-size-300 | 16px | Use for large body text or small headings |
| --nve-ref-font-size-400 | 18px | Use for default headings or extra large body text |
| --nve-ref-font-size-50 | 10px | Use for very small labels or compact UI text |
| --nve-ref-font-size-500 | 20px | Use for large headings |
| --nve-ref-font-size-600 | 24px | Use for extra large headings |
| --nve-ref-font-size-700 | 28px | Use for very large headings |
| --nve-ref-font-size-800 | 32px | Use for prominent headings |
| --nve-ref-font-size-900 | 36px | Use for small display text |
| --nve-ref-font-weight-bold | 700 | Use for strong text emphasis |
| --nve-ref-font-weight-extra-bold | 800 | Use for maximum text emphasis |
| --nve-ref-font-weight-light | 200 | Use for subtle text emphasis |
| --nve-ref-font-weight-medium | 500 | Use for labels and medium emphasis |
| --nve-ref-font-weight-regular | 400 | Use for body text and default content |
| --nve-ref-font-weight-semibold | 600 | Use for navigation and strong emphasis |
| --nve-ref-shadow-100 | 0px 16px 32px 0px oklch(12.6% 0.022 276.4 / 0.02) | Use for subtle elevation on cards and floating elements |
| --nve-ref-shadow-200 | 0px 16px 32px 0px oklch(12.6% 0.022 276.4 / 0.05) | Use for light elevation on raised panels and modals |
| --nve-ref-shadow-300 | 0px 16px 32px 0px oklch(12.6% 0.022 276.4 / 0.08) | Use for moderate elevation on dialogs and overlays |
| --nve-ref-shadow-400 | 0px 16px 32px 0px oklch(12.6% 0.022 276.4 / 0.12) | Use for prominent elevation on important floating content |
| --nve-ref-shadow-500 | 0px 16px 32px 0px oklch(12.6% 0.022 276.4 / 0.17) | Use for maximum elevation on top-level modals and popovers |
| --nve-ref-size-100 | 4px | Use for tight padding and margins within small elements |
| --nve-ref-size-1000 | 40px | Use for maximum padding and margins within very large containers |
| --nve-ref-size-150 | 6px | Use for compact padding and margins within elements |
| --nve-ref-size-200 | 8px | Use for standard padding and margins within form controls and small components |
| --nve-ref-size-250 | 10px | Use for comfortable padding and margins within medium elements |
| --nve-ref-size-300 | 12px | Use for standard padding and margins within buttons and interactive elements |
| --nve-ref-size-400 | 16px | Use for comfortable padding and margins within cards and panels |
| --nve-ref-size-50 | 2px | Use for minimal padding and margins within compact elements |
| --nve-ref-size-500 | 20px | Use for generous padding and margins within larger components |
| --nve-ref-size-600 | 24px | Use for spacious padding and margins within containers |
| --nve-ref-size-700 | 28px | Use for extra padding and margins within large components |
| --nve-ref-size-800 | 32px | Use for standard height of form inputs and buttons |
| --nve-ref-size-900 | 36px | Use for extra large padding and margins within oversized elements |
| --nve-ref-space-lg | 24px | Use for generous gaps between major sections and content blocks |
| --nve-ref-space-md | 16px | Use for comfortable gaps between sections and groups of elements |
| --nve-ref-space-none | 0px | Use when no spacing is needed between elements |
| --nve-ref-space-sm | 12px | Use for standard gaps between form fields and sibling elements in layouts |
| --nve-ref-space-xl | 32px | Use for large gaps between distinct page sections |
| --nve-ref-space-xs | 8px | Use for small gaps between form fields and related content |
| --nve-sys-accent-primary-background | var(--nve-ref-color-brand-green-900) | Use for primary accent backgrounds and key visual elements |
| --nve-sys-accent-secondary-background | var(--nve-ref-color-blue-cobalt-1000) | Use for secondary accent backgrounds and supporting visual elements |
| --nve-sys-accent-tertiary-background | var(--nve-ref-color-scheme-inverse) | Use for tertiary accent backgrounds and subtle visual elements |
| --nve-sys-interaction-background | var(--nve-ref-color-neutral-600) | Use for default interactive element backgrounds |
| --nve-sys-interaction-background-100 | var(--nve-ref-color-neutral-600) | Use for subtle interactive element backgrounds |
| --nve-sys-interaction-background-200 | var(--nve-ref-color-neutral-500) | Use for standard interactive element backgrounds |
| --nve-sys-interaction-background-300 | var(--nve-ref-color-neutral-500) | Use for elevated interactive element backgrounds |
| --nve-sys-interaction-color | var(--nve-ref-color-neutral-1200) | Use for default interactive element text color |
| --nve-sys-interaction-destructive-background | var(--nve-ref-color-red-cardinal-1100) | Use for background color in destructive action buttons |
| --nve-sys-interaction-destructive-color | var(--nve-sys-text-white-color) | Use for text color in destructive action buttons |
| --nve-sys-interaction-disabled-background | var(--nve-ref-color-neutral-600) | Use for background color in disabled interactive elements |
| --nve-sys-interaction-disabled-color | var(--nve-ref-color-neutral-800) | Use for text color in disabled interactive elements |
| --nve-sys-interaction-emphasis-background | var(--nve-sys-accent-primary-background) | Use for background color in primary call-to-action buttons |
| --nve-sys-interaction-emphasis-color | var(--nve-sys-text-black-color) | Use for text color in primary call-to-action buttons |
| --nve-sys-interaction-field-background | var(--nve-sys-interaction-background) | Use for background color in form inputs and text fields |
| --nve-sys-interaction-field-background-100 | var(--nve-sys-interaction-background-100) | Use for subtle form input backgrounds |
| --nve-sys-interaction-field-background-200 | var(--nve-sys-interaction-background-200) | Use for standard form input backgrounds |
| --nve-sys-interaction-field-background-300 | var(--nve-sys-interaction-background-300) | Use for elevated form input backgrounds |
| --nve-sys-interaction-field-color | var(--nve-sys-interaction-color) | Use for text color in form inputs and text fields |
| --nve-sys-interaction-field-height | var(--nve-ref-size-800) | Use for standard height of form inputs and buttons |
| --nve-sys-interaction-highlighted-background | var(--nve-ref-color-blue-cobalt-500) | Use for background color in highlighted interactive elements |
| --nve-sys-interaction-highlighted-color | var(--nve-sys-interaction-color) | Use for text color in highlighted interactive elements |
| --nve-sys-interaction-highlighted-muted-background | var(--nve-ref-color-blue-cobalt-300) | Use for subtle highlighted element backgrounds |
| --nve-sys-interaction-hover-background | var(--nve-sys-interaction-background) | Use for background color when hovering over interactive elements |
| --nve-sys-interaction-hover-color | var(--nve-sys-text-emphasis-color) | Use for text color when hovering over interactive elements |
| --nve-sys-interaction-selected-background | var(--nve-sys-interaction-background) | Use for background color in selected interactive elements |
| --nve-sys-interaction-selected-color | var(--nve-sys-text-emphasis-color) | Use for text color in selected interactive elements |
| --nve-sys-interaction-state-base | var(--nve-sys-interaction-background) | Use as the base color when computing dynamic interaction states |
| --nve-sys-interaction-state-mix | var(--nve-ref-color-neutral-1200) | Use as the mix color when computing dynamic interaction states |
| --nve-sys-layer-backdrop-background | var(--nve-ref-color-alpha-black-400) | Use for backdrop behind modals and overlays to dim the background |
| --nve-sys-layer-canvas-accent-background | var(--nve-ref-color-neutral-400) | Use for subtle accent backgrounds on the page body |
| --nve-sys-layer-canvas-background | var(--nve-ref-color-neutral-300) | Use for page body background, the base surface in the layer hierarchy |
| --nve-sys-layer-canvas-color | var(--nve-sys-text-color) | Use for text color on the page body background |
| --nve-sys-layer-container-accent-background | var(--nve-ref-color-neutral-100) | Use for subtle accent backgrounds within containers |
| --nve-sys-layer-container-background | var(--nve-ref-color-white) | Use for card, panel, and tab container backgrounds |
| --nve-sys-layer-container-color | var(--nve-sys-text-color) | Use for text color on container surfaces |
| --nve-sys-layer-overlay-accent-background | var(--nve-ref-color-neutral-100) | Use for subtle accent backgrounds within overlays |
| --nve-sys-layer-overlay-background | var(--nve-ref-color-white) | Use for modal, drawer, and dropdown menu backgrounds |
| --nve-sys-layer-overlay-color | var(--nve-sys-text-color) | Use for text color on overlay surfaces |
| --nve-sys-layer-popover-accent-background | var(--nve-ref-color-neutral-1100) | Use for subtle accent backgrounds within popovers |
| --nve-sys-layer-popover-arrow-offset | var(--nve-ref-size-100) | Use for positioning popover arrow indicators |
| --nve-sys-layer-popover-arrow-padding | var(--nve-ref-size-150) | Use for padding around popover arrow indicators |
| --nve-sys-layer-popover-background | var(--nve-ref-color-neutral-1200) | Use for tooltip, toast, and notification backgrounds |
| --nve-sys-layer-popover-color | var(--nve-sys-text-white-color) | Use for text color on popover surfaces |
| --nve-sys-layer-popover-offset | var(--nve-ref-size-50) | Use for spacing between popover and its anchor element |
| --nve-sys-layer-shell-accent-background | var(--nve-ref-color-neutral-100) | Use for subtle accent backgrounds on the application shell |
| --nve-sys-layer-shell-background | var(--nve-ref-color-scheme-base) | Use for application shell or navigation bar backgrounds |
| --nve-sys-layer-shell-color | var(--nve-sys-text-color) | Use for text color on the application shell |
| --nve-sys-scrollbar-thumb-color | var(--nve-ref-border-color-muted) | Use for scrollbar thumb color in scrollable containers |
| --nve-sys-scrollbar-track-color | var(--nve-ref-color-alpha-black-200) | Use for scrollbar track color in scrollable containers |
| --nve-sys-scrollbar-width | thin | Use for scrollbar width in scrollable containers |
| --nve-sys-status-color | var(--nve-ref-color-neutral-1000) | Use for default task status indicators |
| --nve-sys-status-failed-color | var(--nve-ref-color-red-cardinal-1100) | Use for failed task status indicators |
| --nve-sys-status-finished-color | var(--nve-ref-color-green-grass-1100) | Use for finished task status indicators |
| --nve-sys-status-ignored-color | var(--nve-ref-color-neutral-1100) | Use for ignored task status indicators |
| --nve-sys-status-pending-color | var(--nve-ref-color-neutral-1100) | Use for pending task status indicators |
| --nve-sys-status-queued-color | var(--nve-ref-color-blue-indigo-1100) | Use for queued task status indicators |
| --nve-sys-status-restarting-color | var(--nve-ref-color-yellow-amber-1100) | Use for restarting task status indicators |
| --nve-sys-status-running-color | var(--nve-ref-color-blue-cobalt-1100) | Use for running task status indicators |
| --nve-sys-status-scheduled-color | var(--nve-ref-color-purple-violet-1100) | Use for scheduled task status indicators |
| --nve-sys-status-starting-color | var(--nve-ref-color-green-mint-1100) | Use for starting task status indicators |
| --nve-sys-status-stopping-color | var(--nve-ref-color-pink-rose-1100) | Use for stopping task status indicators |
| --nve-sys-status-unknown-color | var(--nve-sys-text-black-color) | Use for unknown task status indicators |
| --nve-sys-support-accent-color | var(--nve-sys-accent-secondary-background) | Use for accent UI feedback text and icons |
| --nve-sys-support-accent-emphasis-color | var(--nve-ref-color-blue-cobalt-1100) | Use for emphasized accent UI feedback text and icons |
| --nve-sys-support-accent-muted-color | var(--nve-ref-color-blue-cobalt-400) | Use for subtle accent UI feedback text and icons |
| --nve-sys-support-color | var(--nve-ref-color-neutral-1000) | Use for default UI feedback text and icons |
| --nve-sys-support-danger-color | var(--nve-ref-color-red-cardinal-1100) | Use for error feedback text and icons in alerts and badges |
| --nve-sys-support-danger-emphasis-color | var(--nve-ref-color-red-cardinal-1100) | Use for emphasized error feedback text and icons |
| --nve-sys-support-danger-muted-color | var(--nve-ref-color-red-cardinal-400) | Use for subtle error feedback text and icons |
| --nve-sys-support-emphasis-color | var(--nve-ref-color-neutral-1000) | Use for emphasized default UI feedback text and icons |
| --nve-sys-support-muted-color | var(--nve-ref-color-neutral-600) | Use for subtle default UI feedback text and icons |
| --nve-sys-support-success-color | var(--nve-ref-color-green-grass-1100) | Use for success feedback text and icons in alerts and badges |
| --nve-sys-support-success-emphasis-color | var(--nve-ref-color-green-grass-1100) | Use for emphasized success feedback text and icons |
| --nve-sys-support-success-muted-color | var(--nve-ref-color-green-grass-400) | Use for subtle success feedback text and icons |
| --nve-sys-support-warning-color | var(--nve-ref-color-yellow-nova-800) | Use for warning feedback text and icons in alerts and badges |
| --nve-sys-support-warning-emphasis-color | var(--nve-ref-color-yellow-nova-1000) | Use for emphasized warning feedback text and icons |
| --nve-sys-support-warning-muted-color | var(--nve-ref-color-yellow-nova-300) | Use for subtle warning feedback text and icons |
| --nve-sys-text-black-color | var(--nve-ref-color-black) | Use for text that must appear on light backgrounds |
| --nve-sys-text-color | var(--nve-ref-color-neutral-1200) | Use for default body text and general content |
| --nve-sys-text-emphasis-color | var(--nve-ref-color-neutral-1200) | Use for highlighted text, selected items, and high-priority content |
| --nve-sys-text-link-color | var(--nve-ref-color-neutral-1200) | Use for default link text color |
| --nve-sys-text-link-disabled-color | var(--nve-ref-color-neutral-400) | Use for disabled link text |
| --nve-sys-text-link-emphasis-color | var(--nve-ref-color-blue-cobalt-1000) | Use for emphasized link text |
| --nve-sys-text-link-hover-color | var(--nve-ref-color-blue-cobalt-1100) | Use for link text when hovered or focused |
| --nve-sys-text-link-visited-color | var(--nve-ref-color-purple-lavender-1000) | Use for visited link text |
| --nve-sys-text-muted-color | var(--nve-ref-color-neutral-1100) | Use for secondary text, labels, and less prominent content |
| --nve-sys-text-placeholder-color | var(--nve-ref-color-neutral-900) | Use for placeholder text in input fields and form controls |
| --nve-sys-text-white-color | var(--nve-ref-color-white) | Use for text that must appear on dark backgrounds |
| --nve-sys-visualization-categorical-amber | var(--nve-ref-color-yellow-amber-1000) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-cyan | var(--nve-ref-color-teal-cyan-800) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-grass | var(--nve-ref-color-green-grass-1000) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-lavender | var(--nve-ref-color-purple-lavender-900) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-nova | var(--nve-ref-color-yellow-nova-800) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-pear | var(--nve-ref-color-lime-pear-900) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-pumpkin | var(--nve-ref-color-orange-pumpkin-900) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-red | var(--nve-ref-color-red-cardinal-1000) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-rose | var(--nve-ref-color-pink-rose-900) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-seafoam | var(--nve-ref-color-teal-seafoam-900) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-slate | var(--nve-ref-color-neutral-1000) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-categorical-violet | var(--nve-ref-color-purple-violet-1000) | Use for categorical data visualization when representing distinct groups |
| --nve-sys-visualization-sequential-diverging-red-green-100 | oklch(49.9% 0.159 23.4) | Use for the most extreme negative values in a diverging red-green scale |
| --nve-sys-visualization-sequential-diverging-red-green-200 | oklch(59.6% 0.195 23.8) | Use for strong negative values that deviate significantly from center |
| --nve-sys-visualization-sequential-diverging-red-green-300 | oklch(68.4% 0.193 22) | Use for moderate negative values below the neutral midpoint |
| --nve-sys-visualization-sequential-diverging-red-green-400 | oklch(83.3% 0.083 18.1) | Use for slight negative values just below the center point |
| --nve-sys-visualization-sequential-diverging-red-green-500 | var(--nve-ref-color-neutral-400) | Use for neutral values at the center point of a diverging scale |
| --nve-sys-visualization-sequential-diverging-red-green-600 | oklch(86.4% 0.117 148.8) | Use for slight positive values just above the center point |
| --nve-sys-visualization-sequential-diverging-red-green-700 | oklch(72.5% 0.176 148.7) | Use for moderate positive values above the neutral midpoint |
| --nve-sys-visualization-sequential-diverging-red-green-800 | oklch(62.7% 0.157 148.3) | Use for strong positive values that deviate significantly from center |
| --nve-sys-visualization-sequential-diverging-red-green-900 | oklch(47.5% 0.109 150.4) | Use for the most extreme positive values in a diverging red-green scale |
| --nve-sys-visualization-sequential-diverging-virdis-100 | oklch(91.8% 0.187 102.2) | Use for the highest values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-1000 | oklch(49.1% 0.083 242.3) | Use for very low values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-1100 | oklch(45.3% 0.094 261.6) | Use for near-minimum values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-1200 | oklch(41.9% 0.108 278.7) | Use for very low values approaching the bottom of a viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-1300 | oklch(37.1% 0.124 293.4) | Use for near-bottom values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-1400 | oklch(33.3% 0.134 306.3) | Use for minimal values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-1500 | oklch(27.6% 0.132 318.4) | Use for the lowest values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-200 | oklch(85.9% 0.19 115) | Use for very high values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-300 | oklch(82.1% 0.194 126.8) | Use for high values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-400 | oklch(77.5% 0.187 137.2) | Use for moderately high values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-500 | oklch(73.4% 0.164 147.5) | Use for upper-mid range values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-600 | oklch(69.1% 0.145 157.3) | Use for mid-range values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-700 | oklch(64.6% 0.12 169.6) | Use for lower-mid range values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-800 | oklch(60.2% 0.1 184.4) | Use for moderately low values in a sequential viridis scale |
| --nve-sys-visualization-sequential-diverging-virdis-900 | oklch(56.8% 0.087 200.1) | Use for low values in a sequential viridis scale |
| --nve-sys-visualization-trend-negative-color | var(--nve-ref-color-red-cardinal-1000) | Use for negative trend indicators in data visualizations |
| --nve-sys-visualization-trend-negative-emphasis-color | var(--nve-ref-color-red-cardinal-1100) | Use for emphasized negative trend indicators in data visualizations |
| --nve-sys-visualization-trend-positive-color | var(--nve-ref-color-green-grass-1000) | Use for positive trend indicators in data visualizations |
| --nve-sys-visualization-trend-positive-emphasis-color | var(--nve-ref-color-green-grass-1100) | Use for emphasized positive trend indicators in data visualizations |

# Examples

List of all available UI patterns and example templates.

- [template-auth](https://nvidia.github.io/elements/context/examples/template-auth.md): Page-level starter for sign-in pages. Centered card with email, password, OAuth options, and signup link.
- [template-chat](https://nvidia.github.io/elements/context/examples/template-chat.md): Page-level starter for chat experiences. Conversation list, message thread, and prompt composer.
- [template-code-editor](https://nvidia.github.io/elements/context/examples/template-code-editor.md): Page-level starter for IDE-style editors. File tree, tabbed code editor, and console panel.
- [template-dashboard](https://nvidia.github.io/elements/context/examples/template-dashboard.md): Page-level starter for analytics dashboards. KPI cards, sparkline trends, and an activity grid.
- [template-detail-view](https://nvidia.github.io/elements/context/examples/template-detail-view.md): Page-level starter for object detail views. Breadcrumb, summary metadata, and grouped content sections.
- [template-docs](https://nvidia.github.io/elements/context/examples/template-docs.md): Page-level starter for developer docs. Search header, hierarchical nav tree, and an article with prose and code samples.
- [template-list-view](https://nvidia.github.io/elements/context/examples/template-list-view.md): Page-level starter for tabular list views. Search, view toggle, and a sortable data grid of records.
- [template-media-detail-view](https://nvidia.github.io/elements/context/examples/template-media-detail-view.md): Page-level starter for object detail views with media playback. Player canvas with metadata panel and playback controls.
- [template-split-view](https://nvidia.github.io/elements/context/examples/template-split-view.md): Page-level starter for master-detail split views. Data grid of records with a resizable detail panel for the selected row.
- [template-wizard](https://nvidia.github.io/elements/context/examples/template-wizard.md): Page-level starter for multi-step wizards. Stepper, form sections, and footer navigation.
- [pattern-authentication-login-form](https://nvidia.github.io/elements/context/examples/pattern-authentication-login-form.md): Login form with email and password fields with credential validation. Use for authentication entry points where real-time feedback guides users through sign-in requirements.
- [pattern-authentication-login-page](https://nvidia.github.io/elements/context/examples/pattern-authentication-login-page.md): Full login page layout with centered card form using nve-page for responsive page structure.
- [pattern-authentication-no-access](https://nvidia.github.io/elements/context/examples/pattern-authentication-no-access.md): Permission denied states informing users of access restrictions with a contact option.
- [pattern-dashboard-project-board](https://nvidia.github.io/elements/context/examples/pattern-dashboard-project-board.md): Project board with workflow stage columns for tracking items through a workflow / process pipeline. Use for project management views where teams need to visualize work-in-progress across sequential stages like build, test, and merge workflows.
- [pattern-dashboard-training-monitor](https://nvidia.github.io/elements/context/examples/pattern-dashboard-training-monitor.md): Dashboard masonry layout for monitoring workflows with KPI cards, sparkline trends, and a checkpoint evaluation grid. Use for real-time operational views where users need to scan progress and spot anomalies at a glance.
- [pattern-editor-diff-view](https://nvidia.github.io/elements/context/examples/pattern-editor-diff-view.md): Side-by-side diff view for comparing configuration changes between releases. Essential for reviewing updates before deploying new AV sensor calibrations or robot parameters.
- [pattern-editor-file-browser](https://nvidia.github.io/elements/context/examples/pattern-editor-file-browser.md): IDE-style layout with file tree navigation, code editor, and output panel. Ideal for browsing and editing AV sensor configuration files in a familiar development environment.
- [pattern-editor-read-only](https://nvidia.github.io/elements/context/examples/pattern-editor-read-only.md): Reviewing deployed configurations or viewing session logs in a read-only code viewer. Prevents accidental edits while allowing full code navigation and search.
- [pattern-empty-states-data-grid-retry](https://nvidia.github.io/elements/context/examples/pattern-empty-states-data-grid-retry.md): Data grid empty state with retry action. Use when requested data is not found and a retry action is available.
- [pattern-empty-states-empty-data](https://nvidia.github.io/elements/context/examples/pattern-empty-states-empty-data.md): First-time or empty collection states with an illustration and call-to-action to guide users.
- [pattern-empty-states-no-results](https://nvidia.github.io/elements/context/examples/pattern-empty-states-no-results.md): No search results match to suggest refining filters or clearing search criteria.
- [pattern-empty-states-offline-mode](https://nvidia.github.io/elements/context/examples/pattern-empty-states-offline-mode.md): Use to show offline mode with information about limited functionality and last sync time.
- [pattern-heatmap-occupancy-detection-heatmap](https://nvidia.github.io/elements/context/examples/pattern-heatmap-occupancy-detection-heatmap.md): Grid heatmap displaying occupancy probability for dynamic obstacle detection across a spatial coordinate grid. Ideal for robotics and AV perception teams visualizing sensor fusion output to identify high-occupancy zones and detection blind spots using viridis scale.
- [pattern-heatmap-sensor-coverage-heatmap](https://nvidia.github.io/elements/context/examples/pattern-heatmap-sensor-coverage-heatmap.md): Grid heatmap showing sensor coverage for autonomous vehicle perception systems across distance ranges. Useful for AV engineers analyzing LiDAR, radar, and camera fusion performance to identify blind spots.
- [pattern-keyboard-shortcuts-shortcut-filled](https://nvidia.github.io/elements/context/examples/pattern-keyboard-shortcuts-shortcut-filled.md): Keyboard shortcut badge with filled styling for displaying key combinations. Use in help dialogs, onboarding tooltips, or documentation to communicate available shortcuts to users.
- [pattern-logging-event-timeline](https://nvidia.github.io/elements/context/examples/pattern-logging-event-timeline.md): Chronological event timeline with severity-coded entries for monitoring system events. Use for reviewing operational logs where temporal ordering and quick severity scanning are critical.
- [pattern-media-audio-player-card](https://nvidia.github.io/elements/context/examples/pattern-media-audio-player-card.md): Compact audio player controls with playback controls, and timestamp display. Ideal for reviewing audio logs, voice commands, or alert sounds.
- [pattern-media-page-layout-video](https://nvidia.github.io/elements/context/examples/pattern-media-page-layout-video.md): Full-page video player layout with metadata panel and playback controls. Use for reviewing recordings that requires detailed contextual information.
- [pattern-media-playback-control](https://nvidia.github.io/elements/context/examples/pattern-media-playback-control.md): Playback transport controls with start, rewind, play, fast forward, and end buttons in a flat button group. Use as the core navigation component in media players, simulation reviewers, or timeline-based interfaces.
- [pattern-media-playback-speed-control](https://nvidia.github.io/elements/context/examples/pattern-media-playback-speed-control.md): Playback speed control using a rounded button group with preset speed options for audio and video playback. Use when toolbar space allows discrete speed buttons and users need to see all options at once.
- [pattern-media-playback-speed-menu-control](https://nvidia.github.io/elements/context/examples/pattern-media-playback-speed-menu-control.md): Compact playback speed control using a flat select dropdown for audio and video playback. Use when toolbar space is tight and a dropdown works better than a button group for speed selection.
- [pattern-media-time-scrubber-control](https://nvidia.github.io/elements/context/examples/pattern-media-time-scrubber-control.md): Time scrubber with current position, range slider, and total duration for audio and video playback. Use in media players where users need to seek to a specific timestamp or scan through recorded content.
- [pattern-media-video-player-card](https://nvidia.github.io/elements/context/examples/pattern-media-video-player-card.md): Standard video player with playback controls, timeline scrubber, and volume controls. Use for reviewing recorded sensor data, simulation playback, or training video content.
- [pattern-media-volume-control](https://nvidia.github.io/elements/context/examples/pattern-media-volume-control.md): Volume control with mute toggle and range slider for audio playback. Use in media players, video reviewers, or any interface where users need fine-grained audio level control.
- [pattern-media-zoom-control](https://nvidia.github.io/elements/context/examples/pattern-media-zoom-control.md): Zoom level control with zoom-out, range slider, and zoom-in buttons for video and canvas content. Use in media viewers, map interfaces, or image editors where users need precise zoom control.
- [pattern-navigation-complex-tree-navigation](https://nvidia.github.io/elements/context/examples/pattern-navigation-complex-tree-navigation.md): Tree integrated in vertical navigation. Use for providing structured sidebar navigation for application layouts and content organization.
- [pattern-navigation-drawer-navigation](https://nvidia.github.io/elements/context/examples/pattern-navigation-drawer-navigation.md): Drawer based navigation. Use for secondary or mobile navigation when available space gets tight.
- [pattern-onboarding-multi-step-form-wizard](https://nvidia.github.io/elements/context/examples/pattern-onboarding-multi-step-form-wizard.md): Multi-step wizard layout. Use for complex multi-step forms with validation, progress, and save checkpoints.
- [pattern-onboarding-user-onboarding-wizard](https://nvidia.github.io/elements/context/examples/pattern-onboarding-user-onboarding-wizard.md): Multi-step wizard layout with progress stepper for guided workflows. Use for onboarding flows, enrollment forms, or configuration processes where users complete sequential steps with clear progress tracking.
- [pattern-panel-accordion](https://nvidia.github.io/elements/context/examples/pattern-panel-accordion.md): Organizing filterable, collapsible content groups in a panel with search input and expandable accordion sections.
- [pattern-panel-key-value](https://nvidia.github.io/elements/context/examples/pattern-panel-key-value.md): Displaying metadata like release info, dates, status badges, and links in a side panel with labeled key-value pairs.
- [pattern-panel-tabbed-header](https://nvidia.github.io/elements/context/examples/pattern-panel-tabbed-header.md): Switching between categorized detail views with tabbed navigation in the panel header.
- [pattern-search-filter-toolbar](https://nvidia.github.io/elements/context/examples/pattern-search-filter-toolbar.md): Search toolbar with filter functionality including progressive filter chips and search combobox for data filtering scenarios.
- [pattern-subheader-standard-header-main-page](https://nvidia.github.io/elements/context/examples/pattern-subheader-standard-header-main-page.md): Main page subheaders with breadcrumb, page title, and action buttons in a clean two-row layout.
- [pattern-subheader-standard-header-viewer-page](https://nvidia.github.io/elements/context/examples/pattern-subheader-standard-header-viewer-page.md): Viewer page subheader with centered zoom/layout controls and grouped action buttons. Ideal for media viewers, document previews, and split-pane layouts.
- [pattern-trend-badge](https://nvidia.github.io/elements/context/examples/pattern-trend-badge.md): Trend badges for displaying data changes and metrics. Perfect for dashboards, analytics, or financial data showing positive, negative, or neutral trends.
- [pattern-trend-badge-detail](https://nvidia.github.io/elements/context/examples/pattern-trend-badge-detail.md): Displays a metric with a trend indicator. Ideal for dashboards and analytics where users need to quickly assess changes and understand the scale of change at a glance.
- [pattern-trend-card](https://nvidia.github.io/elements/context/examples/pattern-trend-card.md): Trend card for displaying a metric with a trend indicator. Ideal for dashboards and analytics where users need to quickly assess changes and understand the scale of change at a glance.
- [pattern-trend-grid](https://nvidia.github.io/elements/context/examples/pattern-trend-grid.md): Trend grid for displaying a list of metrics with a trend indicator. Ideal for dashboards and analytics where users need to quickly assess changes and understand the scale of change at a glance.
- [page](https://nvidia.github.io/elements/context/examples/page.md): Nve-page layout with a header and main content.
- [page-document-scroll](https://nvidia.github.io/elements/context/examples/page-document-scroll.md): Use document scroll for static content sites that do not require a fixed navigation.
- [page-header](https://nvidia.github.io/elements/context/examples/page-header.md): Page header with logo, navigation links, and user actions in a standard layout structure.
- [page-header-app-logo](https://nvidia.github.io/elements/context/examples/page-header-app-logo.md): Use the Logo element when representing an application that is part of a suite of applications in a given problem domain.
- [page-header-center-navigation](https://nvidia.github.io/elements/context/examples/page-header-center-navigation.md): Page header with navigation centered in the available space for balanced visual hierarchy.
- [page-header-dropdown-menu](https://nvidia.github.io/elements/context/examples/page-header-dropdown-menu.md): Use dropdowns and menus to allow progressive disclosure of extra navigation or global user actions.
- [page-header-menu-button](https://nvidia.github.io/elements/context/examples/page-header-menu-button.md): Use a Icon Button to represent collapsible top-level navigation, optimal for mobile or constrained viewport sizes.
- [page-header-prefix-navigation](https://nvidia.github.io/elements/context/examples/page-header-prefix-navigation.md): Page header with primary navigation positioned after the logo and branding area.
- [page-header-search](https://nvidia.github.io/elements/context/examples/page-header-search.md): Page header with integrated search functionality for content discovery within the application.
- [page-header-suffix-navigation](https://nvidia.github.io/elements/context/examples/page-header-suffix-navigation.md): Page header with all navigation positioned at the end for common and persistent user actions between page navigation.
- [page-header-user-detail](https://nvidia.github.io/elements/context/examples/page-header-user-detail.md): Page header displaying user information and avatar for personalized application experiences.
- [page-interaction-drawer](https://nvidia.github.io/elements/context/examples/page-interaction-drawer.md): Use Drawer to create navigation that is outside the context of the current view.
- [page-interaction-panel-navigation](https://nvidia.github.io/elements/context/examples/page-interaction-panel-navigation.md): Use Page Panel with Toolbar to create complex navigation groups that are within the context of the current view.
- [page-invoker-command](https://nvidia.github.io/elements/context/examples/page-invoker-command.md): Use Page Panel with Invoker Command API to dynamically open and close page panels.
- [page-layout-editor](https://nvidia.github.io/elements/context/examples/page-layout-editor.md): IDE-style editor layout with file outline, main editor, and console panels. Use for code playgrounds, configuration editors, or development tools that need a split-pane workspace with toolbar controls.
- [page-loader](https://nvidia.github.io/elements/context/examples/page-loader.md): Full-page loading indicator displaying centered spinner for initial page load states.
- [page-loader-interactive](https://nvidia.github.io/elements/context/examples/page-loader-interactive.md): Interactive page loader that starts programmatically via button click. Use when user actions such as form submissions, data refreshes, or navigation events start loading states rather than on initial page load.
- [page-panel-closable](https://nvidia.github.io/elements/context/examples/page-panel-closable.md): Closable page panels that fully remove from the layout when dismissed. Use when panels open on demand for temporary tasks like viewing item details or applying filters, and the user needs full main content space when done.
- [page-panel-expandable](https://nvidia.github.io/elements/context/examples/page-panel-expandable.md): Expandable page panels that collapse to a slim strip and toggle open with chevron buttons. Use when panels contain supplementary content that users access intermittently, preserving main content space while keeping panels accessible.
- [page-panel-headings](https://nvidia.github.io/elements/context/examples/page-panel-headings.md): Page panel with title and subtitle headings in the header for labeling panel content. Use to provide clear context about what the panel contains, such as a details pane or properties inspector.
- [page-panel-tabs](https://nvidia.github.io/elements/context/examples/page-panel-tabs.md): Page panel with tabbed header for switching between categorized content views within a sidebar. Use when a panel contains related sections like outline, search, and settings that share the same screen region.
- [page-resize](https://nvidia.github.io/elements/context/examples/page-resize.md): Resizable left panel with drag handle for adjustable sidebar width. Use when users need to control the balance between navigation or outline panels and main content area.
- [page-resize-multi](https://nvidia.github.io/elements/context/examples/page-resize-multi.md): Multi-panel resizable layout with independent drag handles on left, right, and bottom panels. Use for complex workspaces like IDEs or dashboards where users need to customize the size of each content region independently.
- [page-resize-snap](https://nvidia.github.io/elements/context/examples/page-resize-snap.md): Resize handle with snap-to-boundary behavior on double-click for quickly toggling a panel between collapsed and expanded states. Use for detail panels that users frequently show and hide.
- [page-slot-subheader-large](https://nvidia.github.io/elements/context/examples/page-slot-subheader-large.md): Large subheader panel with back navigation, title, metadata, and action buttons. Use for detail pages that need prominent context like entity names, status badges, and key-value metadata above the main content.
- [page-slots](https://nvidia.github.io/elements/context/examples/page-slots.md): Page layout slot reference showing all available panel positions including header, subheader, left, right, bottom, and aside regions. Use as a starting point for understanding how to compose complex application layouts.
- [accordion](https://nvidia.github.io/elements/context/examples/accordion.md): Accordion component for collapsible content sections. Use accordions to progressively disclose information, helping users focus on relevant content while keeping the interface compact and scannable.
- [accordion-with-actions](https://nvidia.github.io/elements/context/examples/accordion-with-actions.md): Accordion with action buttons in header for quick operations without expanding. Perfect for list items where users need both to view details and perform actions like edit, delete, or add, keeping common actions immediately accessible.
- [alert](https://nvidia.github.io/elements/context/examples/alert.md): Alert for inline informational messages. Use alerts for persistent feedback that doesn't auto-dismiss, ideal for system status updates, or contextual information that users may need to reference while completing tasks.
- [alert-invoker-command](https://nvidia.github.io/elements/context/examples/alert-invoker-command.md): Dismissible alerts using the Invoker Command API for declarative close behavior. Use `commandfor` and `command="--close"` on action buttons to dismiss individual alerts without custom JavaScript event handling.
- [avatar](https://nvidia.github.io/elements/context/examples/avatar.md): Avatar component with text initials, providing a simple way to represent users when profile images are unavailable.
- [badge](https://nvidia.github.io/elements/context/examples/badge.md): Badge component with default styling. Use for simple non-interactive labels or status indicators.
- [breadcrumb](https://nvidia.github.io/elements/context/examples/breadcrumb.md): Breadcrumb navigation showing page hierarchy with linked items and current location indicator.
- [breadcrumb-with-icon-button](https://nvidia.github.io/elements/context/examples/breadcrumb-with-icon-button.md): Breadcrumb with home icon button for quick navigation to the root page, offering a compact starting point.
- [breadcrumb-with-menu](https://nvidia.github.io/elements/context/examples/breadcrumb-with-menu.md): Breadcrumb with overflow menu for collapsed navigation levels, ideal for deep hierarchies in limited space.
- [button](https://nvidia.github.io/elements/context/examples/button.md): Button component with standard appearance and behavior for primary user actions.
- [button-contrast-colored-backgrounds](https://nvidia.github.io/elements/context/examples/button-contrast-colored-backgrounds.md): Use standard interaction styling to keep buttons readable on contrasting backgrounds in light and dark themes. This pattern verifies the static button colors that deliver the intended contrast for each theme.
- [button-form-control](https://nvidia.github.io/elements/context/examples/button-form-control.md): Use the form control option for buttons that open custom controls such as dropdowns, filter menus, or pickers within a form layout. This pattern keeps the UI cohesive and helps users recognize the button as part of the form.
- [button-group-action-split](https://nvidia.github.io/elements/context/examples/button-group-action-split.md): Split button groups with different interaction styles for primary actions with dropdown alternatives.
- [button-group-action-split-rounded](https://nvidia.github.io/elements/context/examples/button-group-action-split-rounded.md): Split button groups with rounded container styling for softer visual appearance and modern aesthetics.
- [button-group-disabled](https://nvidia.github.io/elements/context/examples/button-group-disabled.md): Button group in disabled state for indicating unavailable actions or read-only contexts.
- [button-invoker-command](https://nvidia.github.io/elements/context/examples/button-invoker-command.md): Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as rotating an image.
- [card](https://nvidia.github.io/elements/context/examples/card.md): Card component with header, content, and footer sections. Use this as a starting point for simple content containers.
- [chat-message-prefix-suffix](https://nvidia.github.io/elements/context/examples/chat-message-prefix-suffix.md): Chat conversation with prefix and suffix avatars. Ideal for multi-user chat applications where you need to distinguish between different participants.
- [checkbox](https://nvidia.github.io/elements/context/examples/checkbox.md): Checkbox component with label for binary selection and form input.
- [color](https://nvidia.github.io/elements/context/examples/color.md): Color picker input with label and message for selecting hex color values.
- [combobox](https://nvidia.github.io/elements/context/examples/combobox.md): Combobox with search input and datalist options for filtering and selection.
- [combobox-create-options](https://nvidia.github.io/elements/context/examples/combobox-create-options.md): Combobox with create option behavior that allows users to add new options and tags on the fly. Use when the option list is not exhaustive and users need to enter values that don't yet exist.
- [combobox-dynamic-typeahead-search](https://nvidia.github.io/elements/context/examples/combobox-dynamic-typeahead-search.md): Fetches options asynchronously as the user types, cancelling stale requests with AbortController. Use for server-backed search where the full option set is too large to load up front.
- [combobox-footer](https://nvidia.github.io/elements/context/examples/combobox-footer.md): Multi-select with footer action button for extra operations on selected items.
- [combobox-form](https://nvidia.github.io/elements/context/examples/combobox-form.md): Complete form integration showing combobox with form submission, reset, and programmatic value setting.
- [combobox-infinite-scroll](https://nvidia.github.io/elements/context/examples/combobox-infinite-scroll.md): Infinite scroll combobox loading, using the scroll event to append options as the user nears the end of the list. Use for server-backed datasets where loading all options up front is impractical.
- [combobox-reset](https://nvidia.github.io/elements/context/examples/combobox-reset.md): Multi-select with reset functionality via icon button and footer button to clear all selections.
- [combobox-select-all](https://nvidia.github.io/elements/context/examples/combobox-select-all.md): Multi-select with bulk selection controls (Select All/Deselect All) in footer for efficient mass operations.
- [date](https://nvidia.github.io/elements/context/examples/date.md): Date picker input with label and message for selecting calendar dates.
- [date-range](https://nvidia.github.io/elements/context/examples/date-range.md): Date range input with start and end date pickers for selecting time periods and date intervals.
- [date-types](https://nvidia.github.io/elements/context/examples/date-types.md): Collection of temporal input types including date, datetime, month, week, time, and date range pickers.
- [datetime](https://nvidia.github.io/elements/context/examples/datetime.md): Datetime picker input with label and message for selecting both date and time values.
- [dialog](https://nvidia.github.io/elements/context/examples/dialog.md): Modal dialog for focused user interactions. Use dialogs for confirmations, simple forms, or important information that requires user attention before continuing, creating a modal overlay that blocks interaction with the underlying page until dismissed.
- [dialog-invoker-command](https://nvidia.github.io/elements/context/examples/dialog-invoker-command.md): Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as toggling a dialog.
- [divider](https://nvidia.github.io/elements/context/examples/divider.md): Horizontal divider for separating content sections with a subtle line.
- [dot](https://nvidia.github.io/elements/context/examples/dot.md): Dot component with status indicator, providing a simple visual cue for process states and system status.
- [drawer](https://nvidia.github.io/elements/context/examples/drawer.md): Modal drawer with header, content, and footer sections. Use for displaying detailed information, forms, or settings that need more space than a dialog, typically sliding in from the side of the screen.
- [dropdown](https://nvidia.github.io/elements/context/examples/dropdown.md): Dropdown implementation using popovertarget attribute to connect trigger and dropdown. Useful for simple dropdown menus.
- [dropdown-group](https://nvidia.github.io/elements/context/examples/dropdown-group.md): Cascading dropdown menu group with nested submenus for hierarchical navigation.
- [dropdown-group-with-disabled-items](https://nvidia.github.io/elements/context/examples/dropdown-group-with-disabled-items.md): Cascading dropdown menu with disabled menu items in non-interactive states.
- [dropdown-group-with-icons](https://nvidia.github.io/elements/context/examples/dropdown-group-with-icons.md): Cascading dropdown menu with leading icons for visual identification of menu item types.
- [dropdown-group-with-more-icons](https://nvidia.github.io/elements/context/examples/dropdown-group-with-more-icons.md): Cascading dropdown menu showcasing extra icon varieties for diverse menu actions.
- [dropdown-menu](https://nvidia.github.io/elements/context/examples/dropdown-menu.md): Dropdown with popover-positioned menu for trigger-based actions. Use for context menus, settings, and user actions where content appears on demand relative to a trigger button.
- [dropzone](https://nvidia.github.io/elements/context/examples/dropzone.md): File dropzone with drag-and-drop area for file upload interactions.
- [dropzone-form](https://nvidia.github.io/elements/context/examples/dropzone-form.md): Dropzone integrated with form validation showing file type and size constraint errors.
- [file](https://nvidia.github.io/elements/context/examples/file.md): File input with label and validation message. Use for simple file upload fields in forms.
- [forms-actions-label-action](https://nvidia.github.io/elements/context/examples/forms-actions-label-action.md): Label with an information button to provide contextual help or more details about the field.
- [forms-actions-prefix-suffix](https://nvidia.github.io/elements/context/examples/forms-actions-prefix-suffix.md): Input with prefix and suffix buttons to show fixed text elements like URL protocols and domains.
- [forms-actions-search-clear](https://nvidia.github.io/elements/context/examples/forms-actions-search-clear.md): Input with action buttons for search and clear, providing quick access to common operations.
- [forms-horizontal](https://nvidia.github.io/elements/context/examples/forms-horizontal.md): Horizontal form layout with labels beside inputs, creating efficient use of horizontal space and familiar desktop form patterns.
- [forms-horizontal-inline](https://nvidia.github.io/elements/context/examples/forms-horizontal-inline.md): Space-efficient horizontal layout with inline labels, ideal for dense forms with tight vertical space where quick scanning matters.
- [forms-kitchen-sink](https://nvidia.github.io/elements/context/examples/forms-kitchen-sink.md): Comprehensive showcase of all form controls in a grid layout, including input types, states, and advanced patterns use for a complete form design reference.
- [forms-prominence-muted](https://nvidia.github.io/elements/context/examples/forms-prominence-muted.md): Use the prominence muted state to lower visual weight of controls in forms.
- [forms-validation-error-group](https://nvidia.github.io/elements/context/examples/forms-validation-error-group.md): Login form with grouped error display showing all validation issues together after submission attempt.
- [forms-validation-login-form](https://nvidia.github.io/elements/context/examples/forms-validation-login-form.md): Use real-time validation with contextual error messages to disable submit until form is valid.
- [forms-validation-reset-form](https://nvidia.github.io/elements/context/examples/forms-validation-reset-form.md): Form reset functionality allowing users to clear individual fields or reset the entire form.
- [forms-validation-success-group](https://nvidia.github.io/elements/context/examples/forms-validation-success-group.md): Login form example of success feedback with positive confirmation messages for valid input and successful form submission.
- [forms-vertical](https://nvidia.github.io/elements/context/examples/forms-vertical.md): Traditional vertical form layout with labels above inputs, providing clear visual hierarchy and optimal readability for complex forms.
- [forms-vertical-inline](https://nvidia.github.io/elements/context/examples/forms-vertical-inline.md): Compact vertical layout with inline labels and controls, maximizing space efficiency while maintaining form clarity and accessibility.
- [grid](https://nvidia.github.io/elements/context/examples/grid.md): Data grid for tabular data display with columns and rows. Use grids for presenting structured datasets where users need to scan, compare, and analyze information across many columns, such as dashboards, reports, or data management interfaces.
- [grid-bulk-actions](https://nvidia.github.io/elements/context/examples/grid-bulk-actions.md): Use bulk actions for operations on many items. Display only when rows have a selection. Closing bulk actions deselects all selected rows.
- [grid-card](https://nvidia.github.io/elements/context/examples/grid-card.md): Nest Grid in Cards for UI patterns such as card tab groups. Use the `container="flat"` attribute to enable proper styling of the grid when nested within a card.
- [grid-column-action](https://nvidia.github.io/elements/context/examples/grid-column-action.md): Create column actions by using the `nve-icon-button` to trigger dropdowns or panels that reveal more actions to the user.
- [grid-column-dynamic-fixed](https://nvidia.github.io/elements/context/examples/grid-column-dynamic-fixed.md): Dynamic column management with programmatic addition and positioning, for flexible grid configuration with evolving data requirements.
- [grid-column-fixed](https://nvidia.github.io/elements/context/examples/grid-column-fixed.md): Fix columns to any given side, but keep fixed columns from spanning past the half way point of the grid.
- [grid-column-multi-fixed](https://nvidia.github.io/elements/context/examples/grid-column-multi-fixed.md): Fix many columns to any given side, but keep fixed columns from spanning past the half way point of the grid.
- [grid-column-stack-fixed](https://nvidia.github.io/elements/context/examples/grid-column-stack-fixed.md): Stack and fix many columns to any given side, but keep fixed columns from spanning past the half way point of the grid.
- [grid-column-width](https://nvidia.github.io/elements/context/examples/grid-column-width.md): Column width control for responsive grid layouts, enabling flexible content sizing and optimal space usage across different screen sizes.
- [grid-display-settings](https://nvidia.github.io/elements/context/examples/grid-display-settings.md): Users can customize their data view through a dropdown menu above the grid,  allowing them to show/hide columns and restore default settings for a personalized experience.
- [grid-flat](https://nvidia.github.io/elements/context/examples/grid-flat.md): Flat container styling for minimal visual weight, providing subtle grid presentation that integrates seamlessly with surrounding content.
- [grid-footer](https://nvidia.github.io/elements/context/examples/grid-footer.md): The footer displays contextual information or extra user actions such as pagination.
- [grid-full](https://nvidia.github.io/elements/context/examples/grid-full.md): Full-width grid container for max space use, providing edge-to-edge data display for comprehensive information presentation.
- [grid-keynav](https://nvidia.github.io/elements/context/examples/grid-keynav.md): The datagrid follows the ARIA Authoring Practices Guide for standardized keyboard navigation.
- [grid-multi-select](https://nvidia.github.io/elements/context/examples/grid-multi-select.md): Multi-select rows with checkboxes for bulk operations. Use multi-select when users need to perform actions on many items at once (like delete, export, or bulk edit), placing checkboxes as the first column and setting the selected attribute for proper accessibility.
- [grid-pagination](https://nvidia.github.io/elements/context/examples/grid-pagination.md): Use the pagination pattern when working with large data sets that need incremental loading or filtering for performance or useability.
- [grid-panel-detail](https://nvidia.github.io/elements/context/examples/grid-panel-detail.md): Use a nve-page-panel when displaying advanced filtering or display settings for the grid. Item detail panels should be open using a action button placed at the end of the grid row.
- [grid-panel-grid](https://nvidia.github.io/elements/context/examples/grid-panel-grid.md): Panel Grid displays key value type data sets for details of a given item in a collection.
- [grid-placeholder](https://nvidia.github.io/elements/context/examples/grid-placeholder.md): Loading placeholder state with progress indicator. Use grid placeholders during initial data fetching or while loading large datasets, providing visual feedback that content is coming and preventing layout shift when rows populate, improving perceived performance.
- [grid-row-action](https://nvidia.github.io/elements/context/examples/grid-row-action.md): Row actions enable extra user actions specific to a given row. Place a `nve-icon-button` at the end of the grid row for actions.
- [grid-row-groups](https://nvidia.github.io/elements/context/examples/grid-row-groups.md): Expandable row groups for hierarchical data organization. Use row groups when items have parent-child relationships or nested details (like sessions with uploads, orders with line items), allowing users to progressively disclose details and maintain compact views of large hierarchies.
- [grid-row-sort](https://nvidia.github.io/elements/context/examples/grid-row-sort.md): Sortable columns with visual indicators for data organization. Use sort buttons on columns where sorting is meaningful (dates, numbers, names) to help users find patterns, identify outliers, or locate specific data points, supporting three states: none, ascending, and descending.
- [grid-scroll-position](https://nvidia.github.io/elements/context/examples/grid-scroll-position.md): Programmatic scroll control using the grid `scrollTo` API. Use for scroll-to-top buttons, jump-to-row navigation, or restoring scroll position after data refreshes in large datasets.
- [grid-single-select](https://nvidia.github.io/elements/context/examples/grid-single-select.md): A single select datagrid allows users to choose exactly one row from a data table by providing radio buttons in the first column, ensuring only one item has a selection at a time. To enable single select, place `nve-radio` input as the first grid cell of each row. Set `name` attribute on each radio to ensure to associate the same radio group.
- [grid-sort-visibility](https://nvidia.github.io/elements/context/examples/grid-sort-visibility.md): Use the `nve-sort-button` to add grid row sort. The grid follows the ARIA sort spec and automatically sets the appropriate accessibility related attributes to convey the current sorting state.
- [icon](https://nvidia.github.io/elements/context/examples/icon.md): Icon component with standard appearance and usage for visual communication and interface navigation.
- [input](https://nvidia.github.io/elements/context/examples/input.md): Text input field with label and message for general text entry and form data collection.
- [input-input-group](https://nvidia.github.io/elements/context/examples/input-input-group.md): Input group combining select, input, and button for composite controls like domain URL entry.
- [input-input-group-filter-group-range](https://nvidia.github.io/elements/context/examples/input-input-group-filter-group-range.md): Input group with date range filters combining select and date inputs for filtering data by time periods.
- [logo](https://nvidia.github.io/elements/context/examples/logo.md): NVIDIA logo with aria-label for accessibility. Use for brand identification in headers, footers, and loading states.
- [menu](https://nvidia.github.io/elements/context/examples/menu.md): Menu with simple text items for the default menu structure and styling.
- [menu-complex](https://nvidia.github.io/elements/context/examples/menu-complex.md): Use a dropdown menu with search and branded logos for application selection interfaces.
- [menu-dropdown](https://nvidia.github.io/elements/context/examples/menu-dropdown.md): Menu with keyboard navigation and ARIA disclosure pattern inside a dropdown. Use when menu items need accessible focus management and arrow key navigation.
- [menu-vertical-navigation-drawer](https://nvidia.github.io/elements/context/examples/menu-vertical-navigation-drawer.md): Use a navigation drawer to overlay page content for out-of-context navigation.
- [menu-vertical-navigation-panel](https://nvidia.github.io/elements/context/examples/menu-vertical-navigation-panel.md): Use an inline navigation panel to push page content aside when navigation is contextual to the page.
- [monaco-diff-input-json-schema-validation](https://nvidia.github.io/elements/context/examples/monaco-diff-input-json-schema-validation.md): JSON diff input with schema validation in a form context, blocking submission on errors
- [monaco-diff-input-type-script-validation](https://nvidia.github.io/elements/context/examples/monaco-diff-input-type-script-validation.md): TypeScript diff input with real-time type checking that blocks form submission on errors
- [monaco-input-json-schema-validation](https://nvidia.github.io/elements/context/examples/monaco-input-json-schema-validation.md): JSON input with schema validation that blocks form submission on validation errors
- [monaco-input-type-script-validation](https://nvidia.github.io/elements/context/examples/monaco-input-type-script-validation.md): TypeScript input with real-time type checking that blocks form submission on type errors
- [month](https://nvidia.github.io/elements/context/examples/month.md): Month picker with label and validation message. Use for selecting a month and year in forms, such as expiry dates or report periods.
- [notification](https://nvidia.github.io/elements/context/examples/notification.md): Notification with auto-dismiss timeout for temporary feedback messages. Use notifications for system-generated alerts, confirmations, or status updates that don't require immediate user action, automatically dismissing after a set duration.
- [pagination](https://nvidia.github.io/elements/context/examples/pagination.md): Pagination component with default styling and behavior.
- [pagination-custom-select-pattern](https://nvidia.github.io/elements/context/examples/pagination-custom-select-pattern.md): Custom pagination with select dropdown for page size and navigation arrows.
- [pagination-forms](https://nvidia.github.io/elements/context/examples/pagination-forms.md): Pagination as a form associated component that participates in form submission and emits change, input, and step-change events. Use when page selection needs to integrate with form data collection or server-side form handling.
- [pagination-page-list-pattern](https://nvidia.github.io/elements/context/examples/pagination-page-list-pattern.md): Custom pagination pattern using toolbar with numbered page buttons and navigation arrows.
- [pagination-skip-pattern](https://nvidia.github.io/elements/context/examples/pagination-skip-pattern.md): Enhanced pagination pattern with first/last page buttons and numbered page navigation.
- [panel](https://nvidia.github.io/elements/context/examples/panel.md): Panel layout with header showing session details and metadata in a collapsible side panel.
- [password](https://nvidia.github.io/elements/context/examples/password.md): Password input with toggle visibility for secure credential entry and authentication forms.
- [preferences-input-dropdown](https://nvidia.github.io/elements/context/examples/preferences-input-dropdown.md): Preferences input embedded in a dropdown menu triggered from a page header settings button.
- [preferences-input-forms](https://nvidia.github.io/elements/context/examples/preferences-input-forms.md): Preferences input integrated with form submission, displaying live JSON value updates.
- [progress-bar-labeled](https://nvidia.github.io/elements/context/examples/progress-bar-labeled.md): Use a labeled progress bar with percentage display to communicate upload or task status.
- [progressive-filter-chip-custom](https://nvidia.github.io/elements/context/examples/progressive-filter-chip-custom.md): Progressive filter chip with custom button trigger opening a map coordinate picker dropdown.
- [progressive-filter-chip-date-range](https://nvidia.github.io/elements/context/examples/progressive-filter-chip-date-range.md): Progressive filter chip with date picker inputs for filtering by date range criteria.
- [progressive-filter-chip-text-input](https://nvidia.github.io/elements/context/examples/progressive-filter-chip-text-input.md): Progressive filter chip with numeric text input for threshold-based filtering (greater than, less than).
- [progressive-filter-chip-validation](https://nvidia.github.io/elements/context/examples/progressive-filter-chip-validation.md): Progressive filter chip with input validation states showing required field and error styling.
- [pulse](https://nvidia.github.io/elements/context/examples/pulse.md): Animated pulse indicator with aria-label for accessibility. Use to draw attention to live updates, active connections, or real-time status.
- [radio](https://nvidia.github.io/elements/context/examples/radio.md): Radio button group for mutually exclusive single-choice selection from many options.
- [range](https://nvidia.github.io/elements/context/examples/range.md): Range component for numeric value selection, providing a simple slider interface for adjusting values within a defined range.
- [search](https://nvidia.github.io/elements/context/examples/search.md): Search input with label and message for query entry and filtering data.
- [select](https://nvidia.github.io/elements/context/examples/select.md): Select component with label, options, and message.
- [skeleton](https://nvidia.github.io/elements/context/examples/skeleton.md): Skeleton component for text content. Placeholder lines appear while content loads.
- [sparkline](https://nvidia.github.io/elements/context/examples/sparkline.md): Sparkline from numeric array values. Use as a compact trend indicator.
- [sparkline-data-grid](https://nvidia.github.io/elements/context/examples/sparkline-data-grid.md): Embed sparklines in grid cells to add compact trend context to tabular data.
- [sparkline-default-size](https://nvidia.github.io/elements/context/examples/sparkline-default-size.md): Without a size attribute, height scales with the parent text size for typographic alignment.
- [steps](https://nvidia.github.io/elements/context/examples/steps.md): Interactive step indicator with status colors for multi-step workflows. Use for wizards, onboarding flows, or process tracking where users can navigate between steps.
- [styles-layout-spacing](https://nvidia.github.io/elements/context/examples/styles-layout-spacing.md): 
- [styles-typography-transforms](https://nvidia.github.io/elements/context/examples/styles-typography-transforms.md): Text transformation utilities for case changes and truncation to handle overflow gracefully.
- [switch](https://nvidia.github.io/elements/context/examples/switch.md): Toggle switch for binary on/off controls and feature activation.
- [tabs](https://nvidia.github.io/elements/context/examples/tabs.md): Tabs group component for organizing content into selectable sections with disabled state support.
- [tabs-external-controls](https://nvidia.github.io/elements/context/examples/tabs-external-controls.md): Drive the same tabs group from external buttons when layouts need tabs and secondary actions to stay in sync with structured panel content.
- [tag](https://nvidia.github.io/elements/context/examples/tag.md): Tag component for interactive labeling and categorizing of content, providing clear visual organization and metadata display.
- [textarea](https://nvidia.github.io/elements/context/examples/textarea.md): Multi-line text input for longer content entry like comments, descriptions, or messages.
- [time](https://nvidia.github.io/elements/context/examples/time.md): Time input with label, min/max time constraints, and help message
- [toast](https://nvidia.github.io/elements/context/examples/toast.md): Toast with auto-dismiss for brief, non-critical feedback messages. Use toasts for lightweight confirmations like "Saved", "Copied", or "Action complete" that inform users without requiring interaction or disrupting workflow.
- [toggletip](https://nvidia.github.io/elements/context/examples/toggletip.md): Toggletip requiring click to open and close. Unlike tooltips that appear on hover, use toggletips for interactive content, extra details, or when users need time to read or interact with the popover content.
- [toolbar](https://nvidia.github.io/elements/context/examples/toolbar.md): Toolbar with action buttons and a settings icon in the suffix slot.
- [toolbar-container-flat](https://nvidia.github.io/elements/context/examples/toolbar-container-flat.md): Toolbar with flat container styling for a more subtle appearance.
- [toolbar-container-full](https://nvidia.github.io/elements/context/examples/toolbar-container-full.md): Toolbar with full container styling that spans the entire width.
- [toolbar-container-inset](https://nvidia.github.io/elements/context/examples/toolbar-container-inset.md): Toolbar with inset container styling and constrained width for contained layouts.
- [toolbar-groups](https://nvidia.github.io/elements/context/examples/toolbar-groups.md): Complex toolbar with grouped controls including select dropdowns, button groups, and dividers for text editing scenarios.
- [toolbar-status](https://nvidia.github.io/elements/context/examples/toolbar-status.md): Toolbar with status styling showing selection state with accent status and default status variants for bulk actions.
- [toolbar-vertical](https://nvidia.github.io/elements/context/examples/toolbar-vertical.md): Vertical toolbar orientation with button groups and dividers for sidebar layouts.
- [tooltip](https://nvidia.github.io/elements/context/examples/tooltip.md): Tooltip triggered by popovertarget attribute. Use for providing brief, contextual information on hover or focus without cluttering the interface.
- [tree](https://nvidia.github.io/elements/context/examples/tree.md): Tree component with expandable nodes, providing hierarchical data display and navigation for structured content organization.
- [tree-node-content](https://nvidia.github.io/elements/context/examples/tree-node-content.md): Tree with rich node content including forms, controls, and interactive elements, enabling complex data management within hierarchical structures.
- [week](https://nvidia.github.io/elements/context/examples/week.md): Week picker input for selecting specific weeks in a year for scheduling and planning.

## Auth (template-auth)

Page-level starter for sign-in pages. Centered card with email, password, OAuth
options, and signup link.

```html
<nve-page>
  <nve-page-header slot="header">
    <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
    <h2 slot="prefix" nve-text="heading sm">Developer Portal</h2>
    <nve-button selected container="flat"><a href="#">Documentation</a></nve-button>
    <nve-button container="flat"><a href="#">Support</a></nve-button>
  </nve-page-header>
  <main nve-layout="column gap:lg pad:lg align:center align:vertical-center">
    <form>
      <nve-card style="width: 400px">
        <nve-card-header>
          <h1 nve-text="heading medium">Sign In</h1>
        </nve-card-header>
        <nve-card-content>
          <div nve-layout="column gap:md align:horizontal-stretch">
            <nve-input>
              <label>Email address</label>
              <input type="email" name="email" required autocomplete="email" />
              <nve-control-message error="valueMissing">required</nve-control-message>
              <nve-control-message error="typeMismatch">enter a valid email</nve-control-message>
            </nve-input>
            <nve-password>
              <label>Password</label>
              <input type="password" name="password" required minlength="6" autocomplete="current-password" />
              <nve-control-message error="valueMissing">required</nve-control-message>
              <nve-control-message error="tooShort">minimum length is 6 characters</nve-control-message>
            </nve-password>
            <div nve-layout="row align:space-between align:vertical-center full">
              <nve-checkbox>
                <label>Remember me</label>
                <input type="checkbox" name="remember-me" />
              </nve-checkbox>
              <a href="#" nve-text="body sm">Forgot password?</a>
            </div>
            <nve-button type="submit" interaction="emphasis" disabled style="width: 100%">Sign in</nve-button>
            <div nve-layout="row gap:sm align:vertical-center pad-y:md">
              <nve-divider style="flex: 1"></nve-divider>
              <span nve-text="label sm muted">Or continue with</span>
              <nve-divider style="flex: 1"></nve-divider>
            </div>
            <nve-button type="button">SSO Provider</nve-button>
            <nve-alert-group hidden status="success">
              <nve-alert></nve-alert>
            </nve-alert-group>
          </div>
        </nve-card-content>
        <nve-card-footer>
          <p nve-text="body sm muted center" style="width: 100%">
            Not a member? <a href="#" nve-text="body sm">Sign Up</a>
          </p>
        </nve-card-footer>
      </nve-card>
    </form>
  </main>
</nve-page>
<script type="module">
  const form = document.querySelector("form");
  const button = form.querySelector('nve-button[type="submit"]');
  const alertGroup = form.querySelector("nve-alert-group");
  const alert = form.querySelector("nve-alert");
  form.addEventListener("input", () => {
    button.disabled = form.matches(":invalid");
  });
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const { email } = Object.fromEntries(new FormData(form));
    alert.innerText = "Signed in as " + email;
    alertGroup.hidden = false;
  });
</script>
```

## Chat (template-chat)

Page-level starter for chat experiences. Conversation list, message thread, and
prompt composer.

```html
<nve-page>
  <nve-page-header slot="header">
    <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
    <h2 slot="prefix" nve-text="heading">Assistant</h2>
    <nve-button selected container="flat"><a href="#">Documentation</a></nve-button>
    <nve-button container="flat"><a href="#">Support</a></nve-button>
    <nve-icon-button slot="suffix" interaction="emphasis" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-page-panel slot="left-aside" style="width: 220px">
    <nve-page-panel-header>Conversations</nve-page-panel-header>
    <nve-page-panel-content>
      <nve-tree>
        <nve-tree-node selected><a href="#">Deployment review</a></nve-tree-node>
        <nve-tree-node><a href="#">Schema migration</a></nve-tree-node>
        <nve-tree-node><a href="#">Sensor calibration</a></nve-tree-node>
      </nve-tree>
    </nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column gap:lg pad:lg" style="max-width: 760px; margin: 0 auto; width: 100%">
    <nve-chat-message>
      <nve-avatar slot="prefix" color="gray-denim">AI</nve-avatar>
      Hello, how can I help you with your deployment review today?
    </nve-chat-message>
    <nve-chat-message style="margin-left: auto">
      Summarize the failing checks on PR 2381.
      <nve-avatar slot="suffix" color="green-grass">EL</nve-avatar>
    </nve-chat-message>
    <nve-chat-message>
      <nve-avatar slot="prefix" color="gray-denim">AI</nve-avatar>
      Two checks failed on PR 2381: the visual regression suite reported diffs in the dashboard pattern, and the
      lighthouse budget regressed by 4 points on the editor pattern.
    </nve-chat-message>
  </main>
  <form slot="subfooter" nve-layout="row gap:sm pad:md" style="max-width: 760px; margin: 0 auto; width: 100%">
    <nve-textarea>
      <textarea placeholder="Ask a follow-up..." autocomplete="off" aria-label="message"></textarea>
    </nve-textarea>
    <nve-button>Send</nve-button>
  </form>
</nve-page>
```

## Code Editor (template-code-editor)

Page-level starter for IDE-style editors. File tree, tabbed code editor, and
console panel.

```html
<nve-page>
  <nve-page-header slot="header">
    <nve-logo slot="prefix" size="sm" color="brand-green">AV</nve-logo>
    <h2 slot="prefix" nve-text="heading">Config Editor</h2>
    <nve-button container="flat" selected>Sensors</nve-button>
    <nve-button container="flat">Vehicle</nve-button>
    <nve-button container="flat">Perception</nve-button>
    <nve-icon-button slot="suffix" interaction="emphasis" size="sm">AV</nve-icon-button>
  </nve-page-header>
  <nve-toolbar slot="left-aside" orientation="vertical">
    <nve-button-group>
      <nve-icon-button icon-name="folder" size="sm" selected></nve-icon-button>
      <nve-icon-button icon-name="search" size="sm"></nve-icon-button>
      <nve-icon-button icon-name="branch" size="sm"></nve-icon-button>
    </nve-button-group>
  </nve-toolbar>
  <nve-page-panel slot="left" size="sm">
    <nve-page-panel-content>
      <nve-tree behavior-expand>
        <nve-tree-node expanded>
          av-prototype/
          <nve-tree-node expanded>
            sensors/
            <nve-tree-node>lidar_config.py</nve-tree-node>
            <nve-tree-node>camera_config.py</nve-tree-node>
            <nve-tree-node>radar_config.py</nve-tree-node>
          </nve-tree-node>
          <nve-tree-node>
            perception/
            <nve-tree-node>detection.py</nve-tree-node>
            <nve-tree-node>tracking.py</nve-tree-node>
          </nve-tree-node>
          <nve-tree-node>
            planning/
            <nve-tree-node>route_planner.py</nve-tree-node>
          </nve-tree-node>
        </nve-tree-node>
      </nve-tree>
    </nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column full">
    <nve-toolbar container="full">
      <nve-tabs behavior-select>
        <nve-tabs-item selected>lidar_config.py</nve-tabs-item>
      </nve-tabs>
    </nve-toolbar>
    <nve-monaco-input
      language="python"
      line-numbers="on"
      folding
      style="flex: 1; --min-height: 100%; --border-radius: 0"
      value='from dataclasses import dataclass
from typing import Literal
@dataclass
class LidarConfig:
    """Front LIDAR sensor configuration for AV prototype."""
    
    model: str = &apos;Velodyne-128&apos;
    range_max: float = 120.0  # meters
    range_min: float = 0.5
    fov_horizontal: float = 360.0  # degrees
    fov_vertical: float = 40.0
    points_per_second: int = 300000
    rotation_rate: int = 20  # Hz
    
    # Mounting position relative to vehicle center
    position_x: float = 2.1  # meters forward
    position_y: float = 0.0  # centered
    position_z: float = 1.8  # height from ground
    
    # Calibration parameters
    roll_offset: float = 0.0
    pitch_offset: float = -0.5  # slight downward tilt
    yaw_offset: float = 0.0
'
    ></nve-monaco-input>
  </main>
  <nve-page-panel slot="bottom" size="sm" closable>
    <nve-page-panel-header>
      <nve-tabs behavior-select>
        <nve-tabs-item selected>Problems</nve-tabs-item>
        <nve-tabs-item>Output</nve-tabs-item>
        <nve-tabs-item>Terminal</nve-tabs-item>
      </nve-tabs>
    </nve-page-panel-header>
    <nve-page-panel-content>
      <p nve-text="body sm muted">No problems detected in workspace</p>
    </nve-page-panel-content>
  </nve-page-panel>
  <nve-toolbar slot="subfooter">
    <nve-icon-button icon-name="branch" size="sm" container="flat"></nve-icon-button>
    <span nve-text="body sm muted">main</span>
    <nve-divider orientation="vertical"></nve-divider>
    <span nve-text="body sm muted">Ln 1, Col 1</span>
    <span slot="suffix" nve-text="body sm muted">Python</span>
  </nve-toolbar>
</nve-page>
```

## Dashboard (template-dashboard)

Page-level starter for analytics dashboards. KPI cards, sparkline trends, and an
activity grid.

```html
<nve-page>
  <nve-page-header slot="header">
    <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
    <h2 slot="prefix" nve-text="heading">Infrastructure</h2>
    <nve-button selected container="flat"><a href="#">Documentation</a></nve-button>
    <nve-button container="flat"><a href="#">Support</a></nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-page-panel slot="left-aside" style="width: 220px">
    <nve-page-panel-header>
      <h2 nve-text="heading medium">Workloads</h2>
    </nve-page-panel-header>
    <nve-page-panel-content>
      <nve-tree>
        <nve-tree-node selected><a href="#">Training jobs</a></nve-tree-node>
        <nve-tree-node><a href="#">Checkpoints</a></nve-tree-node>
        <nve-tree-node><a href="#">Datasets</a></nve-tree-node>
        <!-- ... 2 more <nve-tree-node> elements ... -->
      </nve-tree>
    </nve-page-panel-content>
  </nve-page-panel>
  <nve-toolbar slot="subheader" container="full">
    <div slot="prefix" nve-layout="row gap:sm align:vertical-center">
      <nve-badge status="running">Training</nve-badge>
      <span nve-text="label sm muted nowrap">Epoch 14 / 20</span>
      <nve-divider orientation="vertical"></nve-divider>
      <span nve-text="label sm muted nowrap">ETA: 4h 23m</span>
    </div>
    <nve-button-group slot="suffix">
      <nve-button>24h</nve-button>
      <nve-button pressed>7d</nve-button>
      <nve-button>30d</nve-button>
    </nve-button-group>
    <nve-divider slot="suffix" orientation="vertical"></nve-divider>
    <nve-button slot="suffix">Export</nve-button>
  </nve-toolbar>
  <main nve-layout="column gap:lg pad:lg" style="max-width: 1500px">
    <h1 slot="prefix" nve-text="heading lg">Model 120B Fine-tune</h1>
    <section nve-layout="grid gap:lg span-items:6 align:vertical-stretch">
      <nve-card>
        <nve-card-header>
          <h2 nve-text="label muted">Training Loss</h2>
        </nve-card-header>
        <nve-card-content>
          <div nve-layout="column gap:sm">
            <div nve-layout="row gap:sm align:vertical-center">
              <h3 nve-text="heading semibold lg">0.0234</h3>
              <nve-badge container="flat" status="success">
                <nve-icon name="trend-down" slot="prefix-icon"></nve-icon> -42%
              </nve-badge>
            </div>
            <nve-sparkline
              data="[0.12, 0.09, 0.075, 0.062, 0.051, 0.044, 0.039, 0.035, 0.032, 0.030, 0.028, 0.026, 0.025, 0.023]"
              mark="line"
              interpolation="smooth"
              status="success"
              size="xl"
            ></nve-sparkline>
            <span nve-text="label sm muted">Per epoch</span>
          </div>
        </nve-card-content>
      </nve-card>
      <nve-card>
        <nve-card-header>
          <h2 nve-text="label muted">Validation Loss</h2>
        </nve-card-header>
        <nve-card-content>
          <div nve-layout="column gap:sm">
            <div nve-layout="row gap:sm align:vertical-center">
              <h3 nve-text="heading semibold lg">0.0312</h3>
              <nve-badge container="flat" status="warning">
                <nve-icon name="trend-up" slot="prefix-icon"></nve-icon> +2%
              </nve-badge>
            </div>
            <nve-sparkline
              data="[0.13, 0.10, 0.082, 0.068, 0.055, 0.048, 0.042, 0.038, 0.033, 0.029, 0.030, 0.029, 0.030, 0.031]"
              mark="line"
              interpolation="smooth"
              status="warning"
              size="xl"
              denote-first
              denote-last
              denote-min
            ></nve-sparkline>
            <span nve-text="label sm muted">Per epoch</span>
          </div>
        </nve-card-content>
      </nve-card>
    </section>
    <section nve-layout="grid gap:lg span-items:4 align:vertical-stretch">
      <nve-card>
        <nve-card-header>
          <h2 nve-text="label muted">Learning Rate</h2>
        </nve-card-header>
        <nve-card-content>
          <div nve-layout="column gap:sm">
            <h4 nve-text="heading semibold">2.4e-5</h4>
            <nve-sparkline
              data="[0.5, 1.5, 3.0, 3.0, 2.8, 2.6, 2.5, 2.4, 2.3, 2.2, 2.1, 2.0, 1.8, 1.5]"
              mark="line"
              interpolation="smooth"
              size="lg"
              denote-last
            ></nve-sparkline>
          </div>
        </nve-card-content>
      </nve-card>
      <nve-card>
        <nve-card-header>
          <h2 nve-text="label muted">GPU Memory</h2>
        </nve-card-header>
        <nve-card-content>
          <div nve-layout="column gap:sm">
            <div nve-layout="row gap:sm align:vertical-center">
              <h4 nve-text="heading semibold">76.2 GB</h4>
              <span nve-text="label sm muted">/ 80 GB</span>
            </div>
            <nve-sparkline
              data="[60, 65, 70, 73, 76, 75, 76, 76, 76, 76, 76, 76, 76, 76]"
              mark="area"
              interpolation="step"
              status="warning"
              size="xl"
              min="0"
              max="80"
            ></nve-sparkline>
          </div>
        </nve-card-content>
      </nve-card>
      <nve-card>
        <nve-card-header>
          <h2 nve-text="label muted">Throughput</h2>
        </nve-card-header>
        <nve-card-content>
          <div nve-layout="column gap:sm">
            <div nve-layout="row gap:sm align:vertical-center">
              <h4 nve-text="heading semibold">1,842</h4>
              <span nve-text="label sm muted">tokens/s</span>
            </div>
            <nve-sparkline
              data="[1200, 1500, 1600, 1750, 1800, 1820, 1830, 1840, 1835, 1842, 1838, 1845, 1840, 1842]"
              mark="column"
              status="accent"
              size="xl"
              min="0"
            ></nve-sparkline>
          </div>
        </nve-card-content>
      </nve-card>
    </section>
    <section nve-layout="column gap:sm">
      <h3 nve-text="heading sm">Checkpoint Evaluations</h3>
      <nve-grid>
        <nve-grid-header>
          <nve-grid-column>Checkpoint</nve-grid-column>
          <nve-grid-column>Epoch</nve-grid-column>
          <nve-grid-column>Train Loss</nve-grid-column>
          <!-- ... 2 more <nve-grid-column> elements ... -->
        </nve-grid-header>
        <nve-grid-row>
          <nve-grid-cell>ckpt-014</nve-grid-cell>
          <nve-grid-cell>14</nve-grid-cell>
          <nve-grid-cell>0.0234</nve-grid-cell>
          <!-- ... 2 more <nve-grid-cell> elements ... -->
        </nve-grid-row>
        <nve-grid-row>
          <nve-grid-cell>ckpt-010</nve-grid-cell>
          <nve-grid-cell>10</nve-grid-cell>
          <nve-grid-cell>0.0298</nve-grid-cell>
          <!-- ... 2 more <nve-grid-cell> elements ... -->
        </nve-grid-row>
        <nve-grid-row>
          <nve-grid-cell>ckpt-005</nve-grid-cell>
          <nve-grid-cell>5</nve-grid-cell>
          <nve-grid-cell>0.0512</nve-grid-cell>
          <!-- ... 2 more <nve-grid-cell> elements ... -->
        </nve-grid-row>
      </nve-grid>
    </section>
  </main>
</nve-page>
```

## Detail View (template-detail-view)

Page-level starter for object detail views. Breadcrumb, summary metadata, and
grouped content sections.

```html
<nve-page>
  <nve-page-header slot="header">
    <nve-logo slot="prefix" size="sm" color="brand-green">AV</nve-logo>
    <h2 nve-text="heading" slot="prefix">Drive Library</h2>
    <nve-button container="flat">Drives</nve-button>
    <nve-button container="flat">Vehicles</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">AV</nve-icon-button>
  </nve-page-header>
  <nve-toolbar slot="subheader" container="full">
    <nve-icon-button
      slot="prefix"
      icon-name="arrow"
      direction="left"
      size="sm"
      container="flat"
      aria-label="back"
    ></nve-icon-button>
    <nve-breadcrumb slot="prefix">
      <nve-icon-button icon-name="home" size="sm"
        ><a href="#" target="_self" aria-label="drive library"></a
      ></nve-icon-button>
      <nve-button><a href="#" target="_self">Drives</a></nve-button>
      <span>Highway 101</span>
    </nve-breadcrumb>
    <nve-button slot="suffix" container="flat" size="sm">Annotate</nve-button>
    <nve-button slot="suffix" container="flat" size="sm">Download</nve-button>
    <nve-divider slot="suffix" orientation="vertical"></nve-divider>
    <nve-button slot="suffix" interaction="emphasis" size="sm">Share</nve-button>
  </nve-toolbar>
  <main
    nve-layout="column gap:lg pad:lg align:horizontal-stretch"
    style="max-width: 1100px; width: 100%; margin: 0 auto"
  >
    <section nve-layout="row gap:md align:vertical-center align:space-between">
      <h1 nve-text="heading xl">Highway 101</h1>
      <nve-badge status="running">Recording</nve-badge>
    </section>
    <nve-card>
      <nve-card-header>
        <h2 nve-text="heading sm">Summary</h2>
      </nve-card-header>
      <nve-card-content>
        <div nve-layout="grid span-items:4 gap:md">
          <div nve-layout="column gap:xs">
            <span nve-text="label sm muted">Vehicle</span>
            <span nve-text="body">av-prototype-042</span>
          </div>
          <div nve-layout="column gap:xs">
            <span nve-text="label sm muted">Route</span>
            <span nve-text="body">San Jose to San Francisco</span>
          </div>
          <div nve-layout="column gap:xs">
            <span nve-text="label sm muted">Duration</span>
            <span nve-text="body">4h 18m</span>
          </div>
          <!-- ... 3 more <div> elements ... -->
        </div>
      </nve-card-content>
    </nve-card>
    <section nve-layout="grid gap:lg span-items:6 align:vertical-stretch">
      <nve-card>
        <nve-card-header>
          <h2 nve-text="label muted">Vehicle speed</h2>
        </nve-card-header>
        <nve-card-content>
          <div nve-layout="column gap:sm">
            <h3 nve-text="heading semibold lg">68 km/h <span nve-text="label sm muted">avg</span></h3>
            <nve-sparkline
              data="[40, 55, 60, 72, 80, 78, 70, 65, 60, 75, 82, 70, 64, 68]"
              mark="area"
              interpolation="smooth"
              status="accent"
              size="xl"
            ></nve-sparkline>
          </div>
        </nve-card-content>
      </nve-card>
      <nve-card>
        <nve-card-header>
          <h2 nve-text="label muted">GPU utilization</h2>
        </nve-card-header>
        <nve-card-content>
          <div nve-layout="column gap:sm">
            <h3 nve-text="heading semibold lg">82% <span nve-text="label sm muted">peak</span></h3>
            <nve-sparkline
              data="[60, 65, 70, 76, 78, 80, 78, 80, 82, 81, 78, 75, 73, 76]"
              mark="line"
              interpolation="smooth"
              status="warning"
              size="xl"
            ></nve-sparkline>
          </div>
        </nve-card-content>
      </nve-card>
    </section>
    <nve-card>
      <nve-card-header>
        <h2 nve-text="heading sm">Annotations</h2>
      </nve-card-header>
      <nve-card-content>
        <div nve-layout="column gap:md">
          <div nve-layout="row gap:md align:vertical-center">
            <span nve-text="label sm muted nowrap">01:14:22</span>
            <nve-badge container="flat" status="warning">Disengage</nve-badge>
            <span nve-text="body">Operator override at construction reroute on US-101 NB.</span>
          </div>
          <div nve-layout="row gap:md align:vertical-center">
            <span nve-text="label sm muted nowrap">02:46:08</span>
            <nve-badge container="flat" status="accent">Note</nve-badge>
            <span nve-text="body">Lane keep accuracy degraded under heavy rain conditions.</span>
          </div>
          <div nve-layout="row gap:md align:vertical-center">
            <span nve-text="label sm muted nowrap">03:51:44</span>
            <nve-badge container="flat" status="success">Resolved</nve-badge>
            <span nve-text="body">Perception confidence recovered after sensor self-calibration.</span>
          </div>
        </div>
      </nve-card-content>
    </nve-card>
  </main>
</nve-page>
```

## Docs (template-docs)

Page-level starter for developer docs. Search header, hierarchical nav tree, and
an article with prose and code samples.

```html
<nve-page>
  <nve-page-header slot="header">
    <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
    <h2 slot="prefix" nve-text="heading sm">Robotics SDK</h2>
    <nve-button selected container="flat"><a href="#">Documentation</a></nve-button>
    <nve-button container="flat"><a href="#">Tutorials</a></nve-button>
    <nve-button container="flat"><a href="#">API</a></nve-button>
    <nve-icon-button slot="suffix" container="flat" icon-name="search" aria-label="search"></nve-icon-button>
    <nve-icon-button slot="suffix" interaction="emphasis" size="sm">RB</nve-icon-button>
  </nve-page-header>
  <nve-page-panel slot="left-aside" style="width: 240px">
    <nve-page-panel-content>
      <nve-tree behavior-expand>
        <nve-tree-node expanded>
          Getting started
          <nve-tree-node><a href="#">Installation</a></nve-tree-node>
          <nve-tree-node><a href="#">Hello robot</a></nve-tree-node>
          <nve-tree-node><a href="#">Simulation setup</a></nve-tree-node>
        </nve-tree-node>
        <nve-tree-node expanded>
          Perception
          <nve-tree-node><a href="#">Camera streams</a></nve-tree-node>
          <nve-tree-node><a href="#">LiDAR fusion</a></nve-tree-node>
          <nve-tree-node selected><a href="#">Object detection</a></nve-tree-node>
          <!-- ... 1 more <nve-tree-node> elements ... -->
        </nve-tree-node>
        <nve-tree-node>
          Manipulation
          <nve-tree-node><a href="#">Grasp policy</a></nve-tree-node>
          <nve-tree-node><a href="#">Trajectory planner</a></nve-tree-node>
        </nve-tree-node>
        <!-- ... 1 more <nve-tree-node> elements ... -->
      </nve-tree>
    </nve-page-panel-content>
  </nve-page-panel>
  <main
    nve-layout="column gap:xl pad:lg align:horizontal-stretch"
    style="max-width: 760px; width: 100%; margin: 0 auto"
  >
    <h1 nve-text="display sm">Object Detection</h1>
    <p nve-text="body lg muted">
      Real-time perception pipeline for detecting and classifying objects from camera streams on robots and edge
      devices.
    </p>
    <h2 nve-text="heading lg">Installation</h2>
    <p nve-text="body">
      The pipeline ships as part of the <code nve-text="code">perception</code> package. Install it alongside the
      runtime to get the GPU-accelerated kernels and the pretrained model registry.
    </p>
    <nve-codeblock> pip install perception==2.4.0 </nve-codeblock>
    <h2 nve-text="heading lg">Usage</h2>
    <p nve-text="body">
      Instantiate a <code nve-text="code">DetectionPipeline</code> with a pretrained model and a camera source, then
      iterate over detections in your control loop. The pipeline manages preprocessing, batched inference, and
      non-maximum suppression so your control code stays focused on policy decisions.
    </p>
    <nve-codeblock>
      from isaac.perception import DetectionPipeline, CameraSource pipeline = DetectionPipeline( model="yolov8-nano",
      confidence=0.6, device="cuda:0", ) camera = CameraSource(topic="/front_cam/image_raw") for frame in
      camera.stream(): detections = pipeline.run(frame) for det in detections: print(det.label, det.bbox, det.score)
    </nve-codeblock>
    <nve-alert status="warning">
      Inference latency above 30 ms can break real-time control loops on mobile robots; profile end-to-end before
      deploying.
    </nve-alert>
    <h2 nve-text="heading lg">API reference</h2>
    <p nve-text="body">
      See the API tab for the full <code nve-text="code">DetectionPipeline</code> class signature, supported models, and
      event hooks. Related primitives: <a href="#">CameraSource</a>, <a href="#">Tracker</a>,
      <a href="#">DepthEstimator</a>.
    </p>
  </main>
</nve-page>
```

## List View (template-list-view)

Page-level starter for tabular list views. Search, view toggle, and a sortable
data grid of records.

```html
<nve-page>
  <nve-page-header slot="header">
    <nve-logo slot="prefix" size="sm" color="brand-green">AV</nve-logo>
    <h2 nve-text="heading" slot="prefix">Drive Library</h2>
    <nve-button selected container="flat">Drives</nve-button>
    <nve-button container="flat">Vehicles</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">AV</nve-icon-button>
  </nve-page-header>
  <nve-page-panel slot="left-aside" style="width: 220px">
    <nve-page-panel-content>
      <nve-tree>
        <nve-tree-node selected><a href="#">Drive logs</a></nve-tree-node>
        <nve-tree-node><a href="#">Sensor recordings</a></nve-tree-node>
        <nve-tree-node><a href="#">Scenarios</a></nve-tree-node>
        <!-- ... 2 more <nve-tree-node> elements ... -->
      </nve-tree>
    </nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column gap:lg pad:lg align:horizontal-stretch" style="max-width: 1500px">
    <nve-search container="flat">
      <input type="search" aria-label="search drives" placeholder="Search drives by route, vehicle, or scenario" />
    </nve-search>
    <div nve-layout="row align:space-between align:vertical-center">
      <nve-button-group container="rounded" behavior-select="single" orientation="horizontal">
        <nve-icon-button icon-name="view-as-grid"></nve-icon-button>
        <nve-icon-button icon-name="table" pressed></nve-icon-button>
        <nve-icon-button icon-name="map"></nve-icon-button>
      </nve-button-group>
      <div nve-layout="row gap:sm align:vertical-center">
        <nve-button container="flat" size="sm"> <nve-icon name="filter"></nve-icon> Filter </nve-button>
        <nve-button interaction="emphasis" size="sm">Export</nve-button>
      </div>
    </div>
    <nve-grid>
      <nve-grid-header>
        <nve-grid-column>Drive</nve-grid-column>
        <nve-grid-column>Route</nve-grid-column>
        <nve-grid-column>Vehicle</nve-grid-column>
        <!-- ... 3 more <nve-grid-column> elements ... -->
      </nve-grid-header>
      <nve-grid-row>
        <nve-grid-cell>av-2841</nve-grid-cell>
        <nve-grid-cell>Highway 101</nve-grid-cell>
        <nve-grid-cell>av-prototype-042</nve-grid-cell>
        <!-- ... 3 more <nve-grid-cell> elements ... -->
      </nve-grid-row>
      <nve-grid-row>
        <nve-grid-cell>av-2840</nve-grid-cell>
        <nve-grid-cell>Urban downtown loop</nve-grid-cell>
        <nve-grid-cell>av-prototype-039</nve-grid-cell>
        <!-- ... 3 more <nve-grid-cell> elements ... -->
      </nve-grid-row>
      <nve-grid-row>
        <nve-grid-cell>av-2839</nve-grid-cell>
        <nve-grid-cell>Sunnyvale residential</nve-grid-cell>
        <nve-grid-cell>av-prototype-042</nve-grid-cell>
        <!-- ... 3 more <nve-grid-cell> elements ... -->
      </nve-grid-row>
      <!-- ... 6 more <nve-grid-row> elements ... -->
    </nve-grid>
  </main>
</nve-page>
```

## Media Detail View (template-media-detail-view)

Page-level starter for object detail views with media playback. Player canvas
with metadata panel and playback controls.

```html
<nve-page>
  <nve-page-header slot="header">
    <nve-logo slot="prefix" size="sm" color="brand-green">AV</nve-logo>
    <h2 nve-text="heading" slot="prefix">Event Recorder</h2>
    <nve-button selected container="flat"><a href="#">Documentation</a></nve-button>
    <nve-button container="flat"><a href="#">Support</a></nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-page-panel slot="subheader">
    <nve-page-panel-content>
      <div nve-layout="column gap:md align:stretch">
        <div nve-layout="row align:space-between align:vertical-center">
          <section nve-layout="row gap:sm align:vertical-center">
            <nve-icon-button icon-name="arrow" direction="left" size="sm" container="flat"></nve-icon-button>
            <h2 nve-text="heading sm">event-recording.mp4</h2>
          </section>
          <nve-icon-button aria-label="additional options" icon-name="more-actions" container="flat"></nve-icon-button>
        </div>
      </div>
    </nve-page-panel-content>
  </nve-page-panel>
  <nve-page-panel slot="right" size="sm">
    <nve-page-panel-content>
      <div nve-layout="column gap:md">
        <div nve-layout="column gap:xs">
          <span nve-text="body sm muted">Recorded</span>
          <time datetime="2026-01-08 14:23:56" nve-text="body sm">2026-01-08 14:23:56</time>
        </div>
        <div nve-layout="column gap:xs">
          <span nve-text="body sm muted">Intervention</span>
          <span nve-text="body sm">00:37:12</span>
        </div>
        <div nve-layout="column gap:xs">
          <span nve-text="body sm muted">Trigger Reason</span>
          <span nve-text="body sm">Zone not detected</span>
        </div>
        <!-- ... 1 more <div> elements ... -->
      </div>
    </nve-page-panel-content>
  </nve-page-panel>
  <video style="width: 100%; height: 100%; background: var(--nve-ref-color-alpha-black-700)"></video>
  <nve-page-panel slot="bottom" style="max-height: 100px">
    <nve-page-panel-content>
      <div nve-layout="column gap:sm full">
        <div role="group" aria-label="time scrubber controls" nve-layout="row gap:sm align:vertical-center full">
          <time datetime="00:14:23" nve-text="body sm muted">00:14:23</time>
          <nve-range>
            <input type="range" min="0" max="6300" value="890" aria-label="playback time" />
          </nve-range>
          <time datetime="01:45:00" nve-text="body sm muted">01:45:00</time>
        </div>
        <nve-toolbar aria-label="video control options" container="inset">
          <nve-button-group container="flat" aria-label="playback controls">
            <nve-icon-button aria-label="go to start" icon-name="start" size="sm"></nve-icon-button>
            <nve-icon-button aria-label="rewind" icon-name="rewind" size="sm"></nve-icon-button>
            <nve-icon-button aria-label="play" icon-name="play" size="sm"></nve-icon-button>
            <!-- ... 2 more <nve-icon-button> elements ... -->
          </nve-button-group>
          <div aria-label="volume controls" role="group" slot="suffix" nve-layout="row gap:xs align:vertical-center">
            <nve-icon-button aria-label="mute volume" icon-name="volume" size="sm" container="flat"></nve-icon-button>
            <nve-range style="width: 100px">
              <input type="range" min="0" max="100" value="50" aria-label="volume" />
            </nve-range>
          </div>
          <nve-select slot="suffix" container="flat" style="--width: 70px">
            <select aria-label="playback speed">
              <option value="0.5">0.5x</option>
              <option value="1">1x</option>
              <option value="1.5">1.5x</option>
              <!-- ... 1 more <option> elements ... -->
            </select>
          </nve-select>
          <nve-icon-button
            aria-label="fullscreen"
            slot="suffix"
            icon-name="maximize"
            size="sm"
            container="flat"
          ></nve-icon-button>
        </nve-toolbar>
      </div>
    </nve-page-panel-content>
  </nve-page-panel>
  <nve-toolbar slot="subfooter">
    <span nve-text="body sm muted">Device: AV-042</span>
    <nve-divider orientation="vertical"></nve-divider>
    <span nve-text="body sm muted">Route: Santa Clara</span>
  </nve-toolbar>
</nve-page>
```

## Split View (template-split-view)

Page-level starter for master-detail split views. Data grid of records with a
resizable detail panel for the selected row.

```html
<nve-page id="split-view-demo">
  <nve-page-header slot="header">
    <nve-logo slot="prefix" size="sm" color="brand-green">AV</nve-logo>
    <h2 nve-text="heading" slot="prefix">Drive Library</h2>
    <nve-button selected container="flat">Drives</nve-button>
    <nve-button container="flat">Vehicles</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">AV</nve-icon-button>
  </nve-page-header>
  <section nve-layout="column gap:md pad:md full">
    <nve-search container="flat">
      <input type="search" aria-label="search drives" placeholder="Search drives by route, vehicle, or scenario" />
    </nve-search>
    <nve-grid>
      <nve-grid-header>
        <nve-grid-column>Drive</nve-grid-column>
        <nve-grid-column>Route</nve-grid-column>
        <nve-grid-column>Vehicle</nve-grid-column>
        <!-- ... 4 more <nve-grid-column> elements ... -->
      </nve-grid-header>
      <nve-grid-row selected>
        <nve-grid-cell>av-2841</nve-grid-cell>
        <nve-grid-cell>Highway 101</nve-grid-cell>
        <nve-grid-cell>av-prototype-042</nve-grid-cell>
        <!-- ... 4 more <nve-grid-cell> elements ... -->
      </nve-grid-row>
      <nve-grid-row>
        <nve-grid-cell>av-2840</nve-grid-cell>
        <nve-grid-cell>Urban downtown loop</nve-grid-cell>
        <nve-grid-cell>av-prototype-039</nve-grid-cell>
        <!-- ... 4 more <nve-grid-cell> elements ... -->
      </nve-grid-row>
      <nve-grid-row>
        <nve-grid-cell>av-2839</nve-grid-cell>
        <nve-grid-cell>Sunnyvale residential</nve-grid-cell>
        <nve-grid-cell>av-prototype-042</nve-grid-cell>
        <!-- ... 4 more <nve-grid-cell> elements ... -->
      </nve-grid-row>
      <!-- ... 6 more <nve-grid-row> elements ... -->
    </nve-grid>
  </section>
  <nve-resize-handle
    slot="right"
    dir="rtl"
    orientation="vertical"
    min="320"
    max="640"
    value="420"
    step="20"
  ></nve-resize-handle>
  <nve-page-panel slot="right" expanded closable style="width: 520px">
    <nve-page-panel-header>
      <div nve-layout="row align:space-between align:vertical-center full">
        <div nve-layout="row gap:sm align:vertical-center">
          <h3 nve-text="heading sm">Highway 101</h3>
          <nve-badge container="flat" status="running">Recording</nve-badge>
        </div>
      </div>
    </nve-page-panel-header>
    <nve-page-panel-content>
      <div nve-layout="column gap:xl">
        <div nve-layout="grid span-items:6 gap:md">
          <div nve-layout="column gap:xs">
            <span nve-text="label sm muted">Drive</span>
            <span nve-text="body">av-2841</span>
          </div>
          <div nve-layout="column gap:xs">
            <span nve-text="label sm muted">Vehicle</span>
            <span nve-text="body">av-prototype-042</span>
          </div>
          <div nve-layout="column gap:xs">
            <span nve-text="label sm muted">Route</span>
            <span nve-text="body">San Jose to SF</span>
          </div>
          <!-- ... 3 more <div> elements ... -->
        </div>
        <div nve-layout="grid span-items:6 gap:md">
          <div nve-layout="column gap:sm">
            <span nve-text="label muted">Vehicle speed</span>
            <span nve-text="body">68 km/h <span nve-text="label sm muted">avg</span></span>
            <nve-sparkline
              data="[40, 55, 60, 72, 80, 78, 70, 65, 60, 75, 82, 70, 64, 68]"
              mark="area"
              interpolation="smooth"
              status="accent"
              size="xl"
            ></nve-sparkline>
          </div>
          <div nve-layout="column gap:sm">
            <span nve-text="label muted">GPU utilization</span>
            <span nve-text="body">82% <span nve-text="label sm muted">peak</span></span>
            <nve-sparkline
              data="[60, 65, 70, 76, 78, 80, 78, 80, 82, 81, 78, 75, 73, 76]"
              mark="line"
              interpolation="smooth"
              status="warning"
              size="xl"
            ></nve-sparkline>
          </div>
        </div>
      </div>
    </nve-page-panel-content>
    <nve-page-panel-footer>
      <div nve-layout="row gap:sm align:right full">
        <nve-button container="flat" size="sm">Annotate</nve-button>
        <nve-button container="flat" size="sm">Download</nve-button>
        <nve-button interaction="emphasis" size="sm">Share</nve-button>
      </div>
    </nve-page-panel-footer>
  </nve-page-panel>
</nve-page>
```

## Wizard (template-wizard)

Page-level starter for multi-step wizards. Stepper, form sections, and footer
navigation.

```html
<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-button selected container="flat"><a href="#">Documentation</a></nve-button>
    <nve-button container="flat"><a href="#">Support</a></nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <main
    nve-layout="grid gap:lg pad:lg align:horizontal-stretch"
    style="max-width: 1024px; min-height: 980px; margin: auto"
  >
    <div nve-layout="span:1">
      <nve-steps vertical>
        <nve-steps-item selected>Robot Profile</nve-steps-item>
        <nve-steps-item>Perception Sensors</nve-steps-item>
        <nve-steps-item>Navigation Stack</nve-steps-item>
        <!-- ... 2 more <nve-steps-item> elements ... -->
      </nve-steps>
    </div>
    <section nve-layout="span:9 column gap:lg">
      <h1 nve-text="heading lg">Deployment Setup</h1>
      <nve-card style="min-height: 300px; width: 100%"></nve-card>
      <nve-card style="min-height: 300px; width: 100%"></nve-card>
    </section>
  </main>
  <nve-page-panel slot="footer">
    <nve-page-panel-content>
      <div nve-layout="row align:space-between gap:md" style="max-width: 860px; margin: auto">
        <nve-button id="btn-back" container="flat" disabled size="sm">Previous</nve-button>
        <div nve-layout="row gap:sm align:vertical-center">
          <span id="step-indicator" nve-text="body sm muted">Stage 1 of 5</span>
          <nve-button id="btn-next" interaction="emphasis" size="sm">Continue</nve-button>
        </div>
      </div>
    </nve-page-panel-content>
  </nve-page-panel>
</nve-page>
```

## Login Form (pattern-authentication-login-form)

Login form with email and password fields with credential validation. Use for
authentication entry points where real-time feedback guides users through
sign-in requirements.

```html
<form id="validation" nve-layout="column gap:md" style="max-width: 350px">
  <nve-input>
    <label>email</label>
    <input type="email" name="email" required pattern=".+@nvidia.com" autocomplete="off" />
    <nve-control-message error="valueMissing">required</nve-control-message>
    <nve-control-message error="patternMismatch">invalid NVIDIA email</nve-control-message>
  </nve-input>
  <nve-password>
    <label>password</label>
    <input type="password" name="password" required minlength="6" autocomplete="off" />
    <nve-control-message error="valueMissing">required</nve-control-message>
    <nve-control-message error="tooShort">minimum length is 6 characters</nve-control-message>
  </nve-password>
  <nve-button disabled>login to account</nve-button>
  <nve-alert-group hidden status="success">
    <nve-alert></nve-alert>
  </nve-alert-group>
</form>
<script type="module">
  const form = document.querySelector("form#validation");
  const alertGroup = document.querySelector("#validation nve-alert-group");
  const alert = document.querySelector("#validation nve-alert");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const { email, password } = Object.fromEntries(new FormData(form));
    alert.innerText = "Login successful - " + email;
    alertGroup.hidden = false;
  });
  form.addEventListener("input", (e) => {
    form.querySelector("nve-button").disabled = form.matches(":invalid");
  });
</script>
```

## Login Page (pattern-authentication-login-page)

Full login page layout with centered card form using nve-page for responsive
page structure.

```html
<nve-page>
  <nve-page-header slot="header">
    <nve-logo slot="prefix" size="sm" color="brand-green">AV</nve-logo>
    <h2 slot="prefix" nve-text="heading sm">Developer Portal</h2>
    <nve-button container="flat"><a href="#">Documentation</a></nve-button>
    <nve-button container="flat"><a href="#">APIs</a></nve-button>
    <nve-button container="flat"><a href="#">Support</a></nve-button>
    <nve-icon-button slot="suffix" container="flat" icon-name="search" aria-label="search"></nve-icon-button>
    <nve-icon-button slot="suffix" container="flat" icon-name="switch-apps" aria-label="applications"></nve-icon-button>
  </nve-page-header>
  <main nve-layout="column gap:lg pad:lg align:center align:vertical-center">
    <form id="login-page-form">
      <nve-card style="width: 350px">
        <nve-card-header>
          <h2 nve-text="heading sm medium">Login</h2>
        </nve-card-header>
        <nve-card-content>
          <div nve-layout="column gap:md">
            <nve-input>
              <label>email</label>
              <input type="email" name="email" required pattern=".+@nvidia.com" autocomplete="off" />
              <nve-control-message error="valueMissing">required</nve-control-message>
              <nve-control-message error="patternMismatch">invalid NVIDIA email</nve-control-message>
            </nve-input>
            <nve-password>
              <label>password</label>
              <input type="password" name="password" required minlength="6" autocomplete="off" />
              <nve-control-message error="valueMissing">required</nve-control-message>
              <nve-control-message error="tooShort">minimum length is 6 characters</nve-control-message>
            </nve-password>
            <nve-alert-group hidden status="success">
              <nve-alert></nve-alert>
            </nve-alert-group>
          </div>
        </nve-card-content>
        <nve-card-footer>
          <nve-button form="login-page-form" disabled style="width: 100%">login to account</nve-button>
        </nve-card-footer>
      </nve-card>
    </form>
  </main>
</nve-page>
<script type="module">
  const form = document.querySelector("form#login-page-form");
  const alertGroup = document.querySelector("#login-page-form nve-alert-group");
  const alert = document.querySelector("#login-page-form nve-alert");
  const button = document.querySelector('nve-button[form="login-page-form"]');
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const { email, password } = Object.fromEntries(new FormData(form));
    alert.innerText = "Login successful - " + email;
    alertGroup.hidden = false;
  });
  form.addEventListener("input", (e) => {
    button.disabled = form.matches(":invalid");
  });
</script>
```

## No Access (pattern-authentication-no-access)

Permission denied states informing users of access restrictions with a contact
option.

```html
<div nve-layout="column gap:lg pad:lg align:center">
  <nve-icon name="lock" size="xl"></nve-icon>
  <div nve-layout="column align:center gap:sm">
    <h2 nve-text="heading lg">Access Restricted</h2>
    <p nve-text="body muted center" style="max-width: 400px">
      You don't have permission to view this configuration. Contact your administrator to request access.
    </p>
  </div>
  <nve-button>Request Access</nve-button>
</div>
```

## Project Board (pattern-dashboard-project-board)

Project board with workflow stage columns for tracking items through a workflow
/ process pipeline. Use for project management views where teams need to
visualize work-in-progress across sequential stages like build, test, and merge
workflows.

```html
<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-icon-button slot="suffix" container="flat" icon-name="switch-apps"></nve-icon-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <main nve-layout="column gap:lg pad:lg">
    <div nve-layout="row align:space-between align:vertical-center">
      <h1 nve-text="heading lg">Project Board</h1>
    </div>
    <nve-search container="flat">
      <input type="search" placeholder="Search tasks by model, sensor, pipeline, etc" aria-label="search tasks" />
    </nve-search>
    <div nve-layout="row align:space-between align:vertical-center">
      <div nve-layout="row gap:sm align:vertical-center">
        <nve-button-group behavior-select="single">
          <nve-button pressed size="sm">Board</nve-button>
          <nve-button size="sm">List</nve-button>
        </nve-button-group>
        <nve-button container="flat" size="sm"><nve-icon name="gear"></nve-icon> Display Settings</nve-button>
      </div>
      <nve-sort-button></nve-sort-button>
    </div>
    <div nve-layout="grid span-items:4 gap:lg align:vertical-stretch">
      <section nve-layout="column gap:sm">
        <div nve-layout="row gap:sm align:vertical-center align:space-between">
          <h3 nve-text="heading sm">Backlog</h3>
          <nve-dot>2</nve-dot>
        </div>
        <nve-card>
          <nve-card-header>
            <div nve-layout="row align:space-between align:vertical-center">
              <h4 nve-text="heading xs">LiDAR Calibration</h4>
              <nve-badge status="danger">High</nve-badge>
            </div>
          </nve-card-header>
          <nve-card-content>
            <p nve-text="body sm muted">
              Recalibrate 3D LiDAR sensor array after firmware update on the warehouse fleet.
            </p>
          </nve-card-content>
          <nve-card-footer>
            <div nve-layout="row full align:space-between align:vertical-center">
              <nve-avatar-group>
                <nve-avatar size="xs" color="green-grass">MK</nve-avatar>
                <nve-avatar size="xs" color="purple-violet">JL</nve-avatar>
                <nve-avatar size="xs" color="green-mint">+3</nve-avatar>
              </nve-avatar-group>
              <nve-button container="flat" size="sm">View Issue</nve-button>
            </div>
          </nve-card-footer>
        </nve-card>
        <nve-card>
          <nve-card-header>
            <div nve-layout="row align:space-between align:vertical-center">
              <h4 nve-text="heading xs">Sim-to-Real Transfer</h4>
              <nve-badge status="warning">Medium</nve-badge>
            </div>
          </nve-card-header>
          <nve-card-content>
            <p nve-text="body sm muted">
              Validate domain randomization parameters for Isaac Sim grasping policy transfer.
            </p>
          </nve-card-content>
          <nve-card-footer>
            <div nve-layout="row full align:space-between align:vertical-center">
              <nve-avatar-group>
                <nve-avatar size="xs" color="green-grass">RN</nve-avatar>
                <nve-avatar size="xs" color="purple-violet">TS</nve-avatar>
                <nve-avatar size="xs" color="green-mint">+1</nve-avatar>
              </nve-avatar-group>
              <nve-button container="flat" size="sm">View Issue</nve-button>
            </div>
          </nve-card-footer>
        </nve-card>
      </section>
      <section nve-layout="column gap:sm">
        <div nve-layout="row gap:sm align:vertical-center align:space-between">
          <h3 nve-text="heading sm">In Progress</h3>
          <nve-dot>2</nve-dot>
        </div>
        <nve-card>
          <nve-card-header>
            <div nve-layout="row align:space-between align:vertical-center">
              <h4 nve-text="heading xs">Perception Pipeline v2</h4>
              <nve-badge status="danger">High</nve-badge>
            </div>
          </nve-card-header>
          <nve-card-content>
            <p nve-text="body sm muted">
              Migrate object detection from YOLOv8 to a transformer-based model for improved occlusion handling.
            </p>
          </nve-card-content>
          <nve-card-footer>
            <div nve-layout="row full align:space-between align:vertical-center">
              <nve-avatar-group>
                <nve-avatar size="xs" color="green-grass">AP</nve-avatar>
                <nve-avatar size="xs" color="purple-violet">SG</nve-avatar>
                <nve-avatar size="xs" color="green-mint">+4</nve-avatar>
              </nve-avatar-group>
              <nve-button container="flat" size="sm">View Issue</nve-button>
            </div>
          </nve-card-footer>
        </nve-card>
        <nve-card>
          <nve-card-header>
            <div nve-layout="row align:space-between align:vertical-center">
              <h4 nve-text="heading xs">Arm Trajectory Planner</h4>
              <nve-badge status="warning">Medium</nve-badge>
            </div>
          </nve-card-header>
          <nve-card-content>
            <p nve-text="body sm muted">
              Optimize inverse kinematics solver for 7-DOF manipulator to reduce planning latency below 50 ms.
            </p>
          </nve-card-content>
          <nve-card-footer>
            <div nve-layout="row full align:space-between align:vertical-center">
              <nve-avatar-group>
                <nve-avatar size="xs" color="green-grass">KW</nve-avatar>
                <nve-avatar size="xs" color="purple-violet">DM</nve-avatar>
                <nve-avatar size="xs" color="green-mint">+2</nve-avatar>
              </nve-avatar-group>
              <nve-button container="flat" size="sm">View Issue</nve-button>
            </div>
          </nve-card-footer>
        </nve-card>
      </section>
      <section nve-layout="column gap:sm">
        <div nve-layout="row gap:sm align:vertical-center align:space-between">
          <h3 nve-text="heading sm">Merged</h3>
          <nve-dot>1</nve-dot>
        </div>
        <nve-card>
          <nve-card-header>
            <div nve-layout="row align:space-between align:vertical-center">
              <h4 nve-text="heading xs">Map Persistence</h4>
              <nve-badge status="success">Low</nve-badge>
            </div>
          </nve-card-header>
          <nve-card-content>
            <p nve-text="body sm muted">
              Add map serialization so autonomous mobile robots resume navigation after power cycles.
            </p>
          </nve-card-content>
          <nve-card-footer>
            <div nve-layout="row full align:space-between align:vertical-center">
              <nve-avatar-group>
                <nve-avatar size="xs" color="green-grass">LZ</nve-avatar>
                <nve-avatar size="xs" color="purple-violet">MK</nve-avatar>
                <nve-avatar size="xs" color="green-mint">+1</nve-avatar>
              </nve-avatar-group>
              <nve-button container="flat" size="sm">View Issue</nve-button>
            </div>
          </nve-card-footer>
        </nve-card>
      </section>
    </div>
  </main>
</nve-page>
```

## Training Monitor (pattern-dashboard-training-monitor)

Dashboard masonry layout for monitoring workflows with KPI cards, sparkline
trends, and a checkpoint evaluation grid. Use for real-time operational views
where users need to scan progress and spot anomalies at a glance.

```html
<nve-page>
  <nve-page-header slot="header">
    <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
    <h2 slot="prefix" nve-text="heading">Infrastructure</h2>
    <nve-button selected container="flat"><a href="#">Documentation</a></nve-button>
    <nve-button container="flat"><a href="#">Support</a></nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-toolbar slot="subheader" container="full">
    <div slot="prefix" nve-layout="row gap:sm align:vertical-center">
      <nve-badge status="running">Training</nve-badge>
      <span nve-text="label sm muted nowrap">Epoch 14 / 20</span>
      <nve-divider orientation="vertical"></nve-divider>
      <span nve-text="label sm muted nowrap">ETA: 4h 23m</span>
    </div>
    <nve-button-group slot="suffix">
      <nve-button>24h</nve-button>
      <nve-button pressed>7d</nve-button>
      <nve-button>30d</nve-button>
    </nve-button-group>
    <nve-divider slot="suffix" orientation="vertical"></nve-divider>
    <nve-button slot="suffix">Export</nve-button>
  </nve-toolbar>
  <main nve-layout="column gap:lg pad:lg" style="max-width: 1300px">
    <h1 slot="prefix" nve-text="heading lg">Model 120B Fine-tune</h1>
    <section nve-layout="grid gap:lg span-items:6 align:vertical-stretch">
      <nve-card>
        <nve-card-header>
          <h2 nve-text="label muted">Training Loss</h2>
        </nve-card-header>
        <nve-card-content>
          <div nve-layout="column gap:sm">
            <div nve-layout="row gap:sm align:vertical-center">
              <h3 nve-text="heading semibold lg">0.0234</h3>
              <nve-badge container="flat" status="success">
                <nve-icon name="trend-down" slot="prefix-icon"></nve-icon> -42%
              </nve-badge>
            </div>
            <nve-sparkline
              data="[0.12, 0.09, 0.075, 0.062, 0.051, 0.044, 0.039, 0.035, 0.032, 0.030, 0.028, 0.026, 0.025, 0.023]"
              mark="line"
              interpolation="smooth"
              status="success"
              size="xl"
            ></nve-sparkline>
            <span nve-text="label sm muted">Per epoch</span>
          </div>
        </nve-card-content>
      </nve-card>
      <nve-card>
        <nve-card-header>
          <h2 nve-text="label muted">Validation Loss</h2>
        </nve-card-header>
        <nve-card-content>
          <div nve-layout="column gap:sm">
            <div nve-layout="row gap:sm align:vertical-center">
              <h3 nve-text="heading semibold lg">0.0312</h3>
              <nve-badge container="flat" status="warning">
                <nve-icon name="trend-up" slot="prefix-icon"></nve-icon> +2%
              </nve-badge>
            </div>
            <nve-sparkline
              data="[0.13, 0.10, 0.082, 0.068, 0.055, 0.048, 0.042, 0.038, 0.033, 0.029, 0.030, 0.029, 0.030, 0.031]"
              mark="line"
              interpolation="smooth"
              status="warning"
              size="xl"
              denote-first
              denote-last
              denote-min
            ></nve-sparkline>
            <span nve-text="label sm muted">Per epoch</span>
          </div>
        </nve-card-content>
      </nve-card>
    </section>
    <section nve-layout="grid gap:lg span-items:4 align:vertical-stretch">
      <nve-card>
        <nve-card-header>
          <h2 nve-text="label muted">Learning Rate</h2>
        </nve-card-header>
        <nve-card-content>
          <div nve-layout="column gap:sm">
            <h4 nve-text="heading semibold">2.4e-5</h4>
            <nve-sparkline
              data="[0.5, 1.5, 3.0, 3.0, 2.8, 2.6, 2.5, 2.4, 2.3, 2.2, 2.1, 2.0, 1.8, 1.5]"
              mark="line"
              interpolation="smooth"
              size="lg"
              denote-last
            ></nve-sparkline>
          </div>
        </nve-card-content>
      </nve-card>
      <nve-card>
        <nve-card-header>
          <h2 nve-text="label muted">GPU Memory</h2>
        </nve-card-header>
        <nve-card-content>
          <div nve-layout="column gap:sm">
            <div nve-layout="row gap:sm align:vertical-center">
              <h4 nve-text="heading semibold">76.2 GB</h4>
              <span nve-text="label sm muted">/ 80 GB</span>
            </div>
            <nve-sparkline
              data="[60, 65, 70, 73, 76, 75, 76, 76, 76, 76, 76, 76, 76, 76]"
              mark="area"
              interpolation="step"
              status="warning"
              size="xl"
              min="0"
              max="80"
            ></nve-sparkline>
          </div>
        </nve-card-content>
      </nve-card>
      <nve-card>
        <nve-card-header>
          <h2 nve-text="label muted">Throughput</h2>
        </nve-card-header>
        <nve-card-content>
          <div nve-layout="column gap:sm">
            <div nve-layout="row gap:sm align:vertical-center">
              <h4 nve-text="heading semibold">1,842</h4>
              <span nve-text="label sm muted">tokens/s</span>
            </div>
            <nve-sparkline
              data="[1200, 1500, 1600, 1750, 1800, 1820, 1830, 1840, 1835, 1842, 1838, 1845, 1840, 1842]"
              mark="column"
              status="accent"
              size="xl"
              min="0"
            ></nve-sparkline>
          </div>
        </nve-card-content>
      </nve-card>
    </section>
    <section nve-layout="column gap:sm">
      <h3 nve-text="heading sm">Checkpoint Evaluations</h3>
      <nve-grid>
        <nve-grid-header>
          <nve-grid-column>Checkpoint</nve-grid-column>
          <nve-grid-column>Epoch</nve-grid-column>
          <nve-grid-column>Train Loss</nve-grid-column>
          <!-- ... 2 more <nve-grid-column> elements ... -->
        </nve-grid-header>
        <nve-grid-row>
          <nve-grid-cell>ckpt-014</nve-grid-cell>
          <nve-grid-cell>14</nve-grid-cell>
          <nve-grid-cell>0.0234</nve-grid-cell>
          <!-- ... 2 more <nve-grid-cell> elements ... -->
        </nve-grid-row>
        <nve-grid-row>
          <nve-grid-cell>ckpt-010</nve-grid-cell>
          <nve-grid-cell>10</nve-grid-cell>
          <nve-grid-cell>0.0298</nve-grid-cell>
          <!-- ... 2 more <nve-grid-cell> elements ... -->
        </nve-grid-row>
        <nve-grid-row>
          <nve-grid-cell>ckpt-005</nve-grid-cell>
          <nve-grid-cell>5</nve-grid-cell>
          <nve-grid-cell>0.0512</nve-grid-cell>
          <!-- ... 2 more <nve-grid-cell> elements ... -->
        </nve-grid-row>
      </nve-grid>
    </section>
  </main>
</nve-page>
```

## Diff View (pattern-editor-diff-view)

Side-by-side diff view for comparing configuration changes between releases.
Essential for reviewing updates before deploying new AV sensor calibrations or
robot parameters.

```html
<nve-page>
  <nve-page-header slot="header">
    <nve-logo slot="prefix" size="sm" color="brand-green">AV</nve-logo>
    <h2 slot="prefix" nve-text="heading">Sensor Calibration</h2>
    <nve-icon-button slot="suffix" interaction="emphasis" size="sm">AV</nve-icon-button>
  </nve-page-header>
  <nve-toolbar container="full" slot="subheader">
    <nve-icon-button slot="prefix" icon-name="arrow" direction="left" size="sm" container="flat"></nve-icon-button>
    <h2 slot="prefix" nve-text="heading sm">sensor_params.yaml</h2>
    <nve-badge slot="prefix">+12 / -4</nve-badge>
    <nve-button-group slot="suffix" container="rounded" behavior-select="single">
      <nve-icon-button icon-name="split-vertical" size="sm" pressed></nve-icon-button>
      <nve-icon-button icon-name="category-list" size="sm"></nve-icon-button>
    </nve-button-group>
    <nve-divider slot="suffix" orientation="vertical"></nve-divider>
    <nve-button slot="suffix">Approve Changes</nve-button>
    <nve-button slot="suffix">Merge</nve-button>
  </nve-toolbar>
  <main nve-layout="column">
    <nve-toolbar container="full" style="--background: var(--nve-sys-layer-canvas-accent-background)">
      <div slot="prefix" nve-layout="row gap:sm align:vertical-center">
        <nve-icon-button icon-name="branch" size="sm" container="flat"></nve-icon-button>
        <span nve-text="body sm">release/v2.3.0</span>
      </div>
      <nve-icon-button icon-name="arrow" direction="right" size="sm" container="flat"></nve-icon-button>
      <div nve-layout="row gap:sm align:vertical-center">
        <nve-icon-button icon-name="branch" size="sm" container="flat"></nve-icon-button>
        <span nve-text="body sm">feature/lidar-calibration</span>
      </div>
    </nve-toolbar>
    <nve-monaco-diff-input
      language="yaml"
      line-numbers="on"
      side-by-side
      readonly
      style="flex: 1; --min-height: 100%; --border-radius: 0"
      original="# Sensor Parameters - v2.3.0
# Last updated: 2025-12-15
lidar:
  front:
    model: Velodyne-128
    range_max: 100.0
    fov_horizontal: 360.0
    fov_vertical: 40.0
    rotation_rate: 10
    
    calibration:
      roll: 0.0
      pitch: 0.0
      yaw: 0.0
      x_offset: 2.1
      y_offset: 0.0
      z_offset: 1.73
camera:
  front_center:
    model: NVIDIA-Hawk
    resolution: [1920, 1080]
    fps: 30
    
    intrinsics:
      fx: 1450.0
      fy: 1450.0
      cx: 960.0
      cy: 540.0
    
    distortion: [0.0, 0.0, 0.0, 0.0, 0.0]
radar:
  front:
    model: Continental-ARS540
    range_max: 250.0
    enabled: true
"
      value="# Sensor Parameters - v2.4.0
# Last updated: 2026-01-08
# Updated LIDAR calibration from field test
lidar:
  front:
    model: Velodyne-128
    range_max: 120.0  # increased from 100m
    fov_horizontal: 360.0
    fov_vertical: 40.0
    rotation_rate: 20  # increased to 20Hz
    points_per_second: 300000  # NEW
    
    calibration:
      roll: 0.0
      pitch: -0.5  # adjusted from field calibration
      yaw: 0.12  # adjusted from field calibration
      x_offset: 2.1
      y_offset: 0.0
      z_offset: 1.8  # corrected mounting height
camera:
  front_center:
    model: NVIDIA-Hawk
    resolution: [1920, 1080]
    fps: 30
    
    intrinsics:
      fx: 1452.3  # refined from calibration
      fy: 1451.8  # refined from calibration
      cx: 962.1
      cy: 541.3
    
    distortion: [-0.012, 0.003, 0.0, 0.0, 0.0]
radar:
  front:
    model: Continental-ARS540
    range_max: 300.0  # increased range
    enabled: true
"
    ></nve-monaco-diff-input>
  </main>
  <nve-toolbar slot="subfooter">
    <nve-icon-button icon-name="information-circle-stroke" size="sm" container="flat"></nve-icon-button>
    <span nve-text="body sm muted">Comparing release/v2.3.0 to feature/lidar-calibration</span>
    <span slot="suffix" nve-text="body sm nowrap">12 additions, 4 modifications</span>
  </nve-toolbar>
</nve-page>
```

## File Browser (pattern-editor-file-browser)

IDE-style layout with file tree navigation, code editor, and output panel. Ideal
for browsing and editing AV sensor configuration files in a familiar development
environment.

```html
<nve-page>
  <nve-page-header slot="header">
    <nve-logo slot="prefix" size="sm" color="brand-green">AV</nve-logo>
    <h2 slot="prefix" nve-text="heading">Config Editor</h2>
    <nve-button container="flat" selected>Sensors</nve-button>
    <nve-button container="flat">Vehicle</nve-button>
    <nve-button container="flat">Perception</nve-button>
    <nve-icon-button slot="suffix" interaction="emphasis" size="sm">AV</nve-icon-button>
  </nve-page-header>
  <nve-toolbar slot="left-aside" orientation="vertical">
    <nve-button-group>
      <nve-icon-button icon-name="folder" size="sm" selected></nve-icon-button>
      <nve-icon-button icon-name="search" size="sm"></nve-icon-button>
      <nve-icon-button icon-name="branch" size="sm"></nve-icon-button>
    </nve-button-group>
  </nve-toolbar>
  <nve-page-panel slot="left" size="sm">
    <nve-page-panel-content>
      <nve-tree behavior-expand>
        <nve-tree-node expanded>
          av-prototype-042/
          <nve-tree-node expanded>
            sensors/
            <nve-tree-node><a href="#" class="file-link" data-file="lidar">lidar_config.py</a></nve-tree-node>
            <nve-tree-node><a href="#" class="file-link" data-file="camera">camera_config.py</a></nve-tree-node>
            <nve-tree-node><a href="#" class="file-link" data-file="radar">radar_config.py</a></nve-tree-node>
          </nve-tree-node>
          <nve-tree-node>
            perception/
            <nve-tree-node><a href="#">detection.py</a></nve-tree-node>
            <nve-tree-node><a href="#">tracking.py</a></nve-tree-node>
          </nve-tree-node>
          <nve-tree-node>
            planning/
            <nve-tree-node><a href="#">route_planner.py</a></nve-tree-node>
          </nve-tree-node>
        </nve-tree-node>
      </nve-tree>
    </nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column full">
    <nve-toolbar container="full">
      <nve-tabs behavior-select>
        <nve-tabs-item selected>lidar_config.py</nve-tabs-item>
      </nve-tabs>
    </nve-toolbar>
    <nve-monaco-input
      language="python"
      line-numbers="on"
      folding
      style="flex: 1; --min-height: 100%; --border-radius: 0"
      value='from dataclasses import dataclass
from typing import Literal
@dataclass
class LidarConfig:
    """Front LIDAR sensor configuration for AV prototype."""
    
    model: str = &apos;Velodyne-128&apos;
    range_max: float = 120.0  # meters
    range_min: float = 0.5
    fov_horizontal: float = 360.0  # degrees
    fov_vertical: float = 40.0
    points_per_second: int = 300000
    rotation_rate: int = 20  # Hz
    
    # Mounting position relative to vehicle center
    position_x: float = 2.1  # meters forward
    position_y: float = 0.0  # centered
    position_z: float = 1.8  # height from ground
    
    # Calibration parameters
    roll_offset: float = 0.0
    pitch_offset: float = -0.5  # slight downward tilt
    yaw_offset: float = 0.0
@dataclass
class LidarProcessingConfig:
    """Point cloud processing parameters."""
    
    voxel_size: float = 0.1
    ground_removal: bool = True
    ground_threshold: float = 0.3
    clustering_eps: float = 0.5
    min_cluster_size: int = 10
'
    ></nve-monaco-input>
  </main>
  <nve-page-panel slot="bottom" size="sm" closable>
    <nve-page-panel-header>
      <nve-tabs behavior-select>
        <nve-tabs-item selected>Problems</nve-tabs-item>
        <nve-tabs-item>Output</nve-tabs-item>
        <nve-tabs-item>Terminal</nve-tabs-item>
      </nve-tabs>
    </nve-page-panel-header>
    <nve-page-panel-content>
      <p nve-text="body sm muted">No problems detected in workspace</p>
    </nve-page-panel-content>
  </nve-page-panel>
  <nve-toolbar slot="subfooter">
    <nve-icon-button icon-name="branch" size="sm" container="flat"></nve-icon-button>
    <span nve-text="body sm muted">main</span>
    <nve-divider orientation="vertical"></nve-divider>
    <span nve-text="body sm muted">Ln 1, Col 1</span>
    <span slot="suffix" nve-text="body sm muted">Python</span>
  </nve-toolbar>
</nve-page>
```

## Read Only (pattern-editor-read-only)

Reviewing deployed configurations or viewing session logs in a read-only code
viewer. Prevents accidental edits while allowing full code navigation and
search.

```html
<nve-page>
  <nve-page-header slot="header">
    <nve-logo slot="prefix" size="sm" color="brand-green">AV</nve-logo>
    <h2 slot="prefix" nve-text="heading">Session Viewer</h2>
    <nve-icon-button slot="suffix" icon-name="download" container="flat"></nve-icon-button>
    <nve-icon-button slot="suffix" icon-name="copy" container="flat"></nve-icon-button>
    <nve-icon-button slot="suffix" interaction="emphasis" size="sm">RB</nve-icon-button>
  </nve-page-header>
  <nve-page-panel slot="subheader">
    <nve-page-panel-content>
      <div nve-layout="row align:space-between align:vertical-center">
        <section nve-layout="row gap:sm align:vertical-center">
          <nve-icon-button icon-name="arrow" direction="left" size="sm" container="flat"></nve-icon-button>
          <h2 nve-text="heading lg">Test Session #2847</h2>
          <nve-badge status="success">completed</nve-badge>
        </section>
        <section nve-layout="row gap:sm align:vertical-center">
          <nve-button container="flat">View Raw</nve-button>
          <nve-button>Export Report</nve-button>
        </section>
      </div>
      <section nve-layout="row gap:xl align:vertical-center pad-top:sm">
        <div nve-layout="row gap:sm align:center">
          <span nve-text="body sm muted">Robot</span>
          <span nve-text="body sm bold">isaac-manipulator-07</span>
        </div>
        <div nve-layout="row gap:sm align:center">
          <span nve-text="body sm muted">Duration</span>
          <span nve-text="body sm bold">4h 23m</span>
        </div>
        <div nve-layout="row gap:sm align:center">
          <span nve-text="body sm muted">Started</span>
          <span nve-text="body sm bold">Jan 8, 2026 09:15</span>
        </div>
      </section>
    </nve-page-panel-content>
  </nve-page-panel>
  <nve-page-panel slot="left" size="sm" expandable>
    <nve-page-panel-content>
      <nve-tree behavior-expand>
        <nve-tree-node expanded>
          session-2847/
          <nve-tree-node><a href="#">robot_config.yaml</a></nve-tree-node>
          <nve-tree-node expanded>
            logs/
            <nve-tree-node><a href="#">motion_log.txt</a></nve-tree-node>
            <nve-tree-node><a href="#">sensor_log.txt</a></nve-tree-node>
            <nve-tree-node><a href="#">errors.txt</a></nve-tree-node>
          </nve-tree-node>
          <nve-tree-node>
            results/
            <nve-tree-node><a href="#">metrics.json</a></nve-tree-node>
          </nve-tree-node>
        </nve-tree-node>
      </nve-tree>
    </nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column" style="height: 100%">
    <nve-toolbar container="full">
      <nve-tabs behavior-select>
        <nve-tabs-item selected>robot_config.yaml</nve-tabs-item>
      </nve-tabs>
      <nve-icon-button slot="suffix" icon-name="lock" size="sm" container="flat" disabled></nve-icon-button>
      <span slot="suffix" nve-text="body sm muted nowrap">Read-only</span>
    </nve-toolbar>
    <nve-monaco-input
      language="yaml"
      line-numbers="on"
      folding
      readonly
      style="flex: 1; --min-height: 100%; --border-radius: 0"
      value="# Robot Configuration - Session #2847
# Generated: 2026-01-08T09:15:00Z
# WARNING: This is a deployed configuration snapshot
robot:
  name: isaac-manipulator-07
  serial: IM-2024-0742
  firmware: 3.2.1
joints:
  - name: base_rotation
    type: revolute
    limits: [-180.0, 180.0]  # degrees
    max_velocity: 120.0  # deg/s
    max_acceleration: 300.0
    
  - name: shoulder
    type: revolute
    limits: [-90.0, 90.0]
    max_velocity: 90.0
    max_acceleration: 200.0
    
  - name: elbow
    type: revolute
    limits: [-135.0, 135.0]
    max_velocity: 120.0
    max_acceleration: 300.0
    
  - name: wrist_pitch
    type: revolute
    limits: [-90.0, 90.0]
    max_velocity: 180.0
    max_acceleration: 400.0
    
  - name: wrist_roll
    type: continuous
    max_velocity: 360.0
    max_acceleration: 720.0
    
  - name: gripper
    type: prismatic
    limits: [0.0, 0.08]  # meters
    max_velocity: 0.1
    max_force: 100.0  # Newtons
motion_planning:
  planner: RRTConnect
  planning_time: 5.0
  goal_tolerance: 0.001
  collision_checking: true
  
safety:
  emergency_stop_enabled: true
  force_limit: 150.0
  workspace_bounds:
    x: [-1.0, 1.0]
    y: [-1.0, 1.0]
    z: [0.0, 1.5]
"
    ></nve-monaco-input>
  </main>
  <nve-toolbar slot="subfooter">
    <nve-icon-button icon-name="information-circle-stroke" size="sm" container="flat"></nve-icon-button>
    <span nve-text="body sm muted">Deployed config snapshot, editing disabled</span>
  </nve-toolbar>
</nve-page>
```

## Data Grid Retry (pattern-empty-states-data-grid-retry)

Data grid empty state with retry action. Use when requested data is not found
and a retry action is available.

```html
<nve-grid style="min-height: 400px">
  <nve-grid-header>
    <nve-grid-column></nve-grid-column>
  </nve-grid-header>
  <nve-grid-placeholder>
    <div nve-layout="column gap:lg align:center">
      <nve-icon name="search" size="lg"></nve-icon>
      <h2 nve-text="heading lg">No Results Found</h2>
      <p nve-text="body">Try adjusting filter settings or try again later.</p>
      <div nve-layout="row gap:xs align:center">
        <nve-button container="flat">Clear Filters</nve-button>
        <nve-button>Retry Query</nve-button>
      </div>
    </div>
  </nve-grid-placeholder>
  <nve-grid-footer>
    <time nve-text="body sm muted" datetime="2026-01-28T12:00:00Z">Last updated: 15 minutes ago</time>
  </nve-grid-footer>
</nve-grid>
```

## Empty Data (pattern-empty-states-empty-data)

First-time or empty collection states with an illustration and call-to-action to
guide users.

```html
<div nve-layout="column gap:lg pad:lg align:center">
  <nve-icon name="exclamation-triangle" size="xl"></nve-icon>
  <h2 nve-text="heading lg">No Devices Found</h2>
  <p nve-text="body muted center" style="max-width: 400px">
    Your fleet is empty. Add your first autonomous robot or vehicle to start monitoring and managing operations.
  </p>
  <nve-button>Add Device</nve-button>
</div>
```

## No Results (pattern-empty-states-no-results)

No search results match to suggest refining filters or clearing search criteria.

```html
<div nve-layout="column gap:lg pad:lg align:center">
  <nve-icon name="search" size="xl"></nve-icon>
  <h2 nve-text="heading lg">No Results Found</h2>
  <p nve-text="body muted center">Try adjusting filter settings or try again later.</p>
  <div nve-layout="row gap:xs align:center">
    <nve-button container="flat">Clear Filters</nve-button>
    <nve-button>Retry Query</nve-button>
  </div>
</div>
```

## Offline Mode (pattern-empty-states-offline-mode)

Use to show offline mode with information about limited functionality and last
sync time.

```html
<div nve-layout="column gap:lg pad:lg align:center">
  <nve-icon name="wifi" size="xl"></nve-icon>
  <h2 nve-text="heading lg">You're Offline</h2>
  <p nve-text="body muted center" style="max-width: 400px">
    You're viewing cached data. Some features are unavailable until connection is restored.
  </p>
  <nve-button>Reconnect</nve-button>
</div>
```

## Occupancy Detection Heatmap (pattern-heatmap-occupancy-detection-heatmap)

Grid heatmap displaying occupancy probability for dynamic obstacle detection
across a spatial coordinate grid. Ideal for robotics and AV perception teams
visualizing sensor fusion output to identify high-occupancy zones and detection
blind spots using viridis scale.

```html
<nve-grid container="flat">
  <style>
    @scope {
      [data-intensity] {
        --color: #000;
        --border-right: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);
        text-align: center;
      }
      [data-intensity^="0"] {
        --background: var(--nve-sys-visualization-sequential-diverging-virdis-100);
      }
      [data-intensity^="1"] {
        --background: var(--nve-sys-visualization-sequential-diverging-virdis-200);
      }
      [data-intensity^="2"] {
        --background: var(--nve-sys-visualization-sequential-diverging-virdis-300);
      }
      [data-intensity^="3"] {
        --background: var(--nve-sys-visualization-sequential-diverging-virdis-400);
      }
      [data-intensity^="4"] {
        --background: var(--nve-sys-visualization-sequential-diverging-virdis-500);
      }
      [data-intensity^="5"] {
        --background: var(--nve-sys-visualization-sequential-diverging-virdis-600);
      }
      [data-intensity^="6"] {
        --background: var(--nve-sys-visualization-sequential-diverging-virdis-700);
      }
      [data-intensity^="7"] {
        --background: var(--nve-sys-visualization-sequential-diverging-virdis-800);
      }
      [data-intensity^="8"] {
        --background: var(--nve-sys-visualization-sequential-diverging-virdis-900);
      }
      [data-intensity^="9"] {
        --background: var(--nve-sys-visualization-sequential-diverging-virdis-1100);
        --color: #fff;
      }
      [data-intensity^="100"] {
        --background: var(--nve-sys-visualization-sequential-diverging-virdis-1200);
        --color: #fff;
      }
    }
  </style>
  <nve-grid-header>
    <nve-grid-column position="fixed" tabindex="0" left aria-colindex="1">Y (m)</nve-grid-column>
    <nve-grid-column column-align="center" aria-colindex="3">-4</nve-grid-column>
    <nve-grid-column column-align="center" aria-colindex="4">-3</nve-grid-column>
    <!-- ... 8 more <nve-grid-column> elements ... -->
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>-3</nve-grid-cell>
    <nve-grid-cell data-intensity="10">12</nve-grid-cell>
    <nve-grid-cell data-intensity="20">15</nve-grid-cell>
    <!-- ... 8 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>-2</nve-grid-cell>
    <nve-grid-cell data-intensity="20">15</nve-grid-cell>
    <nve-grid-cell data-intensity="20">20</nve-grid-cell>
    <!-- ... 8 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>-1</nve-grid-cell>
    <nve-grid-cell data-intensity="20">18</nve-grid-cell>
    <nve-grid-cell data-intensity="30">25</nve-grid-cell>
    <!-- ... 8 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <!-- ... 5 more <nve-grid-row> elements ... -->
</nve-grid>
```

## Sensor Coverage Heatmap (pattern-heatmap-sensor-coverage-heatmap)

Grid heatmap showing sensor coverage for autonomous vehicle perception systems
across distance ranges. Useful for AV engineers analyzing LiDAR, radar, and
camera fusion performance to identify blind spots.

```html
<nve-grid container="flat">
  <style>
    @scope {
      [data-coverage="0"],
      [data-coverage="1"],
      [data-coverage="2"] {
        --background: var(--nve-sys-visualization-sequential-diverging-red-green-100);
        --color: var(--nve-ref-color-neutral-100);
      }
      [data-coverage="3"] {
        --background: var(--nve-sys-visualization-sequential-diverging-red-green-200);
      }
      [data-coverage="4"] {
        --background: var(--nve-sys-visualization-sequential-diverging-red-green-300);
      }
      [data-coverage="5"] {
        --background: var(--nve-sys-visualization-sequential-diverging-red-green-400);
      }
      [data-coverage="6"] {
        --background: var(--nve-sys-visualization-sequential-diverging-red-green-600);
      }
      [data-coverage="7"] {
        --background: var(--nve-sys-visualization-sequential-diverging-red-green-700);
      }
      [data-coverage="8"] {
        --background: var(--nve-sys-visualization-sequential-diverging-red-green-800);
      }
      [data-coverage="9"],
      [data-coverage="10"] {
        --background: var(--nve-sys-visualization-sequential-diverging-red-green-900);
        --color: var(--nve-ref-color-neutral-100);
      }
      [data-coverage] {
        --border-right: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);
        text-align: center;
      }
    }
  </style>
  <nve-grid-header>
    <nve-grid-column width="140px" position="fixed">Sensor</nve-grid-column>
    <nve-grid-column column-align="center">0-10m</nve-grid-column>
    <nve-grid-column column-align="center">10-30m</nve-grid-column>
    <!-- ... 4 more <nve-grid-column> elements ... -->
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>LiDAR Front</nve-grid-cell>
    <nve-grid-cell data-coverage="9">92.3%</nve-grid-cell>
    <nve-grid-cell data-coverage="8">86.2%</nve-grid-cell>
    <!-- ... 4 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>LiDAR Rear</nve-grid-cell>
    <nve-grid-cell data-coverage="9">98.5%</nve-grid-cell>
    <nve-grid-cell data-coverage="8">88.8%</nve-grid-cell>
    <!-- ... 4 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>Radar Front</nve-grid-cell>
    <nve-grid-cell data-coverage="8">83.5%</nve-grid-cell>
    <nve-grid-cell data-coverage="7">73.2%</nve-grid-cell>
    <!-- ... 4 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <!-- ... 6 more <nve-grid-row> elements ... -->
</nve-grid>
```

## Shortcut Filled (pattern-keyboard-shortcuts-shortcut-filled)

Keyboard shortcut badge with filled styling for displaying key combinations. Use
in help dialogs, onboarding tooltips, or documentation to communicate available
shortcuts to users.

```html
<kbd nve-text="code">CMD + C</kbd>
```

## Event Timeline (pattern-logging-event-timeline)

Chronological event timeline with severity-coded entries for monitoring system
events. Use for reviewing operational logs where temporal ordering and quick
severity scanning are critical.

```html
<div nve-layout="column gap:lg">
  <div nve-layout="column gap:xs">
    <div nve-layout="row gap:sm align:vertical-center">
      <nve-badge status="failed">09:17:45</nve-badge>
      <span nve-text="body semibold">Network Connection Lost</span>
    </div>
    <p nve-text="body sm muted">NetworkManager failed to connect to vehicle command server (NET_1001)</p>
    <div nve-layout="row gap:xs">
      <nve-badge container="flat">NetworkManager</nve-badge>
      <nve-badge container="flat">AV-001-Alpha</nve-badge>
    </div>
  </div>
  <div nve-layout="column gap:xs">
    <div nve-layout="row gap:sm align:vertical-center">
      <nve-badge status="warning">09:16:12</nve-badge>
      <span nve-text="body semibold">Sensor Calibration Warning</span>
    </div>
    <p nve-text="body sm muted">LiDAR sensor temperature approaching threshold (51°C)</p>
    <div nve-layout="row gap:xs">
      <nve-badge container="flat">LiDARManager</nve-badge>
      <nve-badge container="flat">AV-001-Alpha</nve-badge>
    </div>
  </div>
  <div nve-layout="column gap:xs">
    <div nve-layout="row gap:sm align:vertical-center">
      <nve-badge status="success">09:15:28</nve-badge>
      <span nve-text="body semibold">GPS Lock Acquired</span>
    </div>
    <p nve-text="body sm muted">GPS module successfully acquired satellite lock with 12 satellites</p>
    <div nve-layout="row gap:xs">
      <nve-badge container="flat">GPSManager</nve-badge>
      <nve-badge container="flat">AV-001-Alpha</nve-badge>
    </div>
  </div>
  <!-- ... 1 more <div> elements ... -->
</div>
```

## Audio Player Card (pattern-media-audio-player-card)

Compact audio player controls with playback controls, and timestamp display.
Ideal for reviewing audio logs, voice commands, or alert sounds.

```html
<nve-card style="max-width: 520px">
  <nve-card-header>
    <div nve-layout="row gap:md align:vertical-center align:space-between full">
      <div nve-layout="column gap:xs">
        <span nve-text="body bold">event-recording-042.mp4</span>
        <time datetime="2026-01-08 14:23:56" nve-text="body sm muted">2026-01-08 14:23:56</time>
      </div>
      <nve-icon-button
        aria-label="download audio"
        popovertarget="download-audio"
        icon-name="download"
        size="sm"
        container="flat"
      ></nve-icon-button>
      <nve-tooltip id="download-audio">Download Audio</nve-tooltip>
    </div>
  </nve-card-header>
  <nve-card-content>
    <div role="group" aria-label="time scrubber controls" nve-layout="row gap:sm align:vertical-center full pad-y:md">
      <time datetime="00:03.2" nve-text="body sm muted">00:03.2</time>
      <nve-range>
        <input aria-label="playback time" type="range" min="0" max="920" value="320" />
      </nve-range>
      <time datetime="00:09.2" nve-text="body sm muted">00:09.2</time>
    </div>
  </nve-card-content>
  <nve-card-footer>
    <nve-toolbar container="inset">
      <nve-button-group aria-label="playback controls" container="flat">
        <nve-icon-button aria-label="go to start" icon-name="start" size="sm"></nve-icon-button>
        <nve-icon-button aria-label="play" icon-name="play" size="sm"></nve-icon-button>
        <nve-icon-button aria-label="go to end" icon-name="start" direction="down" size="sm"></nve-icon-button>
      </nve-button-group>
      <nve-divider orientation="vertical"></nve-divider>
      <div role="group" aria-label="volume controls" nve-layout="row gap:xs align:vertical-center">
        <nve-icon-button aria-label="mute volume" icon-name="volume" size="sm" container="flat"></nve-icon-button>
        <nve-range>
          <input type="range" min="0" max="100" value="50" aria-label="Volume" />
        </nve-range>
      </div>
      <nve-divider orientation="vertical"></nve-divider>
      <nve-button-group aria-label="playback speed" container="rounded">
        <nve-button size="sm">0.5x</nve-button>
        <nve-button size="sm" pressed>1x</nve-button>
        <nve-button size="sm">2x</nve-button>
        <!-- ... 1 more <nve-button> elements ... -->
      </nve-button-group>
    </nve-toolbar>
  </nve-card-footer>
</nve-card>
```

## Page Layout Video (pattern-media-page-layout-video)

Full-page video player layout with metadata panel and playback controls. Use for
reviewing recordings that requires detailed contextual information.

```html
<nve-page>
  <nve-page-header slot="header">
    <nve-logo slot="prefix" size="sm" color="brand-green">AV</nve-logo>
    <h2 nve-text="heading" slot="prefix">Infrastructure</h2>
    <nve-button selected container="flat">Link 1</nve-button>
    <nve-button container="flat">Link 2</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-page-panel slot="subheader">
    <nve-page-panel-content>
      <div nve-layout="column gap:md align:stretch">
        <div nve-layout="row align:space-between align:vertical-center">
          <section nve-layout="row gap:sm align:vertical-center">
            <nve-icon-button icon-name="arrow" direction="left" size="sm" container="flat"></nve-icon-button>
            <h2 nve-text="heading sm">event-recording-042.mp4</h2>
          </section>
          <section nve-layout="row gap:sm align:vertical-center">
            <nve-icon-button aria-label="additional options" icon-name="more-actions"></nve-icon-button>
          </section>
        </div>
      </div>
    </nve-page-panel-content>
  </nve-page-panel>
  <nve-page-panel slot="right" size="sm">
    <nve-page-panel-content>
      <div nve-layout="column gap:md">
        <div nve-layout="column gap:xs">
          <span nve-text="body sm muted">Recorded</span>
          <time datetime="2026-01-08 14:23:56" nve-text="body sm">2026-01-08 14:23:56</time>
        </div>
        <div nve-layout="column gap:xs">
          <span nve-text="body sm muted">Intervention</span>
          <span nve-text="body sm">00:37:12</span>
        </div>
        <div nve-layout="column gap:xs">
          <span nve-text="body sm muted">Trigger Reason</span>
          <span nve-text="body sm">Zone not detected</span>
        </div>
        <!-- ... 2 more <div> elements ... -->
      </div>
    </nve-page-panel-content>
  </nve-page-panel>
  <video style="width: 100%; height: 100%; background: var(--nve-ref-color-alpha-black-700)"></video>
  <nve-page-panel slot="bottom" style="max-height: 100px">
    <nve-page-panel-content>
      <div nve-layout="column gap:sm full">
        <div role="group" aria-label="time scrubber controls" nve-layout="row gap:sm align:vertical-center full">
          <time datetime="00:14:23" nve-text="body sm muted">00:14:23</time>
          <nve-range>
            <input type="range" min="0" max="6300" value="890" aria-label="playback time" />
          </nve-range>
          <time datetime="01:45:00" nve-text="body sm muted">01:45:00</time>
        </div>
        <nve-toolbar aria-label="video control options" container="inset">
          <nve-button-group container="flat" aria-label="playback controls">
            <nve-icon-button aria-label="go to start" icon-name="start" size="sm"></nve-icon-button>
            <nve-icon-button aria-label="rewind" icon-name="rewind" size="sm"></nve-icon-button>
            <nve-icon-button aria-label="play" icon-name="play" size="sm"></nve-icon-button>
            <!-- ... 2 more <nve-icon-button> elements ... -->
          </nve-button-group>
          <div aria-label="volume controls" role="group" slot="suffix" nve-layout="row gap:xs align:vertical-center">
            <nve-icon-button aria-label="mute volume" icon-name="volume" size="sm" container="flat"></nve-icon-button>
            <nve-range style="width: 100px">
              <input type="range" min="0" max="100" value="50" aria-label="volume" />
            </nve-range>
          </div>
          <nve-select slot="suffix" container="flat" style="--width: 70px">
            <select aria-label="playback speed">
              <option value="0.5">0.5x</option>
              <option value="1">1x</option>
              <option value="1.5">1.5x</option>
              <!-- ... 1 more <option> elements ... -->
            </select>
          </nve-select>
          <nve-icon-button
            aria-label="fullscreen"
            slot="suffix"
            icon-name="maximize"
            size="sm"
            container="flat"
          ></nve-icon-button>
        </nve-toolbar>
      </div>
    </nve-page-panel-content>
  </nve-page-panel>
  <nve-toolbar slot="subfooter">
    <span nve-text="body sm muted">Device: AV-042</span>
    <nve-divider orientation="vertical"></nve-divider>
    <span nve-text="body sm muted">Route: Santa Clara</span>
  </nve-toolbar>
</nve-page>
```

## Playback Control (pattern-media-playback-control)

Playback transport controls with start, rewind, play, fast forward, and end
buttons in a flat button group. Use as the core navigation component in media
players, simulation reviewers, or timeline-based interfaces.

```html
<nve-button-group aria-label="playback controls" container="flat">
  <nve-icon-button aria-label="go to start" icon-name="start" size="sm"></nve-icon-button>
  <nve-icon-button aria-label="rewind" icon-name="rewind" size="sm"></nve-icon-button>
  <nve-icon-button aria-label="play" icon-name="play" size="sm"></nve-icon-button>
  <!-- ... 2 more <nve-icon-button> elements ... -->
</nve-button-group>
```

## Playback Speed Control (pattern-media-playback-speed-control)

Playback speed control using a rounded button group with preset speed options
for audio and video playback. Use when toolbar space allows discrete speed
buttons and users need to see all options at once.

```html
<nve-button-group aria-label="playback speed" container="rounded">
  <nve-button size="sm">0.5x</nve-button>
  <nve-button size="sm" pressed>1x</nve-button>
  <nve-button size="sm">2x</nve-button>
  <!-- ... 1 more <nve-button> elements ... -->
</nve-button-group>
```

## Playback Speed Menu Control (pattern-media-playback-speed-menu-control)

Compact playback speed control using a flat select dropdown for audio and video
playback. Use when toolbar space is tight and a dropdown works better than a
button group for speed selection.

```html
<nve-select container="flat" style="--width: 70px">
  <select aria-label="playback speed">
    <option value="0.5">0.5x</option>
    <option value="1">1x</option>
    <option value="1.5">1.5x</option>
    <!-- ... 1 more <option> elements ... -->
  </select>
</nve-select>
```

## Time Scrubber Control (pattern-media-time-scrubber-control)

Time scrubber with current position, range slider, and total duration for audio
and video playback. Use in media players where users need to seek to a specific
timestamp or scan through recorded content.

```html
<div aria-label="time scrubber controls" role="group" nve-layout="row gap:sm align:vertical-center">
  <time datetime="00:14:23" nve-text="body sm muted">00:14:23</time>
  <nve-range>
    <input aria-label="playback time" type="range" min="0" max="6300" value="890" />
  </nve-range>
  <time datetime="01:45:00" nve-text="body sm muted">01:45:00</time>
</div>
```

## Video Player Card (pattern-media-video-player-card)

Standard video player with playback controls, timeline scrubber, and volume
controls. Use for reviewing recorded sensor data, simulation playback, or
training video content.

```html
<nve-card style="max-width: 520px">
  <video style="aspect-ratio: 16 / 9; background: var(--nve-ref-color-alpha-black-700)"></video>
  <nve-card-content>
    <div nve-layout="column gap:sm full">
      <div role="group" aria-label="time scrubber controls" nve-layout="row gap:sm align:vertical-center full">
        <time datetime="00:14:23" nve-text="body sm muted">00:14:23</time>
        <nve-range>
          <input type="range" min="0" max="6300" value="890" aria-label="playback time" />
        </nve-range>
        <time datetime="01:45:00" nve-text="body sm muted">01:45:00</time>
      </div>
      <nve-toolbar aria-label="video control options" container="inset">
        <nve-button-group container="flat" aria-label="playback controls">
          <nve-icon-button aria-label="go to start" icon-name="start" size="sm"></nve-icon-button>
          <nve-icon-button aria-label="rewind" icon-name="rewind" size="sm"></nve-icon-button>
          <nve-icon-button aria-label="play" icon-name="play" size="sm"></nve-icon-button>
          <!-- ... 2 more <nve-icon-button> elements ... -->
        </nve-button-group>
        <nve-divider orientation="vertical"></nve-divider>
        <div role="group" aria-label="volume controls" nve-layout="row gap:xs align:vertical-center">
          <nve-icon-button aria-label="mute volume" icon-name="volume" size="sm" container="flat"></nve-icon-button>
          <nve-range>
            <input type="range" min="0" max="100" value="50" aria-label="Volume" />
          </nve-range>
        </div>
        <nve-select container="flat" style="--width: 70px">
          <select aria-label="playback speed">
            <option value="0.5">0.5x</option>
            <option value="1">1x</option>
            <option value="1.5">1.5x</option>
            <!-- ... 1 more <option> elements ... -->
          </select>
        </nve-select>
        <nve-icon-button aria-label="fullscreen" icon-name="maximize" size="sm" container="flat"></nve-icon-button>
      </nve-toolbar>
    </div>
  </nve-card-content>
</nve-card>
```

## Volume Control (pattern-media-volume-control)

Volume control with mute toggle and range slider for audio playback. Use in
media players, video reviewers, or any interface where users need fine-grained
audio level control.

```html
<div aria-label="volume controls" role="group" nve-layout="row gap:xs align:vertical-center">
  <nve-icon-button aria-label="mute volume" icon-name="volume" size="sm" container="flat"></nve-icon-button>
  <nve-range>
    <input aria-label="volume" type="range" min="0" max="100" value="80" />
  </nve-range>
</div>
```

## Zoom Control (pattern-media-zoom-control)

Zoom level control with zoom-out, range slider, and zoom-in buttons for video
and canvas content. Use in media viewers, map interfaces, or image editors where
users need precise zoom control.

```html
<div aria-label="zoom level controls" role="group" nve-layout="row gap:xs align:vertical-center">
  <nve-icon-button aria-label="zoom out" icon-name="zoom-out" size="sm" container="flat"></nve-icon-button>
  <nve-range>
    <input aria-label="zoom level" type="range" min="0" max="200" value="100" />
  </nve-range>
  <nve-icon-button aria-label="zoom in" icon-name="zoom-in" size="sm" container="flat"></nve-icon-button>
</div>
```

## Complex Tree Navigation (pattern-navigation-complex-tree-navigation)

Tree integrated in vertical navigation. Use for providing structured sidebar
navigation for application layouts and content organization.

```html
<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-button selected container="flat">Link 1</nve-button>
    <nve-button container="flat">Link 2</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-page-panel slot="left" size="sm">
    <nve-page-panel-content>
      <nve-tree behavior-expand selectable="single" behavior-select>
        <nve-tree-node expanded>
          <a href=".">Overview</a>
          <nve-tree-node><a href=".">Dashboard</a></nve-tree-node>
          <nve-tree-node><a href=".">Alerts</a></nve-tree-node>
          <nve-tree-node><a href=".">Activity Feed</a></nve-tree-node>
        </nve-tree-node>
        <nve-tree-node expanded>
          <a href=".">Compute</a>
          <nve-tree-node><a href=".">Clusters</a></nve-tree-node>
          <nve-tree-node><a href=".">Instances</a></nve-tree-node>
          <nve-tree-node><a href=".">Schedulers</a></nve-tree-node>
          <!-- ... 1 more <nve-tree-node> elements ... -->
        </nve-tree-node>
        <nve-tree-node expanded>
          <a href=".">Storage</a>
          <nve-tree-node><a href=".">Volumes</a></nve-tree-node>
          <nve-tree-node><a href=".">Backups</a></nve-tree-node>
          <nve-tree-node><a href=".">Snapshots</a></nve-tree-node>
          <!-- ... 1 more <nve-tree-node> elements ... -->
        </nve-tree-node>
        <!-- ... 2 more <nve-tree-node> elements ... -->
      </nve-tree>
    </nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column gap:lg pad:lg align:horizontal-stretch">
    <h1 nve-text="heading">Infrastructure</h1>
    <p nve-text="body">Select a placeholder link in the sidebar tree to model deep, category-based navigation.</p>
  </main>
</nve-page>
```

## Drawer Navigation (pattern-navigation-drawer-navigation)

Drawer based navigation. Use for secondary or mobile navigation when available
space gets tight.

```html
<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-icon-button
      popovertarget="drawer"
      slot="suffix"
      container="flat"
      icon-name="menu"
      aria-label="menu"
    ></nve-icon-button>
  </nve-page-header>
  <main nve-layout="column gap:lg pad:lg align:horizontal-stretch">
    <h1 nve-text="heading">main</h1>
    <p nve-text="body">page content</p>
  </main>
  <nve-drawer id="drawer" position="left" size="sm" closable>
    <nve-drawer-header>
      <h3 nve-text="heading medium sm">Navigation</h3>
    </nve-drawer-header>
    <nve-drawer-content>
      <nve-tree behavior-expand>
        <nve-tree-node><a href="#">Documentation</a></nve-tree-node>
        <nve-tree-node><a href="#">Support</a></nve-tree-node>
        <nve-tree-node expanded>
          Elements
          <nve-tree-node><a href="#">Alert</a></nve-tree-node>
          <nve-tree-node><a href="#">Badge</a></nve-tree-node>
          <nve-tree-node><a href="#">Dialog</a></nve-tree-node>
        </nve-tree-node>
        <!-- ... 2 more <nve-tree-node> elements ... -->
      </nve-tree>
    </nve-drawer-content>
  </nve-drawer>
</nve-page>
```

## Multi Step Form Wizard (pattern-onboarding-multi-step-form-wizard)

Multi-step wizard layout. Use for complex multi-step forms with validation,
progress, and save checkpoints.

```html
<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-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <main
    nve-layout="grid gap:lg pad:lg align:horizontal-stretch"
    style="max-width: 980px; min-height: 980px; margin: auto"
  >
    <div nve-layout="span:1">
      <nve-steps vertical>
        <nve-steps-item selected>Robot Profile</nve-steps-item>
        <nve-steps-item>Perception Sensors</nve-steps-item>
        <nve-steps-item>Navigation Stack</nve-steps-item>
        <!-- ... 2 more <nve-steps-item> elements ... -->
      </nve-steps>
    </div>
    <section nve-layout="span:9 column gap:lg">
      <h1 nve-text="heading lg">Deployment Setup</h1>
      <nve-card style="min-height: 300px; width: 100%"></nve-card>
      <nve-card style="min-height: 300px; width: 100%"></nve-card>
    </section>
  </main>
  <nve-page-panel slot="footer">
    <nve-page-panel-content>
      <div nve-layout="row align:space-between gap:md" style="max-width: 860px; margin: auto">
        <nve-button id="btn-back" container="flat" disabled size="sm">Previous</nve-button>
        <div nve-layout="row gap:sm align:vertical-center">
          <span id="step-indicator" nve-text="body sm muted">Stage 1 of 5</span>
          <nve-button id="btn-next" interaction="emphasis" size="sm">Continue</nve-button>
        </div>
      </div>
    </nve-page-panel-content>
  </nve-page-panel>
</nve-page>
```

## User Onboarding Wizard (pattern-onboarding-user-onboarding-wizard)

Multi-step wizard layout with progress stepper for guided workflows. Use for
onboarding flows, enrollment forms, or configuration processes where users
complete sequential steps with clear progress tracking.

```html
<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">Robotics Ops</h2>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <main
    nve-layout="column gap:lg pad:lg align:horizontal-stretch"
    style="max-width: 980px; min-height: 980px; margin: auto"
  >
    <div nve-layout="row align:center pad-bottom:lg">
      <nve-steps>
        <nve-steps-item selected>Vehicle Info</nve-steps-item>
        <nve-steps-item>Sensor Suite</nve-steps-item>
        <nve-steps-item>Software Stack</nve-steps-item>
        <!-- ... 2 more <nve-steps-item> elements ... -->
      </nve-steps>
    </div>
    <h1 nve-text="heading lg">Vehicle Information</h1>
    <nve-card style="min-height: 300px; width: 100%"></nve-card>
    <nve-card style="min-height: 300px; width: 100%; margin-bottom: 24px"></nve-card>
  </main>
  <nve-page-panel slot="footer">
    <nve-page-panel-content>
      <div nve-layout="row align:space-between gap:md" style="max-width: 860px; margin: auto">
        <nve-button id="btn-back" container="flat" disabled size="sm">Back</nve-button>
        <div nve-layout="row gap:sm align:vertical-center">
          <span id="step-indicator" nve-text="body sm muted">Step 1 of 5</span>
          <nve-button id="btn-next" interaction="emphasis" size="sm">Next</nve-button>
        </div>
      </div>
    </nve-page-panel-content>
  </nve-page-panel>
</nve-page>
```

## Accordion (pattern-panel-accordion)

Organizing filterable, collapsible content groups in a panel with search input
and expandable accordion sections.

```html
<style>
  nve-accordion {
    --background: var(--nve-sys-layer-overlay-background);
  }
</style>
<nve-page>
  <nve-page-panel slot="left" size="sm">
    <nve-page-panel-header>
      <h3 nve-text="heading medium sm">Details</h3>
    </nve-page-panel-header>
    <nve-page-panel-content>
      <div nve-layout="column gap:sm align:horizontal-stretch">
        <nve-search rounded>
          <input type="search" aria-label="search" placeholder="search" />
        </nve-search>
        <nve-accordion-group container="inset" behavior-expand>
          <nve-accordion>
            <nve-accordion-header>
              <h2 nve-text="heading xs medium" slot="prefix">Heading 1</h2>
            </nve-accordion-header>
            <nve-accordion-content>
              Adjust workspace preferences and project configurations to customize your experience.
            </nve-accordion-content>
          </nve-accordion>
          <nve-accordion>
            <nve-accordion-header>
              <h2 nve-text="heading xs medium" slot="prefix">Heading 2</h2>
            </nve-accordion-header>
            <nve-accordion-content>
              Adjust workspace preferences and project configurations to customize your experience.
            </nve-accordion-content>
          </nve-accordion>
          <nve-accordion>
            <nve-accordion-header>
              <h2 nve-text="heading xs medium" slot="prefix">Heading 3</h2>
            </nve-accordion-header>
            <nve-accordion-content>
              Adjust workspace preferences and project configurations to customize your experience.
            </nve-accordion-content>
          </nve-accordion>
        </nve-accordion-group>
      </div>
    </nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column gap:lg pad:lg">
    <h1 nve-text="heading">Main Content</h1>
  </main>
</nve-page>
```

## Key Value (pattern-panel-key-value)

Displaying metadata like release info, dates, status badges, and links in a side
panel with labeled key-value pairs.

```html
<nve-page>
  <nve-page-panel slot="left" size="sm">
    <nve-page-panel-header>
      <h3 nve-text="heading medium sm">Details</h3>
    </nve-page-panel-header>
    <nve-page-panel-content>
      <div nve-layout="column gap:md">
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Release</label>
          <p nve-text="label semibold sm">RainbowBridge/08-18-2021AM/A2A</p>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Date</label>
          <p nve-text="label semibold sm">2021-08-18</p>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">State</label>
          <nve-badge status="finished">Indexed</nve-badge>
        </div>
        <!-- ... 5 more <div> elements ... -->
      </div>
    </nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column gap:lg pad:lg">
    <h1 nve-text="heading">Main Content</h1>
  </main>
</nve-page>
```

## Tabbed Header (pattern-panel-tabbed-header)

Switching between categorized detail views with tabbed navigation in the panel
header.

```html
<nve-page>
  <nve-page-panel slot="left" size="sm">
    <nve-page-panel-header style="--padding: var(--nve-ref-size-100) var(--nve-ref-size-200)">
      <nve-tabs>
        <nve-tabs-item>Tab 1</nve-tabs-item>
        <nve-tabs-item selected>Tab 2</nve-tabs-item>
        <nve-tabs-item>Tab 3</nve-tabs-item>
        <!-- ... 1 more <nve-tabs-item> elements ... -->
      </nve-tabs>
    </nve-page-panel-header>
    <nve-page-panel-content>
      <div nve-layout="column gap:md">
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Release</label>
          <p nve-text="label semibold sm">RainbowBridge/08-18-2021AM/A2A</p>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Date</label>
          <p nve-text="label semibold sm">2021-08-18</p>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">State</label>
          <nve-badge status="finished">Indexed</nve-badge>
        </div>
        <!-- ... 5 more <div> elements ... -->
      </div>
    </nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column gap:lg pad:lg">
    <h1 nve-text="heading">Main Content</h1>
    <p nve-text="body">Select the panel to view details.</p>
  </main>
</nve-page>
```

## Filter Toolbar (pattern-search-filter-toolbar)

Search toolbar with filter functionality including progressive filter chips and
search combobox for data filtering scenarios.

```html
<nve-toolbar container="flat">
  <nve-icon-button readonly icon-name="filter" container="flat" slot="prefix"></nve-icon-button>
  <nve-progressive-filter-chip closable>
    <select aria-label="dataset">
      <option selected>status</option>
      <option>workload</option>
    </select>
    <select aria-label="condition">
      <option selected>filter by</option>
      <option>sort by</option>
    </select>
    <select multiple aria-label="filter">
      <option selected>progress</option>
      <option>pending</option>
      <option>success</option>
      <!-- ... 1 more <option> elements ... -->
    </select>
  </nve-progressive-filter-chip>
  <nve-combobox container="flat">
    <input type="search" placeholder="Add Filter" aria-label="add filter" />
    <datalist>
      <option value="Status"></option>
      <option value="Priority"></option>
      <option value="Date"></option>
      <!-- ... 3 more <option> elements ... -->
    </datalist>
  </nve-combobox>
  <nve-icon-button container="flat" aria-label="clear filters" icon-name="cancel" slot="suffix"></nve-icon-button>
  <nve-button slot="suffix">Save Filters</nve-button>
</nve-toolbar>
```

## Standard Header Main Page (pattern-subheader-standard-header-main-page)

Main page subheaders with breadcrumb, page title, and action buttons in a clean
two-row layout.

```html
<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">Application</h2>
    <nve-button selected container="flat">Link 1</nve-button>
    <nve-button container="flat">Link 2</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-page-panel slot="subheader">
    <nve-page-panel-content>
      <div nve-layout="column gap:md align:stretch">
        <nve-breadcrumb>
          <nve-button><a href="#" target="_self">Item 1</a></nve-button>
          <span>You Are Here</span>
        </nve-breadcrumb>
        <div nve-layout="row align:space-between align:vertical-center">
          <h1 nve-text="heading lg semibold">Page Title</h1>
          <section nve-layout="row gap:sm align:vertical-center">
            <nve-button>Default</nve-button>
            <nve-button interaction="emphasis">Emphasis</nve-button>
            <nve-icon-button icon-name="more-actions"></nve-icon-button>
          </section>
        </div>
      </div>
    </nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column gap:lg pad:lg align:horizontal-stretch">
    <p nve-text="body muted">Page content area</p>
  </main>
</nve-page>
```

## Standard Header Viewer Page (pattern-subheader-standard-header-viewer-page)

Viewer page subheader with centered zoom/layout controls and grouped action
buttons. Ideal for media viewers, document previews, and split-pane layouts.

```html
<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">Application</h2>
    <nve-button selected container="flat">Link 1</nve-button>
    <nve-button container="flat">Link 2</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-page-panel slot="subheader">
    <nve-page-panel-content>
      <div nve-layout="row align:space-between align:vertical-center">
        <section nve-layout="row gap:sm align:vertical-center">
          <nve-icon-button icon-name="arrow" direction="left" size="sm"></nve-icon-button>
          <h1 nve-text="heading xs semibold">Page Title</h1>
        </section>
        <section nve-layout="row align:center align:vertical-center gap:xxxs">
          <nve-select container="flat" style="--border-bottom: 0">
            <select aria-label="zoom level">
              <option value="1">100%</option>
              <option value="2">75%</option>
              <option value="3">50%</option>
              <!-- ... 1 more <option> elements ... -->
            </select>
          </nve-select>
          <nve-button-group container="flat" behavior-select="single">
            <nve-icon-button size="sm" pressed icon-name="view-as-grid"></nve-icon-button>
            <nve-icon-button size="sm" icon-name="split-vertical"></nve-icon-button>
            <nve-icon-button size="sm" icon-name="split-horizontal"></nve-icon-button>
            <!-- ... 1 more <nve-icon-button> elements ... -->
          </nve-button-group>
        </section>
        <nve-button-group container="flat">
          <nve-icon-button size="sm" icon-name="download"></nve-icon-button>
          <nve-icon-button size="sm" icon-name="refresh"></nve-icon-button>
          <nve-icon-button size="sm" icon-name="more-actions"></nve-icon-button>
        </nve-button-group>
      </div>
    </nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column gap:lg pad:lg align:horizontal-stretch">
    <p nve-text="body muted">Viewer content area</p>
  </main>
</nve-page>
```

## Badge (pattern-trend-badge)

Trend badges for displaying data changes and metrics. Perfect for dashboards,
analytics, or financial data showing positive, negative, or neutral trends.

```html
<div nve-layout="row gap:md">
  <nve-badge>0%</nve-badge>
  <nve-badge status="success"><nve-icon name="trend-down"></nve-icon> -15%</nve-badge>
  <nve-badge status="danger"><nve-icon name="trend-up"></nve-icon> +15%</nve-badge>
</div>
```

## Badge Detail (pattern-trend-badge-detail)

Displays a metric with a trend indicator. Ideal for dashboards and analytics
where users need to quickly assess changes and understand the scale of change at
a glance.

```html
<div nve-layout="column gap:sm">
  <label nve-text="label medium sm muted">Label</label>
  <div nve-layout="row gap:sm align:vertical-center">
    <h3 nve-text="heading semibold lg">198,298</h3>
    <nve-badge status="success">+15% <nve-icon name="trend-up"></nve-icon></nve-badge>
  </div>
  <label nve-text="label medium sm muted">Since last week</label>
</div>
```

## Card (pattern-trend-card)

Trend card for displaying a metric with a trend indicator. Ideal for dashboards
and analytics where users need to quickly assess changes and understand the
scale of change at a glance.

```html
<div nve-layout="grid span-items:6 gap:sm" style="max-width: 600px">
  <nve-card>
    <nve-card-header>
      <div nve-layout="row align:space-between align:vertical-center">
        <h2 nve-text="label muted">Training Loss</h2>
        <nve-badge container="flat" status="success">
          <nve-icon name="trend-down" slot="prefix-icon"></nve-icon> -42%
        </nve-badge>
      </div>
    </nve-card-header>
    <nve-card-content>
      <div nve-layout="column gap:sm">
        <div nve-layout="row gap:sm align:vertical-center">
          <h3 nve-text="heading semibold lg">0.0234</h3>
        </div>
        <nve-sparkline
          data="[0.12, 0.09, 0.075, 0.062, 0.051, 0.044, 0.039, 0.035, 0.032, 0.030, 0.028, 0.026, 0.025, 0.023]"
          mark="line"
          interpolation="smooth"
          status="success"
          size="xl"
        ></nve-sparkline>
        <span nve-text="label sm muted">Per epoch</span>
      </div>
    </nve-card-content>
  </nve-card>
  <nve-card>
    <nve-card-header>
      <div nve-layout="row align:space-between align:vertical-center">
        <h2 nve-text="label muted">Job Throughput</h2>
        <nve-badge container="flat" status="success">
          <nve-icon name="trend-up" slot="prefix-icon"></nve-icon> +12%
        </nve-badge>
      </div>
    </nve-card-header>
    <nve-card-content>
      <div nve-layout="column gap:sm">
        <h3 nve-text="heading semibold lg">342 / hr</h3>
        <nve-sparkline
          data="[280, 295, 310, 305, 320, 335, 340, 328, 315, 342, 350, 338, 342]"
          mark="column"
          status="accent"
          size="lg"
          min="0"
          denote-max
        ></nve-sparkline>
        <span nve-text="label sm muted">Last 24 hours</span>
      </div>
    </nve-card-content>
  </nve-card>
</div>
```

## Grid (pattern-trend-grid)

Trend grid for displaying a list of metrics with a trend indicator. Ideal for
dashboards and analytics where users need to quickly assess changes and
understand the scale of change at a glance.

```html
<nve-grid>
  <nve-grid-header>
    <nve-grid-column>Checkpoint</nve-grid-column>
    <nve-grid-column>Epoch</nve-grid-column>
    <nve-grid-column>Train Loss</nve-grid-column>
    <!-- ... 3 more <nve-grid-column> elements ... -->
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>ckpt-014</nve-grid-cell>
    <nve-grid-cell>14</nve-grid-cell>
    <nve-grid-cell>0.0234</nve-grid-cell>
    <!-- ... 3 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>ckpt-010</nve-grid-cell>
    <nve-grid-cell>10</nve-grid-cell>
    <nve-grid-cell>0.0298</nve-grid-cell>
    <!-- ... 3 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>ckpt-005</nve-grid-cell>
    <nve-grid-cell>5</nve-grid-cell>
    <nve-grid-cell>0.0512</nve-grid-cell>
    <!-- ... 3 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
</nve-grid>
```

## Default (page)

Nve-page layout with a header and main content.

```html
<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-button selected container="flat">Link 1</nve-button>
    <nve-button container="flat">Link 2</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-page-panel slot="left" size="sm">
    <nve-page-panel-content>panel</nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column gap:lg pad:lg align:horizontal-stretch">
    <h1 nve-text="heading">main</h1>
    <p nve-text="body">page content</p>
  </main>
</nve-page>
```

## Document Scroll (page-document-scroll)

Use document scroll for static content sites that do not require a fixed
navigation.

```html
<nve-page document-scroll>
  <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-button selected container="flat">Link 1</nve-button>
    <nve-button container="flat">Link 2</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <main nve-layout="column gap:lg pad:lg align:horizontal-stretch">
    <h1 nve-text="heading">main</h1>
    <p nve-text="body" style="min-height: 110vh">page content</p>
  </main>
  <nve-toolbar slot="footer">
    <a href="#" nve-text="link sm">docmentation</a>
    <a href="#" nve-text="link sm">logging</a>
    <a href="#" nve-text="link sm">contact</a>
  </nve-toolbar>
</nve-page>
```

## Default (page-header)

Page header with logo, navigation links, and user actions in a standard layout
structure.

```html
<nve-page-header>
  <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
  <h2 slot="prefix" nve-text="heading sm">Infrastructure</h2>
  <nve-button selected container="flat"><a href="#">Link 1</a></nve-button>
  <nve-button container="flat"><a href="#">Link 2</a></nve-button>
  <nve-icon-button slot="suffix" container="flat" icon-name="chat-bubble"></nve-icon-button>
  <nve-icon-button slot="suffix" container="flat" icon-name="search"></nve-icon-button>
  <nve-icon-button slot="suffix" container="flat" icon-name="switch-apps"></nve-icon-button>
  <!-- ... 1 more <nve-icon-button> elements ... -->
</nve-page-header>
```

## App Logo (page-header-app-logo)

Use the Logo element when representing an application that is part of a suite of
applications in a given problem domain.

```html
<nve-page-header>
  <nve-logo slot="prefix" size="sm" color="yellow-nova">AV</nve-logo>
  <h2 nve-text="heading" slot="prefix">Infrastructure</h2>
  <nve-button container="flat" selected><a href="#">Link 1</a></nve-button>
  <nve-button container="flat"><a href="#">Link 2</a></nve-button>
  <nve-icon-button slot="suffix" container="flat" icon-name="chat-bubble"></nve-icon-button>
  <nve-icon-button slot="suffix" container="flat" icon-name="search"></nve-icon-button>
  <nve-icon-button slot="suffix" container="flat" icon-name="switch-apps"></nve-icon-button>
  <!-- ... 1 more <nve-icon-button> elements ... -->
</nve-page-header>
```

## Center Navigation (page-header-center-navigation)

Page header with navigation centered in the available space for balanced visual
hierarchy.

```html
<nve-page-header>
  <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
  <h2 slot="prefix" nve-text="heading sm">Infrastructure</h2>
  <div nve-layout="row align:center gap:xxs full">
    <nve-button container="flat"><a href="#">Features</a></nve-button>
    <nve-button container="flat"><a href="#">Guide</a></nve-button>
    <nve-button container="flat"><a href="#">Docs</a></nve-button>
    <!-- ... 1 more <nve-button> elements ... -->
  </div>
  <nve-button slot="suffix" container="flat"><a href="#">Login</a></nve-button>
  <nve-button slot="suffix" interaction="emphasis" size="sm"><a href="#">Start Building</a></nve-button>
</nve-page-header>
```

## Dropdown Menu (page-header-dropdown-menu)

Use dropdowns and menus to allow progressive disclosure of extra navigation or
global user actions.

```html
<nve-page-header>
  <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
  <h2 slot="prefix" nve-text="heading sm">Infrastructure</h2>
  <nve-button selected container="flat"><a href="#">Link 1</a></nve-button>
  <nve-button container="flat"><a href="#">Link 2</a></nve-button>
  <nve-icon-button slot="suffix" interaction="emphasis" size="sm" popovertarget="page-header-dropdown"
    >EL</nve-icon-button
  >
</nve-page-header>
<nve-dropdown position="bottom" id="page-header-dropdown">
  <nve-menu>
    <nve-menu-item><nve-icon name="person"></nve-icon> Menu Item</nve-menu-item>
    <nve-menu-item><nve-icon name="gear"></nve-icon> Menu Item</nve-menu-item>
    <nve-menu-item><nve-icon name="star"></nve-icon> Menu Item</nve-menu-item>
    <nve-divider></nve-divider>
    <nve-menu-item><nve-icon name="logout"></nve-icon> Menu Item</nve-menu-item>
  </nve-menu>
</nve-dropdown>
```

## Menu Button (page-header-menu-button)

Use a Icon Button to represent collapsible top-level navigation, optimal for
mobile or constrained viewport sizes.

```html
<nve-page-header>
  <nve-icon-button slot="prefix" container="flat" icon-name="menu" aria-label="menu"></nve-icon-button>
  <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
  <h2 slot="prefix" nve-text="heading sm">Infrastructure</h2>
  <nve-button selected container="flat"><a href="#">Link 1</a></nve-button>
  <nve-button container="flat"><a href="#">Link 2</a></nve-button>
  <nve-icon-button slot="suffix" container="flat" icon-name="chat-bubble"></nve-icon-button>
  <nve-icon-button slot="suffix" container="flat" icon-name="search"></nve-icon-button>
  <nve-icon-button slot="suffix" container="flat" icon-name="switch-apps"></nve-icon-button>
  <!-- ... 1 more <nve-icon-button> elements ... -->
</nve-page-header>
```

## Prefix Navigation (page-header-prefix-navigation)

Page header with primary navigation positioned after the logo and branding area.

```html
<nve-page-header>
  <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
  <h2 slot="prefix" nve-text="heading sm">Infrastructure</h2>
  <nve-button container="flat"><a href="#">Features</a></nve-button>
  <nve-button container="flat"><a href="#">Guide</a></nve-button>
  <nve-button container="flat"><a href="#">Docs</a></nve-button>
  <!-- ... 3 more <nve-button> elements ... -->
</nve-page-header>
```

## Search (page-header-search)

Page header with integrated search functionality for content discovery within
the application.

```html
<nve-page-header>
  <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
  <h2 slot="prefix" nve-text="heading sm">Infrastructure</h2>
  <nve-button container="flat"><a href="#">Link 1</a></nve-button>
  <nve-button container="flat"><a href="#">Link 2</a></nve-button>
  <nve-search slot="suffix" rounded style="width: 220px">
    <input type="search" aria-label="search" />
  </nve-search>
  <nve-button slot="suffix" container="flat"><a href="#">Login</a></nve-button>
</nve-page-header>
```

## Suffix Navigation (page-header-suffix-navigation)

Page header with all navigation positioned at the end for common and persistent
user actions between page navigation.

```html
<nve-page-header>
  <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
  <h2 slot="prefix" nve-text="heading sm">Infrastructure</h2>
  <nve-button slot="suffix" container="flat"><a href="#">Features</a></nve-button>
  <nve-button slot="suffix" container="flat"><a href="#">Guide</a></nve-button>
  <nve-button slot="suffix" container="flat"><a href="#">Docs</a></nve-button>
  <!-- ... 3 more <nve-button> elements ... -->
</nve-page-header>
```

## User Detail (page-header-user-detail)

Page header displaying user information and avatar for personalized application
experiences.

```html
<nve-page-header>
  <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
  <h2 slot="prefix" nve-text="heading sm">Infrastructure</h2>
  <nve-button container="flat"><a href="#">Link 1</a></nve-button>
  <nve-button container="flat"><a href="#">Link 2</a></nve-button>
  <nve-icon-button slot="suffix" interaction="emphasis" size="sm">GH</nve-icon-button>
  <div slot="suffix" nve-layout="column gap:md">
    <p nve-text="label sm trim:none">Grace Hopper</p>
    <p nve-text="body sm muted trim:none nowrap">infra-0087ef65-19e80</p>
  </div>
</nve-page-header>
```

## Interaction Drawer (page-interaction-drawer)

Use Drawer to create navigation that is outside the context of the current view.

```html
<nve-page>
  <nve-page-header slot="header">
    <nve-icon-button
      popovertarget="drawer"
      slot="prefix"
      container="flat"
      icon-name="menu"
      aria-label="menu"
    ></nve-icon-button>
    <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
    <h2 nve-text="heading" slot="prefix">Infrastructure</h2>
    <nve-button selected container="flat">Link 1</nve-button>
    <nve-button container="flat">Link 2</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <main nve-layout="column gap:lg pad:lg align:horizontal-stretch">
    <h1 nve-text="heading">main</h1>
    <p nve-text="body">page content</p>
  </main>
  <nve-drawer id="drawer" position="left" size="sm" closable style="--top: 48px">
    <nve-drawer-header>
      <h3 nve-text="heading medium sm">Drawer Header</h3>
    </nve-drawer-header>
    <nve-drawer-content>
      <p nve-text="body">drawer content</p>
    </nve-drawer-content>
    <nve-drawer-footer>
      <p nve-text="body">drawer footer</p>
    </nve-drawer-footer>
  </nve-drawer>
</nve-page>
```

## Interaction Panel Navigation (page-interaction-panel-navigation)

Use Page Panel with Toolbar to create complex navigation groups that are within
the context of the current view.

```html
<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-button selected container="flat">Link 1</nve-button>
    <nve-button container="flat">Link 2</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-toolbar slot="left-aside" orientation="vertical">
    <nve-button-group>
      <nve-icon-button commandfor="nav-panel" command="--open" value="repo" icon-name="branch"></nve-icon-button>
      <nve-icon-button commandfor="nav-panel" command="--open" value="ai" icon-name="sparkles"></nve-icon-button>
      <nve-icon-button commandfor="nav-panel" command="--open" value="settings" icon-name="gear"></nve-icon-button>
    </nve-button-group>
  </nve-toolbar>
  <nve-page-panel id="nav-panel" slot="left" size="sm" hidden>
    <nve-icon-button
      commandfor="nav-panel"
      command="--close"
      slot="actions"
      container="inline"
      icon-name="double-chevron"
      direction="left"
      aria-label="close"
    ></nve-icon-button>
    <nve-page-panel-header>
      <h3 nve-text="heading medium sm">git</h3>
    </nve-page-panel-header>
    <nve-page-panel-content>
      <nve-menu id="repo" hidden>
        <nve-menu-item>Clone</nve-menu-item>
        <nve-menu-item>Branch</nve-menu-item>
        <nve-menu-item>Release</nve-menu-item>
      </nve-menu>
      <nve-menu id="ai" hidden>
        <nve-menu-item>Prompts</nve-menu-item>
        <nve-menu-item>Models</nve-menu-item>
        <nve-menu-item>Training</nve-menu-item>
      </nve-menu>
      <nve-menu id="settings" hidden>
        <nve-menu-item>Profile</nve-menu-item>
        <nve-menu-item>Account</nve-menu-item>
        <nve-menu-item>Logs</nve-menu-item>
      </nve-menu>
    </nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column gap:lg pad:lg align:horizontal-stretch">
    <h1 nve-text="heading">main</h1>
    <p nve-text="body">page content</p>
  </main>
</nve-page>
<script type="module">
  const toolbar = document.querySelector("nve-toolbar");
  const panelHeader = document.querySelector("nve-page-panel h3");
  const menus = Array.from(document.querySelectorAll("nve-page-panel nve-menu"));
  toolbar.addEventListener("click", (e) => {
    if (e.target.localName === "nve-icon-button") {
      panelHeader.textContent = e.target.value;
      menus.forEach((i) => (i.hidden = true));
      menus.find((i) => i.id === e.target.value).hidden = false;
    }
  });
</script>
```

## Invoker Command (page-invoker-command)

Use Page Panel with Invoker Command API to dynamically open and close page
panels.

```html
<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-icon-button
      slot="suffix"
      commandfor="invoker-example"
      command="--toggle"
      container="flat"
      icon-name="menu"
      aria-label="menu"
    ></nve-icon-button>
  </nve-page-header>
  <nve-page-panel id="invoker-example" slot="left" size="sm" hidden>
    <nve-icon-button
      commandfor="invoker-example"
      command="--close"
      slot="actions"
      container="inline"
      icon-name="cancel"
      aria-label="close"
    ></nve-icon-button>
    <nve-page-panel-content>
      <p nve-text="body">panel content</p>
    </nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column gap:lg pad:lg align:horizontal-stretch">
    <h1 nve-text="heading">main</h1>
    <p nve-text="body">page content</p>
  </main>
</nve-page>
```

## Layout Editor (page-layout-editor)

IDE-style editor layout with file outline, main editor, and console panels. Use
for code playgrounds, configuration editors, or development tools that need a
split-pane workspace with toolbar controls.

```html
<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">Playground</h2>
    <nve-button container="flat">Browse</nve-button>
    <nve-button container="flat">Editor</nve-button>
    <nve-button container="flat">Elements</nve-button>
    <nve-icon-button slot="suffix" interaction="emphasis" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-toolbar slot="subheader">
    <nve-icon-button slot="prefix" icon-name="split-vertical"></nve-icon-button>
    <nve-divider slot="prefix" orientation="vertical"></nve-divider>
    <h2 slot="prefix" nve-text="heading sm" style="text-wrap: nowrap">Project</h2>
    <nve-button slot="suffix" interaction="emphasis">Save Project</nve-button>
    <nve-icon-button slot="suffix" icon-name="download"></nve-icon-button>
    <nve-divider slot="suffix" orientation="vertical"></nve-divider>
    <nve-button-group slot="suffix" container="rounded">
      <nve-icon-button icon-name="code"></nve-icon-button>
      <nve-icon-button selected icon-name="split-vertical"></nve-icon-button>
      <nve-icon-button icon-name="split-horizontal"></nve-icon-button>
      <!-- ... 1 more <nve-icon-button> elements ... -->
    </nve-button-group>
  </nve-toolbar>
  <nve-page-panel slot="left" size="sm">
    <nve-page-panel-header> Outline </nve-page-panel-header>
    <nve-page-panel-content>
      <nve-tree behavior-expand>
        <nve-tree-node><a href="#">html</a></nve-tree-node>
        <nve-tree-node expanded>
          head
          <nve-tree-node><a href="#">link</a></nve-tree-node>
          <nve-tree-node><a href="#">link</a></nve-tree-node>
          <nve-tree-node><a href="#">link</a></nve-tree-node>
        </nve-tree-node>
        <nve-tree-node expanded>
          body
          <nve-tree-node><a href="#">nve-badge</a></nve-tree-node>
        </nve-tree-node>
      </nve-tree>
    </nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column gap:lg pad:lg align:horizontal-stretch">
    <h1 nve-text="heading">main</h1>
    <p nve-text="body">page content</p>
  </main>
  <nve-page-panel id="console-panel" slot="bottom" size="sm">
    <nve-icon-button
      commandfor="console-panel"
      command="--close"
      slot="actions"
      container="inline"
      icon-name="cancel"
      aria-label="close"
    ></nve-icon-button>
    <nve-page-panel-content>console output</nve-page-panel-content>
  </nve-page-panel>
  <nve-toolbar slot="footer">
    <nve-icon-button icon-name="information-circle-stroke"></nve-icon-button>
    <span nve-text="body sm muted">last updated 12 mins ago</span>
  </nve-toolbar>
</nve-page>
```

## Default (page-loader)

Full-page loading indicator displaying centered spinner for initial page load
states.

```html
<nve-page-loader></nve-page-loader>
```

## Interactive (page-loader-interactive)

Interactive page loader that starts programmatically via button click. Use when
user actions such as form submissions, data refreshes, or navigation events
start loading states rather than on initial page load.

```html
<nve-button id="loader-btn">trigger loader</nve-button>
<nve-page-loader hidden></nve-page-loader>
<script type="module">
  let loader = document.querySelector("nve-page-loader");
  let btn = document.querySelector("#loader-btn");
  btn.addEventListener("click", () => (loader.hidden = false));
</script>
```

## Panel Closable (page-panel-closable)

Closable page panels that fully remove from the layout when dismissed. Use when
panels open on demand for temporary tasks like viewing item details or applying
filters, and the user needs full main content space when done.

```html
<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-button selected container="flat">Link 1</nve-button>
    <nve-button container="flat">Link 2</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-page-panel id="panel-left" slot="left" size="sm">
    <nve-icon-button
      commandfor="panel-left"
      command="--close"
      slot="actions"
      container="inline"
      icon-name="cancel"
      aria-label="close"
    ></nve-icon-button>
    <nve-page-panel-content>left</nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column gap:lg pad:lg align:horizontal-stretch">
    <h1 nve-text="heading">main</h1>
    <div nve-layout="row gap:xs">
      <nve-button commandfor="panel-left" command="--toggle">Toggle Left Panel</nve-button>
      <nve-button commandfor="panel-right" command="--toggle">Toggle Right Panel</nve-button>
      <nve-button commandfor="panel-bottom" command="--toggle">Toggle Bottom Panel</nve-button>
    </div>
  </main>
  <nve-page-panel id="panel-right" slot="right" size="sm">
    <nve-icon-button
      commandfor="panel-right"
      command="--close"
      slot="actions"
      container="inline"
      icon-name="cancel"
      aria-label="close"
    ></nve-icon-button>
    <nve-page-panel-content>right</nve-page-panel-content>
  </nve-page-panel>
  <nve-page-panel id="panel-bottom" slot="bottom" size="sm">
    <nve-icon-button
      commandfor="panel-bottom"
      command="--close"
      slot="actions"
      container="inline"
      icon-name="cancel"
      aria-label="close"
    ></nve-icon-button>
    <nve-page-panel-content>bottom</nve-page-panel-content>
  </nve-page-panel>
</nve-page>
```

## Panel Expandable (page-panel-expandable)

Expandable page panels that collapse to a slim strip and toggle open with
chevron buttons. Use when panels contain supplementary content that users access
intermittently, preserving main content space while keeping panels accessible.

```html
<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-button selected container="flat">Link 1</nve-button>
    <nve-button container="flat">Link 2</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-page-panel id="panel-left" slot="left" size="sm">
    <nve-icon-button
      commandfor="panel-left"
      command="--close"
      slot="actions"
      container="inline"
      icon-name="double-chevron"
      direction="left"
      aria-label="close"
    ></nve-icon-button>
    <nve-page-panel-content>left</nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column gap:lg pad:lg align:horizontal-stretch">
    <h1 nve-text="heading">main</h1>
    <div nve-layout="row gap:xs">
      <nve-button commandfor="panel-left" command="--toggle">Toggle Left Panel</nve-button>
      <nve-button commandfor="panel-right" command="--toggle">Toggle Right Panel</nve-button>
      <nve-button commandfor="panel-bottom" command="--toggle">Toggle Bottom Panel</nve-button>
    </div>
  </main>
  <nve-page-panel id="panel-right" slot="right" size="sm">
    <nve-icon-button
      commandfor="panel-right"
      command="--close"
      slot="actions"
      container="inline"
      icon-name="double-chevron"
      direction="right"
      aria-label="close"
    ></nve-icon-button>
    <nve-page-panel-content>right</nve-page-panel-content>
  </nve-page-panel>
  <nve-page-panel id="panel-bottom" slot="bottom" size="sm">
    <nve-icon-button
      commandfor="panel-bottom"
      command="--close"
      slot="actions"
      container="inline"
      icon-name="double-chevron"
      direction="down"
      aria-label="close"
    ></nve-icon-button>
    <nve-page-panel-content>bottom</nve-page-panel-content>
  </nve-page-panel>
</nve-page>
```

## Panel Headings (page-panel-headings)

Page panel with title and subtitle headings in the header for labeling panel
content. Use to provide clear context about what the panel contains, such as a
details pane or properties inspector.

```html
<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-button selected container="flat">Link 1</nve-button>
    <nve-button container="flat">Link 2</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-page-panel slot="right" size="sm">
    <nve-page-panel-header>
      <div nve-layout="column gap:xs">
        <h3 nve-text="heading medium sm">Header</h3>
        <h4 nve-text="body muted">Sub Header</h4>
      </div>
    </nve-page-panel-header>
    <nve-page-panel-content> Panel Content </nve-page-panel-content>
  </nve-page-panel>
</nve-page>
```

## Panel Tabs (page-panel-tabs)

Page panel with tabbed header for switching between categorized content views
within a sidebar. Use when a panel contains related sections like outline,
search, and settings that share the same screen region.

```html
<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-button selected container="flat">Link 1</nve-button>
    <nve-button container="flat">Link 2</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-page-panel slot="left" size="sm">
    <nve-page-panel-header>
      <nve-tabs behavior-select>
        <nve-tabs-item selected>Tab 1</nve-tabs-item>
        <nve-tabs-item>Tab 2</nve-tabs-item>
        <nve-tabs-item>Tab 3</nve-tabs-item>
      </nve-tabs>
    </nve-page-panel-header>
    <nve-page-panel-content> Panel Content </nve-page-panel-content>
  </nve-page-panel>
</nve-page>
```

## Resize (page-resize)

Resizable left panel with drag handle for adjustable sidebar width. Use when
users need to control the balance between navigation or outline panels and main
content area.

```html
<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-button selected container="flat">Link 1</nve-button>
    <nve-button container="flat">Link 2</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-page-panel style="width: 200px" slot="left">
    <nve-page-panel-content>left</nve-page-panel-content>
  </nve-page-panel>
  <nve-resize-handle slot="left" min="100" max="400" value="200" step="20" orientation="vertical"></nve-resize-handle>
</nve-page>
<script type="module">
  const handle = document.querySelector("nve-resize-handle");
  const panel = document.querySelector("nve-page-panel");
  handle.addEventListener("input", (e) => (panel.style.width = e.target.value + "px"));
</script>
```

## Resize Multi (page-resize-multi)

Multi-panel resizable layout with independent drag handles on left, right, and
bottom panels. Use for complex workspaces like IDEs or dashboards where users
need to customize the size of each content region independently.

```html
<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-button selected container="flat">Link 1</nve-button>
    <nve-button container="flat">Link 2</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-page-panel style="width: 320px" slot="left">
    <nve-page-panel-content>left</nve-page-panel-content>
  </nve-page-panel>
  <nve-resize-handle slot="left" orientation="vertical" min="100" max="480" value="320" step="20"></nve-resize-handle>
  <nve-resize-handle slot="bottom" min="100" max="480" value="320" step="20"></nve-resize-handle>
  <nve-page-panel style="height: 320px" slot="bottom">
    <nve-page-panel-content>bottom</nve-page-panel-content>
  </nve-page-panel>
  <nve-resize-handle
    slot="right"
    dir="rtl"
    orientation="vertical"
    min="100"
    max="480"
    value="320"
    step="20"
  ></nve-resize-handle>
  <nve-page-panel style="width: 320px" slot="right">
    <nve-page-panel-content>right</nve-page-panel-content>
  </nve-page-panel>
</nve-page>
<script type="module">
  const leftHandle = document.querySelector("nve-resize-handle[slot=left]");
  const leftPanel = document.querySelector("nve-page-panel[slot=left]");
  leftHandle.addEventListener("input", (e) => (leftPanel.style.width = e.target.value + "px"));
  const rightHandle = document.querySelector("nve-resize-handle[slot=right]");
  const rightPanel = document.querySelector("nve-page-panel[slot=right]");
  rightHandle.addEventListener("input", (e) => (rightPanel.style.width = e.target.value + "px"));
  const bottomHandle = document.querySelector("nve-resize-handle[slot=bottom]");
  const bottomPanel = document.querySelector("nve-page-panel[slot=bottom]");
  bottomHandle.addEventListener("input", (e) => (bottomPanel.style.height = e.target.value + "px"));
</script>
```

## Resize Snap (page-resize-snap)

Resize handle with snap-to-boundary behavior on double-click for quickly
toggling a panel between collapsed and expanded states. Use for detail panels
that users frequently show and hide.

```html
<nve-page style="--padding: var(--nve-ref-space-lg)">
  <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-button selected container="flat">Link 1</nve-button>
    <nve-button container="flat">Link 2</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <p nve-text="body">Double click the resize handle to snap to the min or max.</p>
  <nve-page-panel style="width: 320px" slot="left">
    <nve-page-panel-content>left</nve-page-panel-content>
  </nve-page-panel>
  <nve-resize-handle slot="left" orientation="vertical" min="100" max="480" value="320" step="20"></nve-resize-handle>
</nve-page>
<script type="module">
  const leftHandle = document.querySelector("nve-resize-handle[slot=left]");
  const leftPanel = document.querySelector("nve-page-panel[slot=left]");
  leftHandle.addEventListener("input", (e) => (leftPanel.style.width = e.target.value + "px"));
</script>
```

## Slot Subheader Large (page-slot-subheader-large)

Large subheader panel with back navigation, title, metadata, and action buttons.
Use for detail pages that need prominent context like entity names, status
badges, and key-value metadata above the main content.

```html
<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-button selected container="flat">Link 1</nve-button>
    <nve-button container="flat">Link 2</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-page-panel slot="subheader">
    <nve-page-panel-content>
      <div nve-layout="column gap:md align:stretch">
        <div nve-layout="row align:space-between align:vertical-center">
          <section nve-layout="row gap:sm align:vertical-center">
            <nve-icon-button icon-name="arrow" direction="left" size="sm" container="flat"></nve-icon-button>
            <h2 nve-text="heading lg semibold">Subheader Large</h2>
          </section>
          <section nve-layout="row gap:sm align:vertical-center">
            <nve-button>Default</nve-button>
            <nve-icon-button icon-name="more-actions"></nve-icon-button>
          </section>
        </div>
        <section nve-layout="row gap:xl align:vertical-center">
          <div nve-layout="row gap:sm align:center">
            <span nve-text="body sm muted">Driver</span>
            <span nve-text="body sm bold">Jane Doe</span>
          </div>
          <div nve-layout="row gap:sm align:center">
            <span nve-text="body sm muted">Route</span>
            <span nve-text="body sm bold">Santa Clara</span>
          </div>
          <div nve-layout="row gap:sm align:center">
            <span nve-text="body sm muted">Status</span>
            <span nve-text="body sm bold"><nve-badge status="success">complete</nve-badge></span>
          </div>
        </section>
      </div>
    </nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column gap:lg pad:lg align:horizontal-stretch">
    <h1 nve-text="heading">main</h1>
    <p nve-text="body">page content</p>
  </main>
</nve-page>
```

## Slots (page-slots)

Page layout slot reference showing all available panel positions including
header, subheader, left, right, bottom, and aside regions. Use as a starting
point for understanding how to compose complex application layouts.

```html
<nve-page>
  <nve-page-header slot="header">
    <h2 nve-text="heading" slot="prefix">header</h2>
  </nve-page-header>
  <nve-page-panel slot="subheader">
    <nve-page-panel-content>subheader</nve-page-panel-content>
  </nve-page-panel>
  <nve-page-panel slot="left-aside">
    <nve-page-panel-content>left-aside</nve-page-panel-content>
  </nve-page-panel>
  <nve-page-panel slot="left" size="sm">
    <nve-page-panel-content>left</nve-page-panel-content>
  </nve-page-panel>
  <main>
    <p nve-text="body">main content</p>
  </main>
  <nve-page-panel slot="bottom" size="sm">
    <nve-page-panel-content>bottom</nve-page-panel-content>
  </nve-page-panel>
  <nve-page-panel slot="right" size="sm">
    <nve-page-panel-content>right</nve-page-panel-content>
  </nve-page-panel>
  <nve-page-panel slot="right-aside">
    <nve-page-panel-content>right-aside</nve-page-panel-content>
  </nve-page-panel>
  <!-- ... 2 more <nve-page-panel> elements ... -->
</nve-page>
```

## Default (accordion)

Accordion component for collapsible content sections. Use accordions to
progressively disclose information, helping users focus on relevant content
while keeping the interface compact and scannable.

```html
<nve-accordion-group behavior-expand>
  <nve-accordion>
    <nve-accordion-header>
      <h2 nve-text="heading xs medium" slot="prefix">Workspace Settings</h2>
    </nve-accordion-header>
    <nve-accordion-content
      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
    >
  </nve-accordion>
</nve-accordion-group>
```

## With Actions (accordion-with-actions)

Accordion with action buttons in header for quick operations without expanding.
Perfect for list items where users need both to view details and perform actions
like edit, delete, or add, keeping common actions immediately accessible.

```html
<nve-accordion behavior-expand>
  <nve-accordion-header>
    <h2 nve-text="heading xs medium" slot="prefix">Pipeline Configuration</h2>
    <p nve-text="body">Last updated 2 hours ago <nve-button container="inline">view history</nve-button></p>
    <nve-icon-button container="flat" icon-name="add" size="sm" slot="suffix"></nve-icon-button>
    <nve-icon-button container="flat" icon-name="delete" size="sm" slot="suffix"></nve-icon-button>
  </nve-accordion-header>
  <nve-accordion-content
    >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content
  >
</nve-accordion>
```

## Default (alert)

Alert for inline informational messages. Use alerts for persistent feedback that
doesn't auto-dismiss, ideal for system status updates, or contextual information
that users may need to reference while completing tasks.

```html
<nve-alert>alert message</nve-alert>
```

## Invoker Command (alert-invoker-command)

Dismissible alerts using the Invoker Command API for declarative close behavior.
Use `commandfor` and `command="--close"` on action buttons to dismiss individual
alerts without custom JavaScript event handling.

```html
<nve-alert-group>
  <nve-alert id="alert-1">
    Alert Notification Message 1
    <nve-icon-button
      commandfor="alert-1"
      command="--close"
      slot="actions"
      container="flat"
      icon-name="cancel"
      size="sm"
      aria-label="close"
    ></nve-icon-button>
  </nve-alert>
  <nve-alert id="alert-2">
    Alert Notification Message 2
    <nve-icon-button
      commandfor="alert-2"
      command="--close"
      slot="actions"
      container="flat"
      icon-name="cancel"
      size="sm"
      aria-label="close"
    ></nve-icon-button>
  </nve-alert>
</nve-alert-group>
```

## Default (avatar)

Avatar component with text initials, providing a simple way to represent users
when profile images are unavailable.

```html
<nve-avatar>AV</nve-avatar>
```

## Default (badge)

Badge component with default styling. Use for simple non-interactive labels or
status indicators.

```html
<nve-badge>badge</nve-badge>
```

## Default (breadcrumb)

Breadcrumb navigation showing page hierarchy with linked items and current
location indicator.

```html
<nve-breadcrumb>
  <nve-button><a href="#" target="_self">Item 1</a></nve-button>
  <nve-button><a href="#" target="_self">Item 2</a></nve-button>
  <nve-button><a href="#" target="_self">Item 3</a></nve-button>
  <span>You Are Here</span>
</nve-breadcrumb>
```

## With Icon Button (breadcrumb-with-icon-button)

Breadcrumb with home icon button for quick navigation to the root page, offering
a compact starting point.

```html
<nve-breadcrumb>
  <nve-icon-button icon-name="home" size="sm"
    ><a href="#" target="_self" aria-label="link to first page"></a
  ></nve-icon-button>
  <nve-button><a href="#" target="_self">Item 1</a></nve-button>
  <nve-button><a href="#" target="_self">Item 2</a></nve-button>
  <span>You Are Here</span>
</nve-breadcrumb>
```

## With Menu (breadcrumb-with-menu)

Breadcrumb with overflow menu for collapsed navigation levels, ideal for deep
hierarchies in limited space.

```html
<nve-breadcrumb>
  <nve-icon-button popovertarget="more-links" icon-name="more-actions"></nve-icon-button>
  <nve-button><a href="#" target="_self">Item 4</a></nve-button>
  <nve-button><a href="#" target="_self">Item 5</a></nve-button>
  <span>You Are Here</span>
</nve-breadcrumb>
<nve-dropdown id="more-links">
  <nve-menu>
    <nve-menu-item>Item 1</nve-menu-item>
    <nve-menu-item>Item 2</nve-menu-item>
    <nve-menu-item>Item 3</nve-menu-item>
  </nve-menu>
</nve-dropdown>
```

## Default (button)

Button component with standard appearance and behavior for primary user actions.

```html
<nve-button>standard</nve-button>
```

## Contrast Colored Backgrounds (button-contrast-colored-backgrounds)

Use standard interaction styling to keep buttons readable on contrasting
backgrounds in light and dark themes. This pattern verifies the static button
colors that deliver the intended contrast for each theme.

```html
<div nve-layout="column gap:lg" style="width: 280px">
  <nve-toolbar status="accent">
    <div nve-text="label medium sm">10 Selected</div>
    <nve-button slot="suffix">Edit</nve-button>
  </nve-toolbar>
  <nve-alert-group status="danger">
    <nve-alert> Error Detected <nve-button slot="actions" container="flat">Review</nve-button> </nve-alert>
  </nve-alert-group>
  <nve-card style="width: 280px">
    <nve-card-content
      style="
        width: 100%;
        height: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
        background: repeating-conic-gradient(var(--nve-sys-layer-overlay-background) 0% 25%, transparent 0% 50%) 50% /
          40px 40px;
        background-position: center;
        border-style: hidden;
      "
    >
    </nve-card-content>
    <nve-card-footer>
      <div nve-layout="row gap:xs">
        <nve-button container="flat" style="margin-left: auto">Cancel</nve-button>
        <nve-button>action</nve-button>
      </div>
    </nve-card-footer>
  </nve-card>
</div>
```

## Form Control (button-form-control)

Use the form control option for buttons that open custom controls such as
dropdowns, filter menus, or pickers within a form layout. This pattern keeps the
UI cohesive and helps users recognize the button as part of the form.

```html
<div nve-layout="row gap:xs" style="max-width: 400px">
  <nve-search>
    <input type="search" placeholder="search" aria-label="search" />
  </nve-search>
  <nve-button nve-control>filter option <nve-icon name="caret" direction="down" size="sm"></nve-icon></nve-button>
</div>
```

## Action Split (button-group-action-split)

Split button groups with different interaction styles for primary actions with
dropdown alternatives.

```html
<div nve-layout="row gap:sm">
  <nve-button-group>
    <nve-button>button</nve-button>
    <nve-divider orientation="vertical"></nve-divider>
    <nve-icon-button icon-name="caret" size="sm" direction="down"></nve-icon-button>
  </nve-button-group>
  <nve-button-group interaction="emphasis">
    <nve-button>button</nve-button>
    <nve-divider orientation="vertical"></nve-divider>
    <nve-icon-button icon-name="caret" size="sm" direction="down"></nve-icon-button>
  </nve-button-group>
  <nve-button-group interaction="destructive">
    <nve-button>button</nve-button>
    <nve-divider orientation="vertical"></nve-divider>
    <nve-icon-button icon-name="caret" size="sm" direction="down"></nve-icon-button>
  </nve-button-group>
</div>
```

## Action Split Rounded (button-group-action-split-rounded)

Split button groups with rounded container styling for softer visual appearance
and modern aesthetics.

```html
<div nve-layout="row gap:sm">
  <nve-button-group container="rounded">
    <nve-button>button</nve-button>
    <nve-divider orientation="vertical"></nve-divider>
    <nve-icon-button icon-name="caret" size="sm" direction="down"></nve-icon-button>
  </nve-button-group>
  <nve-button-group container="rounded" interaction="emphasis">
    <nve-button>button</nve-button>
    <nve-divider orientation="vertical"></nve-divider>
    <nve-icon-button icon-name="caret" size="sm" direction="down"></nve-icon-button>
  </nve-button-group>
  <nve-button-group container="rounded" interaction="destructive">
    <nve-button>button</nve-button>
    <nve-divider orientation="vertical"></nve-divider>
    <nve-icon-button icon-name="caret" size="sm" direction="down"></nve-icon-button>
  </nve-button-group>
</div>
```

## Disabled (button-group-disabled)

Button group in disabled state for indicating unavailable actions or read-only
contexts.

```html
<nve-button-group container="rounded">
  <nve-button disabled>button</nve-button>
  <nve-divider orientation="vertical"></nve-divider>
  <nve-icon-button icon-name="caret" size="sm" direction="down" disabled></nve-icon-button>
</nve-button-group>
```

## Invoker Command (button-invoker-command)

Use the `commandfor` and `command` attributes to trigger custom Invoker
Commands, such as rotating an image.

```html
<nve-icon
  id="rotation-target"
  name="sparkles"
  aria-label="sparkles icon"
  style="inline-size: 100px; block-size: 100px"
></nve-icon>
<section>
  <nve-button commandfor="rotation-target" command="--rotate-left">Rotate left</nve-button>
  <nve-button commandfor="rotation-target" command="--rotate-right">Rotate right</nve-button>
  <nve-button commandfor="popover" command="toggle-popover">toggle-popover</nve-button>
</section>
<nve-toggletip id="popover">popover</nve-toggletip>
<script type="module">
  const target = document.getElementById("rotation-target");
  target.addEventListener("command", (event) => {
    if (event.command === "--rotate-left") {
      target.style.rotate = "-90deg";
    } else if (event.command === "--rotate-right") {
      target.style.rotate = "90deg";
    }
  });
</script>
```

## Default (card)

Card component with header, content, and footer sections. Use this as a starting
point for simple content containers.

```html
<nve-card>
  <nve-card-header>
    <h2 nve-text="heading sm medium">Heading</h2>
  </nve-card-header>
  <nve-card-content>
    <p nve-text="body" style="min-height: 64px">card content</p>
  </nve-card-content>
  <nve-card-footer>
    <p nve-text="body">card footer</p>
  </nve-card-footer>
</nve-card>
```

## Prefix Suffix (chat-message-prefix-suffix)

Chat conversation with prefix and suffix avatars. Ideal for multi-user chat
applications where you need to distinguish between different participants.

```html
<section nve-layout="column gap:lg full" style="max-width: 600px">
  <nve-chat-message style="max-width: 70%">
    <nve-avatar slot="prefix" color="gray-denim">AI</nve-avatar>
    Hello, how may I assist you today?
  </nve-chat-message>
  <nve-chat-message style="max-width: 70%; margin-left: auto">
    How do I use the chat message component?
    <nve-avatar slot="suffix" color="green-grass">NV</nve-avatar>
  </nve-chat-message>
  <nve-chat-message style="max-width: 70%">
    <nve-avatar slot="prefix" color="gray-denim">AI</nve-avatar>
    <p nve-text="body">To use the <code nve-text="code">nve-chat-message</code> first import the element.</p>
    <nve-codeblock language="typescript"> import '@nvidia-elements/code/codeblock/define.js'; </nve-codeblock>
  </nve-chat-message>
</section>
```

## Default (checkbox)

Checkbox component with label for binary selection and form input.

```html
<nve-checkbox>
  <label>label</label>
  <input type="checkbox" checked />
</nve-checkbox>
```

## Default (color)

Color picker input with label and message for selecting hex color values.

```html
<nve-color>
  <label>label</label>
  <input type="color" />
  <nve-control-message>message</nve-control-message>
</nve-color>
```

## Default (combobox)

Combobox with search input and datalist options for filtering and selection.

```html
<nve-combobox>
  <label>label</label>
  <input type="search" />
  <datalist>
    <option value="status"></option>
    <option value="priority"></option>
    <option value="date"></option>
    <!-- ... 3 more <option> elements ... -->
  </datalist>
  <nve-control-message>message</nve-control-message>
</nve-combobox>
```

## Create Options (combobox-create-options)

Combobox with create option behavior that allows users to add new options and
tags on the fly. Use when the option list is not exhaustive and users need to
enter values that don't yet exist.

```html
<nve-combobox id="creatable-combo" behavior-create style="--scroll-height: 220px">
  <label>Tags</label>
  <input type="search" placeholder="Select or create a tag…" />
  <select multiple>
    <option value="Go">Go</option>
    <option value="Rust">Rust</option>
    <option value="Python">Python</option>
    <!-- ... 7 more <option> elements ... -->
  </select>
  <nve-control-message>Press Enter to create a tag that doesn't exist yet</nve-control-message>
</nve-combobox>
<script type="module">
  const combobox = document.getElementById("creatable-combo");
  const select = combobox.querySelector("select");
  combobox.addEventListener("create", (e) => {
    const option = document.createElement("option");
    option.value = e.detail.value;
    option.textContent = e.detail.value;
    option.selected = true;
    select.appendChild(option);
  });
</script>
```

## Dynamic Typeahead Search (combobox-dynamic-typeahead-search)

Fetches options asynchronously as the user types, cancelling stale requests with
AbortController. Use for server-backed search where the full option set is too
large to load up front.

```html
<nve-combobox id="combobox">
  <label>GPU Search</label>
  <input type="search" placeholder="Type to search…" />
  <datalist>
    <option disabled selected></option>
  </datalist>
</nve-combobox>
<script type="module">
  const combobox = document.getElementById("combobox");
  const input = combobox.querySelector("input");
  const datalist = combobox.querySelector("datalist");
  let controller = null;
  input.addEventListener("input", async () => {
    if (controller) controller.abort();
    controller = new AbortController();
    const query = input.value.trim();
    if (!query) {
      datalist.innerHTML = "";
      return;
    }
    try {
      const results = await mockFetch(query, controller.signal);
      datalist.innerHTML = results.map((v) => '<option value="' + v + '">').join("");
    } catch (err) {
      if (err.name !== "AbortError") datalist.innerHTML = "";
    }
  });
  function mockFetch(query, signal) {
    return new Promise((resolve, reject) => {
      const timer = setTimeout(() => {
        resolve(
          ["A100 GPU", "H100 GPU", "H200 GPU", "DGX A100", "DGX H100", "CUDA Toolkit"].filter((v) =>
            v.toLowerCase().startsWith(query.toLowerCase()),
          ),
        );
      }, 500);
      signal.addEventListener("abort", () => {
        clearTimeout(timer);
        reject(new DOMException("Aborted", "AbortError"));
      });
    });
  }
</script>
```

## Footer (combobox-footer)

Multi-select with footer action button for extra operations on selected items.

```html
<nve-combobox style="width: 500px; --scroll-height: 200px">
  <label>label</label>
  <input type="search" />
  <select multiple>
    <option value="status"></option>
    <option value="priority"></option>
    <option value="date"></option>
    <!-- ... 6 more <option> elements ... -->
  </select>
  <nve-button slot="footer" container="flat">action</nve-button>
  <nve-control-message>message</nve-control-message>
</nve-combobox>
```

## Form (combobox-form)

Complete form integration showing combobox with form submission, reset, and
programmatic value setting.

```html
<form nve-layout="column gap:lg align:stretch">
  <nve-combobox style="--scroll-height: 220px">
    <label>label</label>
    <input type="search" name="input" />
    <select multiple name="select" value="priority">
      <option value="status"></option>
      <option selected value="priority"></option>
      <option selected value="date"></option>
      <!-- ... 3 more <option> elements ... -->
    </select>
    <nve-control-message>message</nve-control-message>
  </nve-combobox>
  <div nve-layout="row gap:xs">
    <nve-button type="button">set</nve-button>
    <nve-button type="reset">reset</nve-button>
    <nve-button type="submit">submit</nve-button>
  </div>
</form>
<script type="module">
  const form = document.querySelector("form");
  const select = document.querySelector("select");
  const input = document.querySelector("input");
  const btn = document.querySelector("[type=button]");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    console.log("input: ", formData.get("input"));
    console.log("select: ", formData.get("select"));
    console.log(
      "selectedOptions: ",
      Array.from(select.selectedOptions).map((o) => o.value),
    );
  });
  btn.addEventListener("click", () => {
    select.value = "status";
    select.options[0].selected = true;
    input.value = "test";
  });
</script>
```

## Infinite Scroll (combobox-infinite-scroll)

Infinite scroll combobox loading, using the scroll event to append options as
the user nears the end of the list. Use for server-backed datasets where loading
all options up front is impractical.

```html
<nve-combobox id="infinite-scroll-combo" style="--scroll-height: 200px">
  <label>GPU Models</label>
  <input type="search" placeholder="Scroll to load more…" />
  <datalist id="infinite-scroll-list"></datalist>
</nve-combobox>
<script type="module">
  const combo = document.getElementById("infinite-scroll-combo");
  const datalist = document.getElementById("infinite-scroll-list");
  let loading = false;
  async function loadBatch() {
    if (loading) return;
    loading = true;
    const items = await new Promise((resolve) =>
      setTimeout(
        () => resolve(Array.from({ length: 100 }, (_, i) => "GPU Model " + (datalist.options.length + i + 1))),
        300,
      ),
    );
    datalist.append(...items.map((v) => new Option(v)));
    loading = false;
  }
  loadBatch();
  combo.addEventListener("scroll", (e) => {
    if (e.detail.scrollHeight - e.detail.scrollTop - e.detail.clientHeight <= 128) {
      loadBatch();
    }
  });
</script>
```

## Reset (combobox-reset)

Multi-select with reset functionality via icon button and footer button to clear
all selections.

```html
<nve-combobox id="combobox-reset" style="width: 500px; --scroll-height: 220px">
  <label>label</label>
  <input type="search" />
  <select multiple>
    <option value="status"></option>
    <option value="priority"></option>
    <option value="date"></option>
    <!-- ... 3 more <option> elements ... -->
  </select>
  <nve-icon-button aria-label="clear selection" icon-name="cancel" container="inline"></nve-icon-button>
  <nve-button slot="footer" aria-label="clear selection" container="flat">reset</nve-button>
  <nve-control-message>message</nve-control-message>
</nve-combobox>
<script type="module">
  document
    .querySelector("#combobox-reset nve-icon-button")
    .addEventListener("click", (e) => e.target.parentElement.reset());
  document.querySelector("#combobox-reset nve-button").addEventListener("click", (e) => e.target.parentElement.reset());
</script>
```

## Select All (combobox-select-all)

Multi-select with bulk selection controls (Select All/Deselect All) in footer
for efficient mass operations.

```html
<nve-combobox id="combobox-select-all" style="width: 500px; --scroll-height: 200px">
  <label>label</label>
  <input type="search" />
  <select multiple>
    <option value="status"></option>
    <option value="priority"></option>
    <option value="date"></option>
    <!-- ... 6 more <option> elements ... -->
  </select>
  <div slot="footer" nve-layout="row align:stretch full">
    <nve-button container="flat">Select All</nve-button>
    <nve-button container="flat">Deselect All</nve-button>
  </div>
  <nve-control-message>message</nve-control-message>
</nve-combobox>
<script type="module">
  const combobox = document.querySelector("#combobox-select-all");
  const [selectAll, deselectAll] = Array.from(combobox.querySelectorAll("nve-button"));
  selectAll.addEventListener("click", () => combobox.selectAll());
  deselectAll.addEventListener("click", () => combobox.reset());
  combobox.addEventListener("change", (e) => console.log(e.target.selectedOptions));
</script>
```

## Default (date)

Date picker input with label and message for selecting calendar dates.

```html
<nve-date>
  <label>date</label>
  <input type="date" />
  <nve-control-message>message</nve-control-message>
</nve-date>
```

## Range (date-range)

Date range input with start and end date pickers for selecting time periods and
date intervals.

```html
<nve-input-group>
  <label>date range</label>
  <nve-date>
    <input type="date" aria-label="start date" value="2018-07-22" />
  </nve-date>
  <nve-date>
    <input type="date" aria-label="end date" value="2022-07-22" />
  </nve-date>
  <nve-control-message>message</nve-control-message>
</nve-input-group>
```

## Types (date-types)

Collection of temporal input types including date, datetime, month, week, time,
and date range pickers.

```html
<div nve-layout="column gap:lg align:stretch">
  <nve-date layout="horizontal">
    <label>date label</label>
    <input type="date" />
    <nve-control-message>message</nve-control-message>
  </nve-date>
  <nve-datetime layout="horizontal">
    <label>datetime label</label>
    <input type="datetime-local" />
    <nve-control-message>message</nve-control-message>
  </nve-datetime>
  <nve-month layout="horizontal">
    <label>month label</label>
    <input type="month" />
    <nve-control-message>message</nve-control-message>
  </nve-month>
  <nve-week layout="horizontal">
    <label>week label</label>
    <input type="week" />
    <nve-control-message>message</nve-control-message>
  </nve-week>
  <nve-time layout="horizontal">
    <label>time label</label>
    <input type="time" />
    <nve-control-message>message</nve-control-message>
  </nve-time>
  <nve-input-group layout="horizontal">
    <label>date range</label>
    <nve-date>
      <input type="date" aria-label="start date" value="2018-07-22" />
    </nve-date>
    <nve-date>
      <input type="date" aria-label="end date" value="2022-07-22" />
    </nve-date>
    <nve-control-message>message</nve-control-message>
  </nve-input-group>
</div>
```

## Default (datetime)

Datetime picker input with label and message for selecting both date and time
values.

```html
<nve-datetime>
  <label>date</label>
  <input type="datetime-local" />
  <nve-control-message>message</nve-control-message>
</nve-datetime>
```

## Default (dialog)

Modal dialog for focused user interactions. Use dialogs for confirmations,
simple forms, or important information that requires user attention before
continuing, creating a modal overlay that blocks interaction with the underlying
page until dismissed.

```html
<nve-button popovertarget="dialog">button</nve-button>
<nve-dialog id="dialog" modal closable>
  <nve-dialog-header>
    <h3 nve-text="heading semibold">title</h3>
  </nve-dialog-header>
  <p nve-text="body">some text content in a closable dialog</p>
</nve-dialog>
```

## Invoker Command (dialog-invoker-command)

Use the `commandfor` and `command` attributes to trigger custom Invoker
Commands, such as toggling a dialog.

```html
<nve-button commandfor="dialog" command="toggle-popover">toggle popover</nve-button>
<nve-dialog id="dialog" modal closable>
  <nve-dialog-header>
    <h3 nve-text="heading semibold">title</h3>
  </nve-dialog-header>
  <p nve-text="body">some text content in a closable dialog</p>
</nve-dialog>
```

## Default (divider)

Horizontal divider for separating content sections with a subtle line.

```html
<nve-divider></nve-divider>
```

## Default (dot)

Dot component with status indicator, providing a simple visual cue for process
states and system status.

```html
<nve-dot status="starting"></nve-dot>
```

## Default (drawer)

Modal drawer with header, content, and footer sections. Use for displaying
detailed information, forms, or settings that need more space than a dialog,
typically sliding in from the side of the screen.

```html
<nve-drawer id="drawer" closable modal>
  <nve-drawer-header>
    <h3 nve-text="heading semibold sm">Drawer Header</h3>
  </nve-drawer-header>
  <nve-drawer-content>
    <p nve-text="body">drawer content</p>
  </nve-drawer-content>
  <nve-drawer-footer>
    <p nve-text="body">drawer footer</p>
  </nve-drawer-footer>
</nve-drawer>
<nve-button popovertarget="drawer">button</nve-button>
```

## Default (dropdown)

Dropdown implementation using popovertarget attribute to connect trigger and
dropdown. Useful for simple dropdown menus.

```html
<nve-button popovertarget="dropdown">button</nve-button>
<nve-dropdown id="dropdown">dropdown content</nve-dropdown>
```

## Default (dropdown-group)

Cascading dropdown menu group with nested submenus for hierarchical navigation.

```html
<nve-button popovertarget="menu-1">menu</nve-button>
<nve-dropdown-group>
  <nve-dropdown id="menu-1">
    <nve-menu>
      <nve-menu-item popovertarget="menu-2">
        item 1-1 <nve-icon name="caret" direction="right" size="sm" slot="suffix"></nve-icon>
      </nve-menu-item>
      <nve-menu-item>item 1-2</nve-menu-item>
      <nve-menu-item>item 1-3</nve-menu-item>
    </nve-menu>
  </nve-dropdown>
  <nve-dropdown id="menu-2" position="right">
    <nve-menu>
      <nve-menu-item>item 2-1</nve-menu-item>
      <nve-menu-item popovertarget="menu-3">
        item 2-2 <nve-icon name="caret" direction="right" size="sm" slot="suffix"></nve-icon>
      </nve-menu-item>
      <nve-menu-item>item 2-3</nve-menu-item>
    </nve-menu>
  </nve-dropdown>
  <nve-dropdown id="menu-3" position="right">
    <nve-menu>
      <nve-menu-item>item 3-1</nve-menu-item>
      <nve-menu-item>item 3-2</nve-menu-item>
      <nve-menu-item>item 3-3</nve-menu-item>
    </nve-menu>
  </nve-dropdown>
</nve-dropdown-group>
```

## With Disabled Items (dropdown-group-with-disabled-items)

Cascading dropdown menu with disabled menu items in non-interactive states.

```html
<nve-button popovertarget="disabled-menu-1">Disabled Items</nve-button>
<nve-dropdown-group>
  <nve-dropdown id="disabled-menu-1">
    <nve-menu>
      <nve-menu-item popovertarget="disabled-menu-2">
        item 1-1 <nve-icon name="caret" direction="right" size="sm" slot="suffix"></nve-icon>
      </nve-menu-item>
      <nve-menu-item disabled>item 1-2</nve-menu-item>
      <nve-menu-item>item 1-3</nve-menu-item>
    </nve-menu>
  </nve-dropdown>
  <nve-dropdown id="disabled-menu-2" position="right">
    <nve-menu>
      <nve-menu-item>item 2-1</nve-menu-item>
      <nve-menu-item disabled>item 2-2</nve-menu-item>
      <nve-menu-item popovertarget="disabled-menu-3">
        item 2-3 <nve-icon name="caret" direction="right" size="sm" slot="suffix"></nve-icon>
      </nve-menu-item>
    </nve-menu>
  </nve-dropdown>
  <nve-dropdown id="disabled-menu-3" position="right">
    <nve-menu>
      <nve-menu-item>item 3-1</nve-menu-item>
      <nve-menu-item disabled>item 3-2</nve-menu-item>
      <nve-menu-item>item 3-3</nve-menu-item>
    </nve-menu>
  </nve-dropdown>
</nve-dropdown-group>
```

## With Icons (dropdown-group-with-icons)

Cascading dropdown menu with leading icons for visual identification of menu
item types.

```html
<nve-button popovertarget="icon-menu-1">Icons Menu</nve-button>
<nve-dropdown-group>
  <nve-dropdown id="icon-menu-1">
    <nve-menu>
      <nve-menu-item popovertarget="icon-menu-2">
        <nve-icon name="folder" size="sm"></nve-icon> item 1-1
        <nve-icon name="caret" direction="right" size="sm"></nve-icon>
      </nve-menu-item>
      <nve-menu-item> <nve-icon name="image" size="sm"></nve-icon> item 1-2 </nve-menu-item>
      <nve-menu-item> <nve-icon name="video-camera" size="sm"></nve-icon> item 1-3 </nve-menu-item>
    </nve-menu>
  </nve-dropdown>
  <nve-dropdown id="icon-menu-2" position="right">
    <nve-menu>
      <nve-menu-item> <nve-icon name="document" size="sm"></nve-icon> item 2-1 </nve-menu-item>
      <nve-menu-item> <nve-icon name="document" size="sm"></nve-icon> item 2-2 </nve-menu-item>
      <nve-menu-item popovertarget="icon-menu-3">
        <nve-icon name="terminal" size="sm"></nve-icon> item 2-3
        <nve-icon name="caret" direction="right" size="sm"></nve-icon>
      </nve-menu-item>
    </nve-menu>
  </nve-dropdown>
  <nve-dropdown id="icon-menu-3" position="right">
    <nve-menu>
      <nve-menu-item> <nve-icon name="terminal" size="sm"></nve-icon> item 3-1 </nve-menu-item>
      <nve-menu-item> <nve-icon name="terminal" size="sm"></nve-icon> item 3-2 </nve-menu-item>
      <nve-menu-item> <nve-icon name="terminal" size="sm"></nve-icon> item 3-3 </nve-menu-item>
    </nve-menu>
  </nve-dropdown>
</nve-dropdown-group>
```

## With More Icons (dropdown-group-with-more-icons)

Cascading dropdown menu showcasing extra icon varieties for diverse menu
actions.

```html
<nve-button popovertarget="more-icon-menu-1">More Icons</nve-button>
<nve-dropdown-group>
  <nve-dropdown id="more-icon-menu-1">
    <nve-menu>
      <nve-menu-item popovertarget="more-icon-menu-2">
        <nve-icon name="person" size="sm"></nve-icon> item 1-1
        <nve-icon name="caret" direction="right" size="sm"></nve-icon>
      </nve-menu-item>
      <nve-menu-item> <nve-icon name="arrow" direction="right" size="sm"></nve-icon> item 1-2 </nve-menu-item>
      <nve-menu-item> <nve-icon name="star" size="sm"></nve-icon> item 1-3 </nve-menu-item>
    </nve-menu>
  </nve-dropdown>
  <nve-dropdown id="more-icon-menu-2" position="right">
    <nve-menu>
      <nve-menu-item> <nve-icon name="flag" size="sm"></nve-icon> item 2-1 </nve-menu-item>
      <nve-menu-item> <nve-icon name="home" size="sm"></nve-icon> item 2-2 </nve-menu-item>
      <nve-menu-item popovertarget="more-icon-menu-3">
        <nve-icon name="gear" size="sm"></nve-icon> item 2-3
        <nve-icon name="chevron" direction="right" size="sm"></nve-icon>
      </nve-menu-item>
    </nve-menu>
  </nve-dropdown>
  <nve-dropdown id="more-icon-menu-3" position="right">
    <nve-menu>
      <nve-menu-item> <nve-icon name="dot" size="sm"></nve-icon> item 3-1 </nve-menu-item>
      <nve-menu-item> <nve-icon name="exclamation-mark" size="sm"></nve-icon> item 3-2 </nve-menu-item>
      <nve-menu-item> <nve-icon name="edit" size="sm"></nve-icon> item 3-3 </nve-menu-item>
    </nve-menu>
  </nve-dropdown>
</nve-dropdown-group>
```

## Menu (dropdown-menu)

Dropdown with popover-positioned menu for trigger-based actions. Use for context
menus, settings, and user actions where content appears on demand relative to a
trigger button.

```html
<nve-button popovertarget="dropdown-menu">dropdown</nve-button>
<nve-dropdown id="dropdown-menu">
  <nve-menu>
    <nve-menu-item><nve-icon name="person"></nve-icon> profile</nve-menu-item>
    <nve-menu-item><nve-icon name="gear"></nve-icon> settings</nve-menu-item>
    <nve-menu-item><nve-icon name="star"></nve-icon> favorites</nve-menu-item>
    <nve-divider></nve-divider>
    <nve-menu-item><nve-icon name="logout"></nve-icon> logout</nve-menu-item>
  </nve-menu>
</nve-dropdown>
```

## Default (dropzone)

File dropzone with drag-and-drop area for file upload interactions.

```html
<nve-dropzone name="files" style="--min-height: 200px"></nve-dropzone>
```

## Form (dropzone-form)

Dropzone integrated with form validation showing file type and size constraint
errors.

```html
<form id="form-demo" nve-layout="column gap:lg">
  <section>
    <nve-control>
      <nve-dropzone name="files" accept="image/gif, image/jpeg, image/png" max-file-size="1048576"></nve-dropzone>
      <nve-control-message error="typeMismatch"
        >Unsupported file type — this upload only accepts images</nve-control-message
      >
      <nve-control-message error="rangeOverflow">File too big - maximum 1.00 MB allowed</nve-control-message>
    </nve-control>
  </section>
  <nve-button type="submit">submit</nve-button>
</form>
<script type="module">
  const form = document.querySelector("#form-demo");
  const dropzone = document.querySelector("#form-demo nve-dropzone");
  dropzone.addEventListener("change", (e) => {
    console.log("change", e.target.value);
    const files = e.target.value;
    console.log("Validity:", e.target.validity);
    console.log("Validation Message:", e.target.validationMessage);
  });
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const files = formData.getAll("files");
    if (form.checkValidity()) {
      console.log("Form submitted successfully!");
    } else {
      console.log("Form validation failed");
    }
  });
</script>
```

## Default (file)

File input with label and validation message. Use for simple file upload fields
in forms.

```html
<nve-file>
  <label>file</label>
  <input type="file" />
  <nve-control-message>message</nve-control-message>
</nve-file>
```

## Label Action (forms-actions-label-action)

Label with an information button to provide contextual help or more details
about the field.

```html
<nve-input>
  <label>label</label>
  <nve-icon-button
    icon-name="information-circle-stroke"
    container="flat"
    aria-label="more details"
    slot="label"
  ></nve-icon-button>
  <input type="text" />
  <nve-control-message>message</nve-control-message>
</nve-input>
```

## Prefix Suffix (forms-actions-prefix-suffix)

Input with prefix and suffix buttons to show fixed text elements like URL
protocols and domains.

```html
<nve-input>
  <label>label</label>
  <nve-button container="flat" readonly>https://</nve-button>
  <input type="text" />
  <nve-button container="flat" readonly>.com</nve-button>
  <nve-control-message>message</nve-control-message>
</nve-input>
```

## Search Clear (forms-actions-search-clear)

Input with action buttons for search and clear, providing quick access to common
operations.

```html
<nve-input>
  <label>label</label>
  <nve-icon-button icon-name="search" container="flat" readonly></nve-icon-button>
  <input type="text" />
  <nve-icon-button icon-name="cancel" container="flat" aria-label="clear"></nve-icon-button>
  <nve-control-message>message</nve-control-message>
</nve-input>
```

## Horizontal (forms-horizontal)

Horizontal form layout with labels beside inputs, creating efficient use of
horizontal space and familiar desktop form patterns.

```html
<div nve-layout="column gap:lg full">
  <nve-input layout="horizontal">
    <label>text label</label>
    <input />
    <nve-control-message>message</nve-control-message>
  </nve-input>
  <nve-search layout="horizontal">
    <label>search label</label>
    <input type="search" placeholder="search" />
    <nve-control-message>message</nve-control-message>
  </nve-search>
  <nve-password layout="horizontal">
    <label>password label</label>
    <input type="password" value="123456" autocomplete="off" />
    <nve-control-message>message</nve-control-message>
  </nve-password>
  <nve-select layout="horizontal">
    <label>select label</label>
    <select>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <nve-control-message>message</nve-control-message>
  </nve-select>
  <nve-range layout="horizontal">
    <label>range label</label>
    <input type="range" />
    <nve-control-message>message</nve-control-message>
  </nve-range>
  <nve-checkbox-group layout="horizontal">
    <label>checkbox group label</label>
    <nve-checkbox>
      <label>checkbox 1</label>
      <input type="checkbox" checked />
    </nve-checkbox>
    <nve-checkbox>
      <label>checkbox 2</label>
      <input type="checkbox" />
    </nve-checkbox>
    <nve-checkbox>
      <label>checkbox 3</label>
      <input type="checkbox" />
    </nve-checkbox>
    <nve-control-message>message</nve-control-message>
  </nve-checkbox-group>
  <nve-radio-group layout="horizontal">
    <label>radio group label</label>
    <nve-radio>
      <label>radio 1</label>
      <input type="radio" checked />
    </nve-radio>
    <nve-radio>
      <label>radio 2</label>
      <input type="radio" />
    </nve-radio>
    <nve-radio>
      <label>radio 3</label>
      <input type="radio" />
    </nve-radio>
    <nve-control-message>message</nve-control-message>
  </nve-radio-group>
  <nve-switch-group layout="horizontal">
    <label>switch group label</label>
    <nve-switch>
      <label>switch 1</label>
      <input type="checkbox" />
    </nve-switch>
    <nve-switch>
      <label>switch 2</label>
      <input type="checkbox" checked />
    </nve-switch>
    <nve-control-message>message</nve-control-message>
  </nve-switch-group>
  <nve-select layout="horizontal">
    <label>select multiple label</label>
    <select multiple>
      <option value="1">Option 1</option>
      <option selected value="2">Option 2</option>
      <option selected value="3">Option 3</option>
      <!-- ... 3 more <option> elements ... -->
    </select>
    <nve-control-message>message</nve-control-message>
  </nve-select>
  <nve-textarea layout="horizontal">
    <label>textarea label</label>
    <textarea></textarea>
    <nve-control-message>message</nve-control-message>
  </nve-textarea>
</div>
```

## Horizontal Inline (forms-horizontal-inline)

Space-efficient horizontal layout with inline labels, ideal for dense forms with
tight vertical space where quick scanning matters.

```html
<div nve-layout="column gap:lg full">
  <nve-input layout="horizontal-inline">
    <label>text label</label>
    <input />
    <nve-control-message>message</nve-control-message>
  </nve-input>
  <nve-search layout="horizontal-inline">
    <label>search label</label>
    <input type="search" placeholder="search" />
    <nve-control-message>message</nve-control-message>
  </nve-search>
  <nve-password layout="horizontal-inline">
    <label>password label</label>
    <input type="password" value="123456" autocomplete="off" />
    <nve-control-message>message</nve-control-message>
  </nve-password>
  <nve-select layout="horizontal-inline">
    <label>select label</label>
    <select>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <nve-control-message>message</nve-control-message>
  </nve-select>
  <nve-range layout="horizontal-inline">
    <label>range label</label>
    <input type="range" />
    <nve-control-message>message</nve-control-message>
  </nve-range>
  <nve-checkbox-group layout="horizontal-inline">
    <label>checkbox group label</label>
    <nve-checkbox>
      <label>checkbox 1</label>
      <input type="checkbox" checked />
    </nve-checkbox>
    <nve-checkbox>
      <label>checkbox 2</label>
      <input type="checkbox" />
    </nve-checkbox>
    <nve-checkbox>
      <label>checkbox 3</label>
      <input type="checkbox" />
    </nve-checkbox>
    <nve-control-message>message</nve-control-message>
  </nve-checkbox-group>
  <nve-radio-group layout="horizontal-inline">
    <label>radio group label</label>
    <nve-radio>
      <label>radio 1</label>
      <input type="radio" checked />
    </nve-radio>
    <nve-radio>
      <label>radio 2</label>
      <input type="radio" />
    </nve-radio>
    <nve-radio>
      <label>radio 3</label>
      <input type="radio" />
    </nve-radio>
    <nve-control-message>message</nve-control-message>
  </nve-radio-group>
  <nve-switch-group layout="horizontal-inline">
    <label>switch group label</label>
    <nve-switch>
      <label>switch 1</label>
      <input type="checkbox" />
    </nve-switch>
    <nve-switch>
      <label>switch 2</label>
      <input type="checkbox" checked />
    </nve-switch>
    <nve-control-message>message</nve-control-message>
  </nve-switch-group>
  <nve-select layout="horizontal-inline">
    <label>select multiple label</label>
    <select multiple>
      <option value="1">Option 1</option>
      <option selected value="2">Option 2</option>
      <option selected value="3">Option 3</option>
      <!-- ... 3 more <option> elements ... -->
    </select>
    <nve-control-message>message</nve-control-message>
  </nve-select>
  <nve-textarea layout="horizontal-inline">
    <label>textarea label</label>
    <textarea></textarea>
    <nve-control-message>message</nve-control-message>
  </nve-textarea>
</div>
```

## Kitchen Sink (forms-kitchen-sink)

Comprehensive showcase of all form controls in a grid layout, including input
types, states, and advanced patterns use for a complete form design reference.

```html
<div style="display: grid; gap: 36px 48px; grid-template-columns: 1fr 1fr; max-width: 1400px">
  <nve-input layout="vertical-inline">
    <label>text label</label>
    <input />
    <nve-control-message>message</nve-control-message>
  </nve-input>
  <nve-search layout="vertical-inline">
    <label>search label</label>
    <input type="search" placeholder="search" />
    <nve-control-message>message</nve-control-message>
  </nve-search>
  <nve-password layout="vertical-inline">
    <label>password label</label>
    <input type="password" value="123456" autocomplete="off" />
    <nve-control-message>message</nve-control-message>
  </nve-password>
  <nve-select layout="vertical-inline">
    <label>select label</label>
    <select>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <nve-control-message>message</nve-control-message>
  </nve-select>
  <nve-date layout="vertical-inline">
    <label>date label</label>
    <input type="date" />
    <nve-control-message>message</nve-control-message>
  </nve-date>
  <nve-datetime layout="vertical-inline">
    <label>datetime label</label>
    <input type="datetime-local" />
    <nve-control-message>message</nve-control-message>
  </nve-datetime>
  <nve-month layout="vertical-inline">
    <label>month label</label>
    <input type="month" />
    <nve-control-message>message</nve-control-message>
  </nve-month>
  <nve-week layout="vertical-inline">
    <label>week label</label>
    <input type="week" />
    <nve-control-message>message</nve-control-message>
  </nve-week>
  <nve-time layout="vertical-inline">
    <label>time label</label>
    <input type="time" />
    <nve-control-message>message</nve-control-message>
  </nve-time>
  <nve-color layout="vertical-inline">
    <label>color label</label>
    <input type="color" />
    <nve-control-message>message</nve-control-message>
  </nve-color>
  <nve-input layout="vertical-inline">
    <label>prefix/suffix label</label>
    <nve-button container="flat" readonly>https://</nve-button>
    <input type="text" />
    <nve-button container="flat" readonly>.com</nve-button>
    <nve-control-message>message</nve-control-message>
  </nve-input>
  <nve-input layout="vertical-inline">
    <label>actions label</label>
    <nve-icon-button icon-name="search" container="flat" readonly></nve-icon-button>
    <input type="text" />
    <nve-icon-button icon-name="cancel" container="flat" aria-label="clear"></nve-icon-button>
    <nve-control-message>message</nve-control-message>
  </nve-input>
  <nve-input-group layout="vertical-inline">
    <label>date range</label>
    <nve-date>
      <input type="date" aria-label="start date" value="2018-07-22" />
    </nve-date>
    <nve-date>
      <input type="date" aria-label="end date" value="2022-07-22" />
    </nve-date>
    <nve-control-message>message</nve-control-message>
  </nve-input-group>
  <nve-input-group layout="vertical-inline">
    <label>domain</label>
    <nve-select style="width: 120px">
      <select aria-label="protocol">
        <option>https://</option>
        <option>http://</option>
      </select>
    </nve-select>
    <nve-input>
      <input placeholder="example" aria-label="host" />
      <nve-button container="flat" readonly>.com</nve-button>
    </nve-input>
    <nve-control-message>Host ID: 123456</nve-control-message>
  </nve-input-group>
  <nve-range layout="vertical-inline">
    <label>range label</label>
    <input type="range" />
    <nve-control-message>message</nve-control-message>
  </nve-range>
  <nve-checkbox-group layout="vertical-inline">
    <label>checkbox group label</label>
    <nve-checkbox>
      <label>checkbox 1</label>
      <input type="checkbox" checked />
    </nve-checkbox>
    <nve-checkbox>
      <label>checkbox 2</label>
      <input type="checkbox" />
    </nve-checkbox>
    <nve-checkbox>
      <label>checkbox 3</label>
      <input type="checkbox" />
    </nve-checkbox>
    <nve-control-message>message</nve-control-message>
  </nve-checkbox-group>
  <nve-radio-group layout="vertical-inline">
    <label>radio group label</label>
    <nve-radio>
      <label>radio 1</label>
      <input type="radio" checked />
    </nve-radio>
    <nve-radio>
      <label>radio 2</label>
      <input type="radio" />
    </nve-radio>
    <nve-radio>
      <label>radio 3</label>
      <input type="radio" />
    </nve-radio>
    <nve-control-message>message</nve-control-message>
  </nve-radio-group>
  <nve-switch-group layout="vertical-inline">
    <label>switch group label</label>
    <nve-switch>
      <label>switch 1</label>
      <input type="checkbox" />
    </nve-switch>
    <nve-switch>
      <label>switch 2</label>
      <input type="checkbox" checked />
    </nve-switch>
    <nve-control-message>message</nve-control-message>
  </nve-switch-group>
  <nve-select layout="vertical-inline">
    <label>select multiple label</label>
    <select multiple>
      <option value="1">Option 1</option>
      <option selected value="2">Option 2</option>
      <option selected value="3">Option 3</option>
      <!-- ... 3 more <option> elements ... -->
    </select>
    <nve-control-message>message</nve-control-message>
  </nve-select>
  <nve-textarea layout="vertical-inline">
    <label>textarea label</label>
    <textarea></textarea>
    <nve-control-message>message</nve-control-message>
  </nve-textarea>
  <nve-file>
    <label>file label</label>
    <input type="file" />
    <nve-control-message>message</nve-control-message>
  </nve-file>
  <nve-search rounded>
    <input type="search" aria-label="search" placeholder="search" />
    <datalist>
      <option value="search result 1"></option>
      <option value="search result 2"></option>
      <option value="search result 3"></option>
    </datalist>
  </nve-search>
  <nve-input layout="vertical-inline">
    <label>disabled</label>
    <input disabled />
    <nve-control-message>message</nve-control-message>
  </nve-input>
  <nve-input layout="vertical-inline">
    <label>success</label>
    <input />
    <nve-control-message status="success">message</nve-control-message>
  </nve-input>
  <nve-input layout="vertical-inline">
    <label>error</label>
    <input />
    <nve-control-message status="error">message</nve-control-message>
  </nve-input>
</div>
```

## Prominence Muted (forms-prominence-muted)

Use the prominence muted state to lower visual weight of controls in forms.

```html
<div nve-layout="row gap:lg">
  <div nve-layout="column gap:lg pad:lg">
    <nve-radio-group prominence="muted">
      <label>label</label>
      <nve-radio>
        <label>radio 1</label>
        <input type="radio" checked />
      </nve-radio>
      <nve-radio>
        <label>radio 2</label>
        <input type="radio" />
      </nve-radio>
      <nve-radio>
        <label>radio 3</label>
        <input type="radio" />
      </nve-radio>
    </nve-radio-group>
    <nve-checkbox-group prominence="muted">
      <label>label</label>
      <nve-checkbox>
        <label>checkbox 1</label>
        <input type="checkbox" checked />
      </nve-checkbox>
      <nve-checkbox>
        <label>checkbox 2</label>
        <input type="checkbox" />
      </nve-checkbox>
      <nve-checkbox>
        <label>checkbox 3</label>
        <input type="checkbox" />
      </nve-checkbox>
    </nve-checkbox-group>
    <nve-switch-group prominence="muted">
      <label>label</label>
      <nve-switch>
        <label>switch 1</label>
        <input type="checkbox" checked />
      </nve-switch>
      <nve-switch>
        <label>switch 2</label>
        <input type="checkbox" />
      </nve-switch>
      <nve-switch>
        <label>switch 3</label>
        <input type="checkbox" />
      </nve-switch>
    </nve-switch-group>
    <nve-range prominence="muted">
      <label>label</label>
      <input type="range" />
    </nve-range>
  </div>
  <nve-card>
    <nve-card-content>
      <div nve-layout="column gap:lg pad:lg">
        <nve-radio-group prominence="muted">
          <label>label</label>
          <nve-radio>
            <label>radio 1</label>
            <input type="radio" checked />
          </nve-radio>
          <nve-radio>
            <label>radio 2</label>
            <input type="radio" />
          </nve-radio>
          <nve-radio>
            <label>radio 3</label>
            <input type="radio" />
          </nve-radio>
        </nve-radio-group>
        <nve-checkbox-group prominence="muted">
          <label>label</label>
          <nve-checkbox>
            <label>checkbox 1</label>
            <input type="checkbox" checked />
          </nve-checkbox>
          <nve-checkbox>
            <label>checkbox 2</label>
            <input type="checkbox" />
          </nve-checkbox>
          <nve-checkbox>
            <label>checkbox 3</label>
            <input type="checkbox" />
          </nve-checkbox>
        </nve-checkbox-group>
        <nve-switch-group prominence="muted">
          <label>label</label>
          <nve-switch>
            <label>switch 1</label>
            <input type="checkbox" checked />
          </nve-switch>
          <nve-switch>
            <label>switch 2</label>
            <input type="checkbox" />
          </nve-switch>
          <nve-switch>
            <label>switch 3</label>
            <input type="checkbox" />
          </nve-switch>
        </nve-switch-group>
        <nve-range prominence="muted">
          <label>label</label>
          <input type="range" />
        </nve-range>
      </div>
    </nve-card-content>
  </nve-card>
</div>
```

## Error Group (forms-validation-error-group)

Login form with grouped error display showing all validation issues together
after submission attempt.

```html
<form nve-layout="column gap:md" style="max-width: 350px" novalidate>
  <nve-input>
    <label>email</label>
    <input type="email" name="email" required pattern=".+@nvidia.com" autocomplete="off" />
    <nve-control-message status="error">invalid email</nve-control-message>
  </nve-input>
  <nve-password>
    <label>password</label>
    <input type="password" name="password" required minlength="6" autocomplete="off" />
    <nve-control-message status="error">minimum length is 6 characters</nve-control-message>
  </nve-password>
  <nve-button>login to account</nve-button>
  <nve-alert-group status="danger">
    <nve-alert>invalid email</nve-alert>
    <nve-alert>password required</nve-alert>
  </nve-alert-group>
</form>
```

## Login Form (forms-validation-login-form)

Use real-time validation with contextual error messages to disable submit until
form is valid.

```html
<form id="validation" nve-layout="column gap:md" style="max-width: 350px">
  <nve-input>
    <label>email</label>
    <input type="email" name="email" required pattern=".+@nvidia.com" autocomplete="off" />
    <nve-control-message error="valueMissing">required</nve-control-message>
    <nve-control-message error="patternMismatch">invalid NVIDIA email</nve-control-message>
  </nve-input>
  <nve-password>
    <label>password</label>
    <input type="password" name="password" required minlength="6" autocomplete="off" />
    <nve-control-message error="valueMissing">required</nve-control-message>
    <nve-control-message error="tooShort">minimum length is 6 characters</nve-control-message>
  </nve-password>
  <nve-button disabled>login to account</nve-button>
  <nve-alert-group hidden status="success">
    <nve-alert></nve-alert>
  </nve-alert-group>
</form>
<script type="module">
  const form = document.querySelector("form#validation");
  const alertGroup = document.querySelector("#validation nve-alert-group");
  const alert = document.querySelector("#validation nve-alert");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const { email, password } = Object.fromEntries(new FormData(form));
    alert.innerText = email + " / " + password;
    alertGroup.hidden = false;
  });
  form.addEventListener("input", (e) => {
    form.querySelector("nve-button").disabled = form.matches(":invalid");
  });
</script>
```

## Reset Form (forms-validation-reset-form)

Form reset functionality allowing users to clear individual fields or reset the
entire form.

```html
<form nve-layout="column gap:md" style="max-width: 350px">
  <nve-input>
    <label>email</label>
    <input type="email" name="email" required pattern=".+@nvidia.com" autocomplete="off" value="test@nvidia.com" />
    <nve-icon-button aria-label="reset" icon-name="cancel" container="flat" type="button"></nve-icon-button>
    <nve-control-message error="valueMissing">required</nve-control-message>
    <nve-control-message error="patternMismatch">invalid NVIDIA email</nve-control-message>
  </nve-input>
  <nve-password>
    <label>password</label>
    <input type="password" name="password" required minlength="6" autocomplete="off" />
    <nve-control-message error="valueMissing">required</nve-control-message>
  </nve-password>
  <nve-button type="button">reset form</nve-button>
</form>
<script type="module">
  const form = document.querySelector("form");
  const input = form.querySelector("nve-input");
  const resetInput = form.querySelector('nve-icon-button[icon-name="cancel"]');
  const resetForm = form.querySelector("nve-button");
  resetInput.addEventListener("click", (e) => input.reset());
  resetForm.addEventListener("click", (e) => form.reset());
  form.addEventListener("reset", (e) => console.log(e));
</script>
```

## Success Group (forms-validation-success-group)

Login form example of success feedback with positive confirmation messages for
valid input and successful form submission.

```html
<form nve-layout="column gap:md" style="max-width: 350px" novalidate>
  <nve-input>
    <label>username</label>
    <input type="email" name="email" required pattern=".+@nvidia.com" autocomplete="off" />
    <nve-control-message status="success">username available</nve-control-message>
  </nve-input>
  <nve-password>
    <label>password</label>
    <input type="password" name="password" required minlength="6" autocomplete="off" />
  </nve-password>
  <nve-button>login to account</nve-button>
  <nve-alert-group status="success">
    <nve-alert closable>account created</nve-alert>
  </nve-alert-group>
</form>
```

## Vertical (forms-vertical)

Traditional vertical form layout with labels above inputs, providing clear
visual hierarchy and optimal readability for complex forms.

```html
<div nve-layout="column gap:lg full">
  <nve-input>
    <label>text label</label>
    <input />
    <nve-control-message>message</nve-control-message>
  </nve-input>
  <nve-search>
    <label>search label</label>
    <input type="search" placeholder="search" />
    <nve-control-message>message</nve-control-message>
  </nve-search>
  <nve-password>
    <label>password label</label>
    <input type="password" value="123456" autocomplete="off" />
    <nve-control-message>message</nve-control-message>
  </nve-password>
  <nve-select>
    <label>select label</label>
    <select>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <nve-control-message>message</nve-control-message>
  </nve-select>
  <nve-range>
    <label>range label</label>
    <input type="range" />
    <nve-control-message>message</nve-control-message>
  </nve-range>
  <nve-checkbox-group>
    <label>checkbox group label</label>
    <nve-checkbox>
      <label>checkbox 1</label>
      <input type="checkbox" checked />
    </nve-checkbox>
    <nve-checkbox>
      <label>checkbox 2</label>
      <input type="checkbox" />
    </nve-checkbox>
    <nve-checkbox>
      <label>checkbox 3</label>
      <input type="checkbox" />
    </nve-checkbox>
    <nve-control-message>message</nve-control-message>
  </nve-checkbox-group>
  <nve-radio-group>
    <label>radio group label</label>
    <nve-radio>
      <label>radio 1</label>
      <input type="radio" checked />
    </nve-radio>
    <nve-radio>
      <label>radio 2</label>
      <input type="radio" />
    </nve-radio>
    <nve-radio>
      <label>radio 3</label>
      <input type="radio" />
    </nve-radio>
    <nve-control-message>message</nve-control-message>
  </nve-radio-group>
  <nve-switch-group>
    <label>switch group label</label>
    <nve-switch>
      <label>switch 1</label>
      <input type="checkbox" />
    </nve-switch>
    <nve-switch>
      <label>switch 2</label>
      <input type="checkbox" checked />
    </nve-switch>
    <nve-control-message>message</nve-control-message>
  </nve-switch-group>
  <nve-select>
    <label>select multiple label</label>
    <select multiple>
      <option value="1">Option 1</option>
      <option selected value="2">Option 2</option>
      <option selected value="3">Option 3</option>
      <!-- ... 3 more <option> elements ... -->
    </select>
    <nve-control-message>message</nve-control-message>
  </nve-select>
  <nve-textarea>
    <label>textarea label</label>
    <textarea></textarea>
    <nve-control-message>message</nve-control-message>
  </nve-textarea>
</div>
```

## Vertical Inline (forms-vertical-inline)

Compact vertical layout with inline labels and controls, maximizing space
efficiency while maintaining form clarity and accessibility.

```html
<div nve-layout="column gap:lg full">
  <nve-input layout="vertical-inline">
    <label>text label</label>
    <input />
    <nve-control-message>message</nve-control-message>
  </nve-input>
  <nve-search layout="vertical-inline">
    <label>search label</label>
    <input type="search" placeholder="search" />
    <nve-control-message>message</nve-control-message>
  </nve-search>
  <nve-password layout="vertical-inline">
    <label>password label</label>
    <input type="password" value="123456" autocomplete="off" />
    <nve-control-message>message</nve-control-message>
  </nve-password>
  <nve-select layout="vertical-inline">
    <label>select label</label>
    <select>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <nve-control-message>message</nve-control-message>
  </nve-select>
  <nve-range layout="vertical-inline">
    <label>range label</label>
    <input type="range" />
    <nve-control-message>message</nve-control-message>
  </nve-range>
  <nve-checkbox-group layout="vertical-inline">
    <label>checkbox group label</label>
    <nve-checkbox>
      <label>checkbox 1</label>
      <input type="checkbox" checked />
    </nve-checkbox>
    <nve-checkbox>
      <label>checkbox 2</label>
      <input type="checkbox" />
    </nve-checkbox>
    <nve-checkbox>
      <label>checkbox 3</label>
      <input type="checkbox" />
    </nve-checkbox>
    <nve-control-message>message</nve-control-message>
  </nve-checkbox-group>
  <nve-radio-group layout="vertical-inline">
    <label>radio group label</label>
    <nve-radio>
      <label>radio 1</label>
      <input type="radio" checked />
    </nve-radio>
    <nve-radio>
      <label>radio 2</label>
      <input type="radio" />
    </nve-radio>
    <nve-radio>
      <label>radio 3</label>
      <input type="radio" />
    </nve-radio>
    <nve-control-message>message</nve-control-message>
  </nve-radio-group>
  <nve-switch-group layout="vertical-inline">
    <label>switch group label</label>
    <nve-switch>
      <label>switch 1</label>
      <input type="checkbox" />
    </nve-switch>
    <nve-switch>
      <label>switch 2</label>
      <input type="checkbox" checked />
    </nve-switch>
    <nve-control-message>message</nve-control-message>
  </nve-switch-group>
  <nve-select layout="vertical-inline">
    <label>select multiple label</label>
    <select multiple>
      <option value="1">Option 1</option>
      <option selected value="2">Option 2</option>
      <option selected value="3">Option 3</option>
      <!-- ... 3 more <option> elements ... -->
    </select>
    <nve-control-message>message</nve-control-message>
  </nve-select>
  <nve-textarea layout="vertical-inline">
    <label>textarea label</label>
    <textarea></textarea>
    <nve-control-message>message</nve-control-message>
  </nve-textarea>
</div>
```

## Default (grid)

Data grid for tabular data display with columns and rows. Use grids for
presenting structured datasets where users need to scan, compare, and analyze
information across many columns, such as dashboards, reports, or data management
interfaces.

```html
<nve-grid>
  <nve-grid-header>
    <nve-grid-column>column 0</nve-grid-column><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>column 4</nve-grid-column>
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell
    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell
    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell
    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>
  </nve-grid-row>
  <!-- ... 7 more <nve-grid-row> elements ... -->
</nve-grid>
```

## Bulk Actions (grid-bulk-actions)

Use bulk actions for operations on many items. Display only when rows have a
selection. Closing bulk actions deselects all selected rows.

```html
<nve-grid style="height: 400px">
  <nve-grid-header>
    <nve-grid-column width="max-content" position="fixed">
      <nve-checkbox>
        <input type="checkbox" aria-label="select all rows" />
      </nve-checkbox>
    </nve-grid-column>
    <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>
    <nve-grid-column>column 2</nve-grid-column> <nve-grid-column>column 3</nve-grid-column>
    <!-- ... 1 more <nve-grid-column> elements ... -->
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>
      <nve-checkbox>
        <input type="checkbox" aria-label="select row 0" />
      </nve-checkbox>
    </nve-grid-cell>
    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>
    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>
    <!-- ... 1 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>
      <nve-checkbox>
        <input type="checkbox" checked aria-label="select row 1" />
      </nve-checkbox>
    </nve-grid-cell>
    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>
    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>
    <!-- ... 1 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>
      <nve-checkbox>
        <input type="checkbox" aria-label="select row 2" />
      </nve-checkbox>
    </nve-grid-cell>
    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>
    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>
    <!-- ... 1 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <!-- ... 17 more <nve-grid-row> elements ... -->
  <nve-toolbar status="accent" slot="footer">
    <nve-icon-button container="flat" icon-name="cancel" slot="prefix"></nve-icon-button>
    <p nve-text="body">1 selected</p>
    <nve-button container="flat" interaction="destructive" slot="suffix">delete</nve-button>
    <nve-icon-button container="flat" icon-name="more-actions" slot="suffix"></nve-icon-button>
  </nve-toolbar>
</nve-grid>
```

## Card (grid-card)

Nest Grid in Cards for UI patterns such as card tab groups. Use the
`container="flat"` attribute to enable proper styling of the grid when nested
within a card.

```html
<nve-card>
  <nve-card-header>
    <h2 nve-text="heading sm bold">Data Grid</h2>
    <h3 nve-text="body muted">Card Example</h3>
  </nve-card-header>
  <nve-grid container="flat" style="height: 325px">
    <nve-grid-header>
      <nve-grid-column>column 0</nve-grid-column><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>column 4</nve-grid-column>
    </nve-grid-header>
    <nve-grid-row>
      <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell
      ><nve-grid-cell>cell 0-2</nve-grid-cell><nve-grid-cell>cell 0-3</nve-grid-cell
      ><nve-grid-cell>cell 0-4</nve-grid-cell>
    </nve-grid-row>
    <nve-grid-row>
      <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell
      ><nve-grid-cell>cell 1-2</nve-grid-cell><nve-grid-cell>cell 1-3</nve-grid-cell
      ><nve-grid-cell>cell 1-4</nve-grid-cell>
    </nve-grid-row>
    <nve-grid-row>
      <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell
      ><nve-grid-cell>cell 2-2</nve-grid-cell><nve-grid-cell>cell 2-3</nve-grid-cell
      ><nve-grid-cell>cell 2-4</nve-grid-cell>
    </nve-grid-row>
    <!-- ... 2 more <nve-grid-row> elements ... -->
  </nve-grid>
</nve-card>
```

## Column Action (grid-column-action)

Create column actions by using the `nve-icon-button` to trigger dropdowns or
panels that reveal more actions to the user.

```html
<nve-grid>
  <nve-grid-header>
    <nve-grid-column>
      column 0
      <nve-icon-button
        container="flat"
        popovertarget="grid-column-action-dropdown"
        icon-name="more-actions"
        slot="actions"
      ></nve-icon-button>
    </nve-grid-column>
    <nve-grid-column>
      column 1
      <nve-icon-button
        container="flat"
        popovertarget="grid-column-action-dropdown"
        icon-name="more-actions"
        slot="actions"
      ></nve-icon-button>
    </nve-grid-column>
    <nve-grid-column>
      column 2
      <nve-icon-button
        container="flat"
        popovertarget="grid-column-action-dropdown"
        icon-name="more-actions"
        slot="actions"
      ></nve-icon-button>
    </nve-grid-column>
    <!-- ... 2 more <nve-grid-column> elements ... -->
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>
    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>
    <nve-grid-cell>cell 0-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>
    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>
    <nve-grid-cell>cell 1-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>
    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>
    <nve-grid-cell>cell 2-4</nve-grid-cell>
  </nve-grid-row>
  <!-- ... 7 more <nve-grid-row> elements ... -->
</nve-grid>
<nve-dropdown id="grid-column-action-dropdown">
  <nve-search rounded>
    <input type="search" placeholder="search column" aria-label="search apps" />
  </nve-search>
  <nve-menu>
    <nve-menu-item><nve-icon name="gear"></nve-icon> settings</nve-menu-item>
    <nve-menu-item><nve-icon name="star"></nve-icon> favorites</nve-menu-item>
  </nve-menu>
</nve-dropdown>
```

## Column Dynamic Fixed (grid-column-dynamic-fixed)

Dynamic column management with programmatic addition and positioning, for
flexible grid configuration with evolving data requirements.

```html
<nve-grid id="column-dynamic-fixed-grid" style="height: 400px">
  <nve-grid-header>
    <nve-grid-column width="200px" position="fixed">column 0</nve-grid-column
    ><nve-grid-column width="200px" position>column 1</nve-grid-column
    ><nve-grid-column width="200px" position>column 2</nve-grid-column
    ><nve-grid-column width="200px" position>column 3</nve-grid-column
    ><nve-grid-column width="200px" position="fixed">column 4</nve-grid-column>
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell
    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell
    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell
    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>
  </nve-grid-row>
  <!-- ... 7 more <nve-grid-row> elements ... -->
  <nve-grid-footer>
    <nve-button container="flat">add column</nve-button>
  </nve-grid-footer>
</nve-grid>
<script type="module">
  const grid = document.querySelector("#column-dynamic-fixed-grid");
  const button = grid.querySelector("nve-button");
  button.addEventListener("click", () => {
    const columns = Array.from(grid.querySelectorAll("nve-grid-column"));
    columns.filter((_, i) => i !== 0).forEach((column) => (column.position = null));
    // add new column
    const newColumn = document.createElement("nve-grid-column");
    newColumn.position = "fixed";
    newColumn.width = "200px";
    newColumn.textContent = "column " + columns.length;
    grid.querySelector("nve-grid-header").appendChild(newColumn);
    // add new cell to each row to the end
    grid.querySelectorAll("nve-grid-row").forEach((row, i) => {
      const cell = document.createElement("nve-grid-cell");
      cell.textContent = "cell " + i + "-" + columns.length;
      row.appendChild(cell);
    });
  });
</script>
```

## Column Fixed (grid-column-fixed)

Fix columns to any given side, but keep fixed columns from spanning past the
half way point of the grid.

```html
<nve-grid style="height: 400px; max-width: 800px">
  <nve-grid-header>
    <nve-grid-column position="fixed" width="200px">column 0</nve-grid-column>
    <nve-grid-column position width="200px">column 1</nve-grid-column>
    <nve-grid-column position width="200px">column 2</nve-grid-column>
    <!-- ... 2 more <nve-grid-column> elements ... -->
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>
    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>
    <nve-grid-cell>cell 0-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>
    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>
    <nve-grid-cell>cell 1-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>
    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>
    <nve-grid-cell>cell 2-4</nve-grid-cell>
  </nve-grid-row>
  <!-- ... 7 more <nve-grid-row> elements ... -->
</nve-grid>
```

## Column Multi Fixed (grid-column-multi-fixed)

Fix many columns to any given side, but keep fixed columns from spanning past
the half way point of the grid.

```html
<nve-grid style="height: 400px; max-width: 800px">
  <nve-grid-header>
    <nve-grid-column position="fixed" width="200px">column 0</nve-grid-column
    ><nve-grid-column position width="200px">column 1</nve-grid-column
    ><nve-grid-column position width="200px">column 2</nve-grid-column
    ><nve-grid-column position width="200px">column 3</nve-grid-column
    ><nve-grid-column position="fixed" width="200px">column 4</nve-grid-column>
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell
    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell
    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell
    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>
  </nve-grid-row>
  <!-- ... 7 more <nve-grid-row> elements ... -->
</nve-grid>
```

## Column Stack Fixed (grid-column-stack-fixed)

Stack and fix many columns to any given side, but keep fixed columns from
spanning past the half way point of the grid.

```html
<nve-grid style="height: 400px; max-width: 800px">
  <nve-grid-header>
    <nve-grid-column position="fixed" width="100px">Column 1</nve-grid-column>
    <nve-grid-column position="fixed" width="100px">Column 2</nve-grid-column>
    <nve-grid-column width="200px">Column 3</nve-grid-column>
    <!-- ... 5 more <nve-grid-column> elements ... -->
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>
    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>
    <nve-grid-cell>cell 0-4</nve-grid-cell> <nve-grid-cell>cell 0-5</nve-grid-cell>
    <!-- ... 1 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>
    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>
    <nve-grid-cell>cell 1-4</nve-grid-cell> <nve-grid-cell>cell 1-5</nve-grid-cell>
    <!-- ... 1 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>
    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>
    <nve-grid-cell>cell 2-4</nve-grid-cell> <nve-grid-cell>cell 2-5</nve-grid-cell>
    <!-- ... 1 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <!-- ... 7 more <nve-grid-row> elements ... -->
</nve-grid>
```

## Column Width (grid-column-width)

Column width control for responsive grid layouts, enabling flexible content
sizing and optimal space usage across different screen sizes.

```html
<nve-grid style="height: 400px">
  <nve-grid-header>
    <nve-grid-column width="300px">column 0</nve-grid-column> <nve-grid-column width="300px">column 1</nve-grid-column>
    <nve-grid-column width="300px">column 2</nve-grid-column> <nve-grid-column width="300px">column 3</nve-grid-column>
    <nve-grid-column width>column 4</nve-grid-column>
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>
    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>
    <nve-grid-cell>cell 0-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>
    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>
    <nve-grid-cell>cell 1-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>
    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>
    <nve-grid-cell>cell 2-4</nve-grid-cell>
  </nve-grid-row>
  <!-- ... 7 more <nve-grid-row> elements ... -->
  <nve-grid-footer>footer content</nve-grid-footer>
</nve-grid>
```

## Display Settings (grid-display-settings)

Users can customize their data view through a dropdown menu above the grid, 
allowing them to show/hide columns and restore default settings for a
personalized experience.

```html
<div nve-layout="column gap:md full">
  <nve-dropdown closable id="column-settings-dropdown">
    <nve-checkbox-group style="width: 175px">
      <label>Columns</label>
      <nve-checkbox>
        <label>Column 1</label>
        <input type="checkbox" checked />
      </nve-checkbox>
      <nve-checkbox>
        <label>Column 2</label>
        <input type="checkbox" checked />
      </nve-checkbox>
      <nve-checkbox>
        <label>Column 3</label>
        <input type="checkbox" checked />
      </nve-checkbox>
      <!-- ... 1 more <nve-checkbox> elements ... -->
    </nve-checkbox-group>
    <nve-divider></nve-divider>
    <nve-button
      popovertarget="column-settings-dropdown"
      popovertargetaction="hide"
      interaction="destructive"
      container="flat"
      style="--height: initial"
      >restore settings</nve-button
    >
  </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>
  <nve-grid>
    <nve-grid-header>
      <nve-grid-column>column 0</nve-grid-column> <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-header>
    <nve-grid-row>
      <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>
      <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>
    </nve-grid-row>
    <nve-grid-row>
      <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>
      <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>
    </nve-grid-row>
    <nve-grid-row>
      <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>
      <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>
    </nve-grid-row>
    <!-- ... 7 more <nve-grid-row> elements ... -->
  </nve-grid>
</div>
```

## Flat (grid-flat)

Flat container styling for minimal visual weight, providing subtle grid
presentation that integrates seamlessly with surrounding content.

```html
<nve-grid container="flat" style="height: 400px">
  <nve-grid-header>
    <nve-grid-column>column 0</nve-grid-column><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>column 4</nve-grid-column>
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell
    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell
    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell
    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>
  </nve-grid-row>
  <!-- ... 17 more <nve-grid-row> elements ... -->
</nve-grid>
```

## Footer (grid-footer)

The footer displays contextual information or extra user actions such as
pagination.

```html
<nve-grid style="height: 400px">
  <nve-grid-header>
    <nve-grid-column>column 0</nve-grid-column> <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>column 4</nve-grid-column>
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>
    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>
    <nve-grid-cell>cell 0-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>
    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>
    <nve-grid-cell>cell 1-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>
    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>
    <nve-grid-cell>cell 2-4</nve-grid-cell>
  </nve-grid-row>
  <!-- ... 11 more <nve-grid-row> elements ... -->
  <nve-grid-footer>
    <p nve-text="body">footer content</p>
  </nve-grid-footer>
</nve-grid>
```

## Full (grid-full)

Full-width grid container for max space use, providing edge-to-edge data display
for comprehensive information presentation.

```html
<nve-grid container="full" style="height: 400px">
  <nve-grid-header>
    <nve-grid-column>column 0</nve-grid-column><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>column 4</nve-grid-column>
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell
    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell
    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell
    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>
  </nve-grid-row>
  <!-- ... 7 more <nve-grid-row> elements ... -->
</nve-grid>
```

## Keynav (grid-keynav)

The datagrid follows the ARIA Authoring Practices Guide for standardized
keyboard navigation.

```html
<nve-grid>
  <nve-grid-header>
    <nve-grid-column width="150px">Key</nve-grid-column>
    <nve-grid-column>Function</nve-grid-column>
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>
      <kbd>Right Arrow</kbd>
    </nve-grid-cell>
    <nve-grid-cell>
      <ul nve-text="list">
        <li>Moves focus one cell to the right.</li>
        <li>If focus is on the right-most cell in the row, focus does not move.</li>
      </ul>
    </nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>
      <kbd>Left Arrow</kbd>
    </nve-grid-cell>
    <nve-grid-cell>
      <ul nve-text="list">
        <li>Moves focus one cell to the left.</li>
        <li>If focus is on the left-most cell in the row, focus does not move.</li>
      </ul>
    </nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>
      <kbd>Down Arrow</kbd>
    </nve-grid-cell>
    <nve-grid-cell>
      <ul nve-text="list">
        <li>Moves focus one cell down.</li>
        <li>If focus is on the bottom cell in the column, focus does not move.</li>
      </ul>
    </nve-grid-cell>
  </nve-grid-row>
  <!-- ... 7 more <nve-grid-row> elements ... -->
</nve-grid>
```

## Multi Select (grid-multi-select)

Multi-select rows with checkboxes for bulk operations. Use multi-select when
users need to perform actions on many items at once (like delete, export, or
bulk edit), placing checkboxes as the first column and setting the selected
attribute for proper accessibility.

```html
<nve-grid>
  <nve-grid-header>
    <nve-grid-column width="max-content" position="fixed">
      <nve-checkbox>
        <input type="checkbox" aria-label="select all rows" />
      </nve-checkbox>
    </nve-grid-column>
    <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>
    <nve-grid-column>column 2</nve-grid-column> <nve-grid-column>column 3</nve-grid-column>
    <!-- ... 1 more <nve-grid-column> elements ... -->
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>
      <nve-checkbox>
        <input type="checkbox" aria-label="select row 0" />
      </nve-checkbox>
    </nve-grid-cell>
    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>
    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>
    <!-- ... 1 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>
      <nve-checkbox>
        <input type="checkbox" checked aria-label="select row 1" />
      </nve-checkbox>
    </nve-grid-cell>
    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>
    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>
    <!-- ... 1 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>
      <nve-checkbox>
        <input type="checkbox" aria-label="select row 2" />
      </nve-checkbox>
    </nve-grid-cell>
    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>
    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>
    <!-- ... 1 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <!-- ... 7 more <nve-grid-row> elements ... -->
</nve-grid>
```

## Pagination (grid-pagination)

Use the pagination pattern when working with large data sets that need
incremental loading or filtering for performance or useability.

```html
<nve-grid style="height: 370px">
  <nve-grid-header>
    <nve-grid-column>column 0</nve-grid-column> <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>column 4</nve-grid-column>
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>
    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>
    <nve-grid-cell>cell 0-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>
    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>
    <nve-grid-cell>cell 1-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>
    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>
    <nve-grid-cell>cell 2-4</nve-grid-cell>
  </nve-grid-row>
  <!-- ... 7 more <nve-grid-row> elements ... -->
  <nve-grid-footer>
    <nve-pagination value="1" items="100" step="10"></nve-pagination>
  </nve-grid-footer>
</nve-grid>
```

## Panel Detail (grid-panel-detail)

Use a nve-page-panel when displaying advanced filtering or display settings for
the grid. Item detail panels should be open using a action button placed at the
end of the grid row.

```html
<nve-page id="grid-panel-demo">
  <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>
  <section nve-layout="column gap:md pad:md full">
    <nve-grid>
      <nve-grid-header>
        <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>
        <nve-grid-column>column 2</nve-grid-column>
        <nve-grid-column width="max-content" aria-label="details"></nve-grid-column>
      </nve-grid-header>
      <nve-grid-row>
        <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>
        <nve-grid-cell>cell 0-2</nve-grid-cell>
        <nve-grid-cell>
          <nve-icon-button container="flat" icon-name="expand-details" value="0" aria-label="view 0"></nve-icon-button>
        </nve-grid-cell>
      </nve-grid-row>
      <nve-grid-row selected>
        <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>
        <nve-grid-cell>cell 1-2</nve-grid-cell>
        <nve-grid-cell>
          <nve-icon-button container="flat" icon-name="expand-details" value="1" aria-label="view 1"></nve-icon-button>
        </nve-grid-cell>
      </nve-grid-row>
      <nve-grid-row>
        <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>
        <nve-grid-cell>cell 2-2</nve-grid-cell>
        <nve-grid-cell>
          <nve-icon-button container="flat" icon-name="expand-details" value="2" aria-label="view 2"></nve-icon-button>
        </nve-grid-cell>
      </nve-grid-row>
      <!-- ... 7 more <nve-grid-row> elements ... -->
    </nve-grid>
  </section>
  <nve-page-panel slot="right" size="sm" expanded closable>
    <nve-page-panel-header>
      <h3 nve-text="heading medium sm">Row 2 Details</h3>
    </nve-page-panel-header>
    <nve-page-panel-content>
      <div nve-layout="column gap:md">
        <div nve-layout="column gap:xs">
          <label nve-text="body sm muted">Task</label>
          <p nve-text="label sm">Workflow</p>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm muted">Status</label>
          <nve-badge status="success">Complete</nve-badge>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm muted">Priority</label>
          <nve-badge status="pending">P1</nve-badge>
        </div>
      </div>
    </nve-page-panel-content>
  </nve-page-panel>
</nve-page>
<script type="module">
  const page = document.getElementById("grid-panel-demo");
  const grid = page.querySelector("nve-grid");
  const panel = page.querySelector("nve-page-panel");
  const rows = grid.querySelectorAll("nve-grid-row");
  const heading = page.querySelector("nve-page-panel-header h3");
  panel.addEventListener("close", () => {
    rows.forEach((row) => (row.selected = false));
    panel.hidden = true;
  });
  grid.addEventListener("click", (e) => {
    if (e.target.localName === "nve-icon-button") {
      const row = e.target.closest("nve-grid-row");
      rows.forEach((row) => (row.selected = false));
      panel.hidden = false;
      heading.textContent = "Row " + e.target.value + " Details";
      row.selected = !panel.hidden;
    }
  });
</script>
```

## Panel Grid (grid-panel-grid)

Panel Grid displays key value type data sets for details of a given item in a
collection.

```html
<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>
  <section nve-layout="column gap:md pad:md full">page content</section>
  <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-row>
        <nve-grid-cell><p nve-text="label muted">Record Date</p></nve-grid-cell>
        <nve-grid-cell><p nve-text="label">2023-09-04 11:00</p></nve-grid-cell>
      </nve-grid-row>
      <nve-grid-row>
        <nve-grid-cell><p nve-text="label muted">Tag</p></nve-grid-cell>
        <nve-grid-cell><nve-tag readonly>Production</nve-tag></nve-grid-cell>
      </nve-grid-row>
      <!-- ... 5 more <nve-grid-row> elements ... -->
    </nve-grid>
  </nve-page-panel>
</nve-page>
```

## Placeholder (grid-placeholder)

Loading placeholder state with progress indicator. Use grid placeholders during
initial data fetching or while loading large datasets, providing visual feedback
that content is coming and preventing layout shift when rows populate, improving
perceived performance.

```html
<nve-grid style="min-height: 400px">
  <nve-grid-header>
    <nve-grid-column></nve-grid-column>
  </nve-grid-header>
  <nve-grid-placeholder>
    <nve-progress-ring status="accent" size="lg"></nve-progress-ring>
  </nve-grid-placeholder>
</nve-grid>
```

## Row Action (grid-row-action)

Row actions enable extra user actions specific to a given row. Place a
`nve-icon-button` at the end of the grid row for actions.

```html
<nve-dropdown id="row-actions-dropdown" align="end">
  <nve-menu>
    <nve-menu-item>action 1</nve-menu-item>
    <nve-menu-item>action 2</nve-menu-item>
    <nve-menu-item>action 3</nve-menu-item>
  </nve-menu>
</nve-dropdown>
<nve-grid>
  <nve-grid-header>
    <nve-grid-column>column 0</nve-grid-column> <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>column 4</nve-grid-column>
    <!-- ... 1 more <nve-grid-column> elements ... -->
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>
    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>
    <nve-grid-cell>cell 0-4</nve-grid-cell>
    <!-- ... 1 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>
    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>
    <nve-grid-cell>cell 1-4</nve-grid-cell>
    <!-- ... 1 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>
    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>
    <nve-grid-cell>cell 2-4</nve-grid-cell>
    <!-- ... 1 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <!-- ... 7 more <nve-grid-row> elements ... -->
</nve-grid>
```

## Row Groups (grid-row-groups)

Expandable row groups for hierarchical data organization. Use row groups when
items have parent-child relationships or nested details (like sessions with
uploads, orders with line items), allowing users to progressively disclose
details and maintain compact views of large hierarchies.

```html
<nve-grid>
  <nve-grid-header>
    <nve-grid-column width="max-content" aria-label="expand groups" position="fixed"></nve-grid-column>
    <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>
    <nve-grid-column>column 2</nve-grid-column> <nve-grid-column>column 3</nve-grid-column>
    <!-- ... 1 more <nve-grid-column> elements ... -->
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>
      <nve-icon-button
        icon-name="caret"
        container="flat"
        direction="right"
        aria-label="view session 2yuecae SSD uploads"
      ></nve-icon-button>
    </nve-grid-cell>
    <nve-grid-cell>Session: 2yuecae</nve-grid-cell>
    <nve-grid-cell>upload</nve-grid-cell>
    <!-- ... 3 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row selected>
    <nve-grid-cell>
      <nve-icon-button
        icon-name="caret"
        container="flat"
        direction="down"
        aria-label="view session mvwgh3t SSD uploads"
      ></nve-icon-button>
    </nve-grid-cell>
    <nve-grid-cell>Session: mvwgh3t</nve-grid-cell>
    <nve-grid-cell>upload</nve-grid-cell>
    <!-- ... 3 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell></nve-grid-cell>
    <nve-grid-cell>SSD: mvwgh3t</nve-grid-cell>
    <nve-grid-cell>validating</nve-grid-cell>
    <!-- ... 3 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <!-- ... 4 more <nve-grid-row> elements ... -->
</nve-grid>
```

## Row Sort (grid-row-sort)

Sortable columns with visual indicators for data organization. Use sort buttons
on columns where sorting is meaningful (dates, numbers, names) to help users
find patterns, identify outliers, or locate specific data points, supporting
three states: none, ascending, and descending.

```html
<nve-grid>
  <nve-grid-header>
    <nve-grid-column> None <nve-sort-button sort="none"></nve-sort-button> </nve-grid-column>
    <nve-grid-column> Ascending <nve-sort-button sort="ascending"></nve-sort-button> </nve-grid-column>
    <nve-grid-column> Descending <nve-sort-button sort="descending"></nve-sort-button> </nve-grid-column>
    <!-- ... 2 more <nve-grid-column> elements ... -->
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell
    ><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell
    ><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell
    ><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>
  </nve-grid-row>
  <!-- ... 7 more <nve-grid-row> elements ... -->
</nve-grid>
```

## Scroll Position (grid-scroll-position)

Programmatic scroll control using the grid `scrollTo` API. Use for scroll-to-top
buttons, jump-to-row navigation, or restoring scroll position after data
refreshes in large datasets.

```html
<nve-grid id="scroll-position-grid" style="height: 402px">
  <nve-grid-header>
    <nve-grid-column>column 0</nve-grid-column> <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>column 4</nve-grid-column>
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>
    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>
    <nve-grid-cell>cell 0-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>
    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>
    <nve-grid-cell>cell 1-4</nve-grid-cell>
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>
    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>
    <nve-grid-cell>cell 2-4</nve-grid-cell>
  </nve-grid-row>
  <!-- ... 17 more <nve-grid-row> elements ... -->
  <nve-grid-footer>
    <nve-button id="scroll-top-button">scroll top</nve-button>
  </nve-grid-footer>
</nve-grid>
<script type="module">
  const grid = document.querySelector("#scroll-position-grid");
  const button = document.querySelector("#scroll-top-button");
  button.addEventListener("click", () => {
    grid.scrollTo({ top: 0, behavior: "smooth" });
  });
</script>
```

## Single Select (grid-single-select)

A single select datagrid allows users to choose exactly one row from a data
table by providing radio buttons in the first column, ensuring only one item has
a selection at a time. To enable single select, place `nve-radio` input as the
first grid cell of each row. Set `name` attribute on each radio to ensure to
associate the same radio group.

```html
<nve-grid>
  <nve-grid-header>
    <nve-grid-column width="max-content" position="fixed"></nve-grid-column>
    <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column>
    <nve-grid-column>column 2</nve-grid-column> <nve-grid-column>column 3</nve-grid-column>
    <!-- ... 1 more <nve-grid-column> elements ... -->
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>
      <nve-radio>
        <input type="radio" name="single-select" value="0" aria-label="select row 0" />
      </nve-radio>
    </nve-grid-cell>
    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell>
    <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell>
    <!-- ... 1 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>
      <nve-radio>
        <input type="radio" checked name="single-select" value="1" aria-label="select row 1" />
      </nve-radio>
    </nve-grid-cell>
    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell>
    <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell>
    <!-- ... 1 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>
      <nve-radio>
        <input type="radio" name="single-select" value="2" aria-label="select row 2" />
      </nve-radio>
    </nve-grid-cell>
    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell>
    <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell>
    <!-- ... 1 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <!-- ... 7 more <nve-grid-row> elements ... -->
</nve-grid>
```

## Sort Visibility (grid-sort-visibility)

Use the `nve-sort-button` to add grid row sort. The grid follows the ARIA sort
spec and automatically sets the appropriate accessibility related attributes to
convey the current sorting state.

```html
<nve-grid>
  <nve-grid-header>
    <nve-grid-column> Column 1 <nve-sort-button sort="none"></nve-sort-button> </nve-grid-column>
    <nve-grid-column> Column 2 <nve-sort-button sort="ascending"></nve-sort-button> </nve-grid-column>
    <nve-grid-column> Column 3 <nve-sort-button sort="descending"></nve-sort-button> </nve-grid-column>
    <!-- ... 1 more <nve-grid-column> elements ... -->
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>cell 1-1</nve-grid-cell>
    <nve-grid-cell>cell 1-2</nve-grid-cell>
    <nve-grid-cell>cell 1-3</nve-grid-cell>
    <!-- ... 1 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
</nve-grid>
```

## Default (icon)

Icon component with standard appearance and usage for visual communication and
interface navigation.

```html
<nve-icon name="person"></nve-icon>
```

## Default (input)

Text input field with label and message for general text entry and form data
collection.

```html
<nve-input>
  <label>label</label>
  <input type="text" />
  <nve-control-message>message</nve-control-message>
</nve-input>
```

## Default (input-input-group)

Input group combining select, input, and button for composite controls like
domain URL entry.

```html
<nve-input-group>
  <label>domain</label>
  <nve-select style="width: 130px">
    <select aria-label="protocol">
      <option>https://</option>
      <option>http://</option>
    </select>
  </nve-select>
  <nve-input>
    <input placeholder="example" type="url" aria-label="host" />
    <nve-button container="flat" readonly>.com</nve-button>
  </nve-input>
  <nve-control-message>host: 123456</nve-control-message>
</nve-input-group>
```

## Filter Group Range (input-input-group-filter-group-range)

Input group with date range filters combining select and date inputs for
filtering data by time periods.

```html
<div nve-layout="row align:vertical-center">
  <nve-input-group>
    <nve-select style="width: 150px">
      <select aria-label="date type">
        <option value="1">recording date</option>
        <option value="2">process date</option>
      </select>
    </nve-select>
    <nve-date style="width: 220px">
      <nve-button container="flat" readonly>start</nve-button>
      <input type="date" value="2022-05-11" aria-label="start date" />
    </nve-date>
    <nve-date style="width: 220px">
      <nve-button container="flat" readonly>end</nve-button>
      <input type="date" value="2022-12-07" aria-label="end date" />
    </nve-date>
    <nve-icon-button aria-label="remove filter" icon-name="cancel"></nve-icon-button>
  </nve-input-group>
</div>
```

## Default (logo)

NVIDIA logo with aria-label for accessibility. Use for brand identification in
headers, footers, and loading states.

```html
<nve-logo aria-label="NVIDIA">NV</nve-logo>
```

## Default (menu)

Menu with simple text items for the default menu structure and styling.

```html
<nve-menu>
  <nve-menu-item>item 1</nve-menu-item>
  <nve-menu-item>item 2</nve-menu-item>
  <nve-menu-item>item 3</nve-menu-item>
  <!-- ... 1 more <nve-menu-item> elements ... -->
</nve-menu>
```

## Complex (menu-complex)

Use a dropdown menu with search and branded logos for application selection
interfaces.

```html
<nve-button popovertarget="dropdown-menu">dropdown</nve-button>
<nve-dropdown id="dropdown-menu">
  <nve-search rounded>
    <input type="search" placeholder="search tools" aria-label="search apps" />
  </nve-search>
  <nve-menu>
    <nve-menu-item> <nve-logo color="pink-rose" size="sm">Db</nve-logo> Debugger </nve-menu-item>
    <nve-menu-item> <nve-logo color="blue-cobalt" size="sm">TM</nve-logo> Task Manager </nve-menu-item>
    <nve-menu-item> <nve-logo color="yellow-nova" size="sm">CI</nve-logo> CI Services </nve-menu-item>
    <nve-divider></nve-divider>
    <nve-menu-item> <nve-logo size="sm">NV</nve-logo> All Apps </nve-menu-item>
  </nve-menu>
</nve-dropdown>
```

## Dropdown (menu-dropdown)

Menu with keyboard navigation and ARIA disclosure pattern inside a dropdown. Use
when menu items need accessible focus management and arrow key navigation.

```html
<nve-button popovertarget="dropdown-menu">dropdown</nve-button>
<nve-dropdown id="dropdown-menu">
  <nve-menu>
    <nve-menu-item><nve-icon name="person"></nve-icon> profile</nve-menu-item>
    <nve-menu-item><nve-icon name="gear"></nve-icon> settings</nve-menu-item>
    <nve-menu-item><nve-icon name="star"></nve-icon> favorites</nve-menu-item>
    <nve-divider></nve-divider>
    <nve-menu-item><nve-icon name="logout"></nve-icon> logout</nve-menu-item>
  </nve-menu>
</nve-dropdown>
```

## Vertical Navigation Drawer (menu-vertical-navigation-drawer)

Use a navigation drawer to overlay page content for out-of-context navigation.

```html
<nve-page>
  <nve-page-header>
    <nve-logo slot="prefix" size="sm">NV</nve-logo>
    <h2 slot="prefix" nve-text="heading sm">NVIDIA</h2>
  </nve-page-header>
  <main nve-layout="column gap:md pad:md">
    <nve-button popovertarget="menu-drawer">toggle drawer</nve-button>
  </main>
  <nve-drawer position="right" size="sm" modal closable id="menu-drawer">
    <nve-drawer-header>
      <h3 nve-text="heading">Drawer</h3>
    </nve-drawer-header>
    <nve-drawer-content>
      <nve-menu>
        <nve-menu-item>item 1</nve-menu-item>
        <nve-menu-item current="page">item 2</nve-menu-item>
        <nve-menu-item>item 3</nve-menu-item>
        <!-- ... 1 more <nve-menu-item> elements ... -->
      </nve-menu>
    </nve-drawer-content>
  </nve-drawer>
</nve-page>
```

## Vertical Navigation Panel (menu-vertical-navigation-panel)

Use an inline navigation panel to push page content aside when navigation is
contextual to the page.

```html
<nve-page>
  <nve-page-header>
    <nve-logo slot="prefix" size="sm">NV</nve-logo>
    <h2 slot="prefix" nve-text="heading sm">NVIDIA</h2>
  </nve-page-header>
  <nve-page-panel slot="left" expanded style="max-width: 280px">
    <nve-page-panel-header>
      <h3 nve-text="heading">Drawer</h3>
    </nve-page-panel-header>
    <nve-page-panel-content>
      <nve-menu>
        <nve-menu-item>item 1</nve-menu-item>
        <nve-menu-item current="page">item 2</nve-menu-item>
        <nve-menu-item>item 3</nve-menu-item>
        <!-- ... 1 more <nve-menu-item> elements ... -->
      </nve-menu>
    </nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column gap:md pad:md">
    <p nve-text="body">Content</p>
  </main>
</nve-page>
```

## J S O N Schema Validation (monaco-diff-input-json-schema-validation)

JSON diff input with schema validation in a form context, blocking submission on
errors

```html
<form id="json-schema-validation-example" nve-layout="column gap:lg">
  <nve-control style="width: 100%">
    <label>JSON Configuration</label>
    <nve-monaco-diff-input
      nve-control
      name="config"
      language="json"
      line-numbers="on"
      side-by-side
    ></nve-monaco-diff-input>
    <nve-control-message>JSON schema validation errors will prevent form submission</nve-control-message>
  </nve-control>
  <nve-button type="submit">Submit</nve-button>
</form>
<script type="module">
  const form = document.querySelector("form#json-schema-validation-example");
  const input = form.querySelector("nve-monaco-diff-input");
  input.schema = {
    type: "object",
    properties: {
      name: { type: "string", description: "Project name" },
      version: { type: "string", pattern: "^\\d+\\.\\d+\\.\\d+$", description: "Semantic version number" },
      description: { type: "string", description: "Project description" },
    },
    required: ["name", "version"],
  };
  input.original = JSON.stringify(
    {
      name: "my-original-app",
      version: "0.0.0",
    },
    null,
    2,
  );
  input.value = JSON.stringify(
    {
      name: "my-modified-app",
      version: "1.0.0",
    },
    null,
    2,
  );
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    console.log("Form data:", {
      config: formData.get("config"),
    });
  });
</script>
```

## Type Script Validation (monaco-diff-input-type-script-validation)

TypeScript diff input with real-time type checking that blocks form submission
on errors

```html
<form id="typescript-validation-example" nve-layout="column gap:lg">
  <nve-control style="width: 100%">
    <label>TypeScript Code</label>
    <nve-monaco-diff-input
      nve-control
      name="code"
      language="typescript"
      line-numbers="on"
      side-by-side
    ></nve-monaco-diff-input>
    <nve-control-message>TypeScript validation errors will prevent form submission</nve-control-message>
  </nve-control>
  <nve-button type="submit">Submit</nve-button>
</form>
<script type="module">
  const form = document.querySelector("form#typescript-validation-example");
  const input = form.querySelector("nve-monaco-diff-input");
  input.original = "const x: number = 42;";
  input.value = 'const x: number = "string"; // Type error';
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    console.log("Form data:", {
      code: formData.get("code"),
    });
  });
</script>
```

## J S O N Schema Validation (monaco-input-json-schema-validation)

JSON input with schema validation that blocks form submission on validation
errors

```html
<form id="json-schema-validation-example" nve-layout="column gap:lg">
  <nve-control style="width: 100%">
    <label>JSON Configuration</label>
    <nve-monaco-input nve-control name="config" language="json"></nve-monaco-input>
    <nve-control-message>JSON schema validation errors will prevent form submission</nve-control-message>
  </nve-control>
  <nve-button type="submit">Submit</nve-button>
</form>
<script type="module">
  const form = document.querySelector("form#json-schema-validation-example");
  const input = form.querySelector("nve-monaco-input");
  input.schema = {
    type: "object",
    properties: {
      name: { type: "string", description: "Project name" },
      version: { type: "string", pattern: "^\\d+\\.\\d+\\.\\d+$", description: "Semantic version number" },
      description: { type: "string", description: "Project description" },
    },
    required: ["name", "version"],
  };
  input.value = JSON.stringify(
    {
      name: "my-app",
      version: "1.0.0",
    },
    null,
    2,
  );
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    console.log("Form data:", {
      config: formData.get("config"),
    });
  });
</script>
```

## Type Script Validation (monaco-input-type-script-validation)

TypeScript input with real-time type checking that blocks form submission on
type errors

```html
<form id="typescript-validation-example" nve-layout="column gap:lg">
  <nve-control style="width: 100%">
    <label>TypeScript Code</label>
    <nve-monaco-input nve-control name="code" language="typescript"></nve-monaco-input>
    <nve-control-message>TypeScript validation errors will prevent form submission</nve-control-message>
  </nve-control>
  <nve-button type="submit">Submit</nve-button>
</form>
<script type="module">
  const form = document.querySelector("form#typescript-validation-example");
  const input = form.querySelector("nve-monaco-input");
  input.value = 'const x: number = "string"; // Type error';
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    console.log("Form data:", {
      code: formData.get("code"),
    });
  });
</script>
```

## Default (month)

Month picker with label and validation message. Use for selecting a month and
year in forms, such as expiry dates or report periods.

```html
<nve-month>
  <label>label</label>
  <input type="month" />
  <nve-control-message>message</nve-control-message>
</nve-month>
```

## Default (notification)

Notification with auto-dismiss timeout for temporary feedback messages. Use
notifications for system-generated alerts, confirmations, or status updates that
don't require immediate user action, automatically dismissing after a set
duration.

```html
<nve-notification id="notification" position="top" close-timeout="2000">
  <h3 nve-text="label">Notification</h3>
  <p nve-text="body">some text content in a notification</p>
</nve-notification>
<nve-button popovertarget="notification">button</nve-button>
```

## Default (pagination)

Pagination component with default styling and behavior.

```html
<nve-pagination value="1" items="100" step="10"></nve-pagination>
<script type="module">
  const pagination = document.querySelector("nve-pagination");
  pagination.addEventListener("change", (e) => console.log(e.target.value));
</script>
```

## Custom Select Pattern (pagination-custom-select-pattern)

Custom pagination with select dropdown for page size and navigation arrows.

```html
<nve-toolbar container="inset">
  <nve-select style="--width: 80px">
    <select aria-label="page size">
      <option value="10">1-10</option>
    </select>
  </nve-select>
  <label nve-text="label muted sm" style="width: 40px">of ~13</label>
  <nve-icon-button
    container="flat"
    icon-name="chevron"
    direction="left"
    aria-label="previous"
    disabled
  ></nve-icon-button>
  <nve-icon-button container="flat" icon-name="chevron" direction="right" aria-label="next"></nve-icon-button>
</nve-toolbar>
```

## Forms (pagination-forms)

Pagination as a form associated component that participates in form submission
and emits change, input, and step-change events. Use when page selection needs
to integrate with form data collection or server-side form handling.

```html
<form id="pagination-form" nve-layout="column gap:md">
  <nve-pagination name="page" value="1" items="100" step="10" aria-label="pagination controls"></nve-pagination>
  <nve-button>submit page 10</nve-button>
  <pre></pre>
</form>
<script type="module">
  const form = document.querySelector("form");
  const pre = document.querySelector("form pre");
  form.addEventListener("change", updateValues);
  form.addEventListener("input", updateValues);
  form.addEventListener("submit", updateValues);
  form.addEventListener("step-change", updateValues);
  function updateValues(e) {
    e.preventDefault();
    console.log(e);
    pre.innerText = JSON.stringify(
      { ...Object.fromEntries(new FormData(form)), step: form.elements.page.step },
      null,
      2,
    );
  }
</script>
```

## Page List Pattern (pagination-page-list-pattern)

Custom pagination pattern using toolbar with numbered page buttons and
navigation arrows.

```html
<nve-toolbar container="inset">
  <nve-button disabled container="flat"
    ><nve-icon name="chevron" direction="left" size="sm"></nve-icon> previous</nve-button
  >
  <nve-button container="flat" selected>1</nve-button>
  <nve-button container="flat">2</nve-button>
  <nve-button container="flat">3</nve-button>
  <!-- ... 2 more <nve-button> elements ... -->
</nve-toolbar>
```

## Skip Pattern (pagination-skip-pattern)

Enhanced pagination pattern with first/last page buttons and numbered page
navigation.

```html
<nve-toolbar container="inset">
  <nve-icon-button
    container="flat"
    icon-name="arrow-stop"
    direction="left"
    aria-label="first"
    disabled
  ></nve-icon-button>
  <nve-icon-button container="flat" icon-name="chevron" direction="left" aria-label="previous"></nve-icon-button>
  <nve-button container="flat" selected>1</nve-button>
  <nve-button container="flat">2</nve-button>
  <nve-button container="flat">3</nve-button>
  <!-- ... 1 more <nve-button> elements ... -->
  <nve-icon-button icon-name="chevron" direction="right" aria-label="next"></nve-icon-button>
  <nve-icon-button icon-name="arrow-stop" direction="right" aria-label="last"></nve-icon-button>
</nve-toolbar>
```

## Default (panel)

Panel layout with header showing session details and metadata in a collapsible
side panel.

```html
<section nve-layout="row align:space-between pad:sm">
  <div nve-theme="root">
    <nve-panel behavior-expand expanded side="left" style="width: 280px; height: 550px">
      <nve-panel-header>
        <div slot="title">Title</div>
        <div slot="subtitle"></div>
      </nve-panel-header>
      <nve-panel-content nve-layout="column gap:md">
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Release</label>
          <p nve-text="label semibold sm">RainbowBridge/08-18-2021AM/A2A</p>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">Date</label>
          <p nve-text="label semibold sm">2021-08-18</p>
        </div>
        <div nve-layout="column gap:xs">
          <label nve-text="body sm medium muted">State</label>
          <nve-badge status="finished">Indexed</nve-badge>
        </div>
        <!-- ... 4 more <div> elements ... -->
      </nve-panel-content>
    </nve-panel>
  </div>
</section>
```

## Default (password)

Password input with toggle visibility for secure credential entry and
authentication forms.

```html
<nve-password>
  <label>label</label>
  <input type="password" value="123456" />
  <nve-control-message>message</nve-control-message>
</nve-password>
```

## Dropdown (preferences-input-dropdown)

Preferences input embedded in a dropdown menu triggered from a page header
settings button.

```html
<nve-page-header>
  <nve-logo slot="prefix" size="sm">NV</nve-logo>
  <h2 slot="prefix" nve-text="heading sm">NVIDIA</h2>
  <nve-icon-button slot="suffix" icon-name="gear" size="sm" popovertarget="preferences-input"></nve-icon-button>
</nve-page-header>
<nve-dropdown id="preferences-input" position="bottom" alignment="end">
  <nve-preferences-input name="theme" value='{ "color-scheme": "dark" }'></nve-preferences-input>
</nve-dropdown>
```

## Forms (preferences-input-forms)

Preferences input integrated with form submission, displaying live JSON value
updates.

```html
<form id="preferences-input-form" nve-layout="row gap:md">
  <div nve-layout="column gap:md">
    <nve-preferences-input name="theme" value='{ "color-scheme": "light" }'></nve-preferences-input>
    <nve-button>submit</nve-button>
  </div>
  <pre></pre>
</form>
<script type="module">
  const form = document.querySelector("form");
  const preferencesInput = document.querySelector("nve-preferences-input");
  const pre = document.querySelector("form pre");
  form.addEventListener("change", renderValues);
  form.addEventListener("input", renderValues);
  form.addEventListener("submit", renderValues);
  pre.innerText = JSON.stringify(preferencesInput.value, null, 2);

  function renderValues(e) {
    e.preventDefault();
    console.log(e);
    pre.innerText = JSON.stringify(preferencesInput.value, null, 2);
  }
</script>
```

## Labeled (progress-bar-labeled)

Use a labeled progress bar with percentage display to communicate upload or task
status.

```html
<div nve-layout="column gap:xs pad:lg align:horizontal-stretch full">
  <div nve-layout="row align:space-between">
    <p nve-text="label sm">Upload Status</p>
    <p nve-text="label emphasis sm">80%</p>
  </div>
  <nve-progress-bar status="accent" value="80"></nve-progress-bar>
</div>
```

## Custom (progressive-filter-chip-custom)

Progressive filter chip with custom button trigger opening a map coordinate
picker dropdown.

```html
<nve-progressive-filter-chip closable>
  <nve-select>
    <select aria-label="dataset">
      <option>GPS</option>
      <option selected>Cellular</option>
    </select>
  </nve-select>
  <nve-select>
    <select aria-label="condition">
      <option>contains</option>
      <option>excludes</option>
    </select>
  </nve-select>
  <nve-button style="width: 190px" popovertarget="map-dropdown">37.3706254,-121.9671894</nve-button>
</nve-progressive-filter-chip>
<nve-dropdown id="map-dropdown">
  <nve-input>
    <nve-icon-button icon-name="map-pin" readonly></nve-icon-button>
    <input value="37.3706254,-121.9671894" disabled aria-label="map coordinates" />
  </nve-input>
  <img src="static/images/test-map-2.webp" width="300px" alt="non-interactive demo map" />
</nve-dropdown>
```

## Date Range (progressive-filter-chip-date-range)

Progressive filter chip with date picker inputs for filtering by date range
criteria.

```html
<nve-progressive-filter-chip>
  <nve-select>
    <select aria-label="date type">
      <option>recording date</option>
      <option>process date</option>
    </select>
  </nve-select>
  <nve-date>
    <input type="date" value="2022-05-11" aria-label="start date" />
  </nve-date>
  <nve-date>
    <input type="date" value="2022-12-07" aria-label="end date" />
  </nve-date>
</nve-progressive-filter-chip>
```

## Text Input (progressive-filter-chip-text-input)

Progressive filter chip with numeric text input for threshold-based filtering
(greater than, less than).

```html
<nve-progressive-filter-chip closable>
  <nve-select>
    <select aria-label="dataset">
      <option selected>memory</option>
      <option>CPU</option>
    </select>
  </nve-select>
  <nve-select>
    <select aria-label="condition">
      <option selected>greater than</option>
      <option>less than</option>
      <option>equal to</option>
    </select>
  </nve-select>
  <nve-input>
    <input type="number" min="0" max="100" value="50" aria-label="filter" />
  </nve-input>
</nve-progressive-filter-chip>
```

## Validation (progressive-filter-chip-validation)

Progressive filter chip with input validation states showing required field and
error styling.

```html
<div nve-layout="column gap:lg">
  <nve-progressive-filter-chip closable>
    <nve-input>
      <input type="text" value="validation" required aria-label="validation" />
      <nve-control-message error="valueMissing">required</nve-control-message>
    </nve-input>
    <nve-input>
      <input type="text" aria-label="validation" />
    </nve-input>
  </nve-progressive-filter-chip>
  <nve-progressive-filter-chip closable>
    <nve-input status="error">
      <input type="text" value="manual validation" formnovalidate aria-label="manual validation" />
    </nve-input>
    <nve-input>
      <input type="text" aria-label="validation" />
    </nve-input>
  </nve-progressive-filter-chip>
</div>
```

## Default (pulse)

Animated pulse indicator with aria-label for accessibility. Use to draw
attention to live updates, active connections, or real-time status.

```html
<div nve-layout="row align:center">
  <nve-pulse aria-label="pulse component"></nve-pulse>
</div>
```

## Default (radio)

Radio button group for mutually exclusive single-choice selection from many
options.

```html
<nve-radio-group>
  <label>label</label>
  <nve-radio>
    <label>radio 1</label>
    <input type="radio" checked />
  </nve-radio>
  <nve-radio>
    <label>radio 2</label>
    <input type="radio" />
  </nve-radio>
  <nve-radio>
    <label>radio 3</label>
    <input type="radio" />
  </nve-radio>
  <nve-control-message>message</nve-control-message>
</nve-radio-group>
```

## Default (range)

Range component for numeric value selection, providing a simple slider interface
for adjusting values within a defined range.

```html
<nve-range>
  <label>label</label>
  <input type="range" />
  <nve-control-message>message</nve-control-message>
</nve-range>
```

## Default (search)

Search input with label and message for query entry and filtering data.

```html
<nve-search>
  <label>label</label>
  <input type="search" />
  <nve-control-message>message</nve-control-message>
</nve-search>
```

## Default (select)

Select component with label, options, and message.

```html
<nve-select>
  <label>label</label>
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <nve-control-message>message</nve-control-message>
</nve-select>
```

## Default (skeleton)

Skeleton component for text content. Placeholder lines appear while content
loads.

```html
<div nve-layout="column gap:xs align:stretch">
  <nve-skeleton></nve-skeleton>
  <nve-skeleton style="width: 90%"></nve-skeleton>
  <nve-skeleton style="width: 80%"></nve-skeleton>
</div>
```

## Default (sparkline)

Sparkline from numeric array values. Use as a compact trend indicator.

```html
<nve-sparkline id="default"></nve-sparkline>
<script type="module">
  const sparkline = document.querySelector("nve-sparkline#default");
  sparkline.data = [18, 22, 20, 24, 19, 28, 25, 30];
</script>
```

## Data Grid (sparkline-data-grid)

Embed sparklines in grid cells to add compact trend context to tabular data.

```html
<nve-grid>
  <nve-grid-header>
    <nve-grid-column>Autonomy Service</nve-grid-column>
    <nve-grid-column>Safety Score</nve-grid-column>
    <nve-grid-column>Interventions / Shift</nve-grid-column>
    <!-- ... 1 more <nve-grid-column> elements ... -->
  </nve-grid-header>
  <nve-grid-row>
    <nve-grid-cell>Lane Keeping</nve-grid-cell>
    <nve-grid-cell>
      <nve-sparkline
        aria-label="Lane Keeping 30 day safety score trend"
        mark="area"
        status="success"
        min="0"
        max="100"
        data="[86, 87, 86, 88, 89, 90, 92, 93]"
        size="md"
      ></nve-sparkline>
    </nve-grid-cell>
    <nve-grid-cell>
      <nve-sparkline
        aria-label="Lane Keeping interventions per shift"
        mark="column"
        status="success"
        min="0"
        max="50"
        data="[12, 11, 12, 10, 9, 8, 7, 6]"
        size="md"
      ></nve-sparkline>
    </nve-grid-cell>
    <!-- ... 1 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>Object Detection</nve-grid-cell>
    <nve-grid-cell>
      <nve-sparkline
        aria-label="Object Detection 30 day safety score trend"
        mark="area"
        status="warning"
        min="0"
        max="100"
        data="[76, 88, 72, 79, 85, 70, 83, 74]"
        size="md"
      ></nve-sparkline>
    </nve-grid-cell>
    <nve-grid-cell>
      <nve-sparkline
        aria-label="Object Detection interventions per shift"
        mark="column"
        status="warning"
        min="0"
        max="50"
        data="[18, 20, 17, 19, 20, 21, 19, 22]"
        size="md"
      ></nve-sparkline>
    </nve-grid-cell>
    <!-- ... 1 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
  <nve-grid-row>
    <nve-grid-cell>Path Planning</nve-grid-cell>
    <nve-grid-cell>
      <nve-sparkline
        aria-label="Path Planning 30 day safety score trend"
        mark="area"
        status="danger"
        min="0"
        max="100"
        data="[58, 54, 49, 45, 40, 36, 31, 27]"
        size="md"
      ></nve-sparkline>
    </nve-grid-cell>
    <nve-grid-cell>
      <nve-sparkline
        aria-label="Path Planning interventions per shift"
        mark="column"
        status="danger"
        min="0"
        max="50"
        data="[24, 26, 29, 31, 34, 36, 39, 42]"
        size="md"
      ></nve-sparkline>
    </nve-grid-cell>
    <!-- ... 1 more <nve-grid-cell> elements ... -->
  </nve-grid-row>
</nve-grid>
```

## Default Size (sparkline-default-size)

Without a size attribute, height scales with the parent text size for
typographic alignment.

```html
<div id="inline-sparkline-sizes" nve-layout="column gap:md">
  <div nve-layout="row gap:sm" nve-text="heading">
    <span>heading</span>
    <nve-sparkline></nve-sparkline>
  </div>
  <div nve-layout="row gap:sm" nve-text="body">
    <span>body</span>
    <nve-sparkline></nve-sparkline>
  </div>
  <div nve-layout="row gap:sm" nve-text="label sm">
    <span>label sm</span>
    <nve-sparkline></nve-sparkline>
  </div>
</div>
<script type="module">
  const sparklines = document.querySelectorAll("#inline-sparkline-sizes > div[nve-text] > nve-sparkline");
  for (const sparkline of sparklines) {
    sparkline.data = [9, 12, 11, 13, 15, 14, 16];
  }
</script>
```

## Default (steps)

Interactive step indicator with status colors for multi-step workflows. Use for
wizards, onboarding flows, or process tracking where users can navigate between
steps.

```html
<nve-steps behavior-select>
  <nve-steps-item status="success">Step 1</nve-steps-item>
  <nve-steps-item status="danger">Step 2</nve-steps-item>
  <nve-steps-item selected>Step 3</nve-steps-item>
  <!-- ... 2 more <nve-steps-item> elements ... -->
</nve-steps>
```

## Spacing (styles-layout-spacing)

```html
<style>
  nve-card {
    min-width: 60px;
    min-height: 60px;
  }
</style>
<div nve-layout="column gap:lg align:stretch">
  <h2 nve-text="heading">Space Around</h2>
  <section nve-layout="row gap:md align:space-around">
    <div nve-layout="row gap:sm">
      <nve-search>
        <input placeholder="Search" type="search" aria-label="Search" />
      </nve-search>
    </div>
    <div nve-layout="row gap:sm">
      <nve-icon-button icon-name="filter"></nve-icon-button>
      <nve-icon-button icon-name="sort-descending"></nve-icon-button>
    </div>
  </section>
  <h2 nve-text="heading">Space Between</h2>
  <section nve-layout="row gap:md align:space-between">
    <div nve-layout="row gap:sm">
      <nve-card></nve-card>
      <nve-card></nve-card>
    </div>
    <div nve-layout="row gap:sm">
      <nve-card></nve-card>
      <nve-card></nve-card>
    </div>
  </section>
  <h2 nve-text="heading">Space Between + Full</h2>
  <section nve-layout="row gap:md align:space-between">
    <div nve-layout="row full gap:sm">
      <nve-search>
        <input placeholder="Search" type="search" aria-label="Search" />
      </nve-search>
    </div>
    <div nve-layout="row gap:sm">
      <nve-icon-button icon-name="filter"></nve-icon-button>
      <nve-icon-button icon-name="sort-descending"></nve-icon-button>
    </div>
  </section>
  <h2 nve-text="heading">Space Evenly</h2>
  <section nve-layout="row gap:md align:space-evenly">
    <div nve-layout="row gap:sm">
      <nve-card></nve-card>
      <nve-card></nve-card>
    </div>
    <div nve-layout="row gap:sm">
      <nve-card></nve-card>
      <nve-card></nve-card>
    </div>
  </section>
  <h2 nve-text="heading">Nested Rows</h2>
  <section nve-layout="row gap:md">
    <div nve-layout="row gap:sm">
      <nve-card></nve-card>
      <nve-card></nve-card>
    </div>
    <div nve-layout="row gap:sm">
      <nve-card></nve-card>
      <nve-card></nve-card>
    </div>
  </section>
  <h2 nve-text="heading">Rows</h2>
  <section nve-layout="row gap:sm">
    <nve-card></nve-card>
    <nve-card></nve-card>
  </section>
</div>
```

## Transforms (styles-typography-transforms)

Text transformation utilities for case changes and truncation to handle overflow
gracefully.

```html
<div nve-layout="column gap:lg">
  <p nve-text="body uppercase">uppercase</p>
  <p nve-text="body lowercase">LOWERCASE</p>
  <p nve-text="body capitalize">capitalize</p>
  <!-- ... 1 more <p> elements ... -->
</div>
```

## Default (switch)

Toggle switch for binary on/off controls and feature activation.

```html
<nve-switch>
  <label>label</label>
  <input type="checkbox" />
</nve-switch>
```

## Default (tabs)

Tabs group component for organizing content into selectable sections with
disabled state support.

```html
<nve-tabs-group id="tab-group-default">
  <nve-tabs>
    <nve-tabs-item selected command="--toggle" commandfor="tab-group-default" value="overview">Overview</nve-tabs-item>
    <nve-tabs-item command="--toggle" commandfor="tab-group-default" value="details">Details</nve-tabs-item>
    <nve-tabs-item command="--toggle" commandfor="tab-group-default" value="settings">Settings</nve-tabs-item>
  </nve-tabs>
  <div slot="overview">overview content</div>
  <div slot="details">details content</div>
  <div slot="settings">settings content</div>
</nve-tabs-group>
```

## External Controls (tabs-external-controls)

Drive the same tabs group from external buttons when layouts need tabs and
secondary actions to stay in sync with structured panel content.

```html
<div nve-layout="column gap:lg">
  <nve-tabs-group id="tab-group-controls">
    <nve-tabs>
      <nve-tabs-item selected command="--toggle" commandfor="tab-group-controls" value="overview"
        >Overview</nve-tabs-item
      >
      <nve-tabs-item command="--toggle" commandfor="tab-group-controls" value="details">Details</nve-tabs-item>
      <nve-tabs-item command="--toggle" commandfor="tab-group-controls" value="settings">Settings</nve-tabs-item>
    </nve-tabs>
    <div slot="overview">
      <nve-card style="width: 100%; min-width: 320px">
        <nve-card-header>
          <div nve-layout="column gap:xs">
            <h2 nve-text="heading sm bold">Overview</h2>
            <p nve-text="body sm muted">Quick status for the current tab group.</p>
          </div>
        </nve-card-header>
        <nve-card-content>
          <dl nve-layout="grid gap:sm">
            <dt nve-layout="span:4" nve-text="body muted medium">State</dt>
            <dd nve-layout="span:8" nve-text="body">Overview is active</dd>
            <dt nve-layout="span:4" nve-text="body muted medium">Signal</dt>
            <dd nve-layout="span:8" nve-text="body">Use this tab for a summary of the current workflow</dd>
            <dt nve-layout="span:4" nve-text="body muted medium">Tip</dt>
            <dd nve-layout="span:8" nve-text="body">Pair it with external controls for quick switching</dd>
          </dl>
        </nve-card-content>
      </nve-card>
    </div>
    <div slot="details">
      <nve-card style="width: 100%; min-width: 320px">
        <nve-card-header>
          <div nve-layout="column gap:xs">
            <h2 nve-text="heading sm bold">Details</h2>
            <p nve-text="body sm muted">Deeper context for follow-up tasks and implementation notes.</p>
          </div>
        </nve-card-header>
        <nve-card-content>
          <dl nve-layout="grid gap:sm">
            <dt nve-layout="span:4" nve-text="body muted medium">State</dt>
            <dd nve-layout="span:8" nve-text="body">Details are available on demand</dd>
            <dt nve-layout="span:4" nve-text="body muted medium">Signal</dt>
            <dd nve-layout="span:8" nve-text="body">Use this tab when readers need extra context</dd>
            <dt nve-layout="span:4" nve-text="body muted medium">Tip</dt>
            <dd nve-layout="span:8" nve-text="body">Keep the content specific to the selected tab</dd>
          </dl>
        </nve-card-content>
      </nve-card>
    </div>
    <div slot="settings">
      <nve-card style="width: 100%; min-width: 320px">
        <nve-card-header>
          <div nve-layout="column gap:xs">
            <h2 nve-text="heading sm bold">Settings</h2>
            <p nve-text="body sm muted">Preferences and coordination notes for the shared tab group.</p>
          </div>
        </nve-card-header>
        <nve-card-content>
          <dl nve-layout="grid gap:sm">
            <dt nve-layout="span:4" nve-text="body muted medium">State</dt>
            <dd nve-layout="span:8" nve-text="body">Settings remain in sync with the selected value</dd>
            <dt nve-layout="span:4" nve-text="body muted medium">Signal</dt>
            <dd nve-layout="span:8" nve-text="body">Useful for configuration and admin actions</dd>
            <dt nve-layout="span:4" nve-text="body muted medium">Tip</dt>
            <dd nve-layout="span:8" nve-text="body">Use external buttons when the layout needs extra actions</dd>
          </dl>
        </nve-card-content>
      </nve-card>
    </div>
  </nve-tabs-group>
  <div nve-layout="row gap:xs">
    <nve-button command="--toggle" commandfor="tab-group-controls" value="overview">overview</nve-button>
    <nve-button command="--toggle" commandfor="tab-group-controls" value="details">details</nve-button>
    <nve-button command="--toggle" commandfor="tab-group-controls" value="settings">settings</nve-button>
  </div>
</div>
```

## Default (tag)

Tag component for interactive labeling and categorizing of content, providing
clear visual organization and metadata display.

```html
<nve-tag>topic-tag</nve-tag>
```

## Default (textarea)

Multi-line text input for longer content entry like comments, descriptions, or
messages.

```html
<nve-textarea>
  <label>label</label>
  <textarea></textarea>
  <nve-control-message>message</nve-control-message>
</nve-textarea>
```

## Default (time)

Time input with label, min/max time constraints, and help message

```html
<nve-time>
  <label>label</label>
  <input type="time" min="09:00" max="18:00" value="12:00" />
  <nve-control-message>message</nve-control-message>
</nve-time>
```

## Default (toast)

Toast with auto-dismiss for brief, non-critical feedback messages. Use toasts
for lightweight confirmations like "Saved", "Copied", or "Action complete" that
inform users without requiring interaction or disrupting workflow.

```html
<nve-toast id="toast" close-timeout="1500">hello there</nve-toast>
<nve-button popovertarget="toast">button</nve-button>
```

## Default (toggletip)

Toggletip requiring click to open and close. Unlike tooltips that appear on
hover, use toggletips for interactive content, extra details, or when users need
time to read or interact with the popover content.

```html
<nve-toggletip id="toggletip">hello there</nve-toggletip>
<nve-button popovertarget="toggletip">button</nve-button>
```

## Default (toolbar)

Toolbar with action buttons and a settings icon in the suffix slot.

```html
<nve-toolbar>
  <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 icon-name="gear" slot="suffix" aria-label="settings"></nve-icon-button>
</nve-toolbar>
```

## Container Flat (toolbar-container-flat)

Toolbar with flat container styling for a more subtle appearance.

```html
<nve-toolbar container="flat">
  <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>
```

## Container Full (toolbar-container-full)

Toolbar with full container styling that spans the entire width.

```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>
```

## Container Inset (toolbar-container-inset)

Toolbar with inset container styling and constrained width for contained
layouts.

```html
<nve-toolbar container="inset" style="--width: 300px">
  <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 icon-name="gear" slot="suffix" aria-label="settings"></nve-icon-button>
</nve-toolbar>
```

## Groups (toolbar-groups)

Complex toolbar with grouped controls including select dropdowns, button groups,
and dividers for text editing scenarios.

```html
<nve-toolbar>
  <nve-select fit-text>
    <select aria-label="element type">
      <option value="1">Heading 1</option>
      <option value="2">Heading 2</option>
      <option value="p">Paragraph</option>
    </select>
    <div slot="option-1">
      <span nve-text="heading">Heading 1</span>
    </div>
    <div slot="option-2">
      <span nve-text="heading sm">Heading 2</span>
    </div>
    <div slot="option-3">
      <span nve-text="body sm">Paragraph</span>
    </div>
  </nve-select>
  <nve-divider></nve-divider>
  <nve-button-group>
    <nve-icon-button pressed icon-name="bars-3-bottom-left"></nve-icon-button>
    <nve-icon-button icon-name="bars-3-bottom-right"></nve-icon-button>
    <nve-icon-button icon-name="bars-4"></nve-icon-button>
  </nve-button-group>
  <nve-divider></nve-divider>
  <nve-button-group>
    <nve-icon-button icon-name="bold" size="sm"></nve-icon-button>
    <nve-icon-button icon-name="italic" size="sm"></nve-icon-button>
    <nve-icon-button icon-name="strikethrough" size="sm"></nve-icon-button>
  </nve-button-group>
  <nve-divider></nve-divider>
  <nve-button-group>
    <nve-icon-button icon-name="code"></nve-icon-button>
    <nve-icon-button icon-name="fork"></nve-icon-button>
    <nve-icon-button icon-name="merge"></nve-icon-button>
  </nve-button-group>
  <nve-button slot="suffix" container="flat">Save</nve-button>
</nve-toolbar>
```

## Status (toolbar-status)

Toolbar with status styling showing selection state with accent status and
default status variants for bulk actions.

```html
<div nve-layout="column gap:lg align:horizontal-stretch full">
  <nve-toolbar status="accent">
    <nve-icon-button icon-name="cancel" slot="prefix"></nve-icon-button>
    <p nve-text="body">123 selected</p>
    <nve-button slot="suffix">delete</nve-button>
    <nve-icon-button icon-name="more-actions" slot="suffix"></nve-icon-button>
  </nve-toolbar>
  <nve-toolbar>
    <nve-icon-button icon-name="cancel" slot="prefix"></nve-icon-button>
    <p nve-text="body">123 selected</p>
    <nve-button slot="suffix">delete</nve-button>
    <nve-icon-button icon-name="more-actions" slot="suffix"></nve-icon-button>
  </nve-toolbar>
</div>
```

## Vertical (toolbar-vertical)

Vertical toolbar orientation with button groups and dividers for sidebar
layouts.

```html
<nve-toolbar orientation="vertical">
  <nve-button-group>
    <nve-icon-button pressed icon-name="bars-3-bottom-left"></nve-icon-button>
    <nve-icon-button icon-name="bars-3-bottom-right"></nve-icon-button>
    <nve-icon-button icon-name="bars-4"></nve-icon-button>
  </nve-button-group>
  <nve-divider></nve-divider>
  <nve-button-group>
    <nve-icon-button icon-name="bold" size="sm"></nve-icon-button>
    <nve-icon-button icon-name="italic" size="sm"></nve-icon-button>
    <nve-icon-button icon-name="strikethrough"></nve-icon-button>
  </nve-button-group>
</nve-toolbar>
```

## Default (tooltip)

Tooltip triggered by popovertarget attribute. Use for providing brief,
contextual information on hover or focus without cluttering the interface.

```html
<nve-tooltip id="tooltip">hello there</nve-tooltip>
<nve-button interestfor="tooltip">button</nve-button>
```

## Default (tree)

Tree component with expandable nodes, providing hierarchical data display and
navigation for structured content organization.

```html
<nve-tree behavior-expand>
  <nve-tree-node expanded>
    node 1
    <nve-tree-node>node 1-1</nve-tree-node>
    <nve-tree-node>node 1-2</nve-tree-node>
    <nve-tree-node>
      node 1-3
      <nve-tree-node>node 1-3-1</nve-tree-node>
      <nve-tree-node>node 1-3-2</nve-tree-node>
      <nve-tree-node>node 1-3-3</nve-tree-node>
    </nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    node 2
    <nve-tree-node>node 2-1</nve-tree-node>
    <nve-tree-node>node 2-2</nve-tree-node>
    <nve-tree-node>node 2-3</nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    node 3
    <nve-tree-node>node 3-1</nve-tree-node>
    <nve-tree-node>node 3-2</nve-tree-node>
    <nve-tree-node>
      node 3-3
      <nve-tree-node>node 3-3-1</nve-tree-node>
      <nve-tree-node>node 3-3-2</nve-tree-node>
      <nve-tree-node>node 3-3-3</nve-tree-node>
    </nve-tree-node>
  </nve-tree-node>
</nve-tree>
```

## Node Content (tree-node-content)

Tree with rich node content including forms, controls, and interactive elements,
enabling complex data management within hierarchical structures.

```html
<nve-tree selectable="multi" border behavior-expand behavior-select>
  <nve-tree-node expanded>
    text content
    <nve-tree-node>
      <a href="." nve-text="link">node link</a>
    </nve-tree-node>
    <nve-tree-node> inline content <nve-dot status="success" size="sm"></nve-dot> </nve-tree-node>
    <nve-tree-node>
      <div nve-text="body sm muted" nve-layout="pad-bottom:xs">block</div>
      <p nve-text="body sm">content</p>
    </nve-tree-node>
    <!-- ... 5 more <nve-tree-node> elements ... -->
  </nve-tree-node>
</nve-tree>
```

## Default (week)

Week picker input for selecting specific weeks in a year for scheduling and
planning.

```html
<nve-week>
  <label>label</label>
  <input type="week" />
  <nve-control-message>message</nve-control-message>
</nve-week>
```