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 <crylan@nvidia.com>

Author: coryrylan

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: {

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';
 
 exportdefault{
 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
  */
 exportconstSupportStatus={
 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
  */
 exportconstStatus={
 render: ()=>html`
@@ -196,27 +199,27 @@ export const Actions = {
  */
 exportconstProminence={
 render: ()=>html`
-<divnve-layout="column gap:md">
-<nve-alert-groupprominence="emphasis" container="full">
+<nve-pagedocument-scroll>
+<nve-alert-groupslot="header" prominence="emphasis" container="full">
 <nve-alertclosable><spanslot="prefix">Standard</span> banner message <ahref="#" nve-text="link" slot="actions">view details</a></nve-alert>
 </nve-alert-group>
 
-<nve-alert-groupstatus="accent" prominence="emphasis" container="full">
+<nve-alert-groupslot="header" status="accent" prominence="emphasis" container="full">
 <nve-alertclosable><spanslot="prefix">Accent</span> banner message <ahref="#" nve-text="link" slot="actions">view details</a></nve-alert>
 </nve-alert-group>
 
-<nve-alert-groupstatus="warning" prominence="emphasis" container="full">
+<nve-alert-groupslot="header" status="warning" prominence="emphasis" container="full">
 <nve-alertclosable><spanslot="prefix">Warning</span> banner message <ahref="#" nve-text="link" slot="actions">view details</a></nve-alert>
 </nve-alert-group>
 
-<nve-alert-groupstatus="success" prominence="emphasis" container="full">
+<nve-alert-groupslot="header" status="success" prominence="emphasis" container="full">
 <nve-alertclosable><spanslot="prefix">Success</span> banner message <ahref="#" nve-text="link" slot="actions">view details</a></nve-alert>
 </nve-alert-group>
 
-<nve-alert-groupstatus="danger" prominence="emphasis" container="full">
+<nve-alert-groupslot="header" status="danger" prominence="emphasis" container="full">
 <nve-alertclosable><spanslot="prefix">Danger</span> banner message <ahref="#" nve-text="link" slot="actions">view details</a></nve-alert>
 </nve-alert-group>
-</div>
+</nve-page>
  `
 }
 

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';
 
 exportdefault{
 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
  */
 exportconstContainerFull={
 render: ()=>html`
-<nve-cardcontainer="full">
-<nve-card-content>
-<pnve-text="body">container full</p>
-</nve-card-content>
-</nve-card>
+<nve-pagedocument-scroll>
+<nve-cardcontainer="full">
+<nve-card-content>
+<pnve-text="body">container full</p>
+</nve-card-content>
+</nve-card>
+</nve-page>
  `
 }
 
 /**
  * @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
  */
 exportconstContainerFlat={
 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
  */
 exportconstOverflowContent={
 render: ()=>html`

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
  */
 exportconstFull={
 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
  */
 exportconstFlat={
 render: ()=>html`

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}');
  </script>
  <style>
@@ -411,27 +412,29 @@ function columnAlignEnd(theme: '' | 'dark' = '') {
 functioncontainerFull(theme: ''|'dark'=''){
 return/* html */`
 ${head(theme)}
- <nve-grid container="full">
- <nve-grid-header>
-${Array(5)
-.fill('')
-.map(()=>`<nve-grid-column>•︎•︎•︎•︎•︎•︎</nve-grid-column> `)
-.join('')}
- </nve-grid-header>
-${Array(6)
-.fill('')
-.map(
-()=>`
- <nve-grid-row>
+ <nve-page document-scroll>
+ <nve-grid container="full">
+ <nve-grid-header>
 ${Array(5)
 .fill('')
-.map(()=>`<nve-grid-cell>•︎•︎•︎•︎•︎•︎</nve-grid-cell> `)
+.map(()=>`<nve-grid-column>•︎•︎•︎•︎•︎•︎</nve-grid-column> `)
 .join('')}
- </nve-grid-row>
- `
-)
-.join('')}
- </nve-grid>`;
+ </nve-grid-header>
+${Array(6)
+.fill('')
+.map(
+()=>`
+ <nve-grid-row>
+${Array(5)
+.fill('')
+.map(()=>`<nve-grid-cell>•︎•︎•︎•︎•︎•︎</nve-grid-cell> `)
+.join('')}
+ </nve-grid-row>
+ `
+)
+.join('')}
+ </nve-grid>
+ </nve-page>`;
 }
 
 functioncontainerFlat(theme: ''|'dark'=''){

projects/core/src/page/page.css

@@ -4,6 +4,7 @@
 :host {
 --background: var(--nve-sys-layer-canvas-background);
 --color: var(--nve-sys-layer-canvas-color);
+--gap: var(--nve-ref-space-md);
 --padding: 0;
  display: block;
  height: 100vh;
@@ -151,7 +152,7 @@ slot {
 }
 
 slot:not([name]) {
-gap:var(--nve-ref-space-md);
+gap:var(--gap);
 padding:var(--padding);
 display: flex;
 flex-direction: column;

projects/core/src/page/page.ts

@@ -29,6 +29,7 @@ import styles from './page.css?inline';
  * @cssprop --border-radius
  * @cssprop --box-shadow
  * @cssprop --min-height
+ * @cssprop --gap - Vertical gap spacing between main content items
  * @aria https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/
  * @responsive false
  *

projects/core/src/toggletip/toggletip.examples.ts

@@ -136,7 +136,7 @@ export const AlertGroup = {
 render: ()=>html`
 <nve-toggletipid="toggletip-alert-group">
 <nve-toggletip-header>
-<nve-alert-groupstatus="danger" container="full" prominence="emphasis">
+<nve-alert-groupstatus="danger" prominence="emphasis">
 <nve-alert>Workflow Failed</nve-alert>
 </nve-alert-group>
 </nve-toggletip-header>

projects/core/src/toolbar/toolbar.examples.ts

@@ -10,6 +10,7 @@ import '@nvidia-elements/core/button/define.js';
 import'@nvidia-elements/core/divider/define.js';
 import'@nvidia-elements/core/progressive-filter-chip/define.js';
 import'@nvidia-elements/core/input/define.js';
+import'@nvidia-elements/core/page/define.js';
 
 exportdefault{
 title: 'Elements/Toolbar',
@@ -60,11 +61,13 @@ export const ContainerInset = {
  */
 exportconstContainerFull={
 render: ()=>html`
-<nve-toolbarcontainer="full">
-<nve-button><nve-iconname="add"></nve-icon> create</nve-button>
-<nve-button><nve-iconname="delete"></nve-icon> delete</nve-button>
-<nve-icon-buttoncontainer="flat" icon-name="gear" slot="suffix" aria-label="settings"></nve-icon-button>
-</nve-toolbar>
+<nve-pagedocument-scroll>
+<nve-toolbarslot="subheader" container="full">
+<nve-button><nve-iconname="add"></nve-icon> create</nve-button>
+<nve-button><nve-iconname="delete"></nve-icon> delete</nve-button>
+<nve-icon-buttoncontainer="flat" icon-name="gear" slot="suffix" aria-label="settings"></nve-icon-button>
+</nve-toolbar>
+</nve-page>
  `
 };
 
@@ -223,4 +226,4 @@ export const Container = {
 </nve-toolbar>
 </div>
  `
-};
+};

projects/internals/patterns/src/browse.examples.ts

@@ -27,7 +27,7 @@ export default {
  */
 exportconstContentRow={
 render: ()=>html`
-<nve-cardrole="listitem" container="full">
+<nve-cardrole="listitem" container="flat">
 <nve-card-content>
 <divnve-layout="grid align:vertical-center align:space-between gap:md">
 <divnve-layout="span:4 row gap:md align:vertical-center">