From e41561304b2fd84a276bd325125afeb107e52691 Mon Sep 17 00:00:00 2001 From: Cory Rylan Date: Thu, 30 Jul 2026 16:09:04 -0500 Subject: [PATCH 1/4] chore(ci): update metadata and test coverage report Signed-off-by: Cory Rylan --- projects/code/package.json | 8 ++++++-- projects/core/package.json | 6 +++++- projects/core/src/grid/grid.test.ts | 5 +++++ projects/forms/package.json | 8 ++++++-- projects/internals/metadata/static/tests.json | 4 ++-- projects/markdown/package.json | 7 ++++++- projects/media/package.json | 8 ++++++-- projects/monaco/package.json | 6 +++++- projects/themes/package.json | 6 +++++- 9 files changed, 46 insertions(+), 12 deletions(-) diff --git a/projects/code/package.json b/projects/code/package.json index 79bf9d37f..8313755b7 100644 --- a/projects/code/package.json +++ b/projects/code/package.json @@ -6,9 +6,13 @@ }, "description": "Code authoring related components. Providing syntax-highlighted code blocks with support for multiple programming languages.", "keywords": [ + "nvidia", "web-components", - "syntax-highlight", - "code-blocks" + "custom-elements", + "code-blocks", + "syntax-highlighting", + "highlight.js", + "lit" ], "homepage": "https://NVIDIA.github.io/elements/", "repository": { diff --git a/projects/core/package.json b/projects/core/package.json index efd7d9261..ba28fcaf2 100644 --- a/projects/core/package.json +++ b/projects/core/package.json @@ -6,9 +6,13 @@ }, "description": "The Design Language for AI/ML Factories Building at the Speed of Light. Provides a set of accessible and themeable UI elements.", "keywords": [ + "nvidia", "web-components", + "custom-elements", "design-system", - "ui-components" + "ui-components", + "accessibility", + "lit" ], "homepage": "https://NVIDIA.github.io/elements/", "repository": { diff --git a/projects/core/src/grid/grid.test.ts b/projects/core/src/grid/grid.test.ts index 9f9f2b71b..a09053c08 100644 --- a/projects/core/src/grid/grid.test.ts +++ b/projects/core/src/grid/grid.test.ts @@ -58,6 +58,11 @@ describe(Grid.metadata.tag, () => { expect(element.matches(':state(scrolling)')).toBe(false); }); + it('should default to no scroll target before rendering', () => { + const detachedElement = document.createElement(Grid.metadata.tag) as Grid; + expect(detachedElement.stateScrollConfig.target).toBeUndefined(); + }); + it('should enable keynav control from keynav controller', async () => { await elementIsStable(element); expect(element.keynavGridConfig.cells[0].tabIndex).toBe(0); diff --git a/projects/forms/package.json b/projects/forms/package.json index 88a3661b8..25d0ea791 100644 --- a/projects/forms/package.json +++ b/projects/forms/package.json @@ -6,9 +6,13 @@ }, "description": "Form control utilities and validation providing mixins, validators, and schema-based validation. Includes form association, event handling, and support for complex data types.", "keywords": [ + "nvidia", + "web-components", + "custom-elements", "forms", - "validation", - "web-components" + "form-validation", + "form-associated-custom-elements", + "lit" ], "homepage": "https://NVIDIA.github.io/elements/", "repository": { diff --git a/projects/internals/metadata/static/tests.json b/projects/internals/metadata/static/tests.json index 010aeb4d5..6750f924d 100644 --- a/projects/internals/metadata/static/tests.json +++ b/projects/internals/metadata/static/tests.json @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5ec710720a8ed82b67e5254fa8c0d73aef6fc1ca5af3961b534ddca2e656dbf0 -size 2672350 +oid sha256:e07df5dad51d1b03d42dd8fe0ec6197a985a651a6b91debbb7dd0c36a28b6000 +size 2580493 diff --git a/projects/markdown/package.json b/projects/markdown/package.json index 4134e6385..db22617e1 100644 --- a/projects/markdown/package.json +++ b/projects/markdown/package.json @@ -6,8 +6,13 @@ }, "description": "A suite of markdown components and utilities.", "keywords": [ + "nvidia", + "web-components", + "custom-elements", "markdown", - "web-components" + "markdown-renderer", + "markdown-it", + "lit" ], "homepage": "https://NVIDIA.github.io/elements/", "repository": { diff --git a/projects/media/package.json b/projects/media/package.json index f789dcc44..65e87b433 100644 --- a/projects/media/package.json +++ b/projects/media/package.json @@ -3,9 +3,13 @@ "version": "0.0.0", "description": "Media playback UI components for Elements", "keywords": [ + "nvidia", + "web-components", + "custom-elements", "media", - "playback", - "web-components" + "media-playback", + "ui-components", + "design-system" ], "type": "module", "repository": { diff --git a/projects/monaco/package.json b/projects/monaco/package.json index 65aee13d6..63fdc70ff 100644 --- a/projects/monaco/package.json +++ b/projects/monaco/package.json @@ -6,9 +6,13 @@ }, "description": "Provides integration with VS Code's Monaco editor for code editing, syntax highlighting, and diff visualization.", "keywords": [ + "nvidia", + "web-components", + "custom-elements", "monaco", "code-editor", - "web-components" + "diff-editor", + "syntax-highlighting" ], "homepage": "https://NVIDIA.github.io/elements/", "repository": { diff --git a/projects/themes/package.json b/projects/themes/package.json index 3584701c7..73d8e8c0a 100644 --- a/projects/themes/package.json +++ b/projects/themes/package.json @@ -6,9 +6,13 @@ }, "description": "Themes for the Elements design system, providing comprehensive color palettes, typography, and spacing.", "keywords": [ + "nvidia", + "design-system", "themes", "design-tokens", - "css-variables" + "css-variables", + "dark-theme", + "high-contrast" ], "homepage": "https://NVIDIA.github.io/elements/", "customElements": "dist/custom-elements.json", From 4dffc6e5e3410c6c43c0ad141ea4bc944b4d1c72 Mon Sep 17 00:00:00 2001 From: Cory Rylan Date: Wed, 29 Jul 2026 22:58:35 -0500 Subject: [PATCH 2/4] feat(lint): add rule to restrict container="full" usage - Introduced a new ESLint rule to restrict the use of container="full" to direct children of nve-page elements. - Updated relevant documentation and examples to reflect this change. - Adjusted existing components and tests to comply with the new linting rule. Signed-off-by: Cory Rylan --- projects/core/eslint.config.js | 6 + projects/core/src/alert/alert.examples.ts | 17 +- projects/core/src/card/card.examples.ts | 16 +- projects/core/src/grid/grid.examples.ts | 2 + projects/core/src/grid/grid.test.visual.ts | 39 ++-- projects/core/src/page/page.css | 3 +- projects/core/src/page/page.ts | 1 + .../core/src/toggletip/toggletip.examples.ts | 2 +- projects/core/src/toolbar/toolbar.examples.ts | 15 +- .../internals/patterns/src/browse.examples.ts | 2 +- .../internals/patterns/src/editor.examples.ts | 61 +++-- .../patterns/src/templates.examples.ts | 72 +++--- .../internals/tools/src/skills/migration.md | 24 +- projects/lint/README.md | 1 + projects/lint/src/eslint/configs/html.ts | 3 + .../rules/no-nested-container-types.test.ts | 10 + .../eslint/rules/no-nested-container-types.ts | 3 +- .../no-restricted-container-full.test.ts | 210 ++++++++++++++++++ .../rules/no-restricted-container-full.ts | 103 +++++++++ .../src/docs/elements/data-grid/container.md | 8 +- projects/site/src/docs/lint/index.md | 6 + 21 files changed, 481 insertions(+), 123 deletions(-) create mode 100644 projects/lint/src/eslint/rules/no-restricted-container-full.test.ts create mode 100644 projects/lint/src/eslint/rules/no-restricted-container-full.ts diff --git a/projects/core/eslint.config.js b/projects/core/eslint.config.js index 529eda852..e0afa8b85 100644 --- a/projects/core/eslint.config.js +++ b/projects/core/eslint.config.js @@ -35,6 +35,12 @@ export default [ '@nvidia-elements/lint/no-missing-gap-space': ['off'] } }, + { + files: ['src/alert/alert-group.test.visual.ts'], + rules: { + '@nvidia-elements/lint/no-restricted-container-full': ['off'] + } + }, { files: ['src/button/button.test.visual.ts'], rules: { diff --git a/projects/core/src/alert/alert.examples.ts b/projects/core/src/alert/alert.examples.ts index 8513eb157..d349ea671 100644 --- a/projects/core/src/alert/alert.examples.ts +++ b/projects/core/src/alert/alert.examples.ts @@ -5,6 +5,7 @@ import { html } from 'lit'; import '@nvidia-elements/core/alert/define.js'; import '@nvidia-elements/core/button/define.js'; import '@nvidia-elements/core/divider/define.js'; +import '@nvidia-elements/core/page/define.js'; export default { title: 'Elements/Alert', @@ -20,6 +21,7 @@ export const Default = { /** * @summary Alert status variants for semantic messaging. Use accent for informational updates, warning for cautionary messages requiring attention, success for confirmations, and danger for errors or critical issues that may block user progress. + * @tags test-case */ export const SupportStatus = { render: () => html` @@ -35,6 +37,7 @@ export const SupportStatus = { /** * @summary Extended status variants for workflow and process state communication. Use these specialized states (scheduled, queued, running, failed, etc.) in dashboards, build pipelines, or task management interfaces where users need detailed visibility into process lifecycle stages. + * @tags test-case */ export const Status = { render: () => html` @@ -196,27 +199,27 @@ export const Actions = { */ export const Prominence = { render: () => html` -
- + + Standard banner message view details - + Accent banner message view details - + Warning banner message view details - + Success banner message view details - + Danger banner message view details -
+ ` } diff --git a/projects/core/src/card/card.examples.ts b/projects/core/src/card/card.examples.ts index d4a18c879..b6cbb03a8 100644 --- a/projects/core/src/card/card.examples.ts +++ b/projects/core/src/card/card.examples.ts @@ -8,6 +8,7 @@ import '@nvidia-elements/core/icon-button/define.js'; import '@nvidia-elements/core/icon/define.js'; import '@nvidia-elements/core/tabs/define.js'; import '@nvidia-elements/core/divider/define.js'; +import '@nvidia-elements/core/page/define.js'; export default { title: 'Elements/Card', @@ -148,19 +149,23 @@ export const WithTabs = { /** * @summary Card with full container styling that extends to the edges, suitable for full-width layouts or when you want the card to blend with its container. + * @tags test-case */ export const ContainerFull = { render: () => html` - - -

container full

- - + + + +

container full

+ + + ` } /** * @summary Card with flat container styling that removes the default card elevation, ideal for subtle content containers or when you want a more minimal appearance. + * @tags test-case */ export const ContainerFlat = { render: () => html` @@ -198,6 +203,7 @@ export const Audit = { /** * @summary Card with overflow content, where the card body scrolls when content exceeds the card height. + * @tags test-case */ export const OverflowContent = { render: () => html` diff --git a/projects/core/src/grid/grid.examples.ts b/projects/core/src/grid/grid.examples.ts index b5bd5522f..4155e4f5c 100644 --- a/projects/core/src/grid/grid.examples.ts +++ b/projects/core/src/grid/grid.examples.ts @@ -1084,6 +1084,7 @@ export const Placeholder = { /** * @summary Full-width grid container for max space use, providing edge-to-edge data display for comprehensive information presentation. + * @tags test-case */ export const Full = { render: () => html` @@ -1102,6 +1103,7 @@ export const Full = { /** * @summary Flat container styling for minimal visual weight, providing subtle grid presentation that integrates seamlessly with surrounding content. + * @tags test-case */ export const Flat = { render: () => html` diff --git a/projects/core/src/grid/grid.test.visual.ts b/projects/core/src/grid/grid.test.visual.ts index 43ea6c656..b6eb99896 100644 --- a/projects/core/src/grid/grid.test.visual.ts +++ b/projects/core/src/grid/grid.test.visual.ts @@ -11,6 +11,7 @@ function head(theme: '' | 'dark' = '') { import '@nvidia-elements/core/checkbox/define.js'; import '@nvidia-elements/core/radio/define.js'; import '@nvidia-elements/core/icon-button/define.js'; + import '@nvidia-elements/core/page/define.js'; document.documentElement.setAttribute('nve-theme', '${theme}');