diff --git a/.agents/skills/elements/references/migration.md b/.agents/skills/elements/references/migration.md index dbb6a2d4a1..6dacaa6bb3 100644 --- a/.agents/skills/elements/references/migration.md +++ b/.agents/skills/elements/references/migration.md @@ -7,8 +7,8 @@ Instructions for migrating a project from deprecated Elements APIs to the latest - 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. +- The initial public `0.x` packages were transitional preview releases. Stable public releases started at `2.0.0`, following the internal `1.x` generation. +- Use stable `2.x` versions instead of transitional `0.x` packages or old internal versions. 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 @@ -117,12 +117,14 @@ Before: After: +Use stable `2.x` versions. The `^2.0.0` ranges accept later `2.x` releases and exclude transitional `0.x` versions. Run `nve packages.list` to check published versions before updating. + ```json { "dependencies": { - "@nvidia-elements/core": "0.x", - "@nvidia-elements/themes": "0.x", - "@nvidia-elements/styles": "0.x" + "@nvidia-elements/core": "^2.0.0", + "@nvidia-elements/themes": "^2.0.0", + "@nvidia-elements/styles": "^2.0.0" } } ``` diff --git a/projects/core/.visual/tree.slotted-link-after.png b/projects/core/.visual/tree.slotted-link-after.png new file mode 100644 index 0000000000..55c4510c79 --- /dev/null +++ b/projects/core/.visual/tree.slotted-link-after.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b95a293ff84b9af16cb2dee14ca99fa2acde6886f97a7ffa9b0fa17be675483f +size 649 diff --git a/projects/core/src/tree/tree-node.css b/projects/core/src/tree/tree-node.css index 7b30c392bf..635eb32cd7 100644 --- a/projects/core/src/tree/tree-node.css +++ b/projects/core/src/tree/tree-node.css @@ -57,6 +57,7 @@ slot:not(:has-slotted) { margin-inline-start: var(--nve-ref-space-xxxs); padding: var(--nve-ref-size-200) var(--nve-ref-size-200) var(--nve-ref-size-200) var(--nve-ref-size-100); min-height: var(--min-height); + position: relative; & slot { width: fit-content; @@ -68,7 +69,6 @@ slot:not(:has-slotted) { min-width: 0; flex-shrink: 1; display: block; - position: relative; } } diff --git a/projects/core/src/tree/tree.test.visual.ts b/projects/core/src/tree/tree.test.visual.ts index 6d364a2f7e..f06e3c0f49 100644 --- a/projects/core/src/tree/tree.test.visual.ts +++ b/projects/core/src/tree/tree.test.visual.ts @@ -66,6 +66,30 @@ describe('tree visual', () => { ); expect(report.maxDiffPercentage).toBeLessThan(1); }); + + test('slotted link ::after should fill visible node space', async () => { + const report = await visualRunner.render( + 'tree.slotted-link-after', + ` + + + + + + •︎•︎•︎•︎•︎•︎ + + + ` + ); + expect(report.maxDiffPercentage).toBeLessThan(1); + }); }); function template(theme: '' | 'dark' = '') { diff --git a/projects/internals/patterns/src/agent.examples.ts b/projects/internals/patterns/src/agent.examples.ts index 9999a465d9..c624a0c7d4 100644 --- a/projects/internals/patterns/src/agent.examples.ts +++ b/projects/internals/patterns/src/agent.examples.ts @@ -8,18 +8,23 @@ import '@nvidia-elements/core/accordion/define.js'; import '@nvidia-elements/core/alert/define.js'; import '@nvidia-elements/core/badge/define.js'; import '@nvidia-elements/core/button/define.js'; +import '@nvidia-elements/core/card/define.js'; import '@nvidia-elements/core/checkbox/define.js'; import '@nvidia-elements/core/format-number/define.js'; import '@nvidia-elements/core/grid/define.js'; import '@nvidia-elements/core/icon-button/define.js'; import '@nvidia-elements/core/icon/define.js'; +import '@nvidia-elements/core/input/define.js'; import '@nvidia-elements/core/progress-bar/define.js'; import '@nvidia-elements/core/progress-ring/define.js'; +import '@nvidia-elements/core/range/define.js'; import '@nvidia-elements/core/select/define.js'; import '@nvidia-elements/core/steps/define.js'; +import '@nvidia-elements/core/switch/define.js'; import '@nvidia-elements/core/tag/define.js'; import '@nvidia-elements/core/textarea/define.js'; import '@nvidia-elements/core/toggletip/define.js'; +import '@nvidia-elements/core/tooltip/define.js'; export default { title: 'Patterns/Agent', @@ -35,13 +40,13 @@ export const Citation = { return html`

For the AMR-07 aisle 3 review, pair Isaac Sim robot simulation with the Nav2 navigation framework.

- + GitHub
-

Source

+

Sources

Isaac Sim

@@ -230,6 +235,153 @@ export const Queue = { ` }; +/** + * @summary Agent workflow combining task progress, supporting sources, queued requests, and a reasoning summary. Use to keep the current work and its context together while an assistant reviews navigation behavior. + * @tags pattern + */ +export const Workflows = { + render: () => html` + + + + +

Review AMR-07 navigation

+ 2 / 4 + + +
+ + + Task + Status + + + +
+ Inspect lidar timestamps + perception/lidar.py +
+ + Complete + + + + +
+ Review local map updates + config/navigation.yaml +
+ + Complete + + + + +
+ Replay the aisle 3 route + tests/test_navigation.py +
+ + Running + + + + +
+ Summarize the replay + AMR-07 · simulation report +
+ + Pending + + + +
+ + + + + +

Navigation references

+ 3 sources + + + + + Source + Publisher / topic + + + + Isaac Sim + + + NVIDIA · Robot simulation + + + + + Nav2 + + + ROS 2 · Robot navigation + + + + + Isaac ROS Visual SLAM + + + NVIDIA · Visual localization + + + + + + + + +

Request queue

+ 3 queued + + + + + Request + Context + + + Compare AMR-07 sensor health + mission.log + + + Review the aisle 3 route + route.yaml + + + Summarize the docking replay + dock.log + + + + + + + +

Route review · 8

+ Complete + + +
+

AMR-07 pauses near aisle 3 when a lidar scan arrives after the local map update. The mission log shows a timestamp mismatch at the same waypoint. Replay the recorded sensor data in simulation and compare timestamps before changing navigation settings.

+ Scope: aisle 3 replay · AMR-07 +
+ + + + ` +}; + /** * @summary Prompt composer with context tags in the textarea prefix and attachment, search, model, and submit controls in its suffix. Use for assistant input to keep message context and actions together. * @tags pattern @@ -239,7 +391,7 @@ export const PromptInput = { return html`
- + mission.log robot.yaml
@@ -292,25 +444,25 @@ export const PromptInput = { export const Context = { render: () => html` - Context Usage · 31.3% + Context Usage · 31.3% - + -

Session Context

+

Context Usage · 31.3%
-

40000 / 128000 tokens

-
Input · logs
+
Input
24000
-
Output · plan
+
Output
8000
Reasoning
4000
-
Cached input
-
4000
+
Cache Hit Rate
+
95%
+

40000 / 128000 tokens used

 ` @@ -356,7 +508,7 @@ export const ChainOfThought = { */ export const Tools = { render: () => html` - + @@ -406,7 +558,7 @@ export const Tools = {

Read robot state

- Completed + Complete
@@ -478,3 +630,117 @@ export const Tools = { ` }; + +/** + * @summary Model settings with streaming and reasoning controls, sampling parameters, and token limits. Use synchronized sliders and numeric inputs with contextual help to configure model responses. + * @tags pattern + */ +export const ModelSettings = { + render() { + return html` + +

Configure response generation, sampling parameters, and token limits.

+
+ + + + + + + + + + +
+
+ + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + +
+ + + + + + + + Show mission summaries as text arrives instead of waiting for the complete response. + + + Enable the model's reasoning mode for mission analysis and simulation reviews. Availability depends on the selected model. + + + Controls variation in generated mission summaries. Lower values favor more consistent wording when comparing simulation runs. + + + Limits token sampling by cumulative probability. Use to adjust the variety of explanations in a robot or vehicle scenario review. + + + Caps the generated response length, including mission analysis and suggested next checks. The available limit depends on the model. + + + Total token budget for mission logs, retrieved references, conversation, and the generated response. Keep this within the selected model's supported context window. + + + `; + } +}; diff --git a/projects/internals/patterns/src/code.examples.ts b/projects/internals/patterns/src/code.examples.ts index 623e70b6d8..628e1fa35e 100644 --- a/projects/internals/patterns/src/code.examples.ts +++ b/projects/internals/patterns/src/code.examples.ts @@ -12,7 +12,9 @@ import '@nvidia-elements/core/format-datetime/define.js'; import '@nvidia-elements/core/grid/define.js'; import '@nvidia-elements/core/icon/define.js'; import '@nvidia-elements/core/password/define.js'; +import '@nvidia-elements/core/switch/define.js'; import '@nvidia-elements/core/tree/define.js'; +import '@nvidia-elements/monaco/diff-editor/define.js'; export default { title: 'Patterns/Code', @@ -170,6 +172,43 @@ export const FileTree = { ` }; +/** + * @summary Expandable changed-file tree with additions and deletions aligned beside each file. Use during Git reviews to scan the scope of changes without losing the repository hierarchy. + * @tags pattern + */ +export const FileTreeGitDiff = { + render: () => html` + + + src + + robot_state.py +
+ +18 + −6 +
+ + + navigation + + planner.py +
+ +32 + −12 +
+ + + + + robot.yaml +
+ +9 +
+ + + ` +}; + /** * @summary Commit details with author, copyable hash, and expandable file changes. Use after an assistant edits a repository to show the scope of a change and distinguish added, modified, deleted, and renamed files. * @tags pattern @@ -274,3 +313,83 @@ export const EnvironmentVariables = { ` }; + +/** + * @summary Git change review for a warehouse robot navigation configuration with branch context and read-only comparisons. Use before merging robot behavior changes to inspect revised parameters in side-by-side or inline views. + * @tags pattern + */ +export const GitReviewDiff = { + render() { + return html` +
+
+ config/warehouse-navigation.json + + + + +
+ +
+ + `; + } +}; diff --git a/projects/markdown/src/markdown/markdown.examples.ts b/projects/markdown/src/markdown/markdown.examples.ts index eec79f7979..c10be762fa 100644 --- a/projects/markdown/src/markdown/markdown.examples.ts +++ b/projects/markdown/src/markdown/markdown.examples.ts @@ -2,6 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import { html } from 'lit'; +import '@nvidia-elements/core/button/define.js'; import '@nvidia-elements/markdown/markdown/define.js'; import '@nvidia-elements/markdown/styles/index.css'; @@ -249,12 +250,15 @@ This content has HTML mixed with markdown. }; /** - * @summary Progressive streaming demo simulating AI assistant responses with block-by-block content rendering + * @summary Progressive AI response streaming with a restart action. Use to replay content from the beginning and inspect how markdown renders as new blocks arrive. * @tags test-case */ -export const JavaScriptDriven = { +export const StreamingContent = { render: () => html` -
+
+
+ Restart stream +
` diff --git a/projects/site/public/static/themes/classic.css b/projects/site/public/static/themes/classic.css index 38f47ac4a8..d88982111f 100644 --- a/projects/site/public/static/themes/classic.css +++ b/projects/site/public/static/themes/classic.css @@ -6,7 +6,6 @@ --nve-config-color-scheme-light: true; --nve-config-experimental: true; --nve-config-theme-classic: true; - /* eslint-disable-line @nve/lint/no-unknown-css-variable */ --nve-ref-color-neutral-100: oklch(99.1% 0 none); --nve-ref-color-neutral-200: oklch(98.1% 0 none); --nve-ref-color-neutral-300: oklch(95.3% 0 none); @@ -19,6 +18,19 @@ --nve-ref-color-neutral-1000: oklch(60.3% 0 none); --nve-ref-color-neutral-1100: oklch(50.3% 0 none); --nve-ref-color-neutral-1200: oklch(24.3% 0 none); + --nve-ref-color-gray-denim-100: oklch(99.1% 0 none); + --nve-ref-color-gray-denim-200: oklch(98.1% 0 none); + --nve-ref-color-gray-denim-300: oklch(95.3% 0 none); + --nve-ref-color-gray-denim-400: oklch(93% 0 none); + --nve-ref-color-gray-denim-500: oklch(90.8% 0 none); + --nve-ref-color-gray-denim-600: oklch(88.4% 0 none); + --nve-ref-color-gray-denim-700: oklch(85.1% 0 none); + --nve-ref-color-gray-denim-800: oklch(79.1% 0 none); + --nve-ref-color-gray-denim-900: oklch(63.01% 0 0); + --nve-ref-color-gray-denim-1000: oklch(60.3% 0 none); + --nve-ref-color-gray-denim-1100: oklch(50.3% 0 none); + --nve-ref-color-gray-denim-1200: oklch(24.3% 0 none); + --nve-ref-border-radius-lg: 16px; --nve-ref-shadow-100: 0 1px 1px rgb(0 0 0 / 0.06), 0 2px 2px rgb(0 0 0 / 0.05), 0 4px 4px rgb(0 0 0 / 0.04); --nve-ref-shadow-200: 0 2px 2px rgb(0 0 0 / 0.06), 0 4px 4px rgb(0 0 0 / 0.05), 0 8px 8px rgb(0 0 0 / 0.04); @@ -43,7 +55,7 @@ var(--nve-ref-color-scheme-inverse) 5.3%); --nve-sys-layer-container-accent-background: color-mix(in oklch, var(--nve-sys-layer-container-background), - var(--nve-ref-color-scheme-inverse) 5.3%); + var(--nve-ref-color-scheme-inverse) 2.3%); --nve-sys-layer-overlay-accent-background: color-mix(in oklch, var(--nve-sys-layer-overlay-background), var(--nve-ref-color-scheme-inverse) 5.3%); @@ -273,10 +285,6 @@ --gap: var(--nve-ref-space-xxs); } - nve-badge:not([container]) { - --border: var(--nve-ref-border-width-sm) solid var(--state-color-base); - } - nve-badge:not([status], [color]) { --state-color-base: var(--nve-sys-support-accent-color); } @@ -940,8 +948,7 @@ --nve-config-color-scheme-dark: true; --nve-config-experimental: true; --nve-config-theme-classic-dark: true; - /* eslint-disable-line @nve/lint/no-unknown-css-variable */ - --nve-ref-color-neutral-100: oklch(10% 0 0); + --nve-ref-color-neutral-100: oklch(0% 0 0); --nve-ref-color-neutral-200: oklch(20.02% 0 0); --nve-ref-color-neutral-300: oklch(25.2% 0 0); --nve-ref-color-neutral-400: oklch(28.09% 0 0); @@ -953,6 +960,19 @@ --nve-ref-color-neutral-1000: oklch(77.31% 0 0); --nve-ref-color-neutral-1100: oklch(85.45% 0 0); --nve-ref-color-neutral-1200: oklch(90.67% 0 0); + --nve-ref-color-gray-denim-100: oklch(0% 0 0); + --nve-ref-color-gray-denim-200: oklch(20.02% 0 0); + --nve-ref-color-gray-denim-300: oklch(25.2% 0 0); + --nve-ref-color-gray-denim-400: oklch(28.09% 0 0); + --nve-ref-color-gray-denim-500: oklch(31.32% 0 0); + --nve-ref-color-gray-denim-600: oklch(35.23% 0 0); + --nve-ref-color-gray-denim-700: oklch(40.17% 0 0); + --nve-ref-color-gray-denim-800: oklch(49.26% 0 0); + --nve-ref-color-gray-denim-900: oklch(56.24% 0 0); + --nve-ref-color-gray-denim-1000: oklch(77.31% 0 0); + --nve-ref-color-gray-denim-1100: oklch(85.45% 0 0); + --nve-ref-color-gray-denim-1200: oklch(90.67% 0 0); + --nve-ref-color-scheme-base: var(--nve-ref-color-black); --nve-ref-color-scheme-inverse: var(--nve-ref-color-white); diff --git a/projects/site/src/_11ty/layouts/common.js b/projects/site/src/_11ty/layouts/common.js index 2e2a7f95f4..f6f41e3a17 100644 --- a/projects/site/src/_11ty/layouts/common.js +++ b/projects/site/src/_11ty/layouts/common.js @@ -489,13 +489,22 @@ export function renderGlobalsScript(data = { disableTheme: false }) { } export function renderBasePageHeader(data) { + const isCatalogPage = [ + '/docs/elements/', + '/docs/code/', + '/docs/markdown/', + '/docs/media/', + '/docs/monaco/', + '/docs/viewport/' + ].some(path => data.page.url.startsWith(path)); + return /* html */ ` NV NVIDIA Elements - Catalog + Catalog ${ELEMENTS_PLAYGROUND_BASE_URL ? /* html */ `Playground` : ''} - Starters + Starters GitHub System Themes diff --git a/projects/site/src/_11ty/layouts/docs.11ty.js b/projects/site/src/_11ty/layouts/docs.11ty.js index c19d9d2b5c..15326f177d 100644 --- a/projects/site/src/_11ty/layouts/docs.11ty.js +++ b/projects/site/src/_11ty/layouts/docs.11ty.js @@ -70,13 +70,6 @@ export async function render(data) { ${renderBasePageHeader(data)} - - - - ${renderDocsNav(data)} - - - ${ data.tag ? ` @@ -129,6 +122,13 @@ export async function render(data) { ${data.tag && !data.hideStatus && !(data.page.url.includes('api') || data.page.url.includes('examples')) ? `${elementStatus(data.tag)}` : ''}
+ + + + ${renderDocsNav(data)} + + +