From 29ee3c040cbab963d2a2eb94055e238e26da07ca Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Tue, 8 Apr 2025 22:33:57 +0000 Subject: [PATCH 0001/1100] chore(release): @nve/elements-v1.31.4 [skip ci] ## [@nve/elements-v1.31.4](https://gitlab-master.nvidia.com/ai-infra/elements/compare/@nve/elements-v1.31.3...@nve/elements-v1.31.4) (2025-04-08) ### Bug Fixes * **elements:** resize handle ([668af6e](https://gitlab-master.nvidia.com/ai-infra/elements/commit/668af6e009786b7b31d5b894fcca6cd98e72e09b)) * **elements:** ssr logging ([d4d4716](https://gitlab-master.nvidia.com/ai-infra/elements/commit/d4d4716f37487984a8c9035936670ced83784b5a)) --- projects/elements/CHANGELOG.md | 8 ++++++++ projects/elements/package.json | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/projects/elements/CHANGELOG.md b/projects/elements/CHANGELOG.md index 3a8f75183..508cb6d59 100644 --- a/projects/elements/CHANGELOG.md +++ b/projects/elements/CHANGELOG.md @@ -1,3 +1,11 @@ +## [@nvidia-elements/core-v1.31.4](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.31.3...@nvidia-elements/core-v1.31.4) (2025-04-08) + + +### Bug Fixes + +* **elements:** resize handle ([5603d32](https://github.com/NVIDIA/elements/commit/5603d32411e66c9efd99f7dc9421a361ff8e2c48)) +* **elements:** ssr logging ([0fa752b](https://github.com/NVIDIA/elements/commit/0fa752ba8767deafe0a2c8a5fa0e3728790243a7)) + ## [@nvidia-elements/core-v1.31.3](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.31.2...@nvidia-elements/core-v1.31.3) (2025-04-02) diff --git a/projects/elements/package.json b/projects/elements/package.json index d34aacaf7..46392b04e 100644 --- a/projects/elements/package.json +++ b/projects/elements/package.json @@ -1,6 +1,6 @@ { "name": "@nvidia-elements/core", - "version": "1.31.3", + "version": "1.31.4", "description": "The Design Language for AI/ML Factories Building at the Speed of Light", "homepage": "https://NVIDIA.github.io/elements/", "repository": { From 221537b378fbddf4e4f82c91e5ccdaa81b8b6956 Mon Sep 17 00:00:00 2001 From: Cormac Rada Date: Wed, 2 Apr 2025 14:58:12 -0700 Subject: [PATCH 0002/1100] chore(docs): splash site refinement --- .../glassmorphic-card/glassmorphic-card.ts | 9 +- .../metrics-carousel/metrics-carousel.ts | 5 +- .../src/_internal/starry-sky/starry-sky.ts | 15 +- .../src/_internal/theme-form/theme-form.ts | 2 +- .../_internal/theme-preview/theme-preview.ts | 32 +- projects/site/src/index.css | 279 ++++++++++- projects/site/src/index.html | 436 +++++++++++------- projects/styles/.visual/text-size.png | 4 +- 8 files changed, 565 insertions(+), 217 deletions(-) diff --git a/projects/site/src/_internal/glassmorphic-card/glassmorphic-card.ts b/projects/site/src/_internal/glassmorphic-card/glassmorphic-card.ts index ec09d4efb..d093859b2 100644 --- a/projects/site/src/_internal/glassmorphic-card/glassmorphic-card.ts +++ b/projects/site/src/_internal/glassmorphic-card/glassmorphic-card.ts @@ -37,8 +37,8 @@ export class GlassmorphicCard extends LitElement { height: 150px; background: var(--background-logo) center/contain no-repeat; transform: translate(-50%, -50%); - filter: blur(8px); - opacity: 0.2; + filter: blur(4px); + opacity: 0.4; } .header { @@ -59,7 +59,10 @@ export class GlassmorphicCard extends LitElement { margin-left: auto; --background: rgba(255, 255, 255, 0.4); --border: var(--nve-ref-border-width-sm) solid rgba(255, 255, 255, 0.18); - --background: rgba(255, 255, 255, 0.12); + --background: rgba(255, 255, 255, 0.14); + backdrop-filter: blur(8px); + border-radius: var(--nve-ref-border-radius-full); + } nve-button nve-icon { diff --git a/projects/site/src/_internal/metrics-carousel/metrics-carousel.ts b/projects/site/src/_internal/metrics-carousel/metrics-carousel.ts index 7b7a19cbe..c00ae4630 100644 --- a/projects/site/src/_internal/metrics-carousel/metrics-carousel.ts +++ b/projects/site/src/_internal/metrics-carousel/metrics-carousel.ts @@ -73,10 +73,11 @@ export class MetricsCarousel extends LitElement { color: var(--nve-sys-text-emphasis-color); font-size: var(--nve-ref-font-size-600); - background-color: var(--nve-sys-layer-shell-accent-background); padding: 68px var(--nve-ref-size-800) var(--nve-ref-size-800) var(--nve-ref-size-800); overflow: hidden; - border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted); + background: rgba(24, 26, 32, 0.6); + backdrop-filter: blur(6px); + box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.1), 0 0 6px rgba(0, 0, 0, 0.5); border-radius: var(--nve-ref-border-radius-lg); } diff --git a/projects/site/src/_internal/starry-sky/starry-sky.ts b/projects/site/src/_internal/starry-sky/starry-sky.ts index ffe627dbd..7f6716b7c 100644 --- a/projects/site/src/_internal/starry-sky/starry-sky.ts +++ b/projects/site/src/_internal/starry-sky/starry-sky.ts @@ -23,7 +23,11 @@ export class StarrySky extends LitElement { pointer-events: none; width: 100%; height: 100%; - background: linear-gradient(to bottom, #000000, #08080f 50%, #101016 80%, #141419); + background: linear-gradient( + 180deg, + color-mix(in oklch, black 40%, var(--nve-sys-layer-container-background)), + color-mix(in oklch, black 60%, var(--nve-sys-layer-canvas-background)) + ); } .starry-background::before { @@ -33,8 +37,11 @@ export class StarrySky extends LitElement { left: 50%; width: 120vw; height: 120vh; - background: radial-gradient(circle at top, rgba(50, 50, 60, 0.3), transparent 70%); - transform: translateX(-50%); + background: radial-gradient( + circle at top, + color-mix(in oklch, rgba(50, 50, 60, 0.3), var(--nve-sys-layer-container-background) 30%), + transparent 70% + ); transform: translateX(-50%); pointer-events: none; } @@ -48,7 +55,7 @@ export class StarrySky extends LitElement { .star { fill: white; - opacity: 0; + opacity: 50%; } @keyframes flickerAnimation { diff --git a/projects/site/src/_internal/theme-form/theme-form.ts b/projects/site/src/_internal/theme-form/theme-form.ts index 320e5272e..1f5858c5b 100644 --- a/projects/site/src/_internal/theme-form/theme-form.ts +++ b/projects/site/src/_internal/theme-form/theme-form.ts @@ -74,7 +74,7 @@ export class ThemeForm extends LitElement { - + diff --git a/projects/site/src/_internal/theme-preview/theme-preview.ts b/projects/site/src/_internal/theme-preview/theme-preview.ts index 471e66dbe..7f498b3e3 100644 --- a/projects/site/src/_internal/theme-preview/theme-preview.ts +++ b/projects/site/src/_internal/theme-preview/theme-preview.ts @@ -65,6 +65,11 @@ export class ThemePreview extends LitElement { transform-origin: 0 0; padding: var(--nve-ref-space-xxl) var(--nve-ref-space-lg); + .box{ + --border-radius:var(--nve-ref-border-radius-sm); + --box-shadow:none; + } + .bento-box-row { display: flex; flex-direction: row; @@ -80,13 +85,8 @@ export class ThemePreview extends LitElement { display: flex; flex-direction: column; gap: var(--nve-ref-space-md); - align-items: center; - } - - nve-card { - width: fit-content; + align-items:stretch; } - nve-button, nve-button-group { --border-radius: var(--nvd-button-border-radius); @@ -151,14 +151,14 @@ export class ThemePreview extends LitElement {
- + - +

123,456

@@ -166,16 +166,18 @@ export class ThemePreview extends LitElement {
- + Tab 1 Tab 2 Tab 3 + Tab 4 + - + All Time @@ -186,12 +188,12 @@ export class ThemePreview extends LitElement {
- + - + @@ -232,7 +234,7 @@ export class ThemePreview extends LitElement {
- + @@ -244,7 +246,7 @@ export class ThemePreview extends LitElement { - + @@ -323,7 +325,7 @@ export class ThemePreview extends LitElement { #toggleRoundedButtons(value: boolean) { this.style.setProperty( '--nvd-button-border-radius', - value ? 'var(--nve-ref-border-radius-full)' : 'var(--nve-ref-border-radius-none)' + value ? 'var(--nve-ref-border-radius-full)' : 'var(--nve-ref-border-radius-sm)' ); } } diff --git a/projects/site/src/index.css b/projects/site/src/index.css index 59c1ce4f5..cfbb59e35 100644 --- a/projects/site/src/index.css +++ b/projects/site/src/index.css @@ -1,5 +1,8 @@ :root { --content-max-width: 1280px; + --gradient-angle: 180deg; + --shadow-percentage: 5%; + --gallery-item-height: calc(50vw * (9 / 16)); } nve-page { @@ -40,12 +43,16 @@ section { @media only screen and (min-width: 960px) { section { min-height: 90vh; - - &#metrics { - min-height: 75vh; + &#starter { + min-height: 45vh; + } + &#loop { + min-height: 15vh; } > .content { + padding-top: 56px; + &.leading { grid-area: 1 / 2 / 2 / 3; @@ -69,33 +76,44 @@ section { } .code-container { - padding: 8px; + padding-left: var(--nve-ref-space-xs); + padding-right: var(--nve-ref-space-xs); margin: 50px auto; backdrop-filter: blur(20px); background: color-mix( in oklch, - var(--nve-sys-layer-canvas-background) 20%, + var(--nve-sys-layer-canvas-background) var(--shadow-percentage), var(--nve-sys-layer-container-background) ); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 16px; - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + border-radius: var(--nve-ref-border-radius-lg); nve-codeblock { --background: transparent; + scrollbar-color: var(--nve-ref-border-color-muted) var(--background); + scrollbar-width: thin; } } video { width: 100%; - border: 2px solid var(--nve-ref-border-color-muted); - border-image: linear-gradient(to top right, var(--nve-ref-border-color), var(--nve-ref-border-color-emphasis)) 1; + border-radius: var(--nve-ref-border-radius-md); } +.media-container { + position: relative; + backdrop-filter: blur(20px); + background: rgba(24, 26, 32, 0.11); + border-radius: 16px; + padding: 8px; + overflow: hidden; + box-shadow: + inset 0 1px 1px 0 rgba(72, 78, 88, 0.2), + inset 0 24px 48px 0 rgba(40, 46, 54, 0.02); +} /* Gradients */ .silver-gradient { - background: linear-gradient(45deg, rgba(161, 161, 170, 0.6) 0%, #fff 66%); + background: linear-gradient(130deg, rgba(161, 161, 170, 0.6) 0%, #fff 66%); } .coral-yellow-gradient { @@ -131,18 +149,57 @@ video { -webkit-background-clip: text; -webkit-text-fill-color: transparent; } +.gradient-line { + position: absolute; + top: 0%; + left: 3rem; + right: 3rem; + height: 1px; + transform: translateY(-50%); + background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent); +} +.radial-gradient-overlay { + position: absolute; + left: 0; + top: 0%; + width: 100%; + height: 100%; + background: radial-gradient(35% 96px at 50% 0%, rgba(245, 245, 245, 0.08), transparent); +} + +.gradient-card { + background: linear-gradient( + var(--gradient-angle), + color-mix(in oklch, white 5%, var(--nve-sys-layer-container-background)), + color-mix( + in oklch, + var(--nve-sys-layer-canvas-background) var(--shadow-percentage), + var(--nve-sys-layer-container-background) + ) + ); +} +.gradient-layer { + position: absolute; + border-radius: 50%; + filter: blur(100px); +} /* Features */ .feature { - max-width: 360px; + width: 364px; + text-wrap: pretty; .feature-icon { --border-radius: var(--nve-ref-border-radius-lg); --background: linear-gradient( - 45deg, - var(--nve-ref-color-gray-slate-100) 0%, - var(--nve-ref-color-gray-slate-300) 100% + var(--gradient-angle), + color-mix(in oklch, white 5%, var(--nve-sys-layer-container-background)), + color-mix( + in oklch, + var(--nve-sys-layer-canvas-background) var(--shadow-percentage), + var(--nve-sys-layer-container-background) + ) ); --width: 48px; --height: 48px; @@ -164,20 +221,196 @@ video { gap: var(--nve-ref-size-400); .feature-grid-item { - border-radius: var(--nve-ref-border-radius-lg); + border-radius: var(--nve-ref-border-radius-md); padding: var(--nve-ref-size-400); - border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted); - background: linear-gradient(215deg, rgba(24, 26, 32, 0.75) 4.87%, #0b0c0f 75.88%); - box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.15) inset; - backdrop-filter: blur(5px); } } +.grid-box-container { + position: relative; + width: 100%; + background: radial-gradient(35% 350px at 50% 40%, rgba(245, 245, 245, 0.08), transparent); +} + +.grid-box-bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-size: 50px 50px; + background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), + linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px); + opacity: 0.6; +} + /* Contacts */ .contact { - border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted); border-radius: var(--nve-ref-border-radius-lg); - background: linear-gradient(215deg, rgba(24, 26, 32, 0.75) 4.87%, #0b0c0f 75.88%); - box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.15) inset; +} + +.hero { + height: 100vh; +} +/* Gallery Grid */ +.examples { + position: relative; + overflow: visible; + padding-top: var(--nve-ref-size-600); + /* Had to modify the height to make the gallery grid fit the screen TODO fix this*/ + height: calc(2.5 * var(--gallery-item-height)); +} + +.title-container { + position: relative; + width: 100%; + z-index: 10; + animation: fadeOut 1s both; + animation-timeline: view(); + animation-range: 70% 110%; +} + +.scroll-container { + height: calc(3 * var(--gallery-item-height)); + view-timeline: --gallery_timeline block; + width: 100%; + position: relative; +} + +.gallery-grid { + display: grid; + width: 100%; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + gap: var(--nve-ref-size-200); + position: sticky; + z-index: 5; +} + +.grid-img { + background-size: cover; + background-position: top left; + pointer-events: none; + opacity: 0; + will-change: transform; + aspect-ratio: 16/9; +} /* Grid positions */ +.pos-1 { + grid-area: 1 / 1 / 2 / 2; +} +.pos-2 { + grid-area: 1 / 2 / 2 / 3; /* Row 1, Column 2 */ +} +.pos-3 { + grid-area: 1 / 3 / 2 / 4; /* Row 1, Column 3 */ +} +.pos-4 { + grid-area: 2 / 1 / 3 / 2; /* Row 2, Column 1 */ +} +.pos-5 { + grid-area: 2 / 2 / 3 / 3; /* Row 2, Column 2 */ +} +.pos-6 { + grid-area: 2 / 3 / 3 / 4; /* Row 2, Column 3 */ +} +.pos-7 { + grid-area: 3 / 1 / 4 / 2; /* Row 3, Column 1 */ +} +.pos-8 { + grid-area: 3 / 2 / 4 / 3; /* Row 3, Column 2 */ +} +.pos-9 { + grid-area: 3 / 3 / 4 / 4; /* Row 3, Column 3 */ +} + +/* Scroll-driven animations for images */ +.pos-1 { + animation: fadeInUp 1s both; + animation-timeline: view(block); + animation-range: contain 0% contain 100%; +} +.pos-2 { + animation: fadeInUp 1s both; + animation-timeline: view(block); + animation-range: contain 20% contain 100%; +} +.pos-3 { + animation: fadeInUp 1s both; + animation-timeline: view(block); + animation-range: contain 40% contain 100%; +} +.pos-4 { + animation: fadeInUp 1s both; + animation-timeline: view(block); + animation-range: contain 0% contain 100%; +} +.pos-5 { + animation: fadeInUp 1s both; + animation-timeline: view(block); + animation-range: contain 20% contain 100%; +} +.pos-6 { + animation: fadeInUp 1s both; + animation-timeline: view(block); + animation-range: contain 40% contain 100%; +} +.pos-7 { + animation: fadeInUp 1s both; + animation-timeline: view(block); + animation-range: contain 0% contain 100%; +} +.pos-8 { + animation: fadeInUp 1s both; + animation-timeline: view(block); + animation-range: contain 20% contain 100%; +} +.pos-9 { + animation: fadeInUp 1s both; + animation-timeline: view(block); + animation-range: contain 40% contain 100%; +} +@keyframes fadeOut { + from { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(-5vh); + pointer-events: none; + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(calc(var(--gallery-item-height) / 2)); + } + to { + opacity: 1; + transform: translateY(0); + } +} +/* Fallback styles for browsers that do not support scroll-driven animations */ +@supports not (animation-timeline: auto) { + .title-container { + animation: fadeOut 1s both; + opacity: 1; + transition: + opacity 0.5s ease, + transform 0.5s ease; + } + + .scroll-container { + height: auto; + width: 100%; + position: relative; + } + + /* Fallback animations for images */ + .grid-img { + opacity: 0; + transition: opacity 0.5s ease; + } } diff --git a/projects/site/src/index.html b/projects/site/src/index.html index f5546e62b..6ed659378 100644 --- a/projects/site/src/index.html +++ b/projects/site/src/index.html @@ -33,16 +33,15 @@
-
- +
- - Design Faster,
- Build Smarter. + + Make it happen,
+ with elements. - - Elements is a flexible, framework-agnostic design system and toolkit that empowers teams to design, build, - and deliver high-performance, data-dense applications—faster, together. + + Nvidia Elements is a flexible, framework-agnostic design system and toolkit that empowers teams to build + faster, together.
@@ -50,9 +49,142 @@
- + +
+ +
+
+ Turn your ideas + into reality +
+ at the speed of light. +
+ +
+
+ + + + +
+
Buildless Prototyping
+
+ No complicated setup. Just start building and iterating. No handoff, no translation. +
+
+
+ +
+ + + + +
+
Snippet Templates
+
+ Autocomplete common UX patterns without worrying about breaking changes. +
+
+
+ +
+ + + + +
+
Infinite Remixes
+
+ Experiment, pivot, and explore—Elements makes iteration low-cost and easy. +
+
+
+
+ + +
+
+
+
+ +
+
+
+
+ + +
+
+

Endless Possibilities

+

+ Craft high-performance, data-rich AI products tailored to your domain. +

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
-
+
+
+
Work the way
@@ -68,7 +200,7 @@
Any Framework or Language
- Built on web standards, ensuring long term stability anywhere you use HTML. + Learn once, use anywhere. Build mastery that transfers across tools.
@@ -80,7 +212,7 @@
Flexible by Nature
- Stateless and adaptable to seamlessly integrate into your existing apps. + Stateless and adaptable to integrate into your existing apps seamlessly.
@@ -90,9 +222,9 @@
-
Design and Develop in Sync
+
Future Proof
- Your shared source of truth for designers and developers—no handoff, no translation. + Built on web standards, ensuring long term stability without framework churn.
@@ -101,47 +233,15 @@
- +
- -
-
-
-
-
- Ready to use. -
- Easy to - customize. -
-
- Whether you're helping build self driving cars, an AI supercomputer or the next generation gaming - platform, our design tokens and customization lets you create the best experience for your users. -
-
- - -
-
- -
-
- - -
- + +
+
@@ -156,27 +256,27 @@
-
+
WCAG 2.1
-
+
WAI-ARIA 1.3
-
+
Keyboard navigation
-
+
Internationalization
-
+
Lighthouse Tested
-
+
Axe Accessibility Tested
@@ -197,8 +297,40 @@
- -
+ +
+
+
+
+
+ Ready to use. +
+ Easy to + customize. +
+
+ Whether you're helping build self driving cars, an AI supercomputer or the next generation gaming + platform, our design tokens and customization lets you create the best experience for your users. +
+
+ + +
+
+ +
+
+ + +
@@ -255,77 +387,44 @@
- - -
- - - -
-
-
-
- Turn your ideas - into reality -
- at the speed of light. -
- -
-
- - - - -
-
Buildless Prototyping
-
- No complicated setup. Just start building and iterating. -
-
-
- -
- - - - -
-
Snippet Templates
-
- Autocomplete common UX patterns without worrying about breaking changes. -
-
-
- -
- - - - -
-
Infinite Remixes
-
- Experiment, pivot, and explore—Elements makes iteration low-cost and easy. -
-
+
+
+
+
+
- -
- -
+ +
@@ -359,85 +458,88 @@ logo-src="https://NVIDIA.github.io/elements/static/images/integrations/vite.svg" logo-alt="Vite Logo" title="MPA & Vite" - style="--background: linear-gradient(215deg, rgba(240, 116, 144, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%); --background-logo: url(https://NVIDIA.github.io/elements/static/images/integrations/vite.svg)"> + style="--background: linear-gradient(135deg, rgba(144, 116, 240, 0.45) 0%, rgba(144, 116, 240, 0.15) 100%); --background-logo: url(https://NVIDIA.github.io/elements/static/images/integrations/vite.svg)"> + style="--background: linear-gradient(135deg, rgba(236, 72, 153, 0.45) 0%, rgba(236, 72, 153, 0.15) 100%); --background-logo: url(https://NVIDIA.github.io/elements/static/images/integrations/angular.svg)"> + style="--background: linear-gradient(135deg, rgba(31, 31, 31, 0.45) 0%, rgba(144, 116, 240, 0.1) 100%); --background-logo: url(https://NVIDIA.github.io/elements/static/images/integrations/nextjs.svg)"> + style="--background: linear-gradient(135deg, rgba(97, 218, 251, 0.45) 0%, rgba(144, 116, 240, 0.1) 100%); --background-logo: url(https://NVIDIA.github.io/elements/static/images/integrations/react.svg)"> + style="--background: linear-gradient(135deg, rgba(125, 145, 190, 0.45) 0%, rgba(125, 145, 190, 0.15) 100%); --background-logo: url(https://NVIDIA.github.io/elements/static/images/integrations/eleventy.svg)"> + style="--background: linear-gradient(135deg, rgba(65, 184, 131, 0.45) 0%, rgba(144, 116, 240, 0.1) 100%); --background-logo: url(https://NVIDIA.github.io/elements/static/images/integrations/vue.svg)">
+
+
-
-
- Stay in the - Loop. -
-
-
-
-
- GitLab Logo -
-
Gitlab Repo
+ +
+
+
+ Stay in the + Loop. +
+
+
+
+
+ GitLab Logo
-
Explore the code. Submit issues. Help shape what's next.
- - - View - - +
Gitlab Repo
-
-
-
- Slack Logo -
-
Slack Support
+
Explore the code. Submit issues. Help shape what's next.
+ + + View + + +
+
+
+
+ Slack Logo
-
Join the conversation. Get help, share ideas, and connect.
- - - View - - +
Slack Support
+
Join the conversation. Get help, share ideas, and connect.
+ + + View + +
diff --git a/projects/styles/.visual/text-size.png b/projects/styles/.visual/text-size.png index f0b4de0fc..f9bc4e4c5 100644 --- a/projects/styles/.visual/text-size.png +++ b/projects/styles/.visual/text-size.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2c867c14e21ee2ad669857602848479e8105a07f028afe5ec1286358247a7b5c -size 9056 +oid sha256:1357ade0a522a400de2a13fe92f608b2f6d497a555c607d69b9a8070bee69e68 +size 9830 From 57faf2b5c060c5b4af35bcec253623dc2bd32d1c Mon Sep 17 00:00:00 2001 From: Will Geller Date: Mon, 7 Apr 2025 16:17:22 -0400 Subject: [PATCH 0003/1100] chore(docs): convert integrations section of docs to 11ty --- .../site/src/docs/integrations/angular.md | 8 +- .../site/src/docs/integrations/buildless.md | 103 ++++++++++++++ .../site/src/docs/integrations/extensions.md | 76 ++++++++++ projects/site/src/docs/integrations/lit.md | 132 ++++++++++++++++++ projects/site/src/docs/integrations/nextjs.md | 48 +++++++ projects/site/src/docs/integrations/preact.md | 44 ++++++ projects/site/src/docs/integrations/react.md | 100 +++++++++++++ .../site/src/docs/integrations/solidjs.md | 58 ++++++++ .../site/src/docs/integrations/typescript.md | 69 +++++++++ projects/site/src/docs/integrations/vue.md | 45 ++++++ 10 files changed, 681 insertions(+), 2 deletions(-) create mode 100644 projects/site/src/docs/integrations/buildless.md create mode 100644 projects/site/src/docs/integrations/extensions.md create mode 100644 projects/site/src/docs/integrations/lit.md create mode 100644 projects/site/src/docs/integrations/nextjs.md create mode 100644 projects/site/src/docs/integrations/preact.md create mode 100644 projects/site/src/docs/integrations/react.md create mode 100644 projects/site/src/docs/integrations/solidjs.md create mode 100644 projects/site/src/docs/integrations/typescript.md create mode 100644 projects/site/src/docs/integrations/vue.md diff --git a/projects/site/src/docs/integrations/angular.md b/projects/site/src/docs/integrations/angular.md index e6e97ad1a..857910260 100644 --- a/projects/site/src/docs/integrations/angular.md +++ b/projects/site/src/docs/integrations/angular.md @@ -11,11 +11,15 @@ Demo + - Download + + Download + - Source + + Source
diff --git a/projects/site/src/docs/integrations/buildless.md b/projects/site/src/docs/integrations/buildless.md new file mode 100644 index 000000000..f870a533a --- /dev/null +++ b/projects/site/src/docs/integrations/buildless.md @@ -0,0 +1,103 @@ +--- +{ + title: 'Buildless Integration', + layout: 'docs.11ty.js' +} +--- + +# {{ title }} + +
+ + Demo + + + + + Download + + + + + Source + +
+ +Using [Import Maps](https://web.dev/import-maps-in-all-modern-browsers/) it is possible to +use elements without build tooling such as Vite or Rollup for easy in browser **prototyping**. + +```html + + + + Import Map Starter + @nvidia-elements/core + + + + + + hello world + + + + +``` + +## Create Lit Components + +Using import maps more complex UI components can be created without build tooling. + + + Playground + + +```html + + + + + + + + + + + + + + + +``` diff --git a/projects/site/src/docs/integrations/extensions.md b/projects/site/src/docs/integrations/extensions.md new file mode 100644 index 000000000..aa47aa545 --- /dev/null +++ b/projects/site/src/docs/integrations/extensions.md @@ -0,0 +1,76 @@ +--- +{ + title: 'Extensions', + layout: 'docs.11ty.js' +} +--- + +# {{ title }} + +
+ + + Download + + + + + Source + +
+ +To create reusable UI components that build on top of Elements we recommend using [lit.dev](https://lit.dev) for authoring highly reusable custom elements (Web Components). +This path enables your extensions to work in a large variety of frameworks and environments. We recommend +reading the [publishing and best practices](https://lit.dev/docs/tools/publishing/) provided by the lit team. +The rest of this guide will focus on how to integrate specifically for Element integration and best practices. + +## Scoped Registry + +By default Web Components, specifcally the custom elements spec, defines elements on a global registry. +This can introduce tag name collisions if multiple versions of the same library are loaded. To avoid this +we recommend using a scoped registry. This allows you to define your own registry and ensure the Elements you +depend on are only registered to the scope of your component and not the global registry. + +The lit team provides the `@lit-labs/scoped-registry-mixin` package which provides a mixin that can be used to +create a scoped registry based on the in progress [Scoped Custom Element Registries](https://github.com/webcomponents/polyfills/tree/master/packages/scoped-custom-element-registry) spec. + +```typescript +import { html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators/custom-element.js'; +import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin'; +import { scope } from '@nvidia-elements/core/scoped'; +import { Input } from '@nvidia-elements/core/input'; +import { Password } from '@nvidia-elements/core/password'; +import { Button } from '@nvidia-elements/core/button'; +import '@webcomponents/scoped-custom-element-registry'; + +@customElement('domain-login') +export class DomainLogin extends ScopedRegistryHost(LitElement) { + static elementDefinitions = { + 'nve-input': scope(Input, ScopedRegistryHost), + 'nve-password': scope(Password, ScopedRegistryHost), + 'nve-button': scope(Button, ScopedRegistryHost) + } + + render() { + return html` + + + + + + + + + + + Login + `; + } +} +``` + +The static `elementDefinitions` property is used to define the elements that will be registered to the scoped registry. +The `scope` function is used to wrap the element definition with the `ScopedRegistryHost` mixin. This is required to ensure +all Elements in the entire DOM tree are registered to the scoped registry. Once completed the `domain-login` component +can be used in any framework that supports Web Components. diff --git a/projects/site/src/docs/integrations/lit.md b/projects/site/src/docs/integrations/lit.md new file mode 100644 index 000000000..2708e6586 --- /dev/null +++ b/projects/site/src/docs/integrations/lit.md @@ -0,0 +1,132 @@ +--- +{ + title: 'Lit Integration', + layout: 'docs.11ty.js' +} +--- + +# {{ title }} + +To use Elements in Lit follow the [installation](./api/?path=/docs/about-installation--docs) steps. Once complete +elements can be imported and used within Lit components. + +```typescript +import '@nvidia-elements/core/alert-group/define.js'; +``` + +Once added, properties and events can be used via the standard lit template syntax. + +```typescript +// - ?hidden - HTML Boolean attribute +// - status - HTML attribute +// - .closable - can update via attributes or JavaScript property binding +// - @close - event listener binding for 'close' custom event +``` + +```html + + showAlert = false}">hello there! + +``` + +## CSS Utilities + +Elements provides [layout](/api/?path=/docs/foundations-layout-documentation--docs) and [typography](/api/?path=/docs/foundations-typography-documentation--docs) utilities to make it easy to style your UI. +These utilities are global CSS attributes that can be applied to any element. To +use these utilities within a Lit element, you need to import the styles, so they +are available in your elements Shadow DOM. + + + Import the needed style files via CSS or Typescript: + + +```typescript +/* Import CSS attributes via Typescript */ +import { html, unsafeCSS, LitElement } from 'lit'; +import { customElement } from 'lit/decorators/custom-element.js'; + +// https://github.com/tc39/proposal-import-attributes +import typography from '@nvidia-elements/styles/dist/typography.css' with { type: 'css' }; +import layout from '@nvidia-elements/styles/dist/layout.css' with { type: 'css' }; + +@customElement('my-element') +class MyElement extends LitElement { + + static styles = [typography, layout]; + + render() { + return html` +
+

display

+

heading

+

body

+

label

+

eyebrow

+
+ `; + } +} +``` + +```css +/* Import CSS attributes via CSS */ +@import '@nvidia-elements/styles/typography.css'; +@import '@nvidia-elements/styles/layout.css'; +``` + +## Forms + +When using Elements in forms with Lit components you can leverage the [HTML FormData API](https://developer.mozilla.org/en-US/docs/Web/API/FormData) to +manage form state and validation. + + + +Events can be attached to the form element to capture `submit` and `input` events. +Using `FormData` the `name` of the input is referenced as the key for our form values. + +```typescript +@customElement('app-login') +export class AppLogin extends LitElement { + @query('form') form: HTMLFormElement; + + @state() formValues = { email: '', password: '', remember: false }; + + render() { + return html` +
this.#submit(e)} @input=${this.#input}> + + + + required + invalid NVIDIA email + + + + + + required + minimum length is 6 characters + + + + + + + + Login +
+ `; + } + + #input() { + this.formValues = Object.fromEntries(new FormData(this.form)) as any; + } + + #submit(e) { + e.preventDefault(); + if (this.form.reportValidity()) { + console.log(this.formValues) + } + } +} +``` diff --git a/projects/site/src/docs/integrations/nextjs.md b/projects/site/src/docs/integrations/nextjs.md new file mode 100644 index 000000000..cce6ca047 --- /dev/null +++ b/projects/site/src/docs/integrations/nextjs.md @@ -0,0 +1,48 @@ +--- +{ + title: 'NextJS Integration', + layout: 'docs.11ty.js' +} +--- + +# {{ title }} + +
+ + + Source + + + + + Download + +
+ +To use Elements in [NextJS](https://nextjs.org/) follow the [installation](./api/?path=/docs/integrations-react--docs) steps. Once complete +elements can be imported and used within React jsx and tsx files. An experimental [@lit-labs/nextjs](https://github.com/lit/lit/tree/main/packages/labs/nextjs) package exists for rendering +elements with NextJS SSR. + +```typescript +import withLitSSR from '@lit-labs/nextjs'; // https://github.com/lit/lit/tree/main/packages/labs/nextjs + +/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true +}; + +export default withLitSSR({})(nextConfig); +``` + +To add TypeScript types to your TSX files add the elements interface to the [IntrinsicElements](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript) interface. + +```typescript +// global.d.ts +import type { CustomElements } from '@nvidia-elements/core/custom-elements-jsx'; + +declare module 'react' { + namespace JSX { + interface IntrinsicElements extends CustomElements { } + } +} +``` diff --git a/projects/site/src/docs/integrations/preact.md b/projects/site/src/docs/integrations/preact.md new file mode 100644 index 000000000..c27265dbc --- /dev/null +++ b/projects/site/src/docs/integrations/preact.md @@ -0,0 +1,44 @@ +--- +{ + title: 'Preact Integration', + layout: 'docs.11ty.js' +} +--- + +# {{ title }} + +To use Elements in [Preact](https://preactjs.com/) follow the [installation getting started](./api/?path=/docs/about-installation--docs) steps. Once complete +elements can be imported and used within Preact jsx and tsx files. + +```typescript +import '@nvidia-elements/core/alert/define.js'; +``` + +Once added, properties and events can be used via the standard Preact template syntax. + +```typescript +// - status - HTML attribute +// - closable - can update via attributes or JavaScript property binding +// - onclose - event listener binding for 'close' custom event +``` + +```html + + closeAlert()}>hello there! + +``` + +To add TypeScript types to your TSX files add the elements interface to the [IntrinsicElements](https://preactjs.com/guide/v10/typescript/#extending-intrinsicelements) interface. + +```typescript +// global.d.ts +import type { CustomElements } from '@nvidia-elements/core/custom-elements-jsx'; + +declare global { + namespace preact.JSX { + interface IntrinsicElements extends CustomElements { } + } +} + +export {} +``` diff --git a/projects/site/src/docs/integrations/react.md b/projects/site/src/docs/integrations/react.md new file mode 100644 index 000000000..dd3c426ef --- /dev/null +++ b/projects/site/src/docs/integrations/react.md @@ -0,0 +1,100 @@ +--- +{ + title: 'React Integration', + layout: 'docs.11ty.js' +} +--- + +# {{ title }} + +
+ + Demo + + + + + Source + +
+ +To use Elements in [React (v19)](https://preactjs.com/) follow the [installation getting started](./api/?path=/docs/about-installation--docs) steps. Once complete +elements can be imported and used within React jsx and tsx files. + +```typescript +import '@nvidia-elements/core/alert/define.js'; +``` + +Once added, properties and events can be used via the standard JSX syntax. + +```typescript +// - status - HTML attribute +// - closable - can update via attributes or JavaScript property binding +// - onclose - event listener binding for 'close' custom event +``` + +```html + + closeAlert()}>hello there! + +``` + +To add TypeScript types to your TSX files add the elements interface to the [IntrinsicElements](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript) interface. + +```typescript +// global.d.ts +import type { CustomElements } from '@nvidia-elements/core/custom-elements-jsx'; + +declare module 'react/jsx-runtime' { + namespace JSX { + interface IntrinsicElements extends CustomElements { } + } +} +``` + +### React SSR + +An experimental [@lit-labs/ssr-react](https://github.com/lit/lit/tree/main/packages/labs/ssr-react) package exists for rendering elements with SSR. + +```typescript +// app/root.tsx, import before any other elements import statements +import '@lit-labs/ssr-react/enable-lit-ssr.js'; + +// the rest of your app +``` + +## React 18 + +To use Elements in [React v18](https://reactjs.org/) follow the [installation getting started](./api/?path=/docs/about-installation--docs) steps. Once complete +elements can be imported and used within React jsx and tsx files via the `@nvidia-elements/core-react` package. This package must be used to enable React 18 compatibility with Custom Elements. +This package will wrap the custom elements into a React component, mapping the standard events and properties in a way that React can understand. + +The `@nvidia-elements/core-react` package is no longer needed as of React version 19. Using Elements directly improves compatibility and performance. + +```typescript +import { NveDialog } from '@nvidia-elements/core-react/dialog'; +``` + +```typescript +// - closable - HTML attribute +// - hidden - can update via attributes or JavaScript property binding +// - onclose - event listener binding for 'close' custom event +``` + +```html + +``` + +Documented events are prefixed with `on` in the `elements-react` package. Example, the event `close` will map to `onclose`. Imports also map 1:1 with the core library. + +```typescript +// Standard Web Component +import { Dialog } from '@nvidia-elements/core/dialog'; + +// React Component +import { NveDialog } from '@nvidia-elements/core-react/dialog'; +``` + +To learn more about the `@lit/react` package, please visit the [documentation](https://github.com/lit/lit/blob/main/packages/react/README.md). diff --git a/projects/site/src/docs/integrations/solidjs.md b/projects/site/src/docs/integrations/solidjs.md new file mode 100644 index 000000000..2c4f73250 --- /dev/null +++ b/projects/site/src/docs/integrations/solidjs.md @@ -0,0 +1,58 @@ +--- +{ + title: 'SolidJS Integration', + layout: 'docs.11ty.js' +} +--- + +# {{ title }} + +
+ + Demo + + + + + Download + + + + + Source + +
+ +To use Elements in [SolidJS](https://www.solidjs.com/) follow the [installation getting started](./api/?path=/docs/about-installation--docs) steps. Once complete +elements can be imported and used within SolidJS jsx and tsx files. + +```typescript +import '@nvidia-elements/core/alert-group/define.js'; +``` + +Once added, properties and events can be used via the standard template syntax. + +```typescript +// - status - HTML attribute +// - closable - can update via attributes or JavaScript property binding +// - onclose - event listener binding for 'close' custom event +``` + +```html + + closeAlert()}>hello there! + +``` + +To add TypeScript types to your TSX files add the elements interface to the [IntrinsicElements](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript) interface. + +```typescript +// global.d.ts +import type { CustomElements } from '@nvidia-elements/core/custom-elements-jsx'; + +declare module 'solid-js' { + namespace JSX { + interface IntrinsicElements extends CustomElements { } + } +} +``` diff --git a/projects/site/src/docs/integrations/typescript.md b/projects/site/src/docs/integrations/typescript.md new file mode 100644 index 000000000..25ecb7a1b --- /dev/null +++ b/projects/site/src/docs/integrations/typescript.md @@ -0,0 +1,69 @@ +--- +{ + title: 'TypeScript Integration', + layout: 'docs.11ty.js' +} +--- + +# {{ title }} + +
+ + Demo + + + + + Download + + + + + Source + +
+ +To use Elements in [TypeScript](https://www.typescriptlang.org/) follow the [installation](./api/?path=/docs/about-installation--docs) steps. +Once complete elements can be imported and used within TS files. The Element class +definitions can be imported via [type imports](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export) to use for static type checking. + +```typescript +import '@nvidia-elements/core/alert/define.js'; // import and register element to DOM +import type { Alert } from '@nvidia-elements/core/alert'; // import type definition + +// type can now be used for static type checking in interfaces and for generic type arguments +const alert = document.querySelector('nve-alert'); + +// set JavaScript properties +alert.closable = true; +alert.status = 'success'; + +// set HTML attributes +alert.setAttribute('closable', ''); +alert.setAttribute('status', 'success'); + +// create event listeners +alert!.addEventListener('close', e => console.log(e.target)); +``` + +## Advanced Installation + +If you are not on typescript >= version `4.5.x` you will need to add this type declaration to use isolated element imports: + +```typescript +/* ./src/declarations.d.ts */ + +interface ElementInternals { + any: any; +} +``` + +If you are using [tsconfig path mapping](https://www.typescriptlang.org/tsconfig#paths) likely you will need to enable the [skipLibCheck](https://www.typescriptlang.org/tsconfig#skipLibCheck) to avoid type definition collisions within the monorepo. Alternatively, to avoid `skipLibCheck` use `npm` workspaces instead of tsconfig path mapping. + +```typescript +{ + "compilerOptions": { + "skipLibCheck": true + } +} +``` diff --git a/projects/site/src/docs/integrations/vue.md b/projects/site/src/docs/integrations/vue.md new file mode 100644 index 000000000..ec836f80f --- /dev/null +++ b/projects/site/src/docs/integrations/vue.md @@ -0,0 +1,45 @@ +--- +{ + title: 'Vue Integration', + layout: 'docs.11ty.js' +} +--- + +# {{ title }} + +
+ + Demo + + + + + Download + + + + + Source + +
+ +To use Elements in Vue follow the [installation getting started](./api/?path=/docs/about-installation--docs) steps. Once complete +elements can be imported and used within Vue SFC files. + +```typescript +import '@nvidia-elements/core/alert-group/define.js'; +``` + +Once added, properties and events can be used via the standard Vue template syntax. + +```typescript +// - status - HTML attribute +// - :closable - can update via attributes or JavaScript property binding +// - @close - event listener binding for 'close' custom event +``` + +```html + + hello there! + +``` From 22968ebc96dac39378c7164d532356f635eeae29 Mon Sep 17 00:00:00 2001 From: Will Geller Date: Mon, 7 Apr 2025 16:27:42 -0400 Subject: [PATCH 0004/1100] chore(docs): create redirects for all integration doc pages --- projects/storybook/src/redirects/integrations-angular.mdx | 6 ++++++ projects/storybook/src/redirects/integrations-buildless.mdx | 6 ++++++ .../storybook/src/redirects/integrations-extensions.mdx | 6 ++++++ projects/storybook/src/redirects/integrations-lit.mdx | 6 ++++++ projects/storybook/src/redirects/integrations-nextjs.mdx | 6 ++++++ projects/storybook/src/redirects/integrations-preact.mdx | 6 ++++++ projects/storybook/src/redirects/integrations-react.mdx | 6 ++++++ projects/storybook/src/redirects/integrations-solidjs.mdx | 6 ++++++ .../storybook/src/redirects/integrations-typescript.mdx | 6 ++++++ projects/storybook/src/redirects/integrations-vue.mdx | 6 ++++++ 10 files changed, 60 insertions(+) create mode 100644 projects/storybook/src/redirects/integrations-angular.mdx create mode 100644 projects/storybook/src/redirects/integrations-buildless.mdx create mode 100644 projects/storybook/src/redirects/integrations-extensions.mdx create mode 100644 projects/storybook/src/redirects/integrations-lit.mdx create mode 100644 projects/storybook/src/redirects/integrations-nextjs.mdx create mode 100644 projects/storybook/src/redirects/integrations-preact.mdx create mode 100644 projects/storybook/src/redirects/integrations-react.mdx create mode 100644 projects/storybook/src/redirects/integrations-solidjs.mdx create mode 100644 projects/storybook/src/redirects/integrations-typescript.mdx create mode 100644 projects/storybook/src/redirects/integrations-vue.mdx diff --git a/projects/storybook/src/redirects/integrations-angular.mdx b/projects/storybook/src/redirects/integrations-angular.mdx new file mode 100644 index 000000000..4cb5b4eb8 --- /dev/null +++ b/projects/storybook/src/redirects/integrations-angular.mdx @@ -0,0 +1,6 @@ +import { Meta } from '@storybook/addon-docs'; +import { Redirect } from '@nve-internals/storybook/blocks'; + + + + diff --git a/projects/storybook/src/redirects/integrations-buildless.mdx b/projects/storybook/src/redirects/integrations-buildless.mdx new file mode 100644 index 000000000..b6bab5ed3 --- /dev/null +++ b/projects/storybook/src/redirects/integrations-buildless.mdx @@ -0,0 +1,6 @@ +import { Meta } from '@storybook/addon-docs'; +import { Redirect } from '@nve-internals/storybook/blocks'; + + + + diff --git a/projects/storybook/src/redirects/integrations-extensions.mdx b/projects/storybook/src/redirects/integrations-extensions.mdx new file mode 100644 index 000000000..5b01f66a4 --- /dev/null +++ b/projects/storybook/src/redirects/integrations-extensions.mdx @@ -0,0 +1,6 @@ +import { Meta } from '@storybook/addon-docs'; +import { Redirect } from '@nve-internals/storybook/blocks'; + + + + diff --git a/projects/storybook/src/redirects/integrations-lit.mdx b/projects/storybook/src/redirects/integrations-lit.mdx new file mode 100644 index 000000000..ed8194c42 --- /dev/null +++ b/projects/storybook/src/redirects/integrations-lit.mdx @@ -0,0 +1,6 @@ +import { Meta } from '@storybook/addon-docs'; +import { Redirect } from '@nve-internals/storybook/blocks'; + + + + diff --git a/projects/storybook/src/redirects/integrations-nextjs.mdx b/projects/storybook/src/redirects/integrations-nextjs.mdx new file mode 100644 index 000000000..f2afc7c31 --- /dev/null +++ b/projects/storybook/src/redirects/integrations-nextjs.mdx @@ -0,0 +1,6 @@ +import { Meta } from '@storybook/addon-docs'; +import { Redirect } from '@nve-internals/storybook/blocks'; + + + + diff --git a/projects/storybook/src/redirects/integrations-preact.mdx b/projects/storybook/src/redirects/integrations-preact.mdx new file mode 100644 index 000000000..d0a46839c --- /dev/null +++ b/projects/storybook/src/redirects/integrations-preact.mdx @@ -0,0 +1,6 @@ +import { Meta } from '@storybook/addon-docs'; +import { Redirect } from '@nve-internals/storybook/blocks'; + + + + diff --git a/projects/storybook/src/redirects/integrations-react.mdx b/projects/storybook/src/redirects/integrations-react.mdx new file mode 100644 index 000000000..d874538c7 --- /dev/null +++ b/projects/storybook/src/redirects/integrations-react.mdx @@ -0,0 +1,6 @@ +import { Meta } from '@storybook/addon-docs'; +import { Redirect } from '@nve-internals/storybook/blocks'; + + + + diff --git a/projects/storybook/src/redirects/integrations-solidjs.mdx b/projects/storybook/src/redirects/integrations-solidjs.mdx new file mode 100644 index 000000000..67dd02bed --- /dev/null +++ b/projects/storybook/src/redirects/integrations-solidjs.mdx @@ -0,0 +1,6 @@ +import { Meta } from '@storybook/addon-docs'; +import { Redirect } from '@nve-internals/storybook/blocks'; + + + + diff --git a/projects/storybook/src/redirects/integrations-typescript.mdx b/projects/storybook/src/redirects/integrations-typescript.mdx new file mode 100644 index 000000000..3d76292a0 --- /dev/null +++ b/projects/storybook/src/redirects/integrations-typescript.mdx @@ -0,0 +1,6 @@ +import { Meta } from '@storybook/addon-docs'; +import { Redirect } from '@nve-internals/storybook/blocks'; + + + + diff --git a/projects/storybook/src/redirects/integrations-vue.mdx b/projects/storybook/src/redirects/integrations-vue.mdx new file mode 100644 index 000000000..f01dc67d9 --- /dev/null +++ b/projects/storybook/src/redirects/integrations-vue.mdx @@ -0,0 +1,6 @@ +import { Meta } from '@storybook/addon-docs'; +import { Redirect } from '@nve-internals/storybook/blocks'; + + + + From 65f422e23082637601eff0c997966279d6bacc7d Mon Sep 17 00:00:00 2001 From: Will Geller Date: Mon, 7 Apr 2025 16:49:33 -0400 Subject: [PATCH 0005/1100] chore(docs): delete .mdx files for all integration doc pages --- .../storybook/src/integrations/angular.mdx | 223 ------------------ .../storybook/src/integrations/buildless.mdx | 95 -------- .../storybook/src/integrations/extentions.mdx | 71 ------ projects/storybook/src/integrations/lit.mdx | 132 ----------- .../storybook/src/integrations/nextjs.mdx | 43 ---- .../storybook/src/integrations/preact.mdx | 39 --- projects/storybook/src/integrations/react.mdx | 90 ------- .../storybook/src/integrations/solidjs.mdx | 49 ---- .../storybook/src/integrations/typescript.mdx | 62 ----- projects/storybook/src/integrations/vue.mdx | 38 --- 10 files changed, 842 deletions(-) delete mode 100644 projects/storybook/src/integrations/angular.mdx delete mode 100644 projects/storybook/src/integrations/buildless.mdx delete mode 100644 projects/storybook/src/integrations/extentions.mdx delete mode 100644 projects/storybook/src/integrations/lit.mdx delete mode 100644 projects/storybook/src/integrations/nextjs.mdx delete mode 100644 projects/storybook/src/integrations/preact.mdx delete mode 100644 projects/storybook/src/integrations/react.mdx delete mode 100644 projects/storybook/src/integrations/solidjs.mdx delete mode 100644 projects/storybook/src/integrations/typescript.mdx delete mode 100644 projects/storybook/src/integrations/vue.mdx diff --git a/projects/storybook/src/integrations/angular.mdx b/projects/storybook/src/integrations/angular.mdx deleted file mode 100644 index e30af5b5f..000000000 --- a/projects/storybook/src/integrations/angular.mdx +++ /dev/null @@ -1,223 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; -import '@nvidia-elements/core/alert/define.js'; - - - -# Angular Integration - -
- - Demo - - - Download - - - Source - -
- -To use Elements in [Angular](https://angular.dev/) follow the [installation getting started](?path=/docs/about-installation--docs) steps. - -Next import the element your Angular component and add `CUSTOM_ELEMENTS_SCHEMA` to the schemas to allow web components to be used within your template. - -```javascript -import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import '@nvidia-elements/core/alert/define.js'; - -@Component({ - selector: 'app-root', - standalone: true, - schemas: [CUSTOM_ELEMENTS_SCHEMA], - templateUrl: './app.component.html', - styleUrl: './app.component.css' -}) -export class AppComponent { } -``` - -Once added, properties and events can be used via the standard Angular template syntax. - -```html - - - - hello there! - -``` - -## Forms - -Maglev Elements provides a suite of form components that leverage standard HTML input types. This enables frameworks -to take advantage of built in framework features like [Angular Reactive Forms](https://angular.io/guide/reactive-forms) for managing form validation and state. - -To integrate custom form control types into Elements checkout our custom control documentation. - -```html -
- - - - required - - -
-``` - -```typescript -import { Component } from '@angular/core'; -import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms'; - -@Component({ - selector: 'app-root', - standalone: true, - imports: [ReactiveFormsModule], - templateUrl: './app.component.html', - styleUrl: './app.component.css' -}) -export class AppComponent { - form: FormGroup; - - constructor(private formBuilder: FormBuilder) { - this.form = this.formBuilder.group({ - firstName: ['', Validators.required] - }); - } - - submit() { - this.form.controls.custom.markAsTouched(); - console.log(this.form.value); - } -} -``` - -## Legacy Installations - -### Angular 12 - - - Angular 12 is past its support lifecycle and will not receive security updates. Applications should migrate as soon as possible to the latest release. - - -Angular 12 is not officially supported due to its older dependencies (ESBuild, Webpack) not supporting browser standard JavaScript (es2020) and CSS features. -To use elements in Angular 12 when upgrading is not possible, the [static import bundles](https://github.com/NVIDIA/elements/-/tree/main/projects/starters/static?ref_type=heads) can be copied into the Angular CLI assets and referenced. - -Static bundles are strongly discouraged as it will include all component code and not support any performance optimizations -such as tree-shaking. - -```json -"assets": [ - "@nvidia-elements/core/bundles/elements.0.30.0.bundle.css", - "@nvidia-elements/core/bundles/elements.0.30.0.bundle.js" -] -``` - -```html - - - - - - - hello there - - - -``` - -### Styles - -If you don't have a global `styles.scss` add one to your app's `angular.json` config. - -```json -/* - * ./angular.json - * projects.appName.architect.build.options.styles: - */ -"styles": [ - "./src/styles.scss" -], -``` - -```css -/* ./styles.css */ -@import '@nvidia-elements/themes/fonts/inter.css'; -@import '@nvidia-elements/themes/index.css'; -@import '@nvidia-elements/themes/dark.css'; -@import '@nvidia-elements/styles/layout.css'; -@import '@nvidia-elements/styles/typography.css'; -``` - -### TypeScript - -If you are not on typescript >= version `4.5.x` you will need to add this type declaration to use isolated element imports: - -```typescript -/* ./src/declarations.d.ts */ - -interface ElementInternals { - any: any; -} -``` - -If you are using [tsconfig path mapping](https://www.typescriptlang.org/tsconfig#paths) likely you will need to enable the [skipLibCheck](https://www.typescriptlang.org/tsconfig#skipLibCheck) to avoid type definition collisions within the monorepo. Alternatively, to avoid `skipLibCheck` use `npm` workspaces instead of tsconfig path mapping. - -```json -{ - "compilerOptions": { - "skipLibCheck": true - } -} -``` - -## Advanced - Import CSS Source - -[Lit](https://lit.dev) as a standard TypeScript based library works mostly out of the box when imported and used within an Angular application source code. -This enables Lit based Web Components to be authored directly within your Angular application but not require a standalone library/project. -If you are authoring Lit based components and would like to import external CSS files (similar to [Vite Inlined Imports](https://vitejs.dev/guide/features.html#disabling-css-injection-into-the-page)) additonal Angular CLI configuration is needed. - -Imports like Webpack !raw-loader and Vite ?inline are not Web standard and likely to be migrated in the future to Import Assertions - -### 1. Install - -```shell -npm install raw-loader -``` - -### 2. Update tsconfig.json - -```json -{ - "compilerOptions": { - "allowSyntheticDefaultImports": true, - } -} -``` - -### 3. Update Types - -```typescript -// declarations.d.ts -declare module 'raw-loader!*.css' { - const content: string; - export = content; -} -``` - -### 4. Import Styles - -```typescript -import { unsafeCSS } from 'lit'; -import typography from 'raw-loader!node_modules/@nvidia-elements/core/css/module.typography.css'; -import layout from 'raw-loader!node_modules/@nvidia-elements/core/css/module.layout.css'; - -// Lit Component -static override styles = [ - css`${unsafeCSS(typography)}`, - css`${unsafeCSS(layout)}` -]; -``` diff --git a/projects/storybook/src/integrations/buildless.mdx b/projects/storybook/src/integrations/buildless.mdx deleted file mode 100644 index bc097fb75..000000000 --- a/projects/storybook/src/integrations/buildless.mdx +++ /dev/null @@ -1,95 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; - - - -# Buildless Integration - -
- - Demo - - - Download - - - Source - -
- -Using [Import Maps](https://web.dev/import-maps-in-all-modern-browsers/) it is possible to -use elements without build tooling such as Vite or Rollup for easy in browser **prototyping**. - -```html - - - - Import Map Starter + @nvidia-elements/core - - - - - - hello world - - - - -``` - -## Create Lit Components - -Using import maps more complex UI components can be created without build tooling. - -{/* Inlined playground so example does not encourage copy/paste of temporary playground cdn */} -Playground - -```html - - - - - - - - - - - - - - - -``` diff --git a/projects/storybook/src/integrations/extentions.mdx b/projects/storybook/src/integrations/extentions.mdx deleted file mode 100644 index 71eb3bf84..000000000 --- a/projects/storybook/src/integrations/extentions.mdx +++ /dev/null @@ -1,71 +0,0 @@ -import { Meta, Story } from '@storybook/addon-docs'; -import '@nvidia-elements/core/alert/define.js'; - - - -# Extensions - -
- - Download - - - Source - -
- -To create reusable UI components that build on top of Elements we recommend using [lit.dev](https://lit.dev) for authoring highly reusable custom elements (Web Components). -This path enables your extensions to work in a large variety of frameworks and environments. We recommend -reading the [publishing and best practices](https://lit.dev/docs/tools/publishing/) provided by the lit team. -The rest of this guide will focus on how to integrate specifically for Element integration and best practices. - -## Scoped Registry - -By default Web Components, specifcally the custom elements spec, defines elements on a global registry. -This can introduce tag name collisions if multiple versions of the same library are loaded. To avoid this -we recommend using a scoped registry. This allows you to define your own registry and ensure the Elements you -depend on are only registered to the scope of your component and not the global registry. - -The lit team provides the `@lit-labs/scoped-registry-mixin` package which provides a mixin that can be used to -create a scoped registry based on the in progress [Scoped Custom Element Registries](https://github.com/webcomponents/polyfills/tree/master/packages/scoped-custom-element-registry) spec. - -```typescript -import { html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators/custom-element.js'; -import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin'; -import { scope } from '@nvidia-elements/core/scoped'; -import { Input } from '@nvidia-elements/core/input'; -import { Password } from '@nvidia-elements/core/password'; -import { Button } from '@nvidia-elements/core/button'; -import '@webcomponents/scoped-custom-element-registry'; - -@customElement('domain-login') -export class DomainLogin extends ScopedRegistryHost(LitElement) { - static elementDefinitions = { - 'nve-input': scope(Input, ScopedRegistryHost), - 'nve-password': scope(Password, ScopedRegistryHost), - 'nve-button': scope(Button, ScopedRegistryHost) - } - - render() { - return html` - - - - - - - - - - - Login - `; - } -} -``` - -The static `elementDefinitions` property is used to define the elements that will be registered to the scoped registry. -The `scope` function is used to wrap the element definition with the `ScopedRegistryHost` mixin. This is required to ensure -all Elements in the entire DOM tree are registered to the scoped registry. Once completed the `domain-login` component -can be used in any framework that supports Web Components. diff --git a/projects/storybook/src/integrations/lit.mdx b/projects/storybook/src/integrations/lit.mdx deleted file mode 100644 index 112ff5f65..000000000 --- a/projects/storybook/src/integrations/lit.mdx +++ /dev/null @@ -1,132 +0,0 @@ -import { Meta, Story } from '@storybook/addon-docs'; -import '@nvidia-elements/core/button/define.js'; -import '@nvidia-elements/core/checkbox/define.js'; -import { LitForms } from '../../../elements/src/forms/validation.stories'; - - - -# Lit Integration - -To use Elements in Lit follow the [installation](?path=/docs/about-installation--docs) steps. Once complete -elements can be imported and used within Lit components. - -```javascript -import '@nvidia-elements/core/alert-group/define.js'; -``` - -Once added, properties and events can be used via the standard lit template syntax. - -```javascript -// - ?hidden - HTML Boolean attribute -// - status - HTML attribute -// - .closable - can update via attributes or JavaScript property binding -// - @close - event listener binding for 'close' custom event - -html` - - showAlert = false}">hello there! - -`; -``` - -## CSS Utilities - -Elements provides [layout](?path=/docs/foundations-layout-documentation--docs) and [typography](?path=/docs/foundations-typography-documentation--docs) utilities to make it easy to style your UI. -These utilities are global CSS attributes that can be applied to any element. To -use these utilities within a Lit element, you need to import the styles, so they -are available in your elements Shadow DOM. - - - Import the needed style files via CSS or Typescript: - - -```typescript -/* Import CSS attributes via Typescript */ -import { html, unsafeCSS, LitElement } from 'lit'; -import { customElement } from 'lit/decorators/custom-element.js'; - -// https://github.com/tc39/proposal-import-attributes -import typography from '@nvidia-elements/styles/dist/typography.css' with { type: 'css' }; -import layout from '@nvidia-elements/styles/dist/layout.css' with { type: 'css' }; - -@customElement('my-element') -class MyElement extends LitElement { - - static styles = [typography, layout]; - - render() { - return html` -
-

display

-

heading

-

body

-

label

-

eyebrow

-
- `; - } -} -``` - -```css -/* Import CSS attributes via CSS */ -@import '@nvidia-elements/styles/typography.css'; -@import '@nvidia-elements/styles/layout.css'; -``` - -

Forms

- -When using Elements in forms with Lit components you can leverage the [HTML FormData API](https://developer.mozilla.org/en-US/docs/Web/API/FormData) to -manage form state and validation. - - - -Events can be attached to the form element to capture `submit` and `input` events. -Using `FormData` the `name` of the input is referenced as the key for our form values. - -```typescript -@customElement('app-login') -export class AppLogin extends LitElement { - @query('form') form: HTMLFormElement; - - @state() formValues = { email: '', password: '', remember: false }; - - render() { - return html` -
this.#submit(e)} @input=${this.#input}> - - - - required - invalid NVIDIA email - - - - - - required - minimum length is 6 characters - - - - - - - - Login -
- `; - } - - #input() { - this.formValues = Object.fromEntries(new FormData(this.form)) as any; - } - - #submit(e) { - e.preventDefault(); - if (this.form.reportValidity()) { - console.log(this.formValues) - } - } -} -``` diff --git a/projects/storybook/src/integrations/nextjs.mdx b/projects/storybook/src/integrations/nextjs.mdx deleted file mode 100644 index 43121c500..000000000 --- a/projects/storybook/src/integrations/nextjs.mdx +++ /dev/null @@ -1,43 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; -import '@nvidia-elements/core/alert/define.js'; - - - -# NextJS Integration - -
- - Source - - - Download - -
- -To use Elements in [NextJS](https://nextjs.org/) follow the [installation](?path=/docs/integrations-react--docs) steps. Once complete -elements can be imported and used within React jsx and tsx files. An experimental [@lit-labs/nextjs](https://github.com/lit/lit/tree/main/packages/labs/nextjs) package exists for rendering -elements with NextJS SSR. - -```javascript -import withLitSSR from '@lit-labs/nextjs'; // https://github.com/lit/lit/tree/main/packages/labs/nextjs - -/** @type {import('next').NextConfig} */ -const nextConfig = { - reactStrictMode: true -}; - -export default withLitSSR({})(nextConfig); -``` - -To add TypeScript types to your TSX files add the elements interface to the [IntrinsicElements](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript) interface. - -```typescript -// global.d.ts -import type { CustomElements } from '@nvidia-elements/core/custom-elements-jsx'; - -declare module 'react' { - namespace JSX { - interface IntrinsicElements extends CustomElements { } - } -} -``` diff --git a/projects/storybook/src/integrations/preact.mdx b/projects/storybook/src/integrations/preact.mdx deleted file mode 100644 index b9668dc6f..000000000 --- a/projects/storybook/src/integrations/preact.mdx +++ /dev/null @@ -1,39 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; - - - -# Preact Integration - -To use Elements in [Preact](https://preactjs.com/) follow the [installation getting started](?path=/docs/about-installation--docs) steps. Once complete -elements can be imported and used within Preact jsx and tsx files. - -```javascript -import '@nvidia-elements/core/alert/define.js'; -``` - -Once added, properties and events can be used via the standard Preact template syntax. - -```jsx -// - status - HTML attribute -// - closable - can update via attributes or JavaScript property binding -// - onclose - event listener binding for 'close' custom event - - - closeAlert()}>hello there! - -``` - -To add TypeScript types to your TSX files add the elements interface to the [IntrinsicElements](https://preactjs.com/guide/v10/typescript/#extending-intrinsicelements) interface. - -```typescript -// global.d.ts -import type { CustomElements } from '@nvidia-elements/core/custom-elements-jsx'; - -declare global { - namespace preact.JSX { - interface IntrinsicElements extends CustomElements { } - } -} - -export {} -``` diff --git a/projects/storybook/src/integrations/react.mdx b/projects/storybook/src/integrations/react.mdx deleted file mode 100644 index 936144fe8..000000000 --- a/projects/storybook/src/integrations/react.mdx +++ /dev/null @@ -1,90 +0,0 @@ -import { Meta, Story } from '@storybook/addon-docs'; -import '@nvidia-elements/core/alert/define.js'; - - - -# React Integration - -
- - Demo - - - Source - -
- -To use Elements in [React (v19)](https://preactjs.com/) follow the [installation getting started](?path=/docs/about-installation--docs) steps. Once complete -elements can be imported and used within React jsx and tsx files. - -```javascript -import '@nvidia-elements/core/alert/define.js'; -``` - -Once added, properties and events can be used via the standard JSX syntax. - -```jsx -// - status - HTML attribute -// - closable - can update via attributes or JavaScript property binding -// - onclose - event listener binding for 'close' custom event - - - closeAlert()}>hello there! - -``` - -To add TypeScript types to your TSX files add the elements interface to the [IntrinsicElements](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript) interface. - -```typescript -// global.d.ts -import type { CustomElements } from '@nvidia-elements/core/custom-elements-jsx'; - -declare module 'react/jsx-runtime' { - namespace JSX { - interface IntrinsicElements extends CustomElements { } - } -} -``` - -### React SSR - -An experimental [@lit-labs/ssr-react](https://github.com/lit/lit/tree/main/packages/labs/ssr-react) package exists for rendering elements with SSR. - -```javascript -// app/root.tsx, import before any other elements import statements -import '@lit-labs/ssr-react/enable-lit-ssr.js'; - -// the rest of your app -``` - -## React 18 - -To use Elements in [React v18](https://reactjs.org/) follow the [installation getting started](?path=/docs/about-installation--docs) steps. Once complete -elements can be imported and used within React jsx and tsx files via the `@nvidia-elements/core-react` package. This package must be used to enable React 18 compatibility with Custom Elements. -This package will wrap the custom elements into a React component, mapping the standard events and properties in a way that React can understand. - -The `@nvidia-elements/core-react` package is no longer needed as of React version 19. Using Elements directly improves compatibility and performance. - -```tsx -import { NveDialog } from '@nvidia-elements/core-react/dialog'; - -// - closable - HTML attribute -// - hidden - can update via attributes or JavaScript property binding -// - onclose - event listener binding for 'close' custom event - - -``` - -Documented events are prefixed with `on` in the `elements-react` package. Example, the event `close` will map to `onclose`. Imports also map 1:1 with the core library. - -```tsx -// Standard Web Component -import { Dialog } from '@nvidia-elements/core/dialog'; - -// React Component -import { NveDialog } from '@nvidia-elements/core-react/dialog'; -``` - -To learn more about the `@lit/react` package, please visit the [documentation](https://github.com/lit/lit/blob/main/packages/react/README.md). diff --git a/projects/storybook/src/integrations/solidjs.mdx b/projects/storybook/src/integrations/solidjs.mdx deleted file mode 100644 index 50be92803..000000000 --- a/projects/storybook/src/integrations/solidjs.mdx +++ /dev/null @@ -1,49 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; - - - -# SolidJS Integration - -
- - Demo - - - Download - - - Source - -
- -To use Elements in [SolidJS](https://www.solidjs.com/) follow the [installation getting started](?path=/docs/about-installation--docs) steps. Once complete -elements can be imported and used within SolidJS jsx and tsx files. - -```javascript -import '@nvidia-elements/core/alert-group/define.js'; -``` - -Once added, properties and events can be used via the standard template syntax. - -```jsx -// - status - HTML attribute -// - closable - can update via attributes or JavaScript property binding -// - onclose - event listener binding for 'close' custom event - - - closeAlert()}>hello there! - -``` - -To add TypeScript types to your TSX files add the elements interface to the [IntrinsicElements](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript) interface. - -```typescript -// global.d.ts -import type { CustomElements } from '@nvidia-elements/core/custom-elements-jsx'; - -declare module 'solid-js' { - namespace JSX { - interface IntrinsicElements extends CustomElements { } - } -} -``` diff --git a/projects/storybook/src/integrations/typescript.mdx b/projects/storybook/src/integrations/typescript.mdx deleted file mode 100644 index 31c48e077..000000000 --- a/projects/storybook/src/integrations/typescript.mdx +++ /dev/null @@ -1,62 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; - - - -# TypeScript Integration - -
- - Demo - - - Download - - - Source - -
- -To use Elements in [TypeScript](https://www.typescriptlang.org/) follow the [installation](?path=/docs/about-installation--docs) steps. -Once complete elements can be imported and used within TS files. The Element class -definitions can be imported via [type imports](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export) to use for static type checking. - -```typescript -import '@nvidia-elements/core/alert/define.js'; // import and register element to DOM -import type { Alert } from '@nvidia-elements/core/alert'; // import type definition - -// type can now be used for static type checking in interfaces and for generic type arguments -const alert = document.querySelector('nve-alert'); - -// set JavaScript properties -alert.closable = true; -alert.status = 'success'; - -// set HTML attributes -alert.setAttribute('closable', ''); -alert.setAttribute('status', 'success'); - -// create event listeners -alert!.addEventListener('close', e => console.log(e.target)); -``` - -## Advanced Installation - -If you are not on typescript >= version `4.5.x` you will need to add this type declaration to use isolated element imports: - -```typescript -/* ./src/declarations.d.ts */ - -interface ElementInternals { - any: any; -} -``` - -If you are using [tsconfig path mapping](https://www.typescriptlang.org/tsconfig#paths) likely you will need to enable the [skipLibCheck](https://www.typescriptlang.org/tsconfig#skipLibCheck) to avoid type definition collisions within the monorepo. Alternatively, to avoid `skipLibCheck` use `npm` workspaces instead of tsconfig path mapping. - -```json -{ - "compilerOptions": { - "skipLibCheck": true - } -} -``` diff --git a/projects/storybook/src/integrations/vue.mdx b/projects/storybook/src/integrations/vue.mdx deleted file mode 100644 index 0253cb227..000000000 --- a/projects/storybook/src/integrations/vue.mdx +++ /dev/null @@ -1,38 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; - - - -# Vue Integration - -
- - Demo - - - Download - - - Source - -
- -To use Elements in Vue follow the [installation](?path=/docs/about-installation--docs) steps. Once complete -elements can be imported and used within Vue SFC files. - -```javascript -import '@nvidia-elements/core/alert-group/define.js'; -``` - -Once added, properties and events can be used via the standard Vue template syntax. - -```html - - - - hello there! - -``` From 8eff7c9b22964f41545b01fd3a2f4eab49d947b2 Mon Sep 17 00:00:00 2001 From: Will Geller Date: Tue, 8 Apr 2025 16:14:42 -0400 Subject: [PATCH 0006/1100] chore(docs): add stateful tree nav for all integration doc pages --- projects/site/src/_11ty/layouts/common.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/projects/site/src/_11ty/layouts/common.js b/projects/site/src/_11ty/layouts/common.js index 447ca4bdd..4930c0309 100644 --- a/projects/site/src/_11ty/layouts/common.js +++ b/projects/site/src/_11ty/layouts/common.js @@ -105,18 +105,18 @@ export const renderDocsNav = data => /* html */ ` Requests Migration - + Integrations - Angular - Buildless - Extensions - Lit - NextJS - Preact - React - SolidJS - TypeScript - Vue + Angular + Buildless + Extensions + Lit + NextJS + Preact + React + SolidJS + TypeScript + Vue Foundations From 31e8b15c605b67cf827f39eb1af8368650ba10d6 Mon Sep 17 00:00:00 2001 From: Will Geller Date: Tue, 8 Apr 2025 16:33:00 -0400 Subject: [PATCH 0007/1100] chore(docs): fix styles on 11ty pages --- projects/site/src/_11ty/layouts/docs.11ty.js | 9 +++++++++ projects/site/src/_11ty/libraries/markdown.js | 3 +-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/projects/site/src/_11ty/layouts/docs.11ty.js b/projects/site/src/_11ty/layouts/docs.11ty.js index 135fc7167..f6cce73ac 100644 --- a/projects/site/src/_11ty/layouts/docs.11ty.js +++ b/projects/site/src/_11ty/layouts/docs.11ty.js @@ -29,6 +29,15 @@ export function render(data) { padding-bottom: var(--nve-ref-space-xs); } + /* Temporary fix for code_inline tag renderer in paragraphs, applies nve-text="code" styles */ + p[nve-text] > code { + background: var(--nve-sys-interaction-field-background) !important; + border-radius: var(--nve-ref-border-radius-xs) !important; + display: inline-block !important; + font-family: monospace !important; + padding: var(--nve-ref-size-50) var(--nve-ref-size-100) + } + pre:has(nve-codeblock), code:has(nve-codeblock) { display: contents; diff --git a/projects/site/src/_11ty/libraries/markdown.js b/projects/site/src/_11ty/libraries/markdown.js index f2dd7d090..33149d494 100644 --- a/projects/site/src/_11ty/libraries/markdown.js +++ b/projects/site/src/_11ty/libraries/markdown.js @@ -43,7 +43,6 @@ markdown.renderer.rules.heading_open = renderer; markdown.renderer.rules.link_open = renderer; markdown.renderer.rules.paragraph_open = renderer; markdown.renderer.rules.bullet_list_open = renderer; -// markdown.renderer.rules.code_inline = renderer; -/* TODO: fix code inline renderer */ +// markdown.renderer.rules.code_inline = renderer; /* TODO: fix code inline renderer */ export default markdown; From 5472395de989aec3825e8f7b574cd6b2fabf91f5 Mon Sep 17 00:00:00 2001 From: Cory Rylan Date: Wed, 9 Apr 2025 13:39:10 -0500 Subject: [PATCH 0008/1100] fix(elements): popover anchoring - fix cross shadow root trigger check - fix cross shadow root anchor selection - add opt in for force use of css absolute positioning Signed-off-by: Cory Rylan --- .../accordion/accordion.test.lighthouse.ts | 2 +- .../src/button/button.test.lighthouse.ts | 2 +- .../chat-message.test.lighthouse.ts | 2 +- .../src/combobox/combobox.test.lighthouse.ts | 2 +- .../src/drawer/drawer.test.lighthouse.ts | 2 +- .../icon-button.test.lighthouse.ts | 2 +- .../type-native-anchor-fallback.utils.ts | 3 +- .../type-native-anchor.controller.ts | 5 ++- ...-native-popover-trigger.controller.test.ts | 14 +++++++ .../type-native-popover-trigger.controller.ts | 6 ++- .../type-native-popover.controller.test.ts | 21 +++++++++++ .../type-native-popover.controller.ts | 4 +- .../type-native-popover.utils.test.ts | 37 +++++++++++++------ .../controllers/type-native-popover.utils.ts | 4 +- .../type-popover.controller.stories.ts | 23 ++++++++++++ .../elements/src/internal/styles/popover.css | 11 ++---- .../elements/src/page/page.test.lighthouse.ts | 2 +- .../src/panel/panel.test.lighthouse.ts | 2 +- .../preferences-input.test.lighthouse.ts | 2 +- ...progressive-filter-chip.test.lighthouse.ts | 2 +- .../src/search/search.test.lighthouse.ts | 2 +- .../src/steps/steps.test.lighthouse.ts | 2 +- .../elements/src/tabs/tabs.test.lighthouse.ts | 2 +- .../elements/src/tag/tag.test.lighthouse.ts | 2 +- .../elements/src/time/time.test.lighthouse.ts | 2 +- 25 files changed, 114 insertions(+), 44 deletions(-) diff --git a/projects/elements/src/accordion/accordion.test.lighthouse.ts b/projects/elements/src/accordion/accordion.test.lighthouse.ts index f9db70e2a..eab79cd69 100644 --- a/projects/elements/src/accordion/accordion.test.lighthouse.ts +++ b/projects/elements/src/accordion/accordion.test.lighthouse.ts @@ -20,6 +20,6 @@ describe('accordion lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(19.7); + expect(report.payload.javascript.kb).toBeLessThan(19.9); }); }); diff --git a/projects/elements/src/button/button.test.lighthouse.ts b/projects/elements/src/button/button.test.lighthouse.ts index 2a2cc47c5..584765797 100644 --- a/projects/elements/src/button/button.test.lighthouse.ts +++ b/projects/elements/src/button/button.test.lighthouse.ts @@ -15,6 +15,6 @@ describe('button lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(87); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(11.2); + expect(report.payload.javascript.kb).toBeLessThan(11.5); }); }); diff --git a/projects/elements/src/chat-message/chat-message.test.lighthouse.ts b/projects/elements/src/chat-message/chat-message.test.lighthouse.ts index 348c87620..5d5aa45d1 100644 --- a/projects/elements/src/chat-message/chat-message.test.lighthouse.ts +++ b/projects/elements/src/chat-message/chat-message.test.lighthouse.ts @@ -13,6 +13,6 @@ describe('button lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(11.2); + expect(report.payload.javascript.kb).toBeLessThan(11.5); }); }); diff --git a/projects/elements/src/combobox/combobox.test.lighthouse.ts b/projects/elements/src/combobox/combobox.test.lighthouse.ts index 8d9ed0369..3ffc3eb10 100644 --- a/projects/elements/src/combobox/combobox.test.lighthouse.ts +++ b/projects/elements/src/combobox/combobox.test.lighthouse.ts @@ -22,6 +22,6 @@ describe('combobox lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(33.1); + expect(report.payload.javascript.kb).toBeLessThan(33.5); }); }); diff --git a/projects/elements/src/drawer/drawer.test.lighthouse.ts b/projects/elements/src/drawer/drawer.test.lighthouse.ts index bfd9ea10e..548482c3b 100644 --- a/projects/elements/src/drawer/drawer.test.lighthouse.ts +++ b/projects/elements/src/drawer/drawer.test.lighthouse.ts @@ -14,6 +14,6 @@ describe('drawer lighthouse report', () => { expect(report.scores.performance).toBeGreaterThan(98); // bfcache expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(22.8); + expect(report.payload.javascript.kb).toBeLessThan(23); }); }); diff --git a/projects/elements/src/icon-button/icon-button.test.lighthouse.ts b/projects/elements/src/icon-button/icon-button.test.lighthouse.ts index 800bc9e0d..2e96f8306 100644 --- a/projects/elements/src/icon-button/icon-button.test.lighthouse.ts +++ b/projects/elements/src/icon-button/icon-button.test.lighthouse.ts @@ -13,6 +13,6 @@ describe('icon-button lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(16.5); + expect(report.payload.javascript.kb).toBeLessThan(17); }); }); diff --git a/projects/elements/src/internal/controllers/type-native-anchor-fallback.utils.ts b/projects/elements/src/internal/controllers/type-native-anchor-fallback.utils.ts index f37c9b212..83c092ec1 100644 --- a/projects/elements/src/internal/controllers/type-native-anchor-fallback.utils.ts +++ b/projects/elements/src/internal/controllers/type-native-anchor-fallback.utils.ts @@ -45,7 +45,8 @@ export async function setAnchorPositionFallback(host: HTMLElement, popoverConfig } export function setPopoverStyles(config: PopoverConfig, position: Partial) { - Object.assign(config.popover.style, { position: config.strategy, left: `${position.x}px`, top: `${position.y}px` }); + config.popover.style.setProperty('position', config.strategy); + config.popover.style.setProperty('inset', `${position.y}px auto auto ${position.x}px`, 'important'); } export function setArrowStyles(config: PopoverConfig, position: ComputePositionReturn) { diff --git a/projects/elements/src/internal/controllers/type-native-anchor.controller.ts b/projects/elements/src/internal/controllers/type-native-anchor.controller.ts index 0bf94ce8a..5508e72ba 100644 --- a/projects/elements/src/internal/controllers/type-native-anchor.controller.ts +++ b/projects/elements/src/internal/controllers/type-native-anchor.controller.ts @@ -52,7 +52,8 @@ export class TypeNativeAnchorController implements React const hostAnchor = getHostAnchor(this.host); return ( supportsNativeCSSAnchorPosition() && - (hostAnchor === globalThis.document.body || sameRenderRoot(this.host, hostAnchor)) + (hostAnchor === globalThis.document.body || sameRenderRoot(this.host, hostAnchor)) && + this.host.getAttribute('position-strategy') !== 'absolute' ); } @@ -88,7 +89,7 @@ export class TypeNativeAnchorController implements React this.host.addController(this.typeNativeAnchorFallbackController); } - if (!crossRootWarning) { + if (!crossRootWarning && !sameRenderRoot(this.host, getHostAnchor(this.host))) { LogService.warn(getCrossShadowRootAnchorWarning(this.host.localName)); crossRootWarning = true; } diff --git a/projects/elements/src/internal/controllers/type-native-popover-trigger.controller.test.ts b/projects/elements/src/internal/controllers/type-native-popover-trigger.controller.test.ts index d5444f4ae..0833887d7 100644 --- a/projects/elements/src/internal/controllers/type-native-popover-trigger.controller.test.ts +++ b/projects/elements/src/internal/controllers/type-native-popover-trigger.controller.test.ts @@ -84,4 +84,18 @@ describe('type-native-popover-trigger.controller', () => { await elementIsStable(element); expect(popover.matches(':popover-open')).toBe(true); }); + + it('should not trigger popover in cross render roots', async () => { + const shadowHost = document.createElement('div'); + shadowHost.attachShadow({ mode: 'open' }); + shadowHost.shadowRoot.appendChild(popover); + document.body.appendChild(shadowHost); + + const event = untilEvent(element, 'click'); + emulateClick(element); + expect(await event).toBeDefined(); + + await elementIsStable(element); + expect(popover.matches(':popover-open')).toBe(false); + }); }); diff --git a/projects/elements/src/internal/controllers/type-native-popover-trigger.controller.ts b/projects/elements/src/internal/controllers/type-native-popover-trigger.controller.ts index 2bbae7741..f41e239e7 100644 --- a/projects/elements/src/internal/controllers/type-native-popover-trigger.controller.ts +++ b/projects/elements/src/internal/controllers/type-native-popover-trigger.controller.ts @@ -1,6 +1,6 @@ import type { ReactiveElement, ReactiveController } from 'lit'; import type { LegacyDecoratorTarget } from '../types/index.js'; -import { getFlattenedDOMTree } from '../utils/dom.js'; +import { getFlattenedDOMTree, sameRenderRoot } from '../utils/dom.js'; export interface NativePopoverTrigger extends ReactiveElement { disabled: boolean; @@ -24,7 +24,9 @@ export class TypeNativePopoverTriggerController const id = this.host.popovertarget?.length ? this.host.popovertarget : this.host.popoverTargetElement?.id; if (id && !this.host.disabled) { - const popover = getFlattenedDOMTree(this.host.getRootNode()).find(e => e.id === id); + const popover = getFlattenedDOMTree(this.host.getRootNode()).find( + e => e.id === id && sameRenderRoot(this.host, e) + ); if (this.host.popoverTargetAction === 'hide') { popover?.hidePopover(); diff --git a/projects/elements/src/internal/controllers/type-native-popover.controller.test.ts b/projects/elements/src/internal/controllers/type-native-popover.controller.test.ts index 53851bef3..9c9db1ca3 100644 --- a/projects/elements/src/internal/controllers/type-native-popover.controller.test.ts +++ b/projects/elements/src/internal/controllers/type-native-popover.controller.test.ts @@ -32,6 +32,8 @@ class TypeNativePopoverControllerTestElement extends LitElement { @property({ type: Boolean, reflect: true }) hidden = false; + _activeTrigger: HTMLElement; + get popoverArrow() { return this.shadowRoot.querySelector('.arrow'); } @@ -592,6 +594,25 @@ describe('type-popover.controller - hint', () => { await new Promise(r => setTimeout(() => r(null), 10)); expect(element.matches(':popover-open')).toBe(true); }); + + it('should find shadow root active triggers', async () => { + await elementIsStable(element); + expect(element.matches(':popover-open')).toBe(false); + element._activeTrigger = undefined; + + const shadowHost = document.createElement('div'); + shadowHost.attachShadow({ mode: 'open', delegatesFocus: true }); + button.remove(); + shadowHost.shadowRoot.appendChild(button); + document.body.appendChild(shadowHost); + + element.requestUpdate(); + await elementIsStable(element); + + shadowHost.focus(); + await elementIsStable(element); + expect(element._activeTrigger).toBe(button); + }); }); describe('type-popover.controller - close timeout', () => { diff --git a/projects/elements/src/internal/controllers/type-native-popover.controller.ts b/projects/elements/src/internal/controllers/type-native-popover.controller.ts index 5eb75201c..c23a24a3c 100644 --- a/projects/elements/src/internal/controllers/type-native-popover.controller.ts +++ b/projects/elements/src/internal/controllers/type-native-popover.controller.ts @@ -1,7 +1,7 @@ import type { ReactiveController, ReactiveElement } from 'lit'; import { clickOutsideElementBounds, generateId, getAttributeListChanges } from '../utils/dom.js'; import { attachInternals } from '../utils/a11y.js'; -import { focusElement } from '../utils/focus.js'; +import { focusElement, getActiveElement } from '../utils/focus.js'; import { getHostTrigger, hasOpenPopover } from './type-native-popover.utils.js'; import type { PopoverType } from '../types/index.js'; @@ -169,7 +169,7 @@ export class TypeNativePopoverController implements Rea #_close = () => this.#close(); #_open = e => this.#open(e); #_pointerdown = (e: Event) => (this.host._activeTrigger = e.target as HTMLElement); - #_focus = () => (this.host._activeTrigger = globalThis.document.activeElement as HTMLElement); + #_focus = () => (this.host._activeTrigger = getActiveElement() as HTMLElement); #addTriggerInteractions() { this.#triggers.forEach(t => t.addEventListener('pointerdown', this.#_pointerdown)); diff --git a/projects/elements/src/internal/controllers/type-native-popover.utils.test.ts b/projects/elements/src/internal/controllers/type-native-popover.utils.test.ts index 7829c0873..c0fab002e 100644 --- a/projects/elements/src/internal/controllers/type-native-popover.utils.test.ts +++ b/projects/elements/src/internal/controllers/type-native-popover.utils.test.ts @@ -94,32 +94,34 @@ type TestHost = HTMLElement & { anchor?: HTMLElement | string; _activeTrigger?: describe('getHostAnchor', () => { let logSpy; + let host: TestHost; + let anchor: HTMLElement; + beforeEach(() => { logSpy = vi.spyOn(LogService, 'warn'); + host = document.createElement('div') as TestHost; + anchor = document.createElement('div'); + document.body.appendChild(host); + document.body.appendChild(anchor); }); afterEach(() => { vi.restoreAllMocks(); + host.remove(); + anchor.remove(); }); it('returns the anchor element when provided as a DOM element', () => { - const host = document.createElement('div') as TestHost; - document.body.appendChild(host); host.anchor = document.createElement('div'); expect(getHostAnchor(host)).toBe(host.anchor); }); - it('returns the active trigger element when no anchor is provided', () => { - const host = document.createElement('div') as TestHost; - const trigger = document.createElement('div'); - document.body.appendChild(trigger); - host._activeTrigger = trigger; + it('returns the active anchor element when no anchor is provided', () => { + host._activeTrigger = anchor; expect(getHostAnchor(host)).toBe(host._activeTrigger); }); it('returns the body as a fallback when anchor is not an element and id does not match any elements in the DOM tree', () => { - const host = document.createElement('div') as TestHost; - document.body.appendChild(host); host.anchor = 'not-found'; logSpy.mockClear(); expect(getHostAnchor(host)).toBe(document.body); @@ -127,13 +129,26 @@ describe('getHostAnchor', () => { }); it('returns the body as a fallback when anchor is not an element and is equal to the body', () => { - const host = document.createElement('div') as TestHost; - document.body.appendChild(host); const anchor = document.createElement('div'); document.body.appendChild(anchor); anchor.id = 'body'; expect(getHostAnchor(host)).toBe(document.body); }); + + it('should not match anchors with same id but different render root', () => { + host.anchor = 'test-anchor'; + anchor.id = 'test-anchor'; + expect(getHostAnchor(host)).toStrictEqual(anchor); + + const shadowHost = document.createElement('div'); + shadowHost.attachShadow({ mode: 'open' }); + shadowHost.shadowRoot.appendChild(anchor); + + logSpy.mockClear(); + expect(getHostAnchor(host)).toStrictEqual(document.body); + expect(logSpy).toHaveBeenCalledWith('Provided id "test-anchor" was not found in DOM'); + shadowHost.remove(); + }); }); describe('hasOpenPopover', () => { diff --git a/projects/elements/src/internal/controllers/type-native-popover.utils.ts b/projects/elements/src/internal/controllers/type-native-popover.utils.ts index af09a5d8e..13e998ecf 100644 --- a/projects/elements/src/internal/controllers/type-native-popover.utils.ts +++ b/projects/elements/src/internal/controllers/type-native-popover.utils.ts @@ -32,9 +32,7 @@ export function getHostAnchor(host: HTMLElement & { anchor?: HTMLElement | strin const anchor = host.anchor ?? host._activeTrigger; if (typeof anchor === 'string' && anchor?.length) { - const match = getFlatDOMTree(host.parentNode as HTMLElement) - .filter(el => el?.id !== '') - .find(el => el.id === anchor); + const match = getFlatDOMTree(host.parentNode as HTMLElement).find(el => el.id === anchor); if (!match) { LogService.warn(getIdMatchNotFoundWarning(anchor)); diff --git a/projects/elements/src/internal/controllers/type-popover.controller.stories.ts b/projects/elements/src/internal/controllers/type-popover.controller.stories.ts index 8611fa5dd..c1a852caa 100644 --- a/projects/elements/src/internal/controllers/type-popover.controller.stories.ts +++ b/projects/elements/src/internal/controllers/type-popover.controller.stories.ts @@ -6,6 +6,7 @@ import { popoverStyles, TypeNativePopoverController, useStyles, TypeNativeAnchor import '@nvidia-elements/core/card/define.js'; import '@nvidia-elements/core/button/define.js'; import '@nvidia-elements/core/icon-button/define.js'; +import '@nvidia-elements/core/dropdown/define.js'; export default { title: 'Internal/Controllers' @@ -133,3 +134,25 @@ export const TypePopoverControllerAlignmentDemo = { left end ` } + +export const AbsolutePositioningFallback = { + render: () => html` +
+ dropdown content + +
+ ` +} + +class MyElement extends LitElement { + render() { + return html` +
+ dropdown content + +
+ `; + } +} + +customElements.get('my-element') || customElements.define('my-element', MyElement); \ No newline at end of file diff --git a/projects/elements/src/internal/styles/popover.css b/projects/elements/src/internal/styles/popover.css index e924bc5e5..5f7d166c7 100644 --- a/projects/elements/src/internal/styles/popover.css +++ b/projects/elements/src/internal/styles/popover.css @@ -246,11 +246,6 @@ inset: 0 0 auto auto; } - /* if not relative to body and not floating-ui fallback */ - :host(:not(:state(anchor-body)):not([style*='left'][style*='top'])) { - inset: unset !important; - } - :host([popover]) { position-try-fallbacks: flip-block, @@ -273,9 +268,9 @@ :host(:state(anchor-positioning-fallback)) { margin: 0; - inset: auto; - position-area: initial; - position-anchor: initial; + position-area: unset !important; + position-anchor: unset !important; + position-try: unset !important; } :host(:state(anchor-positioning-fallback):not([popover])) { diff --git a/projects/elements/src/page/page.test.lighthouse.ts b/projects/elements/src/page/page.test.lighthouse.ts index 8318f2e0e..6b07598be 100644 --- a/projects/elements/src/page/page.test.lighthouse.ts +++ b/projects/elements/src/page/page.test.lighthouse.ts @@ -19,6 +19,6 @@ describe('page lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(20.5); + expect(report.payload.javascript.kb).toBeLessThan(21); }); }); diff --git a/projects/elements/src/panel/panel.test.lighthouse.ts b/projects/elements/src/panel/panel.test.lighthouse.ts index a4769015e..ff387b231 100644 --- a/projects/elements/src/panel/panel.test.lighthouse.ts +++ b/projects/elements/src/panel/panel.test.lighthouse.ts @@ -22,6 +22,6 @@ describe('panel lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(19.2); + expect(report.payload.javascript.kb).toBeLessThan(19.5); }); }); diff --git a/projects/elements/src/preferences-input/preferences-input.test.lighthouse.ts b/projects/elements/src/preferences-input/preferences-input.test.lighthouse.ts index d343a0d8e..d4fffe45e 100644 --- a/projects/elements/src/preferences-input/preferences-input.test.lighthouse.ts +++ b/projects/elements/src/preferences-input/preferences-input.test.lighthouse.ts @@ -13,7 +13,7 @@ describe('preferences-input lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(27.5); + expect(report.payload.javascript.kb).toBeLessThan(28); }); }); diff --git a/projects/elements/src/progressive-filter-chip/progressive-filter-chip.test.lighthouse.ts b/projects/elements/src/progressive-filter-chip/progressive-filter-chip.test.lighthouse.ts index abb7fa68c..283261080 100644 --- a/projects/elements/src/progressive-filter-chip/progressive-filter-chip.test.lighthouse.ts +++ b/projects/elements/src/progressive-filter-chip/progressive-filter-chip.test.lighthouse.ts @@ -20,6 +20,6 @@ describe('progressive-filter-chip lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(35.1); + expect(report.payload.javascript.kb).toBeLessThan(35.2); }); }); diff --git a/projects/elements/src/search/search.test.lighthouse.ts b/projects/elements/src/search/search.test.lighthouse.ts index 1c787e3fa..681b75e69 100644 --- a/projects/elements/src/search/search.test.lighthouse.ts +++ b/projects/elements/src/search/search.test.lighthouse.ts @@ -16,6 +16,6 @@ describe('search lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(22.7); + expect(report.payload.javascript.kb).toBeLessThan(23); }); }); diff --git a/projects/elements/src/steps/steps.test.lighthouse.ts b/projects/elements/src/steps/steps.test.lighthouse.ts index 6af9a2ce0..b1eb4ab58 100644 --- a/projects/elements/src/steps/steps.test.lighthouse.ts +++ b/projects/elements/src/steps/steps.test.lighthouse.ts @@ -17,6 +17,6 @@ describe('steps lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(20.4); + expect(report.payload.javascript.kb).toBeLessThan(21); }); }); diff --git a/projects/elements/src/tabs/tabs.test.lighthouse.ts b/projects/elements/src/tabs/tabs.test.lighthouse.ts index 771d025f8..ac8544388 100644 --- a/projects/elements/src/tabs/tabs.test.lighthouse.ts +++ b/projects/elements/src/tabs/tabs.test.lighthouse.ts @@ -17,6 +17,6 @@ describe('tabs lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(87); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(12.1); + expect(report.payload.javascript.kb).toBeLessThan(12.5); }); }); diff --git a/projects/elements/src/tag/tag.test.lighthouse.ts b/projects/elements/src/tag/tag.test.lighthouse.ts index 4b76327ed..80f999001 100644 --- a/projects/elements/src/tag/tag.test.lighthouse.ts +++ b/projects/elements/src/tag/tag.test.lighthouse.ts @@ -13,6 +13,6 @@ describe('tag lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(16.3); + expect(report.payload.javascript.kb).toBeLessThan(16.5); }); }); diff --git a/projects/elements/src/time/time.test.lighthouse.ts b/projects/elements/src/time/time.test.lighthouse.ts index 5b1a5fe7c..fb851524f 100644 --- a/projects/elements/src/time/time.test.lighthouse.ts +++ b/projects/elements/src/time/time.test.lighthouse.ts @@ -16,6 +16,6 @@ describe('time lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(22.6); + expect(report.payload.javascript.kb).toBeLessThan(23); }); }); From 924d09994759e4e579787997c7b195fcb7137ea2 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Thu, 10 Apr 2025 21:37:37 +0000 Subject: [PATCH 0009/1100] chore(release): @nve/elements-v1.31.5 [skip ci] ## [@nve/elements-v1.31.5](https://gitlab-master.nvidia.com/ai-infra/elements/compare/@nve/elements-v1.31.4...@nve/elements-v1.31.5) (2025-04-10) ### Bug Fixes * **elements:** popover anchoring ([736a630](https://gitlab-master.nvidia.com/ai-infra/elements/commit/736a6304e0f668db538654f5b6f1b4dde67a50bd)) --- projects/elements/CHANGELOG.md | 7 +++++++ projects/elements/package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/projects/elements/CHANGELOG.md b/projects/elements/CHANGELOG.md index 508cb6d59..2ff07d4fb 100644 --- a/projects/elements/CHANGELOG.md +++ b/projects/elements/CHANGELOG.md @@ -1,3 +1,10 @@ +## [@nvidia-elements/core-v1.31.5](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.31.4...@nvidia-elements/core-v1.31.5) (2025-04-10) + + +### Bug Fixes + +* **elements:** popover anchoring ([eac64c8](https://github.com/NVIDIA/elements/commit/eac64c8301a51aa2ae447b4d4893fa8495da062c)) + ## [@nvidia-elements/core-v1.31.4](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.31.3...@nvidia-elements/core-v1.31.4) (2025-04-08) diff --git a/projects/elements/package.json b/projects/elements/package.json index 46392b04e..0da689b73 100644 --- a/projects/elements/package.json +++ b/projects/elements/package.json @@ -1,6 +1,6 @@ { "name": "@nvidia-elements/core", - "version": "1.31.4", + "version": "1.31.5", "description": "The Design Language for AI/ML Factories Building at the Speed of Light", "homepage": "https://NVIDIA.github.io/elements/", "repository": { From 824d6b7aa053ed1b1844f33e3efee37804992d9d Mon Sep 17 00:00:00 2001 From: Cory Rylan Date: Fri, 11 Apr 2025 08:18:19 -0500 Subject: [PATCH 0010/1100] chore(docs): migrate grid mdx to md Signed-off-by: Cory Rylan --- .../elements/src/grid/docs/grid.stories.ts | 554 +++++++++--------- .../elements/src/grid/docs/multi-select.mdx | 1 - .../elements/src/grid/docs/panel-details.mdx | 6 +- projects/site/src/_11ty/layouts/svg-logos.js | 2 - .../site/src/docs/elements/data-grid/card.md | 31 + .../docs/elements/data-grid/column-action.md | 31 + .../elements/data-grid/column-alignment.md | 40 ++ .../docs/elements/data-grid/column-fixed.md | 46 ++ .../docs/elements/data-grid/column-width.md | 38 ++ .../src/docs/elements/data-grid/container.md | 24 + .../elements/data-grid/display-settings.md | 37 ++ .../src/docs/elements/data-grid/footer.md | 37 ++ .../site/src/docs/elements/data-grid/index.md | 34 ++ .../docs/elements/data-grid/integrations.md | 65 ++ .../docs/elements/data-grid/multi-select.md | 44 ++ .../src/docs/elements/data-grid/pagination.md | 24 + .../docs/elements/data-grid/panel-detail.md | 36 ++ .../src/docs/elements/data-grid/panel-grid.md | 25 + .../docs/elements/data-grid/performance.md | 85 +++ .../docs/elements/data-grid/placeholder.md | 29 + .../src/docs/elements/data-grid/row-action.md | 35 ++ .../src/docs/elements/data-grid/row-groups.md | 38 ++ .../src/docs/elements/data-grid/row-sort.md | 65 ++ .../docs/elements/data-grid/scroll-height.md | 46 ++ .../docs/elements/data-grid/single-select.md | 34 ++ .../src/docs/elements/data-grid/stripe.md | 28 + 26 files changed, 1139 insertions(+), 296 deletions(-) create mode 100644 projects/site/src/docs/elements/data-grid/card.md create mode 100644 projects/site/src/docs/elements/data-grid/column-action.md create mode 100644 projects/site/src/docs/elements/data-grid/column-alignment.md create mode 100644 projects/site/src/docs/elements/data-grid/column-fixed.md create mode 100644 projects/site/src/docs/elements/data-grid/column-width.md create mode 100644 projects/site/src/docs/elements/data-grid/container.md create mode 100644 projects/site/src/docs/elements/data-grid/display-settings.md create mode 100644 projects/site/src/docs/elements/data-grid/footer.md create mode 100644 projects/site/src/docs/elements/data-grid/index.md create mode 100644 projects/site/src/docs/elements/data-grid/integrations.md create mode 100644 projects/site/src/docs/elements/data-grid/multi-select.md create mode 100644 projects/site/src/docs/elements/data-grid/pagination.md create mode 100644 projects/site/src/docs/elements/data-grid/panel-detail.md create mode 100644 projects/site/src/docs/elements/data-grid/panel-grid.md create mode 100644 projects/site/src/docs/elements/data-grid/performance.md create mode 100644 projects/site/src/docs/elements/data-grid/placeholder.md create mode 100644 projects/site/src/docs/elements/data-grid/row-action.md create mode 100644 projects/site/src/docs/elements/data-grid/row-groups.md create mode 100644 projects/site/src/docs/elements/data-grid/row-sort.md create mode 100644 projects/site/src/docs/elements/data-grid/scroll-height.md create mode 100644 projects/site/src/docs/elements/data-grid/single-select.md create mode 100644 projects/site/src/docs/elements/data-grid/stripe.md diff --git a/projects/elements/src/grid/docs/grid.stories.ts b/projects/elements/src/grid/docs/grid.stories.ts index 34342afc5..f6f620f8c 100644 --- a/projects/elements/src/grid/docs/grid.stories.ts +++ b/projects/elements/src/grid/docs/grid.stories.ts @@ -1,4 +1,4 @@ -import { LitElement, unsafeCSS, html, css, nothing } from 'lit'; +import { LitElement, unsafeCSS, html, nothing } from 'lit'; import { state } from 'lit/decorators/state.js'; import { getItems, grid } from '../../test/demo.js'; import layout from '@nvidia-elements/styles/layout.css?inline'; @@ -14,6 +14,9 @@ import '@nvidia-elements/core/tabs/define.js'; import '@nvidia-elements/core/menu/define.js'; import '@nvidia-elements/core/pagination/define.js'; import '@nvidia-elements/core/progress-ring/define.js'; +import '@nvidia-elements/core/logo/define.js'; +import '@nvidia-elements/core/page/define.js'; +import '@nvidia-elements/core/page-header/define.js'; import '@nvidia-elements/core/panel/define.js'; import '@nvidia-elements/core/radio/define.js'; import '@nvidia-elements/core/search/define.js'; @@ -31,11 +34,11 @@ export const Default = { render: () => html` - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label} `)} + ${Array(5).fill('').map((_, i) => html`column ${i}`)} - ${getItems().map(row => html` + ${Array(10).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value} `)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c}`)} `)} @@ -51,16 +54,16 @@ export const MultiSelect = { - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label} `)} + ${Array(5).fill('').map((_, i) => html`column ${i} `)} - ${getItems().map((row, i) => html` + ${Array(10).fill('').map((_, r) => html` - + - ${Object.entries(row).map(([, cell]) => html`${cell.value} `)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c} `)} `)} @@ -76,16 +79,16 @@ export const MultiSelectBulkActions = { - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label} `)} + ${Array(5).fill('').map((_, i) => html`column ${i} `)} - ${getItems(20).map((row, i) => html` - + ${Array(20).fill('').map((_, r) => html` + - + - ${Object.entries(row).map(([, cell]) => html`${cell.value} `)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c} `)} `)} @@ -103,16 +106,16 @@ export const SingleSelect = { - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label} `)} + ${Array(5).fill('').map((_, i) => html`column ${i} `)} - ${getItems().map((row, i) => html` + ${Array(10).fill('').map((_, r) => html` - + - ${Object.entries(row).map(([, cell]) => html`${cell.value} `)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c} `)} `)} @@ -121,22 +124,20 @@ export const SingleSelect = { export const RowAction = { render: () => html` -
- - - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label} `)} - - - ${getItems().map((row, i) => html` - - ${Object.entries(row).map(([, cell]) => html`${cell.value} `)} - - - - - `)} - -
+ + + ${Array(5).fill('').map((_, i) => html`column ${i} `)} + + + ${Array(10).fill('').map((_, r) => html` + + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c} `)} + + + + + `)} + ` }; @@ -145,7 +146,7 @@ export const RowGroups = { - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label} `)} + ${Array(5).fill('').map((_, i) => html`column ${i} `)} @@ -219,11 +220,11 @@ export const Footer = { render: () => html` - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label} `)} + ${Array(5).fill('').map((_, i) => html`column ${i} `)} - ${getItems(8).map(row => html` + ${Array(8).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value} `)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c} `)} `)} @@ -237,11 +238,11 @@ export const FooterScrollbar = { render: () => html` - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label} `)} + ${Array(5).fill('').map((_, i) => html`column ${i} `)} - ${getItems(14).map(row => html` + ${Array(14).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value} `)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c} `)} `)} @@ -255,11 +256,11 @@ export const Pagination = { render: () => html` - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label} `)} + ${Array(5).fill('').map((_, i) => html`column ${i} `)} - ${getItems().map(row => html` + ${Array(10).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value} `)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c} `)} `)} @@ -273,11 +274,11 @@ export const Scroll = { render: () => html` - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label} `)} + ${Array(5).fill('').map((_, i) => html`column ${i} `)} - ${getItems(100).map(row => html` + ${Array(100).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value} `)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c} `)} `)} footer @@ -287,21 +288,24 @@ export const Scroll = { export const ScrollPosition = { render: () => html` - + - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label} `)} + ${Array(5).fill('').map((_, i) => html`column ${i} `)} - ${getItems(100).map(row => html` + ${Array(20).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value} `)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c} `)} `)} -
- -scroll top + + scroll top + + ` @@ -315,11 +319,11 @@ export const FullHeight = { - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label} `)} + ${Array(5).fill('').map((_, i) => html`column ${i} `)} - ${getItems(100).map(row => html` + ${Array(10).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value} `)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c} `)} `)} @@ -331,18 +335,18 @@ export const ColumnAction = { render: () => html` - ${Object.entries(getItems()[0]).map(([, column], i) => html` + ${Array(5).fill('').map((_, i) => html` - ${column.label} + column ${i} `)} - ${getItems().map(row => html` + ${Array(10).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value} `)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c} `)} `)} - + @@ -358,11 +362,11 @@ export const ColumnWidth = { render: () => html` - ${Object.entries(getItems()[0]).map(([, column], i) => html`${column.label} `)} + ${Array(5).fill('').map((_, i) => html`column ${i} `)} - ${getItems().map(row => html` + ${Array(10).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value} `)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c} `)} `)} footer content @@ -374,11 +378,11 @@ export const Content = { render: () => html` - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label} `)} + ${Array(5).fill('').map((_, i) => html`column ${i} `)} - ${getItems(10).map((row, ir) => html` + ${Array(10).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell], ic) => html`${ir === 3 && ic === 2 ? `At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores` : cell.value} `)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c} `)} `)} @@ -389,11 +393,11 @@ export const ColumnFixed = { render: () => html` - ${Object.entries(getItems()[0]).map(([, column], i) => html`${column.label} `)} + ${Array(5).fill('').map((_, i) => html`column ${i} `)} - ${getItems().map(row => html` + ${Array(10).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value} `)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c} `)} `)} @@ -404,11 +408,11 @@ export const ColumnMultiFixed = { render: () => html` - ${Object.entries(getItems()[0]).map(([, column], i) => html`${column.label}`)} + ${Array(5).fill('').map((_, i) => html`column ${i}`)} - ${getItems().map(row => html` + ${Array(10).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value}`)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c}`)} `)} @@ -428,24 +432,66 @@ export const ColumnStackFixed = { Column 7 Column 8 - ${grid(10, 8).rows.map(row => html` + ${Array(10).fill('').map((_, r) => html` - ${row.cells.map(cell => html`${cell.label} `)} + ${Array(8).fill('').map((_, c) => html`cell ${r}-${c} `)} `)} ` }; +export const ColumnDynamicFixed = { + render: () => html` + + + ${Array(5).fill('').map((_, i) => html`column ${i}`)} + + ${Array(10).fill('').map((_, r) => html` + + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c}`)} + + `)} + + add column + + + + ` +}; + export const ColumnAlignCenter = { render: () => html` - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label}`)} + ${Array(5).fill('').map((_, i) => html`column ${i}`)} - ${getItems().map(row => html` + ${Array(10).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value}`)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c}`)} `)} @@ -456,11 +502,11 @@ export const ColumnAlignEnd = { render: () => html` - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label}`)} + ${Array(5).fill('').map((_, i) => html`column ${i}`)} - ${getItems().map(row => html` + ${Array(10).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value}`)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c}`)} `)} @@ -471,11 +517,11 @@ export const ColumnAlignStart = { render: () => html` - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label}`)} + ${Array(5).fill('').map((_, i) => html`column ${i}`)} - ${getItems().map(row => html` + ${Array(10).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value}`)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c}`)} `)} @@ -485,7 +531,7 @@ export const ColumnAlignStart = { export const DisplaySettings = { render: () => html`
- + @@ -506,19 +552,19 @@ export const DisplaySettings = { - restore settings + restore settings

1,145 results found

- Display Settings + Display Settings
- ${grid(8, 4).columns.map(column => html`${column.label} `)} + ${Array(4).fill('').map((_, i) => html`column ${i} `)} - ${grid(8, 4).rows.map(row => html` + ${Array(10).fill('').map((_, r) => html` - ${row.cells.map(cell => html`${cell.label} `)} + ${Array(4).fill('').map((_, c) => html`cell ${r}-${c} `)} `)} @@ -542,9 +588,9 @@ export const RowSort = { Default Default - ${getItems().map(row => html` + ${Array(10).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value}`)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c}`)} `)} @@ -651,52 +697,50 @@ export const PerformanceInfiniteScroll = { render: () => html`` }; -class GridPerformanceDemo extends LitElement { - static styles = [unsafeCSS(layout), css` - :host { - display: block; - height: 500px; - padding: 24px 0; - } - `]; - - @state() private show = false; - - @state() private grid = grid(1000); - - render() { - return html` - this.show = !this.show}>show large grid -

1000 rows, 4000 cells

- ${this.show ? html` - - - ${this.grid.columns.map(column => html`${column.label}`)} - - ${this.grid.rows.map(row => html` - - ${row.cells.map(cell => html`${cell.label} `)} - `)} - - ` : nothing} - ` - } - - connectedCallback() { - super.connectedCallback(); - window.NVE_ELEMENTS.state.env = 'production'; - } - - disconnectedCallback() { - super.disconnectedCallback(); - window.NVE_ELEMENTS.state.env = 'development'; - } -} - -customElements.get('grid-performance-demo') || customElements.define('grid-performance-demo', GridPerformanceDemo); - export const Performance = { - render: () => html`` + render: () => html` +
+ show large grid +

1000 rows, 4000 cells

+
+ + ` }; class GridVirtualScrollDemo extends LitElement { @@ -732,11 +776,11 @@ export const Stripe = { render: () => html` - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label} `)} + ${Array(5).fill('').map((_, i) => html`column ${i} `)} - ${getItems().map(row => html` + ${Array(10).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value}`)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c}`)} `)} @@ -753,11 +797,11 @@ export const Card = { - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label} `)} + ${Array(5).fill('').map((_, i) => html`column ${i}`)} - ${getItems().map(row => html` + ${Array(5).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value}`)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c}`)} `)} @@ -778,11 +822,11 @@ export const CardTabs = { - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label} `)} + ${Array(5).fill('').map((_, i) => html`column ${i}`)} - ${getItems().map(row => html` + ${Array(10).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value}`)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c}`)} `)} @@ -825,11 +869,11 @@ export const Full = { render: () => html` - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label} `)} + ${Array(5).fill('').map((_, i) => html`column ${i}`)} - ${getItems(20).map(row => html` + ${Array(10).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value}`)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c}`)} `)} @@ -840,11 +884,11 @@ export const Flat = { render: () => html` - ${Object.entries(getItems()[0]).map(([, column]) => html`${column.label} `)} + ${Array(5).fill('').map((_, i) => html`column ${i}`)} - ${getItems(20).map(row => html` + ${Array(20).fill('').map((_, r) => html` - ${Object.entries(row).map(([, cell]) => html`${cell.value}`)} + ${Array(5).fill('').map((_, c) => html`cell ${r}-${c}`)} `)} @@ -881,26 +925,32 @@ export const FocusTypes = { export const PanelDetail = { render: () => html` -
- - - ${grid(10, 3).columns.map(column => html`${column.label} `)} - - - ${grid(10, 3).rows.map((row, i) => html` - - ${row.cells.map(cell => html`${cell.label} `)} - - - - - `)} - - - -

Row 2 Details

- - + + + +

Infrastructure

+ +
+ + + ${Array(3).fill('').map((_, i) => html`column ${i} `)} + + + ${Array(10).fill('').map((_, i) => html` + + ${Array(3).fill('').map((_, c) => html`cell ${i}-${c} `)} + + + + + `)} + +
+ + +

Row 2 Details

+ +
@@ -915,45 +965,53 @@ export const PanelDetail = { P1
- - -
+ + + + ` }; export const PanelGrid = { render() { return html` - -
-
+ + + +

Infrastructure

+ +
page content
- - -

Recording

- - - -
+ + `; } } -class GridPanelDemo extends LitElement { - @state() private selectedId: string = null; - - #grid = grid(8, 3); - - static styles = [unsafeCSS(layout)]; - - render() { - return html` -
- - - ${this.#grid.columns.map(column => html`${column.label} `)} - - - ${this.#grid.rows.map(row => html` - - ${row.cells.map(cell => html`${cell.label} `)} - - this.selectedId = row.id} container="flat" icon-name="expand-details"> - - `)} - - - - - this.selectedId = null} style="min-width: 280px"> - -

Row ${this.selectedId}

- - -
- ` - } -} - -customElements.get('grid-panel-demo') || customElements.define('grid-panel-demo', GridPanelDemo); - -export const PanelDetailInteractive = { - render: () => html`` -}; - -class GridDynamicColumnDemo extends LitElement { - @state() private selectedId: string = null; - - @state() private grid = grid(10, 6); - - static styles = [unsafeCSS(layout)]; - - render() { - return html` -
- - - ${this.grid.columns.map((column, i) => html`${column.label} `)} - - ${this.grid.rows.map(row => html` - - ${row.cells.map(cell => html`${cell.label} `)} - `)} - - add column - - -
- - ` - } - - #update() { - this.grid = grid(10, this.shadowRoot.querySelectorAll('nve-grid-column').length + 1); - } -} - -customElements.get('grid-dynamic-column-demo') || customElements.define('grid-dynamic-column-demo', GridDynamicColumnDemo); - -export const ColumnDynamicFixed = { - render: () => html`` -}; - export const All = { render: () => html`
@@ -1210,7 +1188,7 @@ export const Audit = { export const ColumnSortButtonVisibility = { render: () => html ` - + Column 1 diff --git a/projects/elements/src/grid/docs/multi-select.mdx b/projects/elements/src/grid/docs/multi-select.mdx index 66f23d990..0b36b1baf 100644 --- a/projects/elements/src/grid/docs/multi-select.mdx +++ b/projects/elements/src/grid/docs/multi-select.mdx @@ -11,7 +11,6 @@ import { MultiSelect, MultiSelectBulkActions } from './grid.stories'; Multi Select rows use a checkbox as the first focusable item within the row. When selected set the `selected` attribute/property on the row. This will ensure selected styles as well as the proper `ariaSelected` state for accessibility. -cccccbkvgljclncgtcrllcvlkdjcgihnkurnliddbucj ```html diff --git a/projects/elements/src/grid/docs/panel-details.mdx b/projects/elements/src/grid/docs/panel-details.mdx index 4bf10219d..1b31cab98 100644 --- a/projects/elements/src/grid/docs/panel-details.mdx +++ b/projects/elements/src/grid/docs/panel-details.mdx @@ -1,6 +1,6 @@ import { Meta, Story } from '@storybook/addon-docs'; import { Canvas } from '@nve-internals/storybook/blocks'; -import { PanelDetail, PanelDetailInteractive } from './grid.stories'; +import { PanelDetail } from './grid.stories'; @@ -37,10 +37,6 @@ Item detail panels should be open using a action button placed at the end of the -## Interactive - - - diff --git a/projects/site/src/_11ty/layouts/svg-logos.js b/projects/site/src/_11ty/layouts/svg-logos.js index c58d614f2..b9f9b0f1a 100644 --- a/projects/site/src/_11ty/layouts/svg-logos.js +++ b/projects/site/src/_11ty/layouts/svg-logos.js @@ -1,5 +1,3 @@ -import { join } from 'path'; - export const renderSvgLogos = () => { return /* html */ `
+ `, 'html' ); diff --git a/projects/site/src/stories/stories.css b/projects/site/src/stories/stories.css new file mode 100644 index 000000000..dee084c8d --- /dev/null +++ b/projects/site/src/stories/stories.css @@ -0,0 +1,37 @@ +.stories { + list-style: none; + padding: 0; + margin: 0; + + ul { + display: flex; + flex-direction: column; + list-style: none; + margin: 0; + padding: 0; + } + + li { + display: flex; + flex-direction: column; + gap: var(--nve-ref-space-md); + padding: 0; + margin: 0; + } + + & > li { + padding-bottom: var(--nve-ref-space-lg); + } + + a { + padding: var(--nve-ref-size-200); + } + + a[selected] { + background: var(--nve-sys-interaction-selected-background); + } +} + +iframe { + border: 0; +} diff --git a/projects/site/src/stories/stories.ts b/projects/site/src/stories/stories.ts new file mode 100644 index 000000000..0d12936b2 --- /dev/null +++ b/projects/site/src/stories/stories.ts @@ -0,0 +1,36 @@ +const iframe = globalThis.document.querySelector('iframe'); +const list = globalThis.document.querySelector('ul.stories'); + +list?.addEventListener('click', e => { + e.preventDefault(); + const target = e.target as HTMLElement; + const link = target.closest('a'); + if (link && iframe) { + iframe.src = link.href; + + // set the story href as a query param on the parent page + const url = new URL(globalThis.window.location.href); + const story = link.href.split('/stories/')[1]; + url.searchParams.set('story', story); + globalThis.window.history.replaceState({}, '', url.toString()); + setSelected(story); + } +}); + +// on page load, check for a query param and load the story +globalThis.window.addEventListener('load', () => { + const url = new URL(globalThis.window.location.href); + const story = url.searchParams.get('story')!; + if (story && iframe) { + iframe.src = `stories/${story}`; + } + setSelected(story); +}); + +function setSelected(url: string) { + globalThis.document.querySelectorAll('a').forEach(a => a.removeAttribute('selected')); + const link = globalThis.document.querySelector(`a[href*="${url}"]`); + if (link) { + link.setAttribute('selected', ''); + } +} diff --git a/projects/site/src/stories/utils.js b/projects/site/src/stories/utils.js new file mode 100644 index 000000000..819bcc4c3 --- /dev/null +++ b/projects/site/src/stories/utils.js @@ -0,0 +1,45 @@ +import { join, resolve } from 'node:path'; +import { readFileSync } from 'node:fs'; +import { globSync } from 'glob'; +import { camelToKebab } from '../_11ty/utils/index.js'; + +export function getStories() { + return [ + ...globSync(resolve('node_modules/@nvidia-elements/**/dist/**/*.stories.json')), + ...globSync(resolve('node_modules/@nvidia-elements/**/dist/**/*.stories.json')) + ] + .map(path => ({ + path: path.replace(resolve('node_modules/'), '').replace('/dist/', '/').replace('/@nve', '@nve'), + ...JSON.parse(readFileSync(path, 'utf8')) + })) + .map(storiesFile => { + const stories = storiesFile.stories + // few stories have invalid html so they are filtered out + .filter(s => !s.template?.includes('${')) + .filter(s => !s.id.toLowerCase().includes('shadowroot')); + + return { + ...storiesFile, + stories + }; + }) + .sort((a, b) => a.path.localeCompare(b.path)); +} + +export const BASE_URL = join('/', process.env.PAGES_BASE_URL ?? '', '/'); // eslint-disable-line no-undef + +export const stories = getStories().flatMap(storiesFile => { + const stories = storiesFile.stories + // few stories have invalid html so they are filtered out + .filter(s => !s.template?.includes('${')) + .filter(s => !s.id.toLowerCase().includes('shadowroot')); + + return stories.map(story => ({ + id: story.id, + title: camelToKebab(story.id), + permalink: `${storiesFile.path.replace('.stories.json', '-')}${camelToKebab(story.id)}/`, + template: story.template, + element: storiesFile.element?.replace('nve-', ''), + path: storiesFile.path + })); +}); diff --git a/projects/storybook/.storybook/assets/favicon.svg b/projects/storybook/.storybook/assets/favicon.svg deleted file mode 100644 index 0194805f8..000000000 --- a/projects/storybook/.storybook/assets/favicon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/projects/storybook/.storybook/main.js b/projects/storybook/.storybook/main.js index 4dfbe439c..7496a0015 100644 --- a/projects/storybook/.storybook/main.js +++ b/projects/storybook/.storybook/main.js @@ -3,9 +3,6 @@ import * as path from 'path'; const resolve = (rel) => path.resolve(process.cwd(), rel); export default { - staticDirs: [ - '../.storybook/assets' - ], stories: [ '../src/**/*.mdx', '../../elements/src/**/*.stories.ts', @@ -17,7 +14,6 @@ export default { '../../starters/lit-library/src/**/*.stories.ts', '../../styles/**/*.stories.ts', '../../themes/**/*.stories.ts', - '../../internals/elements-api/src/**/*.stories.ts', '../../internals/patterns/src/**/*.stories.ts' ], addons: [ diff --git a/projects/storybook/.storybook/manager-head.html b/projects/storybook/.storybook/manager-head.html index 09ea60be2..dc07f026d 100644 --- a/projects/storybook/.storybook/manager-head.html +++ b/projects/storybook/.storybook/manager-head.html @@ -178,18 +178,6 @@ background: var(--nve-sys-layer-shell-background) !important; } - [data-test-id='sb-preview-toolbar'] { - background: var(--nve-sys-layer-shell-background) !important; - border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted) !important; - box-shadow: none !important; - } - - /* only show subnav toolbar when viewing storymode. Hide when viewing docs/mdx views. */ - main:has(a[href*='--docs'][title='Skip to sidebar']) [data-test-id='sb-preview-toolbar'] { - height: 0 !important; - margin-top: 0 !important; - } - .search-field { margin-top: 4px !important; } @@ -272,17 +260,12 @@ } [data-test-id='sb-preview-toolbar'] { - & [title='Apply outlines to the preview'] { - display: none !important; - } + margin-top: 48px; + background: var(--nve-sys-layer-shell-background) !important; & [title='Show addons'] { display: none !important; } - - & .css-c3junj { - display: none !important; - } } .sidebar-subheading-action { @@ -346,11 +329,6 @@ display: none !important; } - .css-c3junj, /* top nav buttons */ - .css-1kk8lbh { - display: none !important; - } - body:has(#system-options-drawer:popover-open) #storybook-preview-wrapper { background: var(--nve-sys-layer-canvas-background, #0b0c0f) !important; padding-right: 280px !important; @@ -382,6 +360,11 @@ [data-popper-placement] { background: var(--nve-sys-layer-container-background) !important; color: var(--nve-sys-layer-container-color) !important; + + & > * { + background: var(--nve-sys-layer-container-background) !important; + color: var(--nve-sys-layer-container-color) !important; + } } [data-popper-placement] * { @@ -412,8 +395,6 @@ border-right: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted) !important; } - - diff --git a/projects/storybook/package.json b/projects/storybook/package.json index 81be4b712..2cd8c0ea4 100644 --- a/projects/storybook/package.json +++ b/projects/storybook/package.json @@ -18,7 +18,6 @@ "@nvidia-elements/code": "workspace:*", "@nvidia-elements/forms": "workspace:*", "@nvidia-elements/monaco": "workspace:*", - "@nve-internals/elements-api": "workspace:*", "@nve-internals/patterns": "workspace:*", "html-format": "1.1.7", "lit": "catalog:", @@ -62,7 +61,6 @@ "../styles:build", "../themes:build", "../starters/lit-library:build", - "../internals/elements-api:build", "../internals/patterns:build" ], "env": { @@ -96,8 +94,7 @@ "../monaco:build", "../styles:build", "../themes:build", - "../starters/lit-library:build", - "../internals/elements-api:build" + "../starters/lit-library:build" ], "env": { "PAGES_BASE_URL": { diff --git a/projects/storybook/tsconfig.json b/projects/storybook/tsconfig.json deleted file mode 100644 index f7ec2c1e7..000000000 --- a/projects/storybook/tsconfig.json +++ /dev/null @@ -1,35 +0,0 @@ -{ - "compilerOptions": { - "skipLibCheck": true, - "module": "es2022", - "target": "es2022", - "lib": ["es2022", "dom", "dom.iterable"], - "typeRoots": ["./node_modules/@types"], - "declaration": true, - "emitDeclarationOnly": true, - "outDir": "dist/", - "baseUrl": "./", - "rootDir": "./", - "moduleResolution": "bundler", - "allowSyntheticDefaultImports": true, - "experimentalDecorators": true, - "useDefineForClassFields": false, - "isolatedModules": true, - "plugins": [ - { - "name": "ts-lit-plugin", - "strict": true, - "globalAttributes": ["nve-text", "nve-layout", "nve-theme"], - "rules": { - "no-unknown-tag-name": "off", - "no-unknown-attribute": "off", - "no-missing-import": "off", - "no-unknown-property": "off", - "no-complex-attribute-binding": "off", - "no-incompatible-type-binding": "off" - } - } - ] - }, - "include": ["src/**/*.ts"] -} diff --git a/projects/styles/src/layout.stories.ts b/projects/styles/src/layout.stories.ts index 771377e6c..c84c8c4f8 100644 --- a/projects/styles/src/layout.stories.ts +++ b/projects/styles/src/layout.stories.ts @@ -2,7 +2,7 @@ import { html } from 'lit'; export default { title: 'Styles/Layout', - element: 'layout' + component: 'layout' }; export const HorizontalAlignLeft = { diff --git a/projects/styles/src/responsive.stories.ts b/projects/styles/src/responsive.stories.ts index 26f45b9d7..2c47f1cb3 100644 --- a/projects/styles/src/responsive.stories.ts +++ b/projects/styles/src/responsive.stories.ts @@ -5,7 +5,7 @@ import '@nvidia-elements/core/logo/define.js'; export default { title: 'Internal/Layout/Responsive', - element: 'responsive' + component: 'layout responsive' }; export const GapResponsive = { diff --git a/projects/styles/src/typography.stories.ts b/projects/styles/src/typography.stories.ts index 30963778e..23210009e 100644 --- a/projects/styles/src/typography.stories.ts +++ b/projects/styles/src/typography.stories.ts @@ -3,7 +3,7 @@ import '@nvidia-elements/core/card/define.js'; export default { title: 'Styles/Typography', - element: 'typography' + component: 'typography' }; export const Type = { From b6e72758e5b83efaf29a9341dc32f9d23a5bb136 Mon Sep 17 00:00:00 2001 From: Jared De La Cruz Date: Mon, 19 May 2025 10:16:20 -0700 Subject: [PATCH 0155/1100] chore(docs): add event docs for dropzone --- projects/elements/src/dropzone/dropzone.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/elements/src/dropzone/dropzone.ts b/projects/elements/src/dropzone/dropzone.ts index 66629c8a6..22526989f 100644 --- a/projects/elements/src/dropzone/dropzone.ts +++ b/projects/elements/src/dropzone/dropzone.ts @@ -9,6 +9,7 @@ import styles from './dropzone.css?inline'; * @description A dropzone form control that enables users to drag anddrop files onto it. * @since 1.29.0 * @entrypoint \@nvidia-elements/core/dropzone + * @event change emits when the value has changed (files located in event.target) * @cssprop --background * @cssprop --border-color * @cssprop --border-radius From a56674315773b47bc945d338ebc50ff093808313 Mon Sep 17 00:00:00 2001 From: Will Geller Date: Wed, 21 May 2025 11:34:51 -0400 Subject: [PATCH 0156/1100] chore(docs): fix alignment of tooltip and toggletip story examples --- projects/site/src/stories/index.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/projects/site/src/stories/index.css b/projects/site/src/stories/index.css index 44b5dc577..fe3de91c1 100644 --- a/projects/site/src/stories/index.css +++ b/projects/site/src/stories/index.css @@ -20,6 +20,9 @@ } #story-container { + display: flex; + place-items: center; + place-content: center; width: 100vw; height: 100vh; overflow-x: hidden; @@ -38,6 +41,7 @@ body:has(nve-page) #story-container { [data-element^='layout'] { & > [nve-layout] { height: 100%; + width: 100%; } nve-card { From 37913161d694dbdeff10cd7735effcda6e6e727a Mon Sep 17 00:00:00 2001 From: Jared De La Cruz Date: Tue, 20 May 2025 10:30:50 -0700 Subject: [PATCH 0157/1100] chore(docs): update gtag search event --- projects/site/README.md | 12 +++++++++++ projects/site/src/_11ty/layouts/docs.ts | 22 +++++++------------- projects/site/src/_internal/search/search.ts | 8 +++++-- 3 files changed, 25 insertions(+), 17 deletions(-) diff --git a/projects/site/README.md b/projects/site/README.md index 56592a483..49574dcd4 100644 --- a/projects/site/README.md +++ b/projects/site/README.md @@ -1,3 +1,15 @@ # Elements Site This is the static site project for Elements. The `/site` project is built alongside `/storybook` and `/starters` projects and deployed via the Gitlab `/pages` project. + +### Google Analytics + +The Google Analytics script is located in `./projects/site/src/_11ty/layouts/common.js`. +For access to the Google Analytics dashboard, please reach out to yawen@nvidia.com. + +- Home: https://analytics.google.com/analytics/web/#/p330963436/reports/intelligenthome +- Reports Engangement: https://analytics.google.com/analytics/web/#/p330963436/reports/reportinghub + - Pages and Screens: + - Search for "Elements" to see the visited pages. + - Events: + - Search for "Elements" to see the events. diff --git a/projects/site/src/_11ty/layouts/docs.ts b/projects/site/src/_11ty/layouts/docs.ts index ab058b5d5..5ddb3b7b5 100644 --- a/projects/site/src/_11ty/layouts/docs.ts +++ b/projects/site/src/_11ty/layouts/docs.ts @@ -50,17 +50,7 @@ const docsNav = globalThis.document.querySelector('#docs-nav')!; const docsNavDisplay = docsNav.style.display; let isSearching = false; -let searchTimeout: number; -docsSearch.addEventListener('search-change', (event: CustomEvent) => { - isSearching = event.detail.length > 0; - - clearTimeout(searchTimeout); - searchTimeout = globalThis.setTimeout(() => { - if (event.detail.length > 0) { - sendEvent('elements-docs-search', { query: event.detail }); - } - }, 1000); -}); +docsSearch.addEventListener('search-change', (event: CustomEvent) => (isSearching = event.detail.length > 0)); docsSearch.addEventListener('search-reset', () => ((isSearching = false), toggleSideNav(true))); docsSearch.addEventListener('search-focus', () => toggleSideNav(false)); docsSearch.addEventListener('search-blur', () => !isSearching && toggleSideNav(true)); @@ -68,9 +58,11 @@ docsSearch.addEventListener('search-blur', () => !isSearching && toggleSideNav(t const toggleSideNav = (state: boolean) => { docsNav.style.display = state ? docsNavDisplay : 'none'; }; -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const sendEvent = (eventName: string, params: any) => { + +const searchParams = new URLSearchParams(globalThis.location.search); +const query = searchParams.get('q'); +if (query) { if (globalThis.gtag) { - globalThis.gtag('event', eventName, params); + globalThis.gtag('event', 'elements-docs-search', { query: query }); } -}; +} diff --git a/projects/site/src/_internal/search/search.ts b/projects/site/src/_internal/search/search.ts index b193c4c4e..7740473c0 100644 --- a/projects/site/src/_internal/search/search.ts +++ b/projects/site/src/_internal/search/search.ts @@ -218,7 +218,7 @@ export class DocsSearch extends LitElement { const style = `--color: var(--nve-ref-color-${isNveTag ? 'blue-cobalt' : 'yellow-amber'}-1000);`; return { - url: result.raw_url || '', + url: result.raw_url + (this.searchInput.value ? `?q=${encodeURIComponent(this.searchInput.value)}` : '') || '', title: result.meta?.title, subtitle: result.raw_url || '', icon: icon, @@ -234,7 +234,11 @@ export class DocsSearch extends LitElement { const headingAnchor = heading.replaceAll(' ', '-').toLowerCase(); headings.push({ - url: result.raw_url + '#' + headingAnchor, + url: + result.raw_url + + (this.searchInput.value ? `?q=${encodeURIComponent(this.searchInput.value)}` : '') + + '#' + + headingAnchor, title: result.meta.title + ' - ' + heading, subtitle: result.raw_url + '#' + headingAnchor, icon: 'bookmark', From bfa2b946c4f4189cdfb7d6cedaf3f176be118d25 Mon Sep 17 00:00:00 2001 From: Cory Rylan Date: Wed, 21 May 2025 14:06:57 -0500 Subject: [PATCH 0158/1100] fix(elements): popover position area - fixes position area center default for alignment Signed-off-by: Cory Rylan --- projects/elements/src/grid/grid.global.css | 11 ----- projects/elements/src/grid/grid.test.ts | 41 ------------------- .../type-native-popover.controller.test.ts | 9 ++++ .../type-native-popover.controller.ts | 4 ++ .../elements/src/internal/styles/popover.css | 24 +++++------ .../elements/src/tooltip/tooltip.stories.ts | 41 +++++++++++++++++++ 6 files changed, 65 insertions(+), 65 deletions(-) diff --git a/projects/elements/src/grid/grid.global.css b/projects/elements/src/grid/grid.global.css index 24b2d5fb8..918678b01 100644 --- a/projects/elements/src/grid/grid.global.css +++ b/projects/elements/src/grid/grid.global.css @@ -79,14 +79,3 @@ nve-grid { scrollbar-width: thin; } } - -/* - We leverage content-visibility for rendering performance of data grid rows. - This allows the browser to skip render calculations on rows that are not visible. - Since the browser skips the render calc this prevents the css anchor from positioning correctly - as it does not know the true height of the un-rendered grid rows. - https://web.dev/articles/content-visibility -*/ -nve-grid:has([style*='anchor-name:']) nve-grid-row { - content-visibility: visible !important; -} diff --git a/projects/elements/src/grid/grid.test.ts b/projects/elements/src/grid/grid.test.ts index 0c0e15a1d..0590c9069 100644 --- a/projects/elements/src/grid/grid.test.ts +++ b/projects/elements/src/grid/grid.test.ts @@ -2,7 +2,6 @@ import { html } from 'lit'; import { describe, expect, it, beforeEach, afterEach } from 'vitest'; import { createFixture, elementIsStable, removeFixture } from '@nvidia-elements/testing'; import { Grid } from '@nvidia-elements/core/grid'; -import type { GridRow } from '@nvidia-elements/core/grid'; import '@nvidia-elements/core/grid/define.js'; describe(Grid.metadata.tag, () => { @@ -159,43 +158,3 @@ describe(`${Grid.metadata.tag}: scroll`, () => { expect(element.shadowRoot.querySelector('[part="scrollbox"]').scrollTop).toBe(20); }); }); - -describe(`${Grid.metadata.tag}: scroll`, () => { - let fixture: HTMLElement; - let element: Grid; - let row: GridRow; - - beforeEach(async () => { - fixture = await createFixture(html` - - - column 1 - column 2 - column 3 - column 4 - - - cell 1-1 - cell 1-2 - cell 1-3 - cell 1-4 - - - `); - element = fixture.querySelector(Grid.metadata.tag); - row = element.querySelector('nve-grid-row'); - await elementIsStable(element); - }); - - afterEach(() => { - removeFixture(fixture); - }); - - it('should disable content-visibility for rows if CSS anchor from a nve-popover is detected', async () => { - await elementIsStable(element); - await elementIsStable(row); - await new Promise(resolve => setTimeout(resolve, 0)); - const styles = globalThis.getComputedStyle(row); - expect(styles.contentVisibility).toBe('visible'); - }); -}); diff --git a/projects/elements/src/internal/controllers/type-native-popover.controller.test.ts b/projects/elements/src/internal/controllers/type-native-popover.controller.test.ts index 9c9db1ca3..36661b49c 100644 --- a/projects/elements/src/internal/controllers/type-native-popover.controller.test.ts +++ b/projects/elements/src/internal/controllers/type-native-popover.controller.test.ts @@ -200,6 +200,15 @@ describe('type-popover.controller', () => { expect((await event).target).toBe(element); expect(element.inert).toBe(false); }); + + it('should update :state(transition-start) on beforetoggle for animation', async () => { + await elementIsStable(element); + + const event = untilEvent(element, 'beforetoggle'); + element.showPopover(); + expect((await event).target).toBe(element); + expect(element.matches(':state(transition-start)')).toBe(true); + }); }); describe('type-popover.controller - default open', () => { diff --git a/projects/elements/src/internal/controllers/type-native-popover.controller.ts b/projects/elements/src/internal/controllers/type-native-popover.controller.ts index 748cd3e1b..aa2dcf8c9 100644 --- a/projects/elements/src/internal/controllers/type-native-popover.controller.ts +++ b/projects/elements/src/internal/controllers/type-native-popover.controller.ts @@ -51,6 +51,10 @@ export class TypeNativePopoverController implements Rea this.#setupModalLightDismiss(); this.host.inert = this.host.matches(':not(:popover-open)') && !!this.#triggers.length; + this.host.addEventListener('beforetoggle', () => { + this.host._internals.states.add('transition-start'); + }); + this.host.addEventListener('toggle', (e: ToggleEvent) => { if (this.host.behaviorTrigger) { this.host.hidden = e.newState === 'closed'; diff --git a/projects/elements/src/internal/styles/popover.css b/projects/elements/src/internal/styles/popover.css index 5f7d166c7..8ec783155 100644 --- a/projects/elements/src/internal/styles/popover.css +++ b/projects/elements/src/internal/styles/popover.css @@ -10,11 +10,16 @@ width: max-content; z-index: 99; pointer-events: none; - /* for fallback floating ui positioning */ + opacity: 0; } -:host { +/* ensure popover is not visible until floating-ui has positioned it */ +:host([position-strategy='absolute']:not([style*='inset:'])) { opacity: 0; +} + +/* apply transitions during beforetoggle event to prevent flash of unstyled popover on page load */ +:host(:state(transition-start)) { transition: opacity var(--animation-duration), transform var(--animation-duration) allow-discrete, @@ -42,13 +47,6 @@ display: block; } -@starting-style { - :host(:popover-open), - :host(:not([popover]):not([hidden])) { - opacity: 0; - } -} - :host::backdrop { opacity: 0; } @@ -176,7 +174,7 @@ /** top */ :host([position='top']) { - position-area: top; + position-area: top center; inset: 0 auto auto auto; } @@ -200,7 +198,7 @@ /** bottom */ :host([position='bottom']) { - position-area: bottom; + position-area: bottom center; inset: auto auto 0 auto; } @@ -216,7 +214,7 @@ /** left */ :host([position='left']) { - position-area: left; + position-area: left center; inset: auto auto auto 0; } @@ -232,7 +230,7 @@ /** right */ :host([position='right']) { - position-area: right; + position-area: right center; inset: auto 0 auto auto; } diff --git a/projects/elements/src/tooltip/tooltip.stories.ts b/projects/elements/src/tooltip/tooltip.stories.ts index 59c480dfe..58504d1a3 100644 --- a/projects/elements/src/tooltip/tooltip.stories.ts +++ b/projects/elements/src/tooltip/tooltip.stories.ts @@ -144,6 +144,47 @@ export const Wrap = { ` }; +export const PositionStrategyAbsolute = { + render: () => html` +hello there +button + ` +}; + +export const ScrollContainer = { + render: () => html` + +
+ + + + + + + + + + +
+hello there + ` +}; + @customElement('dynamic-anchor-position-demo') class DynamicAnchorPositionDemo extends LitElement { /* eslint no-unused-vars: 0 */ static styles = [css` From 32b17012fc0f33d6d66dc8bb97c3e5eb73e76a1f Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Thu, 22 May 2025 13:28:19 +0000 Subject: [PATCH 0159/1100] chore(release): @nve/elements-v1.34.9 [skip ci] ## [@nve/elements-v1.34.9](https://gitlab-master.nvidia.com/ai-infra/elements/compare/@nve/elements-v1.34.8...@nve/elements-v1.34.9) (2025-05-22) ### Bug Fixes * **elements:** popover position area ([52e872c](https://gitlab-master.nvidia.com/ai-infra/elements/commit/52e872c2ade948d53e3eedbc496c55531a3e8b88)) --- projects/elements/CHANGELOG.md | 7 +++++++ projects/elements/package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/projects/elements/CHANGELOG.md b/projects/elements/CHANGELOG.md index 3008913ce..414323b07 100644 --- a/projects/elements/CHANGELOG.md +++ b/projects/elements/CHANGELOG.md @@ -1,3 +1,10 @@ +## [@nvidia-elements/core-v1.34.9](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.34.8...@nvidia-elements/core-v1.34.9) (2025-05-22) + + +### Bug Fixes + +* **elements:** popover position area ([97cf72d](https://github.com/NVIDIA/elements/commit/97cf72daaa0e529f26f276c304dc8e579d88ac1f)) + ## [@nvidia-elements/core-v1.34.8](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.34.7...@nvidia-elements/core-v1.34.8) (2025-05-19) diff --git a/projects/elements/package.json b/projects/elements/package.json index 69a77d6cb..41e57a6b7 100644 --- a/projects/elements/package.json +++ b/projects/elements/package.json @@ -1,6 +1,6 @@ { "name": "@nvidia-elements/core", - "version": "1.34.8", + "version": "1.34.9", "description": "The Design Language for AI/ML Factories Building at the Speed of Light", "homepage": "https://NVIDIA.github.io/elements/", "repository": { From 97aba397b3b240d147d126d7d851b9c737d354b8 Mon Sep 17 00:00:00 2001 From: Cory Rylan Date: Wed, 21 May 2025 17:12:49 -0500 Subject: [PATCH 0160/1100] chore(docs): install shortcode - use entrypoint metadata to generate the install import via a shortcode Signed-off-by: Cory Rylan --- projects/site/eleventy.config.js | 3 +- projects/site/src/_11ty/shortcodes/index.js | 15 ++++++++ projects/site/src/docs/elements/accordion.md | 16 +-------- projects/site/src/docs/elements/alert.md | 8 +---- projects/site/src/docs/elements/avatar.md | 8 +---- projects/site/src/docs/elements/badge.md | 8 +---- projects/site/src/docs/elements/breadcrumb.md | 8 +---- .../site/src/docs/elements/button-group.md | 18 +--------- projects/site/src/docs/elements/button.md | 8 +---- projects/site/src/docs/elements/card.md | 16 ++------- .../site/src/docs/elements/chat-message.md | 8 +---- projects/site/src/docs/elements/checkbox.md | 11 +----- projects/site/src/docs/elements/color.md | 11 +----- projects/site/src/docs/elements/combobox.md | 16 +-------- .../site/src/docs/elements/copy-button.md | 8 +---- projects/site/src/docs/elements/date.md | 11 +----- projects/site/src/docs/elements/datetime.md | 11 +----- projects/site/src/docs/elements/dialog.md | 15 +------- projects/site/src/docs/elements/divider.md | 8 +---- projects/site/src/docs/elements/dot.md | 8 +---- projects/site/src/docs/elements/drawer.md | 20 +---------- .../site/src/docs/elements/dropdown-group.md | 35 +------------------ projects/site/src/docs/elements/dropdown.md | 9 +---- projects/site/src/docs/elements/dropzone.md | 8 +---- projects/site/src/docs/elements/file.md | 11 +----- .../site/src/docs/elements/icon-button.md | 8 +---- projects/site/src/docs/elements/icon.md | 11 ++---- projects/site/src/docs/elements/input.md | 11 +----- projects/site/src/docs/elements/logo.md | 8 +---- projects/site/src/docs/elements/menu.md | 13 +------ projects/site/src/docs/elements/month.md | 11 +----- .../site/src/docs/elements/notification.md | 12 +------ .../site/src/docs/elements/page-header.md | 16 +-------- .../site/src/docs/elements/page-loader.md | 8 +---- projects/site/src/docs/elements/page.md | 19 +--------- projects/site/src/docs/elements/pagination.md | 8 +---- projects/site/src/docs/elements/panel.md | 12 +------ projects/site/src/docs/elements/password.md | 11 +----- .../src/docs/elements/preferences-input.md | 8 +---- .../site/src/docs/elements/progress-bar.md | 4 +-- .../site/src/docs/elements/progress-ring.md | 8 +---- .../docs/elements/progressive-filter-chip.md | 21 +---------- projects/site/src/docs/elements/pulse.md | 8 +---- projects/site/src/docs/elements/radio.md | 25 +------------ projects/site/src/docs/elements/range.md | 11 +----- .../site/src/docs/elements/resize-handle.md | 8 +---- projects/site/src/docs/elements/search.md | 11 +----- projects/site/src/docs/elements/select.md | 16 +-------- .../site/src/docs/elements/sort-button.md | 8 +---- .../site/src/docs/elements/star-rating.md | 8 +---- projects/site/src/docs/elements/steps.md | 23 +++--------- projects/site/src/docs/elements/switch.md | 11 +----- projects/site/src/docs/elements/tabs.md | 25 +++---------- projects/site/src/docs/elements/tag.md | 8 +---- projects/site/src/docs/elements/textarea.md | 11 +----- projects/site/src/docs/elements/time.md | 12 +------ projects/site/src/docs/elements/toast.md | 9 +---- projects/site/src/docs/elements/toggletip.md | 9 +---- projects/site/src/docs/elements/toolbar.md | 8 +---- projects/site/src/docs/elements/tooltip.md | 9 +---- projects/site/src/docs/elements/tree.md | 19 +--------- projects/site/src/docs/elements/week.md | 11 +----- 62 files changed, 86 insertions(+), 651 deletions(-) diff --git a/projects/site/eleventy.config.js b/projects/site/eleventy.config.js index 862fb49ca..eb60594bc 100644 --- a/projects/site/eleventy.config.js +++ b/projects/site/eleventy.config.js @@ -7,7 +7,7 @@ import { searchPlugin } from './src/_11ty/plugins/search.js'; import { elementLoaderTransform } from './src/_11ty/transforms/element-loader.js'; import { anchorGeneratorTransform } from './src/_11ty/transforms/anchor-generator.js'; import { htmlMinifyTransform } from './src/_11ty/transforms/html-minify.js'; -import { apiShortcode, storyShortcode } from './src/_11ty/shortcodes/index.js'; +import { apiShortcode, storyShortcode, installShortcode } from './src/_11ty/shortcodes/index.js'; import { svgLogosShortcode } from './src/_11ty/shortcodes/svg-logos.js'; import { tokensShortcode } from './src/_11ty/shortcodes/tokens.js'; import markdown from './src/_11ty/libraries/markdown.js'; @@ -97,6 +97,7 @@ export default function (eleventyConfig) { eleventyConfig.addAsyncShortcode('story', storyShortcode); eleventyConfig.addAsyncShortcode('api', apiShortcode); eleventyConfig.addAsyncShortcode('tokens', tokensShortcode); + eleventyConfig.addAsyncShortcode('install', installShortcode); eleventyConfig.addShortcode('svg-logos', svgLogosShortcode); eleventyConfig.addTransform('element-loader', elementLoaderTransform); eleventyConfig.addTransform('anchor-generator', anchorGeneratorTransform); diff --git a/projects/site/src/_11ty/shortcodes/index.js b/projects/site/src/_11ty/shortcodes/index.js index 5f62b5cf1..ea924817e 100644 --- a/projects/site/src/_11ty/shortcodes/index.js +++ b/projects/site/src/_11ty/shortcodes/index.js @@ -10,6 +10,21 @@ const md = markdownIt(); const metadata = await MetadataService.getMetadata(); const elements = Object.keys(metadata).flatMap(packageName => metadata[packageName].elements ?? []); +export async function installShortcode(tag) { + const element = elements.find(d => d.name === tag); + return element + ? /* html */ ` +\`\`\`typescript +import '${element.manifest.metadata.entrypoint}/define.js'; +\`\`\` + +\`\`\`html +${element.stories.find(s => s.id === 'Default')?.template} +\`\`\` +` + : ''; +} + export async function apiShortcode(tag, type, value) { const element = elements.find(d => d.name === tag); return element diff --git a/projects/site/src/docs/elements/accordion.md b/projects/site/src/docs/elements/accordion.md index c3012cc33..dd4186596 100644 --- a/projects/site/src/docs/elements/accordion.md +++ b/projects/site/src/docs/elements/accordion.md @@ -9,21 +9,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/accordion/define.js'; -``` - -```html - - -
Heading
- - - - Content - - -``` +{% install 'nve-accordion' %} ## Standard diff --git a/projects/site/src/docs/elements/alert.md b/projects/site/src/docs/elements/alert.md index b6060fa84..ba9a771f9 100644 --- a/projects/site/src/docs/elements/alert.md +++ b/projects/site/src/docs/elements/alert.md @@ -9,13 +9,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/alert/define.js'; -``` - -```html -success message -``` +{% install 'nve-alert' %} ## Standard diff --git a/projects/site/src/docs/elements/avatar.md b/projects/site/src/docs/elements/avatar.md index e945e2eb0..e660d8a94 100644 --- a/projects/site/src/docs/elements/avatar.md +++ b/projects/site/src/docs/elements/avatar.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/avatar/define.js'; -``` - -```html - -``` +{% install 'nve-avatar' %} ## Standard diff --git a/projects/site/src/docs/elements/badge.md b/projects/site/src/docs/elements/badge.md index efc4136a5..ee671ecdf 100644 --- a/projects/site/src/docs/elements/badge.md +++ b/projects/site/src/docs/elements/badge.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/badge/define.js'; -``` - -```html - -``` +{% install 'nve-badge' %} ## Standard diff --git a/projects/site/src/docs/elements/breadcrumb.md b/projects/site/src/docs/elements/breadcrumb.md index ae512cf8e..13f38c8e9 100644 --- a/projects/site/src/docs/elements/breadcrumb.md +++ b/projects/site/src/docs/elements/breadcrumb.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/breadcrumb/define.js'; -``` - -```html - -``` +{% install 'nve-breadcrumb' %} ## Standard diff --git a/projects/site/src/docs/elements/button-group.md b/projects/site/src/docs/elements/button-group.md index 2df5873a0..c4f3bf017 100644 --- a/projects/site/src/docs/elements/button-group.md +++ b/projects/site/src/docs/elements/button-group.md @@ -8,23 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/button-group/define.js'; -``` - -```html - - - - - - - - 10% - 15% - 20% - -``` +{% install 'nve-button-group' %} ## Standard diff --git a/projects/site/src/docs/elements/button.md b/projects/site/src/docs/elements/button.md index 424c8fb4d..4e1e3babf 100644 --- a/projects/site/src/docs/elements/button.md +++ b/projects/site/src/docs/elements/button.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/button/define.js'; -``` - -```html -button -``` +{% install 'nve-button' %} ## Standard diff --git a/projects/site/src/docs/elements/card.md b/projects/site/src/docs/elements/card.md index 964ddacec..6c8884430 100644 --- a/projects/site/src/docs/elements/card.md +++ b/projects/site/src/docs/elements/card.md @@ -9,23 +9,11 @@ ## Installation -```typescript -import '@nvidia-elements/core/card/define.js'; -``` - -```html - - - Card Content - - -``` +{% install 'nve-card' %} ## Standard -Combining `card-header`, `card-content` & `card-footer` will yield a fully styled card. -Note how `card-content` will vertically stretch to fill the card size and the footer will align -to the bottom of the card. +Combining `card-header`, `card-content` & `card-footer` will yield a fully styled card. Note how `card-content` will vertically stretch to fill the card size and the footer will align to the bottom of the card. {% story 'nve-card', 'Default' %} diff --git a/projects/site/src/docs/elements/chat-message.md b/projects/site/src/docs/elements/chat-message.md index 9c1b8bb2b..0cc13b88a 100644 --- a/projects/site/src/docs/elements/chat-message.md +++ b/projects/site/src/docs/elements/chat-message.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/chat-message/define.js'; -``` - -```html - -``` +{% install 'nve-chat-message' %} ## Standard diff --git a/projects/site/src/docs/elements/checkbox.md b/projects/site/src/docs/elements/checkbox.md index 898fe6f5a..854c912dc 100644 --- a/projects/site/src/docs/elements/checkbox.md +++ b/projects/site/src/docs/elements/checkbox.md @@ -8,16 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/checkbox/define.js'; -``` - -```html - - - - -``` +{% install 'nve-checkbox' %} ## Standard diff --git a/projects/site/src/docs/elements/color.md b/projects/site/src/docs/elements/color.md index 8f0052ce3..b7f6e0737 100644 --- a/projects/site/src/docs/elements/color.md +++ b/projects/site/src/docs/elements/color.md @@ -8,16 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/color/define.js'; -``` - -```html - - - - -``` +{% install 'nve-color' %} ## Standard diff --git a/projects/site/src/docs/elements/combobox.md b/projects/site/src/docs/elements/combobox.md index 1b9bbe02d..321a7cf74 100644 --- a/projects/site/src/docs/elements/combobox.md +++ b/projects/site/src/docs/elements/combobox.md @@ -8,21 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/combobox/define.js'; -``` - -```html - - - - - - - - - -``` +{% install 'nve-combobox' %} ## Standard diff --git a/projects/site/src/docs/elements/copy-button.md b/projects/site/src/docs/elements/copy-button.md index dc2dad337..eecab57e9 100644 --- a/projects/site/src/docs/elements/copy-button.md +++ b/projects/site/src/docs/elements/copy-button.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/copy-button/define.js'; -``` - -```html - -``` +{% install 'nve-copy-button' %} ## Default diff --git a/projects/site/src/docs/elements/date.md b/projects/site/src/docs/elements/date.md index 2e7429b6e..159da8445 100644 --- a/projects/site/src/docs/elements/date.md +++ b/projects/site/src/docs/elements/date.md @@ -8,16 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/date/define.js'; -``` - -```html - - - - -``` +{% install 'nve-date' %} ## Standard diff --git a/projects/site/src/docs/elements/datetime.md b/projects/site/src/docs/elements/datetime.md index a13cbea3f..222f34d63 100644 --- a/projects/site/src/docs/elements/datetime.md +++ b/projects/site/src/docs/elements/datetime.md @@ -8,16 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/datetime/define.js'; -``` - -```html - - - - -``` +{% install 'nve-datetime' %} ## Standard diff --git a/projects/site/src/docs/elements/dialog.md b/projects/site/src/docs/elements/dialog.md index e3fcd6ffb..d29eb129c 100644 --- a/projects/site/src/docs/elements/dialog.md +++ b/projects/site/src/docs/elements/dialog.md @@ -9,20 +9,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/dialog/define.js'; -``` - -```html - - -

title

- -

some text content in a closable dialog

- - -button -``` +{% install 'nve-dialog' %} ## Standard diff --git a/projects/site/src/docs/elements/divider.md b/projects/site/src/docs/elements/divider.md index 462a7d306..df8450549 100644 --- a/projects/site/src/docs/elements/divider.md +++ b/projects/site/src/docs/elements/divider.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/divider/define.js'; -``` - -```html - -``` +{% install 'nve-divider' %} ## Standard diff --git a/projects/site/src/docs/elements/dot.md b/projects/site/src/docs/elements/dot.md index 97dce85ab..c74b4af52 100644 --- a/projects/site/src/docs/elements/dot.md +++ b/projects/site/src/docs/elements/dot.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/dot/define.js'; -``` - -```html - -``` +{% install 'nve-dot' %} ## Standard diff --git a/projects/site/src/docs/elements/drawer.md b/projects/site/src/docs/elements/drawer.md index 2d1922d9c..8d684f380 100644 --- a/projects/site/src/docs/elements/drawer.md +++ b/projects/site/src/docs/elements/drawer.md @@ -9,25 +9,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/drawer/define.js'; -``` - -```html - - -

drawer header

- - -

drawer content

- - -

drawer footer

- - - -button -``` +{% install 'nve-drawer' %} ## Standard diff --git a/projects/site/src/docs/elements/dropdown-group.md b/projects/site/src/docs/elements/dropdown-group.md index 718e52671..19dc5ab9f 100644 --- a/projects/site/src/docs/elements/dropdown-group.md +++ b/projects/site/src/docs/elements/dropdown-group.md @@ -10,40 +10,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/dropdown-group/define.js'; -``` - -```html -menu - - - - - item 1-1 - - item 1-2 - item 1-3 - - - - - item 2-1 - - item 2-2 - - item 2-3 - - - - - item 3-1 - item 3-2 - item 3-3 - - - -``` +{% install 'nve-dropdown-group' %} ## Standard diff --git a/projects/site/src/docs/elements/dropdown.md b/projects/site/src/docs/elements/dropdown.md index f89ae6d70..e0b3ea848 100644 --- a/projects/site/src/docs/elements/dropdown.md +++ b/projects/site/src/docs/elements/dropdown.md @@ -9,14 +9,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/dropdown/define.js'; -``` - -```html -dropdown content -button -``` +{% install 'nve-dropdown' %} ## Standard diff --git a/projects/site/src/docs/elements/dropzone.md b/projects/site/src/docs/elements/dropzone.md index 1b88fec54..36e5919eb 100644 --- a/projects/site/src/docs/elements/dropzone.md +++ b/projects/site/src/docs/elements/dropzone.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/dropzone/define.js'; -``` - -```html - -``` +{% install 'nve-dropzone' %} ## Standard diff --git a/projects/site/src/docs/elements/file.md b/projects/site/src/docs/elements/file.md index f7e0f2fea..f0ca57014 100644 --- a/projects/site/src/docs/elements/file.md +++ b/projects/site/src/docs/elements/file.md @@ -8,16 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/file/define.js'; -``` - -```html - - - - -``` +{% install 'nve-file' %} ## Standard diff --git a/projects/site/src/docs/elements/icon-button.md b/projects/site/src/docs/elements/icon-button.md index 34643eb44..64e22ea38 100644 --- a/projects/site/src/docs/elements/icon-button.md +++ b/projects/site/src/docs/elements/icon-button.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/icon-button/define.js'; -``` - -```html - -``` +{% install 'nve-icon-button' %} ## Standard diff --git a/projects/site/src/docs/elements/icon.md b/projects/site/src/docs/elements/icon.md index 384b0b22b..48a46c5ec 100644 --- a/projects/site/src/docs/elements/icon.md +++ b/projects/site/src/docs/elements/icon.md @@ -6,18 +6,11 @@ } --- -The Iconography system is based on exposing an SVG based icon library to a the `icon` element. -See the searchable [Interactive Icon Catalog](./docs/foundations/iconography/) +The Iconography system is based on exposing an SVG based icon library to a the `icon` element. See the searchable [Interactive Icon Catalog](./docs/foundations/iconography/) ## Installation -```typescript -import '@nvidia-elements/core/icon/define.js'; -``` - -```html - -``` +{% install 'nve-icon' %} ## Standard diff --git a/projects/site/src/docs/elements/input.md b/projects/site/src/docs/elements/input.md index dd33f5f4b..28e024d91 100644 --- a/projects/site/src/docs/elements/input.md +++ b/projects/site/src/docs/elements/input.md @@ -8,16 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/input/define.js'; -``` - -```html - - - - -``` +{% install 'nve-input' %} ## Standard diff --git a/projects/site/src/docs/elements/logo.md b/projects/site/src/docs/elements/logo.md index f1f3e2e6d..6e36fb221 100644 --- a/projects/site/src/docs/elements/logo.md +++ b/projects/site/src/docs/elements/logo.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/logo/define.js'; -``` - -```html - -``` +{% install 'nve-logo' %} ## Standard diff --git a/projects/site/src/docs/elements/menu.md b/projects/site/src/docs/elements/menu.md index 3263dac16..26bfbe89d 100644 --- a/projects/site/src/docs/elements/menu.md +++ b/projects/site/src/docs/elements/menu.md @@ -9,18 +9,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/menu/define.js'; -``` - -```html - - item 1 - item 2 - item 3 - item 4 - -``` +{% install 'nve-menu' %} ## Standard diff --git a/projects/site/src/docs/elements/month.md b/projects/site/src/docs/elements/month.md index b3f90a563..cb0c8cbcf 100644 --- a/projects/site/src/docs/elements/month.md +++ b/projects/site/src/docs/elements/month.md @@ -8,16 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/month/define.js'; -``` - -```html - - - - -``` +{% install 'nve-month' %} ## Standard diff --git a/projects/site/src/docs/elements/notification.md b/projects/site/src/docs/elements/notification.md index aa9191e92..b1c3f1ea6 100644 --- a/projects/site/src/docs/elements/notification.md +++ b/projects/site/src/docs/elements/notification.md @@ -9,17 +9,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/notification/define.js'; -``` - -```html - -

Notification

-

some text content in a notification

- -button -``` +{% install 'nve-notification' %} ## Standard diff --git a/projects/site/src/docs/elements/page-header.md b/projects/site/src/docs/elements/page-header.md index 094ea73d1..c0e5d4c2e 100644 --- a/projects/site/src/docs/elements/page-header.md +++ b/projects/site/src/docs/elements/page-header.md @@ -8,21 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/page-header/define.js'; -``` - -```html - - -

Workflows

- Link 1 - Link 2 - - - EL - -``` +{% install 'nve-page-header' %} ## Standard diff --git a/projects/site/src/docs/elements/page-loader.md b/projects/site/src/docs/elements/page-loader.md index 532ca7fa8..fbd593f88 100644 --- a/projects/site/src/docs/elements/page-loader.md +++ b/projects/site/src/docs/elements/page-loader.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/page-loader/define.js'; -``` - -```html - -``` +{% install 'nve-page-loader' %} ## Standard diff --git a/projects/site/src/docs/elements/page.md b/projects/site/src/docs/elements/page.md index d12969e57..16cf142e6 100644 --- a/projects/site/src/docs/elements/page.md +++ b/projects/site/src/docs/elements/page.md @@ -11,24 +11,7 @@ To enable smooth transitions between page view, see our [View Transition API](./docs/foundations/view-transitions/) documentation. -```typescript -import '@nvidia-elements/core/page/define.js'; -``` - -```html - -
header
-
subheader
-
left-aside
-
left
-
main
-
bottom
-
right
-
right-aside
-
subfooter
-
footer
- -``` +{% install 'nve-page' %} {% story 'nve-page', 'Content', '{ "height": "480px", "padding": 0 }' %} diff --git a/projects/site/src/docs/elements/pagination.md b/projects/site/src/docs/elements/pagination.md index 2f798d71a..8ce9f43fa 100644 --- a/projects/site/src/docs/elements/pagination.md +++ b/projects/site/src/docs/elements/pagination.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/pagination/define.js'; -``` - -```html - -``` +{% install 'nve-pagination' %} ## Standard diff --git a/projects/site/src/docs/elements/panel.md b/projects/site/src/docs/elements/panel.md index 07c3a6caf..bbc3f9504 100644 --- a/projects/site/src/docs/elements/panel.md +++ b/projects/site/src/docs/elements/panel.md @@ -17,17 +17,7 @@ Additionally, `nve-panel` can be have its `side` property set to `left` or `righ ## Installation -```typescript -import '@nvidia-elements/core/panel/define.js'; -``` - -```html - - - Panel Content - - -``` +{% install 'nve-panel' %} ## Standard diff --git a/projects/site/src/docs/elements/password.md b/projects/site/src/docs/elements/password.md index 7d9656056..f996d97b8 100644 --- a/projects/site/src/docs/elements/password.md +++ b/projects/site/src/docs/elements/password.md @@ -8,16 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/password/define.js'; -``` - -```html - - - - -``` +{% install 'nve-password' %} ## Standard diff --git a/projects/site/src/docs/elements/preferences-input.md b/projects/site/src/docs/elements/preferences-input.md index b11551286..1300ff677 100644 --- a/projects/site/src/docs/elements/preferences-input.md +++ b/projects/site/src/docs/elements/preferences-input.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/preferences-input/define.js'; -``` - -```html - -``` +{% install 'nve-preferences-input' %} ## Standard diff --git a/projects/site/src/docs/elements/progress-bar.md b/projects/site/src/docs/elements/progress-bar.md index abfbce155..0374dbdec 100644 --- a/projects/site/src/docs/elements/progress-bar.md +++ b/projects/site/src/docs/elements/progress-bar.md @@ -8,9 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/progress-bar/define.js'; -``` +{% install 'nve-progress-bar' %} ## Setting the Value diff --git a/projects/site/src/docs/elements/progress-ring.md b/projects/site/src/docs/elements/progress-ring.md index 9e6dacd52..475f99126 100644 --- a/projects/site/src/docs/elements/progress-ring.md +++ b/projects/site/src/docs/elements/progress-ring.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/progress-ring/define.js'; -``` - -```html - -``` +{% install 'nve-progress-ring' %} ## Standard diff --git a/projects/site/src/docs/elements/progressive-filter-chip.md b/projects/site/src/docs/elements/progressive-filter-chip.md index 12f8b1220..7cf456c9d 100644 --- a/projects/site/src/docs/elements/progressive-filter-chip.md +++ b/projects/site/src/docs/elements/progressive-filter-chip.md @@ -8,26 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/progressive-filter-chip/define.js'; -``` - -```html - - - - - -``` +{% install 'nve-progressive-filter-chip' %} ## Standard diff --git a/projects/site/src/docs/elements/pulse.md b/projects/site/src/docs/elements/pulse.md index 7633dc62e..5eb7845e7 100644 --- a/projects/site/src/docs/elements/pulse.md +++ b/projects/site/src/docs/elements/pulse.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/pulse/define.js'; -``` - -```html - -``` +{% install 'nve-pulse' %} ## Standard diff --git a/projects/site/src/docs/elements/radio.md b/projects/site/src/docs/elements/radio.md index 2d203930d..614c2dd9b 100644 --- a/projects/site/src/docs/elements/radio.md +++ b/projects/site/src/docs/elements/radio.md @@ -8,30 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/radio/define.js'; -``` - -```html - - - - - - - - - - - - - - - - - message - -``` +{% install 'nve-radio' %} ## Standard diff --git a/projects/site/src/docs/elements/range.md b/projects/site/src/docs/elements/range.md index 5b74ea3bb..3a327f9a4 100644 --- a/projects/site/src/docs/elements/range.md +++ b/projects/site/src/docs/elements/range.md @@ -8,16 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/range/define.js'; -``` - -```html - - - - -``` +{% install 'nve-range' %} ## Standard diff --git a/projects/site/src/docs/elements/resize-handle.md b/projects/site/src/docs/elements/resize-handle.md index 1425955a0..1da7814de 100644 --- a/projects/site/src/docs/elements/resize-handle.md +++ b/projects/site/src/docs/elements/resize-handle.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/resize-handle/define.js'; -``` - -```html - -``` +{% install 'nve-resize-handle' %} ## Standard diff --git a/projects/site/src/docs/elements/search.md b/projects/site/src/docs/elements/search.md index 074a934ce..c9c8035cf 100644 --- a/projects/site/src/docs/elements/search.md +++ b/projects/site/src/docs/elements/search.md @@ -8,16 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/search/define.js'; -``` - -```html - - - - -``` +{% install 'nve-search' %} ## Standard diff --git a/projects/site/src/docs/elements/select.md b/projects/site/src/docs/elements/select.md index f9a9d4569..5668e78cc 100644 --- a/projects/site/src/docs/elements/select.md +++ b/projects/site/src/docs/elements/select.md @@ -8,21 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/select/define.js'; -``` - -```html - - - - message - -``` +{% install 'nve-select' %} ## Standard diff --git a/projects/site/src/docs/elements/sort-button.md b/projects/site/src/docs/elements/sort-button.md index ce5e1e618..6694a2930 100644 --- a/projects/site/src/docs/elements/sort-button.md +++ b/projects/site/src/docs/elements/sort-button.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/sort-button/define.js'; -``` - -```html - -``` +{% install 'nve-sort-button' %} ## Standard diff --git a/projects/site/src/docs/elements/star-rating.md b/projects/site/src/docs/elements/star-rating.md index 359ab4491..a4aae31a4 100644 --- a/projects/site/src/docs/elements/star-rating.md +++ b/projects/site/src/docs/elements/star-rating.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/star-rating/define.js'; -``` - -```html - -``` +{% install 'nve-star-rating' %} ## Standard diff --git a/projects/site/src/docs/elements/steps.md b/projects/site/src/docs/elements/steps.md index 171ffeb6c..00a1ee4b9 100644 --- a/projects/site/src/docs/elements/steps.md +++ b/projects/site/src/docs/elements/steps.md @@ -9,30 +9,15 @@ ## Installation -```typescript -import '@nvidia-elements/core/steps/define.js'; -``` - -```html - - Step 1 - Step 2 - Step 3 - Step 4 - Disabled - -``` +{% install 'nve-steps' %} By showing less information at a time, multi-step workflows allow users to focus better on the content pertinent to each step and decrease the chance of errors. -The Steps component is composed of a `steps` parent element and multiple `steps-item` elements slotted as children. -The `selected` attribute applied by the host application will give the selected step the proper selected styles. +The Steps component is composed of a `steps` parent element and multiple `steps-item` elements slotted as children. The `selected` attribute applied by the host application will give the selected step the proper selected styles. -The `disabled` attribute can be applied to an item to get the proper visual cues and prevent interaction. -All default interaction, hover and active states are handled by the elements. +The `disabled` attribute can be applied to an item to get the proper visual cues and prevent interaction. All default interaction, hover and active states are handled by the elements. -Additionally, all keyboard navigation and [accessibility](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) -concerns are handled out of the box. Try using left/right arrow keys on horizontal steps or up/down arrow keys on vertical steps. +Additionally, all keyboard navigation and [accessibility](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) concerns are handled out of the box. Try using left/right arrow keys on horizontal steps or up/down arrow keys on vertical steps. ## Standard diff --git a/projects/site/src/docs/elements/switch.md b/projects/site/src/docs/elements/switch.md index 1bf319044..1d7a592a7 100644 --- a/projects/site/src/docs/elements/switch.md +++ b/projects/site/src/docs/elements/switch.md @@ -8,16 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/switch/define.js'; -``` - -```html - - - - -``` +{% install 'nve-switch' %} ## Standard diff --git a/projects/site/src/docs/elements/tabs.md b/projects/site/src/docs/elements/tabs.md index 33b9d2ee4..2609ce596 100644 --- a/projects/site/src/docs/elements/tabs.md +++ b/projects/site/src/docs/elements/tabs.md @@ -7,30 +7,15 @@ } --- -The Tabs component is composed of a `` parent element and multiple `` elements slotted as children. -The `selected` attribute when applied to an item by the host application will give the selected tab the proper selected styles. +## Installation -The `disabled` attribute can be applied to an item to get the proper visual cues and prevent interaction. -All default interaction, hover and active states are handled by the elements. +{% install 'nve-tabs' %} -Additionally, all keyboard navigation and [accessibility](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) -concerns are handled out of the box. Try using left/right arrow keys on horizontal tabs or up/down on vertical tabs. +The Tabs component is composed of a `` parent element and multiple `` elements slotted as children. The `selected` attribute when applied to an item by the host application will give the selected tab the proper selected styles. -## Installation +The `disabled` attribute can be applied to an item to get the proper visual cues and prevent interaction. All default interaction, hover and active states are handled by the elements. -```typescript -import '@nvidia-elements/core/tabs/define.js'; -``` - -```html - - Tab 1 - Tab 2 - Tab 3 - Tab 4 - disabled - -``` +Additionally, all keyboard navigation and [accessibility](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) concerns are handled out of the box. Try using left/right arrow keys on horizontal tabs or up/down on vertical tabs. ## Standard diff --git a/projects/site/src/docs/elements/tag.md b/projects/site/src/docs/elements/tag.md index c36ac3c77..98f525ccf 100644 --- a/projects/site/src/docs/elements/tag.md +++ b/projects/site/src/docs/elements/tag.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/tag/define.js'; -``` - -```html - -``` +{% install 'nve-tag' %} ## Standard diff --git a/projects/site/src/docs/elements/textarea.md b/projects/site/src/docs/elements/textarea.md index 27c0c3617..d3163ac16 100644 --- a/projects/site/src/docs/elements/textarea.md +++ b/projects/site/src/docs/elements/textarea.md @@ -8,16 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/textarea/define.js'; -``` - -```html - - - - -``` +{% install 'nve-textarea' %} ## Standard diff --git a/projects/site/src/docs/elements/time.md b/projects/site/src/docs/elements/time.md index 97870a57e..15e564950 100644 --- a/projects/site/src/docs/elements/time.md +++ b/projects/site/src/docs/elements/time.md @@ -8,17 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/time/define.js'; -``` - -```html - - - - message - -``` +{% install 'nve-time' %} ## Standard diff --git a/projects/site/src/docs/elements/toast.md b/projects/site/src/docs/elements/toast.md index 502738572..a1a0d0bd9 100644 --- a/projects/site/src/docs/elements/toast.md +++ b/projects/site/src/docs/elements/toast.md @@ -8,14 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/toast/define.js'; -``` - -```html -hello there -button -``` +{% install 'nve-toast' %} ## Standard diff --git a/projects/site/src/docs/elements/toggletip.md b/projects/site/src/docs/elements/toggletip.md index 45a801bec..77bb129f3 100644 --- a/projects/site/src/docs/elements/toggletip.md +++ b/projects/site/src/docs/elements/toggletip.md @@ -9,14 +9,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/toggletip/define.js'; -``` - -```html ->hello there -button -``` +{% install 'nve-toggletip' %} ## Standard diff --git a/projects/site/src/docs/elements/toolbar.md b/projects/site/src/docs/elements/toolbar.md index ca7c49755..f8ec54f3a 100644 --- a/projects/site/src/docs/elements/toolbar.md +++ b/projects/site/src/docs/elements/toolbar.md @@ -8,13 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/toolbar/define.js'; -``` - -```html - -``` +{% install 'nve-toolbar' %} ## Standard diff --git a/projects/site/src/docs/elements/tooltip.md b/projects/site/src/docs/elements/tooltip.md index 40482a09c..0116ee130 100644 --- a/projects/site/src/docs/elements/tooltip.md +++ b/projects/site/src/docs/elements/tooltip.md @@ -8,14 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/tooltip/define.js'; -``` - -```html -tooltip -button -``` +{% install 'nve-tooltip' %} ## Standard diff --git a/projects/site/src/docs/elements/tree.md b/projects/site/src/docs/elements/tree.md index b1f0307c5..f8b6e3f8d 100644 --- a/projects/site/src/docs/elements/tree.md +++ b/projects/site/src/docs/elements/tree.md @@ -9,24 +9,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/tree/define.js'; -``` - -```html - - - node 1 - node 1-1 - node 1-2 - - - node 2 - node 2-1 - node 2-2 - - -``` +{% install 'nve-tree' %} ## Standard diff --git a/projects/site/src/docs/elements/week.md b/projects/site/src/docs/elements/week.md index 6c9709fbf..8839b22e2 100644 --- a/projects/site/src/docs/elements/week.md +++ b/projects/site/src/docs/elements/week.md @@ -8,16 +8,7 @@ ## Installation -```typescript -import '@nvidia-elements/core/week/define.js'; -``` - -```html - - - - -``` +{% install 'nve-week' %} ## Standard From 4ef19ea008e95c1c8c8f73f47bea1cc8b7d1322b Mon Sep 17 00:00:00 2001 From: Will Geller Date: Wed, 21 May 2025 14:57:35 -0400 Subject: [PATCH 0161/1100] fix(elements): use proper padding on nve-toggletip header without footer --- .../src/toggletip/toggletip.global.css | 7 +++++ .../src/toggletip/toggletip.stories.ts | 27 +++++++++++++++++++ .../toggletip/toggletip.test.lighthouse.ts | 2 +- projects/elements/src/toggletip/toggletip.ts | 7 +++-- projects/site/src/_11ty/shortcodes/index.js | 2 +- projects/site/src/docs/elements/toggletip.md | 10 ++++++- 6 files changed, 50 insertions(+), 5 deletions(-) create mode 100644 projects/elements/src/toggletip/toggletip.global.css diff --git a/projects/elements/src/toggletip/toggletip.global.css b/projects/elements/src/toggletip/toggletip.global.css new file mode 100644 index 000000000..abdfa76ee --- /dev/null +++ b/projects/elements/src/toggletip/toggletip.global.css @@ -0,0 +1,7 @@ +nve-toggletip:not(:has([slot='footer'])):has([slot='header'])::part(_content) { + margin-bottom: calc(var(--padding) * 0.5); +} + +nve-toggletip:not(:has([slot='header'])):has([slot='footer'])::part(_content) { + margin-top: calc(var(--padding) * 0.5); +} diff --git a/projects/elements/src/toggletip/toggletip.stories.ts b/projects/elements/src/toggletip/toggletip.stories.ts index 9ece73529..af6f43f92 100644 --- a/projects/elements/src/toggletip/toggletip.stories.ts +++ b/projects/elements/src/toggletip/toggletip.stories.ts @@ -42,6 +42,33 @@ export const Content = {

Toggletip Footer

+ +button +` +}; + +export const ContentWithFooter = { + render: () => html` + +

some text content in a toggletip

+ +

Toggletip Footer

+ + + +button +` +}; + +export const ContentWithHeader = { + render: () => html` + + +

Toggletip Header

+ +

some text content in a toggletip

+ + button ` }; diff --git a/projects/elements/src/toggletip/toggletip.test.lighthouse.ts b/projects/elements/src/toggletip/toggletip.test.lighthouse.ts index b9a0e2898..e3041e062 100644 --- a/projects/elements/src/toggletip/toggletip.test.lighthouse.ts +++ b/projects/elements/src/toggletip/toggletip.test.lighthouse.ts @@ -14,6 +14,6 @@ describe('toggletip lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(24); + expect(report.payload.javascript.kb).toBeLessThan(24.1); }); }); diff --git a/projects/elements/src/toggletip/toggletip.ts b/projects/elements/src/toggletip/toggletip.ts index 3cb987d37..2141e1786 100644 --- a/projects/elements/src/toggletip/toggletip.ts +++ b/projects/elements/src/toggletip/toggletip.ts @@ -11,9 +11,11 @@ import { popoverStyles, TypeNativePopoverController, useStyles, - TypeNativeAnchorController + TypeNativeAnchorController, + appendRootNodeStyle } from '@nvidia-elements/core/internal'; import styles from './toggletip.css?inline'; +import globalStyles from './toggletip.global.css?inline'; /** * @element nve-toggletip @@ -110,7 +112,7 @@ export class Toggletip extends LitElement {
${this.closable ? html`` : ''} -
+
@@ -123,5 +125,6 @@ export class Toggletip extends LitElement { super.connectedCallback(); attachInternals(this); this._internals.role = 'toggletip'; + appendRootNodeStyle(this, globalStyles); } } diff --git a/projects/site/src/_11ty/shortcodes/index.js b/projects/site/src/_11ty/shortcodes/index.js index ea924817e..8bc4d3f85 100644 --- a/projects/site/src/_11ty/shortcodes/index.js +++ b/projects/site/src/_11ty/shortcodes/index.js @@ -30,7 +30,7 @@ export async function apiShortcode(tag, type, value) { return element ? /* html */ ` ${type === 'description' ? md.render(element.manifest.description ?? '') : ''} - ${type === 'event' ? md.render(`${value}: ` + element.manifest.events?.find(m => m.name === value)?.description) : ''} + ${type === 'event' ? md.render(`\`${value}\`: ` + element.manifest.events?.find(m => m.name === value)?.description) : ''} ${type === 'property' ? md.render(element.manifest.members?.find(m => m.name === value)?.description ?? '') : ''} ${type === 'slot' ? md.render(element.manifest.slots?.find(m => m.name === value)?.description ?? '') : ''} ${type === 'story' ? md.render(element.stories?.find(m => m.id === value)?.description ?? '') : ''}` diff --git a/projects/site/src/docs/elements/toggletip.md b/projects/site/src/docs/elements/toggletip.md index 77bb129f3..64269b97d 100644 --- a/projects/site/src/docs/elements/toggletip.md +++ b/projects/site/src/docs/elements/toggletip.md @@ -37,10 +37,18 @@ {% story 'nve-toggletip', 'Events', '{ "inline": false, "height": "250px" }' %} -## Content +## Header and Footer {% story 'nve-toggletip', 'Content', '{ "inline": false, "height": "400px" }' %} +## Header Only + +{% story 'nve-toggletip', 'ContentWithHeader', '{ "inline": false, "height": "400px" }' %} + +## Footer Only + +{% story 'nve-toggletip', 'ContentWithFooter', '{ "inline": false, "height": "400px" }' %} + ## Closable {% api 'nve-toggletip', 'property', 'closable' %} From 33c6e969fce14e7562b91f1420a7ace7f24d0da1 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Thu, 22 May 2025 15:06:02 +0000 Subject: [PATCH 0162/1100] chore(release): @nve/elements-v1.34.10 [skip ci] ## [@nve/elements-v1.34.10](https://gitlab-master.nvidia.com/ai-infra/elements/compare/@nve/elements-v1.34.9...@nve/elements-v1.34.10) (2025-05-22) ### Bug Fixes * **elements:** use proper padding on nve-toggletip header without footer ([75b71c6](https://gitlab-master.nvidia.com/ai-infra/elements/commit/75b71c618638824d1d50e85fa754919fbf9151fb)) --- projects/elements/CHANGELOG.md | 7 +++++++ projects/elements/package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/projects/elements/CHANGELOG.md b/projects/elements/CHANGELOG.md index 414323b07..efc5315e4 100644 --- a/projects/elements/CHANGELOG.md +++ b/projects/elements/CHANGELOG.md @@ -1,3 +1,10 @@ +## [@nvidia-elements/core-v1.34.10](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.34.9...@nvidia-elements/core-v1.34.10) (2025-05-22) + + +### Bug Fixes + +* **elements:** use proper padding on nve-toggletip header without footer ([a68a69a](https://github.com/NVIDIA/elements/commit/a68a69aff98b38f0b3f21a6e985994cdd5398743)) + ## [@nvidia-elements/core-v1.34.9](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.34.8...@nvidia-elements/core-v1.34.9) (2025-05-22) diff --git a/projects/elements/package.json b/projects/elements/package.json index 41e57a6b7..94d4ec3b5 100644 --- a/projects/elements/package.json +++ b/projects/elements/package.json @@ -1,6 +1,6 @@ { "name": "@nvidia-elements/core", - "version": "1.34.9", + "version": "1.34.10", "description": "The Design Language for AI/ML Factories Building at the Speed of Light", "homepage": "https://NVIDIA.github.io/elements/", "repository": { From 52a85a3a4bab4a5c231e5dd9c6e5778cb9e636e6 Mon Sep 17 00:00:00 2001 From: Jared De La Cruz Date: Wed, 21 May 2025 12:40:11 -0700 Subject: [PATCH 0163/1100] chore(docs): update search to use pagefind generated anchors --- projects/site/src/_11ty/libraries/markdown.js | 5 ---- projects/site/src/_internal/search/search.ts | 24 +++++++++---------- 2 files changed, 11 insertions(+), 18 deletions(-) diff --git a/projects/site/src/_11ty/libraries/markdown.js b/projects/site/src/_11ty/libraries/markdown.js index 9ccc16d44..8901361f4 100644 --- a/projects/site/src/_11ty/libraries/markdown.js +++ b/projects/site/src/_11ty/libraries/markdown.js @@ -38,11 +38,6 @@ function renderer(tokens, idx, options, env, slf) { tokens[idx].attrSet('nve-layout', 'column gap:xs'); } - // add heading to search index metadata - if (tokens[idx].type === 'heading_open') { - tokens[idx].attrSet('data-pagefind-meta', `${tokens[idx].tag}_${idx}`); - } - return slf.renderToken(tokens, idx, options, env, slf); } diff --git a/projects/site/src/_internal/search/search.ts b/projects/site/src/_internal/search/search.ts index 7740473c0..fb8bcc66e 100644 --- a/projects/site/src/_internal/search/search.ts +++ b/projects/site/src/_internal/search/search.ts @@ -218,7 +218,7 @@ export class DocsSearch extends LitElement { const style = `--color: var(--nve-ref-color-${isNveTag ? 'blue-cobalt' : 'yellow-amber'}-1000);`; return { - url: result.raw_url + (this.searchInput.value ? `?q=${encodeURIComponent(this.searchInput.value)}` : '') || '', + url: result.raw_url + this.#getQueryParam() || '', title: result.meta?.title, subtitle: result.raw_url || '', icon: icon, @@ -228,25 +228,23 @@ export class DocsSearch extends LitElement { #getHeadings(result: PagefindSearchFragment): SearchResult[] { const headings: SearchResult[] = []; - Object.keys(result.meta).forEach(key => { - if (key.includes('h2_')) { - const heading = result.meta[key]; - const headingAnchor = heading.replaceAll(' ', '-').toLowerCase(); + for (const anchor of result.anchors) { + if (anchor.element === 'h2') { headings.push({ - url: - result.raw_url + - (this.searchInput.value ? `?q=${encodeURIComponent(this.searchInput.value)}` : '') + - '#' + - headingAnchor, - title: result.meta.title + ' - ' + heading, - subtitle: result.raw_url + '#' + headingAnchor, + url: result.raw_url + this.#getQueryParam() + '#' + anchor.id, + title: result.meta.title + ' - ' + anchor.text, + subtitle: result.raw_url + '#' + anchor.id, icon: 'bookmark', style: '--color: var(--nve-ref-color-teal-seafoam-1000);' }); } - }); + } return headings; } + + #getQueryParam(): string { + return this.searchInput.value ? `?q=${encodeURIComponent(this.searchInput.value)}` : ''; + } } From 33447e1e2aba320faa0a466b8ff4b2ed0f73cdda Mon Sep 17 00:00:00 2001 From: Cory Rylan Date: Wed, 21 May 2025 16:43:39 -0500 Subject: [PATCH 0164/1100] chore(docs): fix form control layouts Signed-off-by: Cory Rylan --- projects/elements/src/color/color.stories.ts | 4 +- .../elements/src/combobox/combobox.stories.ts | 4 +- .../src/forms/control/control.stories.ts | 17 +++---- projects/elements/src/forms/forms.stories.ts | 11 +++-- projects/elements/src/input/input.stories.ts | 4 +- projects/elements/src/month/month.stories.ts | 4 +- .../elements/src/password/password.stories.ts | 4 +- projects/elements/src/range/range.stories.ts | 4 +- .../elements/src/search/search.stories.ts | 4 +- .../elements/src/textarea/textarea.stories.ts | 4 +- projects/elements/src/time/time.stories.ts | 4 +- projects/elements/src/week/week.stories.ts | 4 +- .../src/_11ty/transforms/element-loader.js | 44 ++++++------------- projects/site/src/stories/stories.11ty.js | 2 +- projects/site/src/stories/stories.ts | 17 +++++++ 15 files changed, 65 insertions(+), 66 deletions(-) diff --git a/projects/elements/src/color/color.stories.ts b/projects/elements/src/color/color.stories.ts index 4020c1822..1d142cfb7 100644 --- a/projects/elements/src/color/color.stories.ts +++ b/projects/elements/src/color/color.stories.ts @@ -46,7 +46,7 @@ export const Datalist = { export const Vertical = { render: () => html` -
+
@@ -75,7 +75,7 @@ export const Vertical = { export const Horizontal = { render: () => html` -
+
diff --git a/projects/elements/src/combobox/combobox.stories.ts b/projects/elements/src/combobox/combobox.stories.ts index 32d4f107d..9d59337ee 100644 --- a/projects/elements/src/combobox/combobox.stories.ts +++ b/projects/elements/src/combobox/combobox.stories.ts @@ -36,7 +36,7 @@ export const Default = () => { export const Vertical = () => { return html` -
+
@@ -97,7 +97,7 @@ export const Vertical = () => { export const Horizontal = () => { return html` -
+
diff --git a/projects/elements/src/forms/control/control.stories.ts b/projects/elements/src/forms/control/control.stories.ts index 5e5f80a6c..e3470b307 100644 --- a/projects/elements/src/forms/control/control.stories.ts +++ b/projects/elements/src/forms/control/control.stories.ts @@ -74,21 +74,22 @@ export const Responsive = () => { export const ControlLayout = () => { return html` -
+
diff --git a/projects/elements/src/forms/forms.stories.ts b/projects/elements/src/forms/forms.stories.ts index b4164139a..a848a3a77 100644 --- a/projects/elements/src/forms/forms.stories.ts +++ b/projects/elements/src/forms/forms.stories.ts @@ -248,7 +248,7 @@ export const KitchenSink = { export const Vertical = () => { return html` -
+
@@ -359,7 +359,7 @@ export const Vertical = () => { export const VerticalInline = () => { return html` -
+
@@ -470,7 +470,7 @@ export const VerticalInline = () => { export const Horizontal = () => { return html` -
+
@@ -581,7 +581,7 @@ export const Horizontal = () => { export const HorizontalInline = () => { return html` -
+
@@ -690,10 +690,9 @@ export const HorizontalInline = () => { `; }; - export const FitText = { render: () => html` -
+
diff --git a/projects/elements/src/input/input.stories.ts b/projects/elements/src/input/input.stories.ts index 9a7446b4c..a4be48cac 100644 --- a/projects/elements/src/input/input.stories.ts +++ b/projects/elements/src/input/input.stories.ts @@ -29,7 +29,7 @@ export const Input = () => { export const Vertical = () => { return html` -
+
@@ -58,7 +58,7 @@ export const Vertical = () => { export const Horizontal = () => { return html` -
+
diff --git a/projects/elements/src/month/month.stories.ts b/projects/elements/src/month/month.stories.ts index 6e6777651..ce5a7853b 100644 --- a/projects/elements/src/month/month.stories.ts +++ b/projects/elements/src/month/month.stories.ts @@ -34,7 +34,7 @@ export const Datalist = { export const Vertical = { render: () => html` -
+
@@ -63,7 +63,7 @@ export const Vertical = { export const Horizontal = { render: () => html` -
+
diff --git a/projects/elements/src/password/password.stories.ts b/projects/elements/src/password/password.stories.ts index eb228845b..c3d3c86a0 100644 --- a/projects/elements/src/password/password.stories.ts +++ b/projects/elements/src/password/password.stories.ts @@ -18,7 +18,7 @@ export const Default = { export const Vertical = { render: () => html` -
+
@@ -47,7 +47,7 @@ export const Vertical = { export const Horizontal = { render: () => html` -
+
diff --git a/projects/elements/src/range/range.stories.ts b/projects/elements/src/range/range.stories.ts index 617596d73..4beceb9fa 100644 --- a/projects/elements/src/range/range.stories.ts +++ b/projects/elements/src/range/range.stories.ts @@ -45,7 +45,7 @@ export const Step = { export const Vertical = { render: () => html` -
+
@@ -74,7 +74,7 @@ export const Vertical = { export const Horizontal = { render: () => html` -
+
diff --git a/projects/elements/src/search/search.stories.ts b/projects/elements/src/search/search.stories.ts index 5a6fa7f5d..e9f2e32d4 100644 --- a/projects/elements/src/search/search.stories.ts +++ b/projects/elements/src/search/search.stories.ts @@ -37,7 +37,7 @@ export const Datalist = () => { export const Vertical = { render: () => html` -
+
@@ -66,7 +66,7 @@ export const Vertical = { export const Horizontal = { render: () => html` -
+
diff --git a/projects/elements/src/textarea/textarea.stories.ts b/projects/elements/src/textarea/textarea.stories.ts index 52594c1e4..429eeff40 100644 --- a/projects/elements/src/textarea/textarea.stories.ts +++ b/projects/elements/src/textarea/textarea.stories.ts @@ -18,7 +18,7 @@ export const Default = { export const Vertical = { render: () => html` -
+
@@ -47,7 +47,7 @@ export const Vertical = { export const Horizontal = { render: () => html` -
+
diff --git a/projects/elements/src/time/time.stories.ts b/projects/elements/src/time/time.stories.ts index 2208f8ba8..4dd65dee6 100644 --- a/projects/elements/src/time/time.stories.ts +++ b/projects/elements/src/time/time.stories.ts @@ -33,7 +33,7 @@ export const Datalist = { export const Vertical = { render: () => html` -
+
@@ -62,7 +62,7 @@ export const Vertical = { export const Horizontal = { render: () => html` -
+
diff --git a/projects/elements/src/week/week.stories.ts b/projects/elements/src/week/week.stories.ts index c09a5f8e7..185b93e38 100644 --- a/projects/elements/src/week/week.stories.ts +++ b/projects/elements/src/week/week.stories.ts @@ -34,7 +34,7 @@ export const Datalist = { export const Vertical = { render: () => html` -
+
@@ -63,7 +63,7 @@ export const Vertical = { export const Horizontal = { render: () => html` -
+
diff --git a/projects/site/src/_11ty/transforms/element-loader.js b/projects/site/src/_11ty/transforms/element-loader.js index f9fd857b1..be1f28965 100644 --- a/projects/site/src/_11ty/transforms/element-loader.js +++ b/projects/site/src/_11ty/transforms/element-loader.js @@ -1,31 +1,17 @@ -import fs from 'node:fs'; +import { MetadataService } from '@nve-internals/metadata'; -/** base on element tags found, inline the imports for the elements */ -export async function elementLoaderTransform(content) { - const LAZY = content.includes(''); - const ELEMENTS_PACKAGE = JSON.parse(fs.readFileSync('../elements/package.json', 'utf8')); - const MONACO_PACKAGE = JSON.parse(fs.readFileSync('../monaco/package.json', 'utf8')); - - const ELEMENTS_IMPORTS = Array.from( - new Set( - Object.keys(ELEMENTS_PACKAGE.exports) - .filter(key => key.endsWith('define.js')) - .map(key => key.replace('./', 'nve-').replace('/define.js', '')) - .filter(tagName => content?.includes(`<${tagName}`)) - ) - ) - .map(tagName => createImport(`@nvidia-elements/core/${tagName.replace('nve-', '')}/define.js`, LAZY)) - .join('\n'); +const metadata = await MetadataService.getMetadata(); - const MONACO_IMPORTS = Array.from( - new Set( - Object.keys(MONACO_PACKAGE.exports) - .filter(key => key.endsWith('define.js')) - .map(key => key.replace('./', 'nve-monaco-').replace('/define.js', '')) - .filter(tagName => content?.includes(`<${tagName}`)) - ) - ) - .map(tagName => createImport(`@nvidia-elements/monaco/${tagName.replace('nve-monaco-', '')}/define.js`, LAZY)) +/** based on element tags found, inline the imports for the elements */ +export async function elementLoaderTransform(content) { + const IMPORTS = [...metadata['@nvidia-elements/core'].elements, ...metadata['@nvidia-elements/monaco'].elements] + .filter(element => content?.includes(`<${element.name}`)) + .filter(element => !element.deprecated && element.manifest.metadata.entrypoint) + .map(element => { + const path = `${element.manifest.metadata.entrypoint}/define.js`; + const lazy = content.includes(''); + return lazy ? `import('${path}');` : `import '${path}';`; + }) .join('\n'); const ELEMENTS_CODE_IMPORTS = content.includes('nve-codeblock') @@ -39,13 +25,9 @@ export async function elementLoaderTransform(content) { return content.replace( '', - ``.replace( + ``.replace( /\n/g, '' ) ); } - -function createImport(path, lazy = false) { - return lazy ? `import('${path}');` : `import '${path}';`; -} diff --git a/projects/site/src/stories/stories.11ty.js b/projects/site/src/stories/stories.11ty.js index a8dc5aae7..ae79b76e4 100644 --- a/projects/site/src/stories/stories.11ty.js +++ b/projects/site/src/stories/stories.11ty.js @@ -20,7 +20,7 @@ export function render() { - +
    ${groupedStories diff --git a/projects/site/src/stories/stories.ts b/projects/site/src/stories/stories.ts index 0d12936b2..5f8ed09bc 100644 --- a/projects/site/src/stories/stories.ts +++ b/projects/site/src/stories/stories.ts @@ -1,3 +1,5 @@ +import type { PagePanelContent } from '@nvidia-elements/core/page'; + const iframe = globalThis.document.querySelector('iframe'); const list = globalThis.document.querySelector('ul.stories'); @@ -34,3 +36,18 @@ function setSelected(url: string) { link.setAttribute('selected', ''); } } + +// preserve scroll position between page transitions + +const content = globalThis.document.querySelector('#stories-sidenav-panel nve-page-panel-content')!; +globalThis.window.addEventListener('beforeunload', () => { + sessionStorage.setItem('sidenav-scroll-position', content.scrollTop.toString()); +}); + +const savedPosition = sessionStorage.getItem('sidenav-scroll-position'); +if (savedPosition) { + await customElements.whenDefined('nve-page-panel-content'); + content.scrollTop = parseInt(savedPosition); + await content.updateComplete; + content.scrollTop = parseInt(savedPosition); +} From df8513ccc11fb9722ec870e8375c07c87483908f Mon Sep 17 00:00:00 2001 From: Cory Rylan Date: Thu, 22 May 2025 14:06:20 -0500 Subject: [PATCH 0165/1100] chore(ci): fix stories json jsdocs - fixes issue where stories json JSDoc annotations were being stripped out by esbuild - fixes broken icon stories - fixes missing page story descriptions Signed-off-by: Cory Rylan --- pnpm-lock.yaml | 51 +++++++------------ pnpm-workspace.yaml | 1 + projects/elements/src/icon/icon.stories.ts | 24 ++++++--- projects/internals/metadata/package.json | 2 +- projects/internals/vite/package.json | 2 +- .../internals/vite/src/plugins/stories.js | 19 ++++--- projects/site/src/_11ty/layouts/docs.css | 4 ++ projects/site/src/_11ty/shortcodes/index.js | 1 + projects/site/src/docs/elements/icon.md | 6 --- projects/site/src/docs/elements/page.md | 14 ----- 10 files changed, 55 insertions(+), 69 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a1b255b44..7fa0ad7c1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -87,6 +87,9 @@ catalogs: rollup-plugin-minify-html-literals: specifier: 1.2.6 version: 1.2.6 + ts-morph: + specifier: 26.0.0 + version: 26.0.0 typescript: specifier: 5.8.2 version: 5.8.2 @@ -378,8 +381,8 @@ importers: specifier: 'catalog:' version: 11.0.1 ts-morph: - specifier: 20.0.0 - version: 20.0.0 + specifier: 'catalog:' + version: 26.0.0 devDependencies: '@nve-internals/eslint': specifier: workspace:* @@ -494,8 +497,8 @@ importers: specifier: 5.37.0 version: 5.37.0 ts-morph: - specifier: 20.0.0 - version: 20.0.0 + specifier: 'catalog:' + version: 26.0.0 typescript: specifier: 'catalog:' version: 5.8.2 @@ -4710,8 +4713,8 @@ packages: resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==, tarball: https://registry.npmjs.org engines: {node: '>=10.13.0'} - '@ts-morph/common@0.21.0': - resolution: {integrity: sha512-ES110Mmne5Vi4ypUKrtVQfXFDtCsDXiUiGxF6ILVlE90dDD4fdpC1LSjydl/ml7xJWKSDZwUYD2zkOePMSrPBA==, tarball: https://registry.npmjs.org + '@ts-morph/common@0.27.0': + resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==, tarball: https://registry.npmjs.org '@tsconfig/node20@20.1.4': resolution: {integrity: sha512-sqgsT69YFeLWf5NtJ4Xq/xAF8p4ZQHlmGW74Nu2tD4+g5fAsposc4ZfaaPixVu4y01BEiDCWLRDCvDM5JOsRxg==, tarball: https://registry.npmjs.org @@ -5832,8 +5835,8 @@ packages: resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==, tarball: https://registry.npmjs.org engines: {node: '>=0.8'} - code-block-writer@12.0.0: - resolution: {integrity: sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w==, tarball: https://registry.npmjs.org + code-block-writer@13.0.3: + resolution: {integrity: sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==, tarball: https://registry.npmjs.org color-convert@1.9.3: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==, tarball: https://registry.npmjs.org @@ -8465,10 +8468,6 @@ packages: resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==, tarball: https://registry.npmjs.org engines: {node: '>=10'} - minimatch@7.4.6: - resolution: {integrity: sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==, tarball: https://registry.npmjs.org - engines: {node: '>=10'} - minimatch@9.0.5: resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==, tarball: https://registry.npmjs.org engines: {node: '>=16 || 14 >=14.17'} @@ -8528,11 +8527,6 @@ packages: engines: {node: '>=10'} hasBin: true - mkdirp@2.1.6: - resolution: {integrity: sha512-+hEnITedc8LAtIP9u3HJDFIdcLV2vXP33sqLLIzkv1Db1zO/1OxbvYf0Y1OC/S/Qo5dxHXepofhmxL02PsKe+A==, tarball: https://registry.npmjs.org - engines: {node: '>=10'} - hasBin: true - mkdirp@3.0.1: resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==, tarball: https://registry.npmjs.org engines: {node: '>=10'} @@ -10712,8 +10706,8 @@ packages: ts-lit-plugin@2.0.2: resolution: {integrity: sha512-DPXlVxhjWHxg8AyBLcfSYt2JXgpANV1ssxxwjY98o26gD8MzeiM68HFW9c2VeDd1CjoR3w7B/6/uKxwBQe+ioA==, tarball: https://registry.npmjs.org - ts-morph@20.0.0: - resolution: {integrity: sha512-JVmEJy2Wow5n/84I3igthL9sudQ8qzjh/6i4tmYCm6IqYyKFlNbJZi7oBdjyqcWSWYRu3CtL0xbT6fS03ESZIg==, tarball: https://registry.npmjs.org + ts-morph@26.0.0: + resolution: {integrity: sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==, tarball: https://registry.npmjs.org ts-simple-type@2.0.0-next.0: resolution: {integrity: sha512-A+hLX83gS+yH6DtzNAhzZbPfU+D9D8lHlTSd7GeoMRBjOt3GRylDqLTYbdmjA4biWvq2xSfpqfIDj2l0OA/BVg==, tarball: https://registry.npmjs.org @@ -14868,11 +14862,10 @@ snapshots: '@trysound/sax@0.2.0': {} - '@ts-morph/common@0.21.0': + '@ts-morph/common@0.27.0': dependencies: fast-glob: 3.3.3 - minimatch: 7.4.6 - mkdirp: 2.1.6 + minimatch: 10.0.1 path-browserify: 1.0.1 '@tsconfig/node20@20.1.4': {} @@ -16305,7 +16298,7 @@ snapshots: clone@2.1.2: {} - code-block-writer@12.0.0: {} + code-block-writer@13.0.3: {} color-convert@1.9.3: dependencies: @@ -19253,10 +19246,6 @@ snapshots: dependencies: brace-expansion: 2.0.1 - minimatch@7.4.6: - dependencies: - brace-expansion: 2.0.1 - minimatch@9.0.5: dependencies: brace-expansion: 2.0.1 @@ -19313,8 +19302,6 @@ snapshots: mkdirp@1.0.4: {} - mkdirp@2.1.6: {} - mkdirp@3.0.1: {} mlly@1.7.4: @@ -21739,10 +21726,10 @@ snapshots: lit-analyzer: 2.0.3 web-component-analyzer: 2.0.0 - ts-morph@20.0.0: + ts-morph@26.0.0: dependencies: - '@ts-morph/common': 0.21.0 - code-block-writer: 12.0.0 + '@ts-morph/common': 0.27.0 + code-block-writer: 13.0.3 ts-simple-type@2.0.0-next.0: {} diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 9a3ac2262..81df35453 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -69,6 +69,7 @@ catalog: react: 19.0.0 react-dom: 19.0.0 rollup-plugin-minify-html-literals: 1.2.6 + ts-morph: 26.0.0 typescript: 5.8.2 vite: 6.3.5 vitest: 3.1.1 diff --git a/projects/elements/src/icon/icon.stories.ts b/projects/elements/src/icon/icon.stories.ts index 9ac02ed04..b81e5280b 100644 --- a/projects/elements/src/icon/icon.stories.ts +++ b/projects/elements/src/icon/icon.stories.ts @@ -191,11 +191,13 @@ export const Themes = { ` } - +/** + * @description SVG paths can be registered and made accessible to the `` element. Icons can be defined via a string or async function returning the resulting string. + */ export const Registration = { render: () => html` - - + + + + ` } +/** + * @description Direct SVG paths can be provided for rendering. + */ export const Source = { render: () => html` - + ` } diff --git a/projects/internals/metadata/package.json b/projects/internals/metadata/package.json index 496437fe4..c86cf4ee6 100644 --- a/projects/internals/metadata/package.json +++ b/projects/internals/metadata/package.json @@ -332,7 +332,7 @@ "dependencies": { "@types/node": "catalog:", "glob": "catalog:", - "ts-morph": "20.0.0" + "ts-morph": "catalog:" }, "devDependencies": { "@nve-internals/eslint": "workspace:*", diff --git a/projects/internals/vite/package.json b/projects/internals/vite/package.json index 5a8db782b..23ddb0df9 100644 --- a/projects/internals/vite/package.json +++ b/projects/internals/vite/package.json @@ -29,7 +29,7 @@ "rollup-plugin-minify-html-literals": "catalog:", "rollup-plugin-visualizer": "5.14.0", "terser": "5.37.0", - "ts-morph": "20.0.0", + "ts-morph": "catalog:", "vite-plugin-dts": "catalog:", "vite-plugin-virtual-html": "1.2.3" }, diff --git a/projects/internals/vite/src/plugins/stories.js b/projects/internals/vite/src/plugins/stories.js index 78b13a71b..6787db08d 100644 --- a/projects/internals/vite/src/plugins/stories.js +++ b/projects/internals/vite/src/plugins/stories.js @@ -1,7 +1,7 @@ import { html } from 'lit'; import { render } from '@lit-labs/ssr'; import { collectResult } from '@lit-labs/ssr/lib/render-result.js'; -import fs from 'fs'; +import { writeFileSync, readFileSync, existsSync, mkdirSync } from 'fs'; import path from 'path'; import { Project, SyntaxKind } from 'ts-morph'; import * as prettier from 'prettier'; @@ -12,15 +12,19 @@ import * as prettier from 'prettier'; export function storiesToJSON() { return { name: 'stories', - async transform(code, id) { + async transform(_code, id) { if (!id.endsWith('.stories.ts')) { return null; } + // have to read the file from disk instead of `code` from vite due to esbuild stripping out comments + // https://github.com/evanw/esbuild/issues/516 + const source = readFileSync(id, 'utf-8'); + try { const file = id.split('src/')[1]; const project = new Project(); - const tempFile = project.createSourceFile('temp.ts', code); + const tempFile = project.createSourceFile('temp.ts', source); const storiesVariableStatement = tempFile.getChildrenOfKind(SyntaxKind.VariableStatement); const element = tempFile .getChildrenOfKind(SyntaxKind.ExportAssignment)[0] @@ -28,7 +32,8 @@ export function storiesToJSON() { .find(el => el.getText() === 'component') ?.getNextSiblings()[1] ?.getText() - ?.replace(/"/g, ''); + ?.replace(/"/g, '') + ?.replace(/'/g, ''); const stories = ( await Promise.all( @@ -83,7 +88,7 @@ export function storiesToJSON() { const srcPath = path.relative(process.cwd(), id); const distPath = path.join(srcPath.replace('.ts', '.json').replace('src', 'dist')); createDirectoryIfNotExists(distPath); - fs.writeFileSync(distPath, JSON.stringify(json, null, 2)); + writeFileSync(distPath, JSON.stringify(json, null, 2)); return { code: `export default ''`, @@ -100,8 +105,8 @@ export function storiesToJSON() { function createDirectoryIfNotExists(filePath) { const directoryPath = path.dirname(filePath); - if (!fs.existsSync(directoryPath)) { - fs.mkdirSync(directoryPath, { recursive: true }); + if (!existsSync(directoryPath)) { + mkdirSync(directoryPath, { recursive: true }); } } diff --git a/projects/site/src/_11ty/layouts/docs.css b/projects/site/src/_11ty/layouts/docs.css index 5ff732f4a..c0c1bbdf8 100644 --- a/projects/site/src/_11ty/layouts/docs.css +++ b/projects/site/src/_11ty/layouts/docs.css @@ -64,6 +64,10 @@ nvd-canvas { min-height: 140px; } +nvd-canvas:has(iframe[src*='@nvidia-elements/core/page']) { + --padding: var(--nve-ref-space-xs); +} + nve-page-panel[slot='left'] { --background: var(--nve-sys-layer-shell-background); --width: 300px; diff --git a/projects/site/src/_11ty/shortcodes/index.js b/projects/site/src/_11ty/shortcodes/index.js index 8bc4d3f85..493710961 100644 --- a/projects/site/src/_11ty/shortcodes/index.js +++ b/projects/site/src/_11ty/shortcodes/index.js @@ -77,6 +77,7 @@ export async function storyShortcode(tag, storyName, userConfig = { inline: true return story ? /* html */ ` +${story.description ? `

    ${md.utils.escapeHtml(story.description)}

    ` : ''} ${playgroundButton} diff --git a/projects/site/src/docs/elements/icon.md b/projects/site/src/docs/elements/icon.md index 48a46c5ec..794d260ca 100644 --- a/projects/site/src/docs/elements/icon.md +++ b/projects/site/src/docs/elements/icon.md @@ -44,20 +44,14 @@ The Iconography system is based on exposing an SVG based icon library to a the ` ## Registration -SVG paths can be registered and made accessible to the `` element. Icons can be defined via a string or async function returning the resulting string. - {% story 'nve-icon', 'Registration' %} ## Alias -Icons can be aliased to a different name. This can be useful for context specific names or migrations between icon sets. - {% story 'nve-icon', 'Alias' %} ## Source -Direct SVG paths can be provided for rendering. - {% story 'nve-icon', 'Source' %} diff --git a/projects/site/src/docs/elements/page.md b/projects/site/src/docs/elements/page.md index 16cf142e6..03e3e40fa 100644 --- a/projects/site/src/docs/elements/page.md +++ b/projects/site/src/docs/elements/page.md @@ -99,32 +99,22 @@ It's recommended to leverage the new [nve-page-header](./docs/elements/page-head ## Page Panel Tabs -{% api 'nve-page', 'story', 'PagePanelTabs' %} - {% story 'nve-page', 'PagePanelTabs', '{ "inline": false, "height": "480px", "padding": 0 }' %} ## Page Panel Headings -{% api 'nve-page', 'story', 'PagePanelHeadings' %} - {% story 'nve-page', 'PagePanelHeadings', '{ "inline": false, "height": "480px", "padding": 0 }' %} ## Interaction Panel -{% api 'nve-page', 'story', 'InteractionPanel' %} - {% story 'nve-page', 'InteractionPanel', '{ "inline": false, "height": "480px", "padding": 0 }' %} ## Interaction Panel Navigation -{% api 'nve-page', 'story', 'InteractionPanelNavigation' %} - {% story 'nve-page', 'InteractionPanelNavigation', '{ "inline": false, "height": "480px", "padding": 0 }' %} ## Interaction Drawer -{% api 'nve-page', 'story', 'InteractionDrawer' %} - {% story 'nve-page', 'InteractionDrawer', '{ "inline": false, "height": "480px", "padding": 0 }' %} ## Panel Resize @@ -141,12 +131,8 @@ It's recommended to leverage the new [nve-page-header](./docs/elements/page-head ## Document Scroll -{% api 'nve-page', 'story', 'DocumentScroll' %} - {% story 'nve-page', 'DocumentScroll', '{ "inline": false, "height": "480px", "padding": 0 }' %} ## Kitchen Sink -{% api 'nve-page', 'story', 'KitchenSink' %} - {% story 'nve-page', 'KitchenSink', '{ "inline": false, "height": "780px", "padding": 0 }' %} From f347229256ff59f75e9f8592eda252beaf7638e1 Mon Sep 17 00:00:00 2001 From: Cory Rylan Date: Tue, 20 May 2025 13:13:25 -0500 Subject: [PATCH 0166/1100] fix(elements): add missing invoker command support Signed-off-by: Cory Rylan --- .../elements/src/button/button.stories.ts | 28 +++++++++++ .../elements/src/internal/base/button.test.ts | 4 +- projects/elements/src/internal/base/button.ts | 26 ++++++++++ .../internal/controllers/popover.stories.ts | 17 +++++++ .../type-command.controller.test.ts | 44 ++++++++++++++++ .../controllers/type-command.controller.ts | 50 +++++++++++++++++++ .../type-native-popover.controller.test.ts | 36 +++++++++++++ .../type-native-popover.controller.ts | 28 +++++++++-- projects/elements/src/internal/index.ts | 1 + 9 files changed, 228 insertions(+), 6 deletions(-) create mode 100644 projects/elements/src/internal/controllers/type-command.controller.test.ts create mode 100644 projects/elements/src/internal/controllers/type-command.controller.ts diff --git a/projects/elements/src/button/button.stories.ts b/projects/elements/src/button/button.stories.ts index 418f11e72..502497130 100644 --- a/projects/elements/src/button/button.stories.ts +++ b/projects/elements/src/button/button.stories.ts @@ -1,5 +1,6 @@ import { html } from 'lit'; import '@nvidia-elements/core/button/define.js'; +import '@nvidia-elements/core/toggletip/define.js'; import '@nvidia-elements/core/icon/define.js'; import '@nvidia-elements/core/search/define.js'; @@ -12,6 +13,33 @@ export const Default = { render: () => html`standard` }; +/** + * @description This example demonstrates how to use the `commandfor` and `command` attributes to create a button that can be used to rotate an image. + * https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API + * https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#creating_custom_commands + */ +export const InvokerCommand = { + render: () => html` + +
    + Rotate left + Rotate right + toggle-popover +
    + popover + + ` +}; + export const ButtonWithIcon = { render: () => html` button diff --git a/projects/elements/src/internal/base/button.test.ts b/projects/elements/src/internal/base/button.test.ts index 584daca0f..f16a25d6d 100644 --- a/projects/elements/src/internal/base/button.test.ts +++ b/projects/elements/src/internal/base/button.test.ts @@ -190,12 +190,12 @@ describe('base button', () => { vi.spyOn(submitButtonInForm, 'removeEventListener'); submitButtonInForm.readonly = true; await elementIsStable(submitButtonInForm); - expect(submitButtonInForm.removeEventListener).toBeCalledTimes(2); + expect(submitButtonInForm.removeEventListener).toBeCalledTimes(3); // 2x button controller, 1x command controller vi.spyOn(submitButtonInForm, 'addEventListener'); submitButtonInForm.readonly = false; await elementIsStable(submitButtonInForm); - expect(submitButtonInForm.addEventListener).toBeCalledTimes(2); + expect(submitButtonInForm.addEventListener).toBeCalledTimes(3); // 2x button controller, 1x command controller }); it('should trigger submit event when host exists within a form element', async () => { diff --git a/projects/elements/src/internal/base/button.ts b/projects/elements/src/internal/base/button.ts index 939a1f57b..72b219453 100644 --- a/projects/elements/src/internal/base/button.ts +++ b/projects/elements/src/internal/base/button.ts @@ -10,6 +10,7 @@ import { typeAnchor } from '../controllers/type-anchor.controller.js'; import { typeSubmit } from '../controllers/type-submit.controller.js'; import { typeNativePopoverTrigger } from '../controllers/type-native-popover-trigger.controller.js'; import { stateCurrent } from '../controllers/state-current.controller.js'; +import { typeCommand } from '../controllers/type-command.controller.js'; import { attachInternals } from '../utils/a11y.js'; /** @@ -21,6 +22,7 @@ import { attachInternals } from '../utils/a11y.js'; @typeAnchor() @typeSubmit() // override to exclude type string from getter, see comment in getter below @typeNativePopoverTrigger() +@typeCommand() @stateActive() @stateCurrent() @statePressed() @@ -118,15 +120,39 @@ export class BaseButton extends LitElement { */ @property({ type: String, reflect: true }) current: 'page' | 'step'; + /** + * Establishing a relationship between a popover and its invoker button. + * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetElement + */ @property({ type: Object }) popoverTargetElement: HTMLElement; // eslint-disable-line rulesdir/primitive-property + /** + * The id of the element to which the popover is applied. + * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget + */ @property({ type: String, attribute: 'popovertarget', reflect: true }) popovertarget: string; + /** + * The popover target action to be applied to the popover target element. + * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/popoverTargetAction + */ @property({ type: String, attribute: 'popovertargetaction', reflect: true }) popoverTargetAction: | 'show' | 'hide' | 'toggle'; + /** + * The id of the element to which the command is applied. + * https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API + */ + @property({ type: String, attribute: 'commandfor', reflect: true }) commandFor: string; + + /** + * The command to be applied to the element. + * https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API + */ + @property({ type: String, attribute: 'command', reflect: true }) command: string; + /** * @private * A instance of `ElementInternals` that is set dynamically by the applied decorators/controllers diff --git a/projects/elements/src/internal/controllers/popover.stories.ts b/projects/elements/src/internal/controllers/popover.stories.ts index 181772c6e..58b93ab95 100644 --- a/projects/elements/src/internal/controllers/popover.stories.ts +++ b/projects/elements/src/internal/controllers/popover.stories.ts @@ -9,6 +9,7 @@ import '@nvidia-elements/core/toast/define.js'; import '@nvidia-elements/core/drawer/define.js'; import '@nvidia-elements/core/dropdown/define.js'; import '@nvidia-elements/core/notification/define.js'; +import '@nvidia-elements/core/toggletip/define.js'; export default { title: 'Elements/Popovers', @@ -139,3 +140,19 @@ export const Closable = { ` } + +/** + * @description example of declarative popovers using the Invoker Commands API + * https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API + * https://open-ui.org/components/invokers.explainer/#defaults + */ +export const InvokerCommand = { + render: () => html` + toggle-popover + show-popover + + toggletip + hide-popover + + ` +}; diff --git a/projects/elements/src/internal/controllers/type-command.controller.test.ts b/projects/elements/src/internal/controllers/type-command.controller.test.ts new file mode 100644 index 000000000..c67731bbc --- /dev/null +++ b/projects/elements/src/internal/controllers/type-command.controller.test.ts @@ -0,0 +1,44 @@ +import { html, LitElement } from 'lit'; +import { customElement } from 'lit/decorators/custom-element.js'; +import { property } from 'lit/decorators/property.js'; +import { afterEach, beforeEach, describe, expect, it } from 'vitest'; +import { createFixture, removeFixture, untilEvent, emulateClick } from '@nvidia-elements/testing'; +import { TypeCommandController } from '@nvidia-elements/core/internal'; + +@customElement('type-command-controller-test-element') +class TypeCommandControllerTestElement extends LitElement { + @property({ type: String }) command: string; + @property({ type: String, attribute: 'commandfor' }) commandFor: string; + @property({ type: Boolean }) readonly: boolean; + @property({ type: Boolean }) disabled: boolean; + #typeCommandController = new TypeCommandController(this); +} + +describe('type-command.controller', () => { + let element: TypeCommandControllerTestElement; + let target: HTMLElement; + let fixture: HTMLElement; + + beforeEach(async () => { + fixture = await createFixture( + html` + +
    + ` + ); + element = fixture.querySelector('type-command-controller-test-element'); + target = fixture.querySelector('#target'); + }); + + afterEach(() => { + removeFixture(fixture); + }); + + it('should trigger command event when clicked', async () => { + const event = untilEvent(target, 'command'); + await emulateClick(element); + const { source, command } = await event; + expect(source).toBe(element); + expect(command).toBe('--test'); + }); +}); diff --git a/projects/elements/src/internal/controllers/type-command.controller.ts b/projects/elements/src/internal/controllers/type-command.controller.ts new file mode 100644 index 000000000..4f8e78750 --- /dev/null +++ b/projects/elements/src/internal/controllers/type-command.controller.ts @@ -0,0 +1,50 @@ +import type { ReactiveController, ReactiveElement } from 'lit'; +import type { LegacyDecoratorTarget } from '../types/index.js'; +import { getFlatDOMTree } from '../utils/dom.js'; + +/** + * Adds Invoker Commands API support for interactive custom elements. + * https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API + */ +export function typeCommand(): ClassDecorator { + return (target: LegacyDecoratorTarget) => target.addInitializer((instance: T) => new TypeCommandController(instance)); +} + +export type Command = ReactiveElement & + HTMLElement & { + command: string; + commandFor: string; + readonly: boolean; + disabled: boolean; + }; + +export class TypeCommandController implements ReactiveController { + constructor(private host: T) { + this.host.addController(this); + } + + async hostUpdated() { + await this.host.updateComplete; + this.#updateListener(); + } + + #updateListener() { + if (!this.host.readonly && !this.host.disabled) { + this.host.addEventListener('click', this.#triggerCommandFn); + } else { + this.host.removeEventListener('click', this.#triggerCommandFn); + } + } + + #triggerCommandFn = this.#triggerCommand.bind(this); + #triggerCommand() { + if (this.host.commandFor && globalThis.CommandEvent) { + const match = getFlatDOMTree(this.host.getRootNode() as HTMLElement).find(el => el.id === this.host.commandFor); + if (!match) { + console.warn('commandFor', this.host.commandFor, 'not found'); + } else { + match.dispatchEvent(new globalThis.CommandEvent('command', { command: this.host.command, source: this.host })); + } + } + } +} diff --git a/projects/elements/src/internal/controllers/type-native-popover.controller.test.ts b/projects/elements/src/internal/controllers/type-native-popover.controller.test.ts index 36661b49c..e16c6ae1e 100644 --- a/projects/elements/src/internal/controllers/type-native-popover.controller.test.ts +++ b/projects/elements/src/internal/controllers/type-native-popover.controller.test.ts @@ -661,3 +661,39 @@ describe('type-popover.controller - close timeout', () => { expect(element.matches(':popover-open')).toBe(false); }); }); + +describe('type-popover.controller - invoker command support', () => { + let element: TypeNativePopoverControllerTestElement; + let button: Button; + let fixture: HTMLElement; + + beforeEach(async () => { + fixture = await createFixture(html` + anchor + + `); + element = fixture.querySelector( + 'type-native-popover-controller-test-element' + ); + element.popoverType = 'hint'; + button = fixture.querySelector(Button.metadata.tag); + await element.updateComplete; + await button.updateComplete; + }); + + afterEach(() => { + removeFixture(fixture); + }); + + it('should toggle popover when command is triggered', async () => { + await elementIsStable(element); + expect(element.matches(':popover-open')).toBe(false); + + const event = untilEvent(element, 'command'); + await emulateClick(button); + const { source, command } = await event; + expect(source).toBe(button); + expect(command).toBe('toggle-popover'); + expect(element.matches(':popover-open')).toBe(true); + }); +}); diff --git a/projects/elements/src/internal/controllers/type-native-popover.controller.ts b/projects/elements/src/internal/controllers/type-native-popover.controller.ts index aa2dcf8c9..6f938af67 100644 --- a/projects/elements/src/internal/controllers/type-native-popover.controller.ts +++ b/projects/elements/src/internal/controllers/type-native-popover.controller.ts @@ -29,11 +29,16 @@ export class TypeNativePopoverController implements Rea } get #nativeTriggers(): HTMLElement[] { - return Array.from( - (this.host.getRootNode() as HTMLElement).querySelectorAll( - `[popovertarget="${CSS.escape ? CSS.escape(this.host.id) : this.host.id}"]` - ) + const root = this.host.getRootNode() as HTMLElement; + const popoverTargetTriggers = Array.from( + root.querySelectorAll(`[popovertarget="${CSS.escape ? CSS.escape(this.host.id) : this.host.id}"]`) ) as HTMLElement[]; + + const commandForTriggers = Array.from( + root.querySelectorAll(`[commandfor="${CSS.escape ? CSS.escape(this.host.id) : this.host.id}"]`) + ) as HTMLElement[]; + + return [...popoverTargetTriggers, ...commandForTriggers]; } constructor(private host: T) { @@ -77,6 +82,21 @@ export class TypeNativePopoverController implements Rea }) ); }); + + // https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API#creating_declarative_popovers + this.host.addEventListener('command', (e: Event & { command: string }) => { + if (e.command === 'toggle-popover') { + this.host.togglePopover(); + } + + if (e.command === 'hide-popover') { + this.host.hidePopover(); + } + + if (e.command === 'show-popover') { + this.host.showPopover(); + } + }); } #observers: MutationObserver[] = []; diff --git a/projects/elements/src/internal/index.ts b/projects/elements/src/internal/index.ts index 6d27edbf6..0b2216b51 100644 --- a/projects/elements/src/internal/index.ts +++ b/projects/elements/src/internal/index.ts @@ -17,6 +17,7 @@ export * from './controllers/state-selected.controller.js'; export * from './controllers/state-pressed.controller.js'; export * from './controllers/type-anchor.controller.js'; export * from './controllers/type-closable.controller.js'; +export * from './controllers/type-command.controller.js'; export * from './controllers/type-expandable.controller.js'; export * from './controllers/type-selectable.controller.js'; export * from './controllers/type-button.controller.js'; From 919c37b905d1f762d796002914ce0c2cf0428b8c Mon Sep 17 00:00:00 2001 From: Cory Rylan Date: Tue, 20 May 2025 19:32:13 -0500 Subject: [PATCH 0167/1100] chore(elements): update lighthouse results Signed-off-by: Cory Rylan --- projects/elements/src/button/button.test.lighthouse.ts | 2 +- .../elements/src/chat-message/chat-message.test.lighthouse.ts | 2 +- projects/elements/src/combobox/combobox.test.lighthouse.ts | 2 +- .../elements/src/copy-button/copy-button.test.lighthouse.ts | 2 +- projects/elements/src/datetime/datetime.test.lighthouse.ts | 2 +- projects/elements/src/dialog/dialog.test.lighthouse.ts | 2 +- projects/elements/src/drawer/drawer.test.lighthouse.ts | 2 +- .../src/dropdown-group/dropdown-group.test.lighthouse.ts | 2 +- projects/elements/src/dropdown/dropdown.test.lighthouse.ts | 2 +- projects/elements/src/grid/grid.test.lighthouse.ts | 2 +- projects/elements/src/index.test.lighthouse.ts | 2 +- projects/elements/src/menu/menu.test.lighthouse.ts | 2 +- projects/elements/src/month/month.test.lighthouse.ts | 2 +- .../elements/src/page-loader/page-loader.test.lighthouse.ts | 2 +- projects/elements/src/pagination/pagination.test.lighthouse.ts | 2 +- projects/elements/src/panel/panel.test.lighthouse.ts | 2 +- .../src/preferences-input/preferences-input.test.lighthouse.ts | 2 +- projects/elements/src/select/select.test.lighthouse.ts | 2 +- .../elements/src/sort-button/sort-button.test.lighthouse.ts | 2 +- projects/elements/src/tabs/tabs.test.lighthouse.ts | 2 +- projects/elements/src/tag/tag.test.lighthouse.ts | 2 +- projects/elements/src/time/time.test.lighthouse.ts | 2 +- projects/elements/src/toast/toast.test.lighthouse.ts | 2 +- projects/elements/src/toggletip/toggletip.test.lighthouse.ts | 2 +- projects/elements/src/week/week.test.lighthouse.ts | 2 +- 25 files changed, 25 insertions(+), 25 deletions(-) diff --git a/projects/elements/src/button/button.test.lighthouse.ts b/projects/elements/src/button/button.test.lighthouse.ts index 584765797..814d215db 100644 --- a/projects/elements/src/button/button.test.lighthouse.ts +++ b/projects/elements/src/button/button.test.lighthouse.ts @@ -15,6 +15,6 @@ describe('button lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(87); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(11.5); + expect(report.payload.javascript.kb).toBeLessThan(11.6); }); }); diff --git a/projects/elements/src/chat-message/chat-message.test.lighthouse.ts b/projects/elements/src/chat-message/chat-message.test.lighthouse.ts index 5d5aa45d1..80e1beb59 100644 --- a/projects/elements/src/chat-message/chat-message.test.lighthouse.ts +++ b/projects/elements/src/chat-message/chat-message.test.lighthouse.ts @@ -13,6 +13,6 @@ describe('button lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(11.5); + expect(report.payload.javascript.kb).toBeLessThan(11.6); }); }); diff --git a/projects/elements/src/combobox/combobox.test.lighthouse.ts b/projects/elements/src/combobox/combobox.test.lighthouse.ts index ca8c1e153..315507632 100644 --- a/projects/elements/src/combobox/combobox.test.lighthouse.ts +++ b/projects/elements/src/combobox/combobox.test.lighthouse.ts @@ -22,6 +22,6 @@ describe('combobox lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(34.5); + expect(report.payload.javascript.kb).toBeLessThan(34.7); }); }); diff --git a/projects/elements/src/copy-button/copy-button.test.lighthouse.ts b/projects/elements/src/copy-button/copy-button.test.lighthouse.ts index 233f5d29d..15c79932f 100644 --- a/projects/elements/src/copy-button/copy-button.test.lighthouse.ts +++ b/projects/elements/src/copy-button/copy-button.test.lighthouse.ts @@ -13,6 +13,6 @@ describe('copy-button lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(25.5); + expect(report.payload.javascript.kb).toBeLessThan(25.6); }); }); diff --git a/projects/elements/src/datetime/datetime.test.lighthouse.ts b/projects/elements/src/datetime/datetime.test.lighthouse.ts index af42bb668..7f6a383c5 100644 --- a/projects/elements/src/datetime/datetime.test.lighthouse.ts +++ b/projects/elements/src/datetime/datetime.test.lighthouse.ts @@ -16,6 +16,6 @@ describe('datetime lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(23.7); + expect(report.payload.javascript.kb).toBeLessThan(23.8); }); }); diff --git a/projects/elements/src/dialog/dialog.test.lighthouse.ts b/projects/elements/src/dialog/dialog.test.lighthouse.ts index 5de4b2f06..c3ffb5ea8 100644 --- a/projects/elements/src/dialog/dialog.test.lighthouse.ts +++ b/projects/elements/src/dialog/dialog.test.lighthouse.ts @@ -21,6 +21,6 @@ describe('dialog lighthouse report', () => { expect(report.scores.performance).toBeGreaterThan(97); // bfcache expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(23.5); + expect(report.payload.javascript.kb).toBeLessThan(23.7); }); }); diff --git a/projects/elements/src/drawer/drawer.test.lighthouse.ts b/projects/elements/src/drawer/drawer.test.lighthouse.ts index c69c1492d..1878e6682 100644 --- a/projects/elements/src/drawer/drawer.test.lighthouse.ts +++ b/projects/elements/src/drawer/drawer.test.lighthouse.ts @@ -14,6 +14,6 @@ describe('drawer lighthouse report', () => { expect(report.scores.performance).toBeGreaterThan(98); // bfcache expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(24.5); + expect(report.payload.javascript.kb).toBeLessThan(24.6); }); }); diff --git a/projects/elements/src/dropdown-group/dropdown-group.test.lighthouse.ts b/projects/elements/src/dropdown-group/dropdown-group.test.lighthouse.ts index 71312962a..60acddcce 100644 --- a/projects/elements/src/dropdown-group/dropdown-group.test.lighthouse.ts +++ b/projects/elements/src/dropdown-group/dropdown-group.test.lighthouse.ts @@ -26,6 +26,6 @@ describe('dropdown-group lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(24); + expect(report.payload.javascript.kb).toBeLessThan(24.1); }); }); diff --git a/projects/elements/src/dropdown/dropdown.test.lighthouse.ts b/projects/elements/src/dropdown/dropdown.test.lighthouse.ts index f21caa913..a03fdc996 100644 --- a/projects/elements/src/dropdown/dropdown.test.lighthouse.ts +++ b/projects/elements/src/dropdown/dropdown.test.lighthouse.ts @@ -14,6 +14,6 @@ describe('dropdown lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(24); + expect(report.payload.javascript.kb).toBeLessThan(24.2); }); }); diff --git a/projects/elements/src/grid/grid.test.lighthouse.ts b/projects/elements/src/grid/grid.test.lighthouse.ts index b5436639d..15d18e55e 100644 --- a/projects/elements/src/grid/grid.test.lighthouse.ts +++ b/projects/elements/src/grid/grid.test.lighthouse.ts @@ -26,6 +26,6 @@ describe('grid lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(89); // https://github.com/dequelabs/axe-core/issues/4259 expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(22.6); + expect(report.payload.javascript.kb).toBeLessThan(22.8); }); }); diff --git a/projects/elements/src/index.test.lighthouse.ts b/projects/elements/src/index.test.lighthouse.ts index 9e23686e9..9c28e112f 100644 --- a/projects/elements/src/index.test.lighthouse.ts +++ b/projects/elements/src/index.test.lighthouse.ts @@ -95,6 +95,6 @@ describe('lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.requests[Object.keys(report.payload.javascript.requests)[0]].kb).toBeLessThan(71); + expect(report.payload.javascript.requests[Object.keys(report.payload.javascript.requests)[0]].kb).toBeLessThan(72); }); }); diff --git a/projects/elements/src/menu/menu.test.lighthouse.ts b/projects/elements/src/menu/menu.test.lighthouse.ts index 5c335ccfc..d38ea208d 100644 --- a/projects/elements/src/menu/menu.test.lighthouse.ts +++ b/projects/elements/src/menu/menu.test.lighthouse.ts @@ -18,6 +18,6 @@ describe('menu lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(14.2); + expect(report.payload.javascript.kb).toBeLessThan(14.3); }); }); diff --git a/projects/elements/src/month/month.test.lighthouse.ts b/projects/elements/src/month/month.test.lighthouse.ts index 54b0c253b..ec0d40697 100644 --- a/projects/elements/src/month/month.test.lighthouse.ts +++ b/projects/elements/src/month/month.test.lighthouse.ts @@ -16,6 +16,6 @@ describe('month lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(23.7); + expect(report.payload.javascript.kb).toBeLessThan(23.8); }); }); diff --git a/projects/elements/src/page-loader/page-loader.test.lighthouse.ts b/projects/elements/src/page-loader/page-loader.test.lighthouse.ts index 5681ef320..cfcfa7257 100644 --- a/projects/elements/src/page-loader/page-loader.test.lighthouse.ts +++ b/projects/elements/src/page-loader/page-loader.test.lighthouse.ts @@ -13,6 +13,6 @@ describe('page-loader lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(17.4); + expect(report.payload.javascript.kb).toBeLessThan(17.5); }); }); diff --git a/projects/elements/src/pagination/pagination.test.lighthouse.ts b/projects/elements/src/pagination/pagination.test.lighthouse.ts index 01a15aac3..a08b339aa 100644 --- a/projects/elements/src/pagination/pagination.test.lighthouse.ts +++ b/projects/elements/src/pagination/pagination.test.lighthouse.ts @@ -13,6 +13,6 @@ describe('pagination lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(36.2); + expect(report.payload.javascript.kb).toBeLessThan(36.4); }); }); diff --git a/projects/elements/src/panel/panel.test.lighthouse.ts b/projects/elements/src/panel/panel.test.lighthouse.ts index 92b46ceb6..70b970cfb 100644 --- a/projects/elements/src/panel/panel.test.lighthouse.ts +++ b/projects/elements/src/panel/panel.test.lighthouse.ts @@ -22,6 +22,6 @@ describe('panel lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(19.6); + expect(report.payload.javascript.kb).toBeLessThan(19.8); }); }); diff --git a/projects/elements/src/preferences-input/preferences-input.test.lighthouse.ts b/projects/elements/src/preferences-input/preferences-input.test.lighthouse.ts index a98088d61..ab41ac394 100644 --- a/projects/elements/src/preferences-input/preferences-input.test.lighthouse.ts +++ b/projects/elements/src/preferences-input/preferences-input.test.lighthouse.ts @@ -13,7 +13,7 @@ describe('preferences-input lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(29.5); + expect(report.payload.javascript.kb).toBeLessThan(29.6); }); }); diff --git a/projects/elements/src/select/select.test.lighthouse.ts b/projects/elements/src/select/select.test.lighthouse.ts index 41baa4879..b20b6d1a5 100644 --- a/projects/elements/src/select/select.test.lighthouse.ts +++ b/projects/elements/src/select/select.test.lighthouse.ts @@ -20,6 +20,6 @@ describe('select lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(33.6); + expect(report.payload.javascript.kb).toBeLessThan(33.8); }); }); diff --git a/projects/elements/src/sort-button/sort-button.test.lighthouse.ts b/projects/elements/src/sort-button/sort-button.test.lighthouse.ts index bb4717665..ed0b5bad9 100644 --- a/projects/elements/src/sort-button/sort-button.test.lighthouse.ts +++ b/projects/elements/src/sort-button/sort-button.test.lighthouse.ts @@ -13,6 +13,6 @@ describe('sort-button lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(16.9); + expect(report.payload.javascript.kb).toBeLessThan(17.1); }); }); diff --git a/projects/elements/src/tabs/tabs.test.lighthouse.ts b/projects/elements/src/tabs/tabs.test.lighthouse.ts index a918ff535..596ab542e 100644 --- a/projects/elements/src/tabs/tabs.test.lighthouse.ts +++ b/projects/elements/src/tabs/tabs.test.lighthouse.ts @@ -17,6 +17,6 @@ describe('tabs lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(87); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(14.1); + expect(report.payload.javascript.kb).toBeLessThan(14.2); }); }); diff --git a/projects/elements/src/tag/tag.test.lighthouse.ts b/projects/elements/src/tag/tag.test.lighthouse.ts index 80f999001..270b11fe4 100644 --- a/projects/elements/src/tag/tag.test.lighthouse.ts +++ b/projects/elements/src/tag/tag.test.lighthouse.ts @@ -13,6 +13,6 @@ describe('tag lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(16.5); + expect(report.payload.javascript.kb).toBeLessThan(16.7); }); }); diff --git a/projects/elements/src/time/time.test.lighthouse.ts b/projects/elements/src/time/time.test.lighthouse.ts index 34dcd7a88..7ba0e98f3 100644 --- a/projects/elements/src/time/time.test.lighthouse.ts +++ b/projects/elements/src/time/time.test.lighthouse.ts @@ -16,6 +16,6 @@ describe('time lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(23.5); + expect(report.payload.javascript.kb).toBeLessThan(23.6); }); }); diff --git a/projects/elements/src/toast/toast.test.lighthouse.ts b/projects/elements/src/toast/toast.test.lighthouse.ts index b5ddabfd5..94e4347f8 100644 --- a/projects/elements/src/toast/toast.test.lighthouse.ts +++ b/projects/elements/src/toast/toast.test.lighthouse.ts @@ -14,6 +14,6 @@ describe('toast lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(23.8); + expect(report.payload.javascript.kb).toBeLessThan(23.9); }); }); diff --git a/projects/elements/src/toggletip/toggletip.test.lighthouse.ts b/projects/elements/src/toggletip/toggletip.test.lighthouse.ts index e3041e062..9e8bec1bd 100644 --- a/projects/elements/src/toggletip/toggletip.test.lighthouse.ts +++ b/projects/elements/src/toggletip/toggletip.test.lighthouse.ts @@ -14,6 +14,6 @@ describe('toggletip lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(24.1); + expect(report.payload.javascript.kb).toBeLessThan(24.4); }); }); diff --git a/projects/elements/src/week/week.test.lighthouse.ts b/projects/elements/src/week/week.test.lighthouse.ts index 16ec5c265..08dcc5ce7 100644 --- a/projects/elements/src/week/week.test.lighthouse.ts +++ b/projects/elements/src/week/week.test.lighthouse.ts @@ -16,6 +16,6 @@ describe('week lighthouse report', () => { expect(report.scores.performance).toBe(100); expect(report.scores.accessibility).toBe(100); expect(report.scores.bestPractices).toBe(100); - expect(report.payload.javascript.kb).toBeLessThan(23.7); + expect(report.payload.javascript.kb).toBeLessThan(23.9); }); }); From 237fbc0d69a2641d549ad9b89aae2e6e9d04de9b Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Fri, 23 May 2025 16:30:19 +0000 Subject: [PATCH 0168/1100] chore(release): @nve/elements-v1.34.11 [skip ci] ## [@nve/elements-v1.34.11](https://gitlab-master.nvidia.com/ai-infra/elements/compare/@nve/elements-v1.34.10...@nve/elements-v1.34.11) (2025-05-23) ### Bug Fixes * **elements:** add missing invoker command support ([fed28fd](https://gitlab-master.nvidia.com/ai-infra/elements/commit/fed28fddc40c4c105b6315e09ad6aff1dafdaaee)) --- projects/elements/CHANGELOG.md | 7 +++++++ projects/elements/package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/projects/elements/CHANGELOG.md b/projects/elements/CHANGELOG.md index efc5315e4..6ba34a256 100644 --- a/projects/elements/CHANGELOG.md +++ b/projects/elements/CHANGELOG.md @@ -1,3 +1,10 @@ +## [@nvidia-elements/core-v1.34.11](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.34.10...@nvidia-elements/core-v1.34.11) (2025-05-23) + + +### Bug Fixes + +* **elements:** add missing invoker command support ([4a0f578](https://github.com/NVIDIA/elements/commit/4a0f5785393434855bb435beceaf363f40ea3d0d)) + ## [@nvidia-elements/core-v1.34.10](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.34.9...@nvidia-elements/core-v1.34.10) (2025-05-22) diff --git a/projects/elements/package.json b/projects/elements/package.json index 94d4ec3b5..745cc69d0 100644 --- a/projects/elements/package.json +++ b/projects/elements/package.json @@ -1,6 +1,6 @@ { "name": "@nvidia-elements/core", - "version": "1.34.10", + "version": "1.34.11", "description": "The Design Language for AI/ML Factories Building at the Speed of Light", "homepage": "https://NVIDIA.github.io/elements/", "repository": { From eb3defae0f69fefe1ff9d037ce0d1c81b8360f84 Mon Sep 17 00:00:00 2001 From: John Yanarella Date: Fri, 25 Apr 2025 15:48:51 -0700 Subject: [PATCH 0169/1100] feat(monaco): initial implementation --- .gitignore | 1 + .prettierignore | 4 +- package.json | 8 +- patches/monaco-editor.patch | 363 +++++++ pnpm-lock.yaml | 229 +++-- .../internals/metadata/static/lighthouse.json | 4 +- .../internals/vite/src/plugins/cem.config.mjs | 11 +- projects/monaco/build/themes.ts | 188 ++++ projects/monaco/build/tsconfig.json | 21 + projects/monaco/package.json | 89 +- projects/monaco/postcss.config.js | 23 + projects/monaco/src/editor.main.css | 1 + projects/monaco/src/editor.main.ts | 1 + projects/monaco/src/editor/define.ts | 6 +- projects/monaco/src/editor/editor.css | 25 +- projects/monaco/src/editor/editor.global.css | 5 - projects/monaco/src/editor/editor.stories.ts | 7 +- projects/monaco/src/editor/editor.test.axe.ts | 28 +- .../src/editor/editor.test.lighthouse.ts | 11 +- projects/monaco/src/editor/editor.test.ts | 84 +- projects/monaco/src/editor/editor.ts | 102 +- projects/monaco/src/index.test.lighthouse.ts | 4 +- projects/monaco/src/input/define.ts | 10 + projects/monaco/src/input/index.ts | 1 + projects/monaco/src/input/input.css | 100 ++ projects/monaco/src/input/input.snippets.html | 11 + projects/monaco/src/input/input.stories.ts | 118 +++ projects/monaco/src/input/input.test.axe.ts | 29 + .../monaco/src/input/input.test.lighthouse.ts | 42 + projects/monaco/src/input/input.test.ts | 666 +++++++++++++ projects/monaco/src/input/input.ts | 502 ++++++++++ projects/monaco/src/monaco.global.css | 5 + projects/monaco/src/monaco.test.ts | 76 ++ projects/monaco/src/monaco.ts | 50 +- projects/monaco/src/themes/dark.json | 856 ++++++++++++++++ projects/monaco/src/themes/index.test.ts | 142 +++ projects/monaco/src/themes/index.ts | 31 + projects/monaco/src/themes/light.json | 912 ++++++++++++++++++ projects/monaco/src/types.ts | 5 + projects/monaco/src/workers/css.worker.ts | 2 + projects/monaco/src/workers/editor.worker.ts | 2 + projects/monaco/src/workers/html.worker.ts | 2 + projects/monaco/src/workers/json.worker.ts | 2 + projects/monaco/src/workers/ts.worker.ts | 2 + projects/monaco/vite.config.ts | 88 +- projects/monaco/vitest.axe.ts | 13 + projects/monaco/vitest.config.ts | 23 +- projects/monaco/vitest.lighthouse.ts | 10 + projects/site/src/docs/monaco/editor.md | 8 +- projects/site/src/docs/monaco/input.md | 35 + projects/styles/.visual/text-size.png | 4 +- projects/styles/.visual/text-weight.png | 2 +- 52 files changed, 4768 insertions(+), 196 deletions(-) create mode 100644 patches/monaco-editor.patch create mode 100644 projects/monaco/build/themes.ts create mode 100644 projects/monaco/build/tsconfig.json create mode 100644 projects/monaco/postcss.config.js create mode 100644 projects/monaco/src/editor.main.css create mode 100644 projects/monaco/src/editor.main.ts delete mode 100644 projects/monaco/src/editor/editor.global.css create mode 100644 projects/monaco/src/input/define.ts create mode 100644 projects/monaco/src/input/index.ts create mode 100644 projects/monaco/src/input/input.css create mode 100644 projects/monaco/src/input/input.snippets.html create mode 100644 projects/monaco/src/input/input.stories.ts create mode 100644 projects/monaco/src/input/input.test.axe.ts create mode 100644 projects/monaco/src/input/input.test.lighthouse.ts create mode 100644 projects/monaco/src/input/input.test.ts create mode 100644 projects/monaco/src/input/input.ts create mode 100644 projects/monaco/src/monaco.global.css create mode 100644 projects/monaco/src/monaco.test.ts create mode 100644 projects/monaco/src/themes/dark.json create mode 100644 projects/monaco/src/themes/index.test.ts create mode 100644 projects/monaco/src/themes/index.ts create mode 100644 projects/monaco/src/themes/light.json create mode 100644 projects/monaco/src/types.ts create mode 100644 projects/monaco/src/workers/css.worker.ts create mode 100644 projects/monaco/src/workers/editor.worker.ts create mode 100644 projects/monaco/src/workers/html.worker.ts create mode 100644 projects/monaco/src/workers/json.worker.ts create mode 100644 projects/monaco/src/workers/ts.worker.ts create mode 100644 projects/site/src/docs/monaco/input.md diff --git a/.gitignore b/.gitignore index c66479c10..c0d145bea 100644 --- a/.gitignore +++ b/.gitignore @@ -13,6 +13,7 @@ dist-storybook coverage projects/elements/src/icon/icons.ts projects/elements/index.html +projects/monaco/src/themes/generated projects/themes/index.html v8-compile-cache-0 __screenshots__ diff --git a/.prettierignore b/.prettierignore index 1247e9828..e87711035 100644 --- a/.prettierignore +++ b/.prettierignore @@ -16,6 +16,8 @@ tsconfig.*.tsbuildinfo projects/labs/code/index.html projects/elements/src/css/*.css projects/elements/src/icon/server.ts -projects/internals/metadata/static/*.json projects/elements-react/src/**/* +projects/internals/metadata/static/*.json +projects/monaco/src/themes/generated/* +projects/**/.screencast/.auth/* .vscode/*.json.code-snippets \ No newline at end of file diff --git a/package.json b/package.json index 486ae1af8..785c7fcf1 100644 --- a/package.json +++ b/package.json @@ -117,6 +117,7 @@ "release:elements-react", "release:labs-behaviors-alpine", "release:labs-code", + "release:monaco", "release:styles" ] }, @@ -162,6 +163,7 @@ "release:monaco": { "command": "cd projects/monaco && HUSKY=0 pnpm exec semantic-release", "dependencies": [ + "release:elements", "release:themes" ] }, @@ -192,6 +194,7 @@ "!projects/elements/src/icon/{icons,server}.ts", "!projects/internals/metadata/static/**", "!projects/elements-react/src/**/*", + "!projects/monaco/src/themes/generated/**", "!projects/starters/nextjs/next-env.d.ts" ], "output": [] @@ -232,6 +235,9 @@ "esbuild", "sharp", "style-dictionary" - ] + ], + "patchedDependencies": { + "monaco-editor": "patches/monaco-editor.patch" + } } } diff --git a/patches/monaco-editor.patch b/patches/monaco-editor.patch new file mode 100644 index 000000000..04ca6d817 --- /dev/null +++ b/patches/monaco-editor.patch @@ -0,0 +1,363 @@ +diff --git a/esm/vs/base/common/async.js b/esm/vs/base/common/async.js +index 5a5588e64135d87ac643aa75dd339f96ec3613a8..bdfbaf9cd113683af0d3f4f64d636b36a6684778 100644 +--- a/esm/vs/base/common/async.js ++++ b/esm/vs/base/common/async.js +@@ -216,7 +216,17 @@ export class Delayer { + cancel() { + this.cancelTimeout(); + if (this.completionPromise) { +- this.doReject?.(new CancellationError()); ++ // PATCH: Remove error throwing during cancellation ++ // The Delayer treats cancellation as an error condition that should be thrown, ++ // but this is problematic during editor disposal where cancellation is a normal ++ // part of the lifecycle. This patch changes the behavior to treat cancellation ++ // as a normal state transition rather than an error condition. ++ // ++ // This fixes unhandled rejections that occur when the editor is disposed while ++ // async operations are pending. The issue affects both test and production ++ // environments. ++ // See: https://github.com/microsoft/monaco-editor/issues/4702 ++ // this.doReject?.(new CancellationError()); + this.completionPromise = null; + } + } +diff --git a/esm/vs/editor/browser/controller/mouseHandler.js b/esm/vs/editor/browser/controller/mouseHandler.js +index e787d70d2cea450a323468d1fa3a9cb3367a1221..75c772ded4c4c2eb22a65845ced30f4015c985ee 100644 +--- a/esm/vs/editor/browser/controller/mouseHandler.js ++++ b/esm/vs/editor/browser/controller/mouseHandler.js +@@ -36,7 +36,10 @@ export class MouseHandler extends ViewEventHandler { + // remove this listener + if (!this._mouseLeaveMonitor) { + this._mouseLeaveMonitor = dom.addDisposableListener(this.viewHelper.viewDomNode.ownerDocument, 'mousemove', (e) => { +- if (!this.viewHelper.viewDomNode.contains(e.target)) { ++ // PATCH: Workaround for Monaco's HoverProvider not working inside a ShadowDOM ++ // See: https://github.com/microsoft/monaco-editor/issues/3241 ++ // See: https://github.com/microsoft/monaco-editor/issues/3409 ++ if (!this.viewHelper.viewDomNode.contains(e.composedPath()[0])) { + // went outside the editor! + this._onMouseLeave(new EditorMouseEvent(e, false, this.viewHelper.viewDomNode)); + } +diff --git a/esm/vs/editor/browser/controller/mouseTarget.js b/esm/vs/editor/browser/controller/mouseTarget.js +index 31ca82a2b7b141c85a23384ed42c7eaad1f97432..77c6a920d40e05a88749ce0654ef1878acc16fbe 100644 +--- a/esm/vs/editor/browser/controller/mouseTarget.js ++++ b/esm/vs/editor/browser/controller/mouseTarget.js +@@ -890,8 +890,9 @@ function shadowCaretRangeFromPoint(shadowRoot, x, y) { + } + } + // Creates a range with the text node of the element and set the offset found +- range.setStart(el.firstChild, offset); +- range.setEnd(el.firstChild, offset); ++ // PATCH: Fix for RTE in shadowCaretRangeFromPoint when selecting lines ++ range.setStart(el.firstChild ?? el, offset); ++ range.setEnd(el.firstChild ?? el, offset); + } + return range; + } +diff --git a/esm/vs/editor/common/model/textModel.js b/esm/vs/editor/common/model/textModel.js +index 92bbf91d421a45172ff04c2bac1025e433300b62..6688c3d07a38855df88a5903feafe46315e4e32c 100644 +--- a/esm/vs/editor/common/model/textModel.js ++++ b/esm/vs/editor/common/model/textModel.js +@@ -170,6 +170,9 @@ let TextModel = class TextModel extends Disposable { + this._languageSelectionListener = this._register(new MutableDisposable()); + this._deltaDecorationCallCnt = 0; + this._attachedViews = new AttachedViews(); ++ // PATCH: Enable workers to communicate that syntax validation is complete for a specific model version ++ this._onDidValidateVersion = new Emitter(); ++ this.onDidValidateVersion = this._onDidValidateVersion.event; + // Generate a new unique model id + MODEL_ID++; + this.id = '$model' + MODEL_ID; +@@ -247,6 +250,10 @@ let TextModel = class TextModel extends Disposable { + this._buffer = emptyDisposedTextBuffer; + this._bufferDisposable = Disposable.None; + } ++ // PATCH: Enable workers to communicate that syntax validation is complete for a specific model version ++ setVersionValidated(versionId) { ++ this._onDidValidateVersion.fire(versionId); ++ } + _assertNotDisposed() { + if (this._isDisposed) { + throw new BugIndicatingError('Model is disposed!'); +diff --git a/esm/vs/editor/editor.api.d.ts b/esm/vs/editor/editor.api.d.ts +index 6e21bfb0ceac3a097f10ec3a060142b6418782b3..46cdf106735a66abb64baa08a5b5d7beb8d272ae 100644 +--- a/esm/vs/editor/editor.api.d.ts ++++ b/esm/vs/editor/editor.api.d.ts +@@ -1039,6 +1039,19 @@ export namespace editor { + */ + export function setModelLanguage(model: ITextModel, mimeTypeOrLanguageId: string): void; + ++ // PATCH: Enable workers to communicate that syntax validation is complete for a specific model version ++ /** ++ * Set a version of the model as validated. ++ */ ++ export function setModelVersionValidated(model: ITextModel, versionId: number): void; ++ ++ // PATCH: Enable workers to communicate that syntax validation is complete for a specific model version ++ /** ++ * Emitted when a model version has been validated. ++ * @event ++ */ ++ export function onDidValidateModelVersion(model: ITextModel, listener: (versionId: number) => void): IDisposable; ++ + /** + * Set the markers for a model. + */ +@@ -1128,6 +1141,12 @@ export namespace editor { + */ + export function defineTheme(themeName: string, themeData: IStandaloneThemeData): void; + ++ // PATCH: Add missing accessor for current theme. ++ /** ++ * Get the current theme. ++ */ ++ export function getTheme(): string; ++ + /** + * Switches to a theme. + */ +@@ -2372,6 +2391,18 @@ export namespace editor { + * Returns if this model is attached to an editor or not. + */ + isAttachedToEditor(): boolean; ++ ++ // PATCH: Enable workers to communicate that syntax validation is complete for a specific model version ++ /** ++ * Set a version of the model as validated. ++ */ ++ setVersionValidated(versionId: number): void; ++ ++ // PATCH: Enable workers to communicate that syntax validation is complete for a specific model version ++ /** ++ * Register a listener for model version validation events. ++ */ ++ onDidValidateVersion(listener: (versionId: number) => void): IDisposable; + } + + export enum PositionAffinity { +diff --git a/esm/vs/editor/standalone/browser/standaloneEditor.js b/esm/vs/editor/standalone/browser/standaloneEditor.js +index aa33e1d4a4facf5ba98d3730267133f18638463c..751b554032bfa823704fd5e1ca362131f5b9c7bc 100644 +--- a/esm/vs/editor/standalone/browser/standaloneEditor.js ++++ b/esm/vs/editor/standalone/browser/standaloneEditor.js +@@ -186,6 +186,22 @@ export function setModelLanguage(model, mimeTypeOrLanguageId) { + const languageId = languageService.getLanguageIdByMimeType(mimeTypeOrLanguageId) || mimeTypeOrLanguageId || PLAINTEXT_LANGUAGE_ID; + model.setLanguage(languageService.createById(languageId)); + } ++// PATCH: Enable workers to communicate that syntax validation is complete for a specific model version ++/** ++ * Set a version of the model as validated. ++ */ ++export function setModelVersionValidated(model, versionId) { ++ if (model) { ++ model.setVersionValidated(versionId); ++ } ++} ++/** ++ * Emitted when a model version has been validated. ++ * @event ++ */ ++export function onDidValidateModelVersion(model, listener) { ++ return model.onDidValidateModelVersion(listener); ++} + /** + * Set the markers for a model. + */ +@@ -334,6 +350,14 @@ export function defineTheme(themeName, themeData) { + const standaloneThemeService = StandaloneServices.get(IStandaloneThemeService); + standaloneThemeService.defineTheme(themeName, themeData); + } ++// PATCH: Add missing accessor for current theme. ++/** ++ * Get the current theme. ++ */ ++export function getTheme() { ++ const standaloneThemeService = StandaloneServices.get(IStandaloneThemeService); ++ return standaloneThemeService.getColorTheme().themeName; ++} + /** + * Switches to a theme. + */ +@@ -416,6 +440,9 @@ export function createMonacoEditorAPI() { + addKeybindingRules: addKeybindingRules, + createModel: createModel, + setModelLanguage: setModelLanguage, ++ // PATCH: Enable workers to communicate that syntax validation is complete for a specific model version ++ setModelVersionValidated: setModelVersionValidated, ++ onDidValidateModelVersion: onDidValidateModelVersion, + setModelMarkers: setModelMarkers, + getModelMarkers: getModelMarkers, + removeAllMarkers: removeAllMarkers, +@@ -431,6 +458,8 @@ export function createMonacoEditorAPI() { + colorizeModelLine: colorizeModelLine, + tokenize: tokenize, + defineTheme: defineTheme, ++ // PATCH: Add missing accessor for current theme. ++ getTheme: getTheme, + setTheme: setTheme, + remeasureFonts: remeasureFonts, + registerCommand: registerCommand, +diff --git a/esm/vs/language/css/css.worker.js b/esm/vs/language/css/css.worker.js +index 7cf2dea5ffc67aa6982321567ce08c487625aa33..5e16b9841587784ffc3d100eacbe3afffbf6e113 100644 +--- a/esm/vs/language/css/css.worker.js ++++ b/esm/vs/language/css/css.worker.js +@@ -39937,7 +39937,8 @@ var CSSWorker = class { + return []; + } + const stylesheet = this._languageService.parseStylesheet(document); +- const symbols = this._languageService.findDocumentSymbols(document, stylesheet); ++ // PATCH: Ensure the new standard DocumentSymbol data structure is provided from language services ++ const symbols = this._languageService.findDocumentSymbols2(document, stylesheet); + return Promise.resolve(symbols); + } + async doCodeActions(uri, range, context) { +diff --git a/esm/vs/language/css/cssMode.js b/esm/vs/language/css/cssMode.js +index 6e7b742f0cd23f7a8c2e9cc0c65dd5c269b33635..74131c8f4001dda7dd4baa69c975c3eb8b1a694e 100644 +--- a/esm/vs/language/css/cssMode.js ++++ b/esm/vs/language/css/cssMode.js +@@ -1334,8 +1334,11 @@ var DiagnosticsAdapter = class { + }).then((diagnostics) => { + const markers = diagnostics.map((d) => toDiagnostics(resource, d)); + let model = monaco_editor_core_exports.editor.getModel(resource); +- if (model && model.getLanguageId() === languageId) { ++ // PATCH: Gracefully handle the case where the model was disposed during async validation. ++ if (model && !model.isDisposed() && model.getLanguageId() === languageId) { + monaco_editor_core_exports.editor.setModelMarkers(model, languageId, markers); ++ // PATCH: Enable workers to communicate that syntax validation is complete for a specific model version ++ monaco_editor_core_exports.editor.setModelVersionValidated(model, model.getVersionId()); + } + }).then(void 0, (err) => { + console.error(err); +@@ -1678,26 +1681,11 @@ var DocumentSymbolAdapter = class { + if (!items) { + return; + } +- return items.map((item) => { +- if (isDocumentSymbol(item)) { +- return toDocumentSymbol(item); +- } +- return { +- name: item.name, +- detail: "", +- containerName: item.containerName, +- kind: toSymbolKind(item.kind), +- range: toRange(item.location.range), +- selectionRange: toRange(item.location.range), +- tags: [] +- }; +- }); ++ // PATCH: Ensure the new standard DocumentSymbol data structure is provided from language services ++ return items.map((item) => toDocumentSymbol(item)); + }); + } + }; +-function isDocumentSymbol(symbol) { +- return "children" in symbol; +-} + function toDocumentSymbol(symbol) { + return { + name: symbol.name, +diff --git a/esm/vs/language/html/html.worker.js b/esm/vs/language/html/html.worker.js +index bb2c0be331b18e5dc668cab88834f5dd1be4597b..c1275b7f8b0079934caac1392701ede13139c735 100644 +--- a/esm/vs/language/html/html.worker.js ++++ b/esm/vs/language/html/html.worker.js +@@ -16155,7 +16155,8 @@ var HTMLWorker = class { + return []; + } + let htmlDocument = this._languageService.parseHTMLDocument(document); +- let symbols = this._languageService.findDocumentSymbols(document, htmlDocument); ++ // PATCH: Ensure the new standard DocumentSymbol data structure is provided from language services ++ let symbols = this._languageService.findDocumentSymbols2(document, htmlDocument); + return Promise.resolve(symbols); + } + async getFoldingRanges(uri, context) { +diff --git a/esm/vs/language/html/htmlMode.js b/esm/vs/language/html/htmlMode.js +index 3ad9cb2d83dc5ea1d4a0270412875a82f3da38e1..b0f3be8b1c80391626f014aa0f4d2d885aa5fa24 100644 +--- a/esm/vs/language/html/htmlMode.js ++++ b/esm/vs/language/html/htmlMode.js +@@ -1678,26 +1678,11 @@ var DocumentSymbolAdapter = class { + if (!items) { + return; + } +- return items.map((item) => { +- if (isDocumentSymbol(item)) { +- return toDocumentSymbol(item); +- } +- return { +- name: item.name, +- detail: "", +- containerName: item.containerName, +- kind: toSymbolKind(item.kind), +- range: toRange(item.location.range), +- selectionRange: toRange(item.location.range), +- tags: [] +- }; +- }); ++ // PATCH: Ensure the new standard DocumentSymbol data structure is provided from language services ++ return items.map((item) => toDocumentSymbol(item)); + }); + } + }; +-function isDocumentSymbol(symbol) { +- return "children" in symbol; +-} + function toDocumentSymbol(symbol) { + return { + name: symbol.name, +diff --git a/esm/vs/language/json/jsonMode.js b/esm/vs/language/json/jsonMode.js +index 2469e15731504d94f94047a0108b104eb1f8bc40..2b2d727d6d805bae024ac244c1541faf002b461b 100644 +--- a/esm/vs/language/json/jsonMode.js ++++ b/esm/vs/language/json/jsonMode.js +@@ -1335,8 +1335,11 @@ var DiagnosticsAdapter = class { + }).then((diagnostics) => { + const markers = diagnostics.map((d) => toDiagnostics(resource, d)); + let model = monaco_editor_core_exports.editor.getModel(resource); +- if (model && model.getLanguageId() === languageId) { ++ // PATCH: Gracefully handle the case where the model was disposed during async validation. ++ if (model && !model.isDisposed() && model.getLanguageId() === languageId) { + monaco_editor_core_exports.editor.setModelMarkers(model, languageId, markers); ++ // PATCH: Enable workers to communicate that syntax validation is complete for a specific model version ++ monaco_editor_core_exports.editor.setModelVersionValidated(model, model.getVersionId()); + } + }).then(void 0, (err) => { + console.error(err); +diff --git a/esm/vs/language/typescript/tsMode.js b/esm/vs/language/typescript/tsMode.js +index 6e696fc4eb64adb9c5f6986192fd17c566d16db9..5b9c9324fbc782aaf521e5b3485ceb243bf0abcd 100644 +--- a/esm/vs/language/typescript/tsMode.js ++++ b/esm/vs/language/typescript/tsMode.js +@@ -377,6 +377,7 @@ var DiagnosticsAdapter = class extends Adapter { + this._disposables = []; + } + async _doValidate(model) { ++ const modelVersionId = model.getVersionId(); + const worker = await this._worker(model.uri); + if (model.isDisposed()) { + return; +@@ -406,11 +407,17 @@ var DiagnosticsAdapter = class extends Adapter { + if (model.isDisposed()) { + return; + } ++ // PATCH: Don't apply model markers if the language has changed. (Aligns this behavior with other language services.) ++ if (model.getLanguageId() !== this._selector) { ++ return; ++ } + monaco_editor_core_exports.editor.setModelMarkers( + model, + this._selector, + diagnostics.map((d) => this._convertDiagnostics(model, d)) + ); ++ // PATCH: Enable workers to communicate that syntax validation is complete for a specific model version ++ monaco_editor_core_exports.editor.setModelVersionValidated(model, modelVersionId); + } + _convertDiagnostics(model, diag) { + const diagStart = diag.start || 0; +diff --git a/monaco.d.ts b/monaco.d.ts +index de65a4a52dacfd7f6986fb06198e056ab70ab3ef..d8443e404db7faf640e1dcae6854c0d4a49beb92 100644 +--- a/monaco.d.ts ++++ b/monaco.d.ts +@@ -2028,6 +2028,7 @@ declare namespace monaco.editor { + * @return The text. + */ + getValue(eol?: EndOfLinePreference, preserveBOM?: boolean): string; ++ + /** + * Get the text stored in this model. + * @param preserverBOM Preserve a BOM character if it was detected when the model was constructed. diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7fa0ad7c1..cb01c5454 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -103,6 +103,11 @@ catalogs: specifier: 3.1.1 version: 3.1.1 +patchedDependencies: + monaco-editor: + hash: 7bb3e90ea5e88af3c2dd4178adc975df191ffc569dc81fcbbaa496122443cfa6 + path: patches/monaco-editor.patch + importers: .: @@ -778,7 +783,7 @@ importers: version: 3.2.1 monaco-editor: specifier: 0.52.2 - version: 0.52.2 + version: 0.52.2(patch_hash=7bb3e90ea5e88af3c2dd4178adc975df191ffc569dc81fcbbaa496122443cfa6) devDependencies: '@eslint/js': specifier: 'catalog:' @@ -804,15 +809,24 @@ importers: '@nvidia-elements/themes': specifier: workspace:* version: link:../themes + '@types/node': + specifier: 'catalog:' + version: 22.13.1 '@vitest/browser': specifier: 'catalog:' - version: 3.1.1(msw@2.7.3(@types/node@22.13.10)(typescript@5.8.2))(playwright@1.52.0)(vite@6.3.5(@types/node@22.13.10)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.5.3))(terser@5.39.0)(yaml@2.7.0))(vitest@3.1.1) + version: 3.1.1(msw@2.7.3(@types/node@22.13.1)(typescript@5.8.2))(playwright@1.52.0)(vite@6.3.5(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.4.31))(terser@5.39.0)(yaml@2.7.0))(vitest@3.1.1) '@vitest/coverage-istanbul': specifier: 'catalog:' version: 3.1.1(vitest@3.1.1) + colorjs.io: + specifier: 0.5.2 + version: 0.5.2 eslint: specifier: 'catalog:' version: 9.23.0(jiti@2.4.2) + postcss: + specifier: 8.4.31 + version: 8.4.31 publint: specifier: 'catalog:' version: 0.3.9 @@ -821,10 +835,10 @@ importers: version: 5.8.2 vite: specifier: 'catalog:' - version: 6.3.5(@types/node@22.13.10)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.5.3))(terser@5.39.0)(yaml@2.7.0) + version: 6.3.5(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.4.31))(terser@5.39.0)(yaml@2.7.0) vitest: specifier: 'catalog:' - version: 3.1.1(@types/debug@4.1.12)(@types/node@22.13.10)(@vitest/browser@3.1.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(msw@2.7.3(@types/node@22.13.10)(typescript@5.8.2))(sass@1.85.0)(sugarss@4.0.1(postcss@8.5.3))(terser@5.39.0)(yaml@2.7.0) + version: 3.1.1(@types/debug@4.1.12)(@types/node@22.13.1)(@vitest/browser@3.1.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(msw@2.7.3(@types/node@22.13.1)(typescript@5.8.2))(sass@1.85.0)(sugarss@4.0.1(postcss@8.4.31))(terser@5.39.0)(yaml@2.7.0) projects/pages: dependencies: @@ -1639,10 +1653,6 @@ packages: resolution: {integrity: sha512-ZnRKq0V5Dk5j4wQkalIJ08PTdSHKrSToA3w6ibBjjxLKVUurv/c2Cj06xJHBKOQwf9tPyK2N5Dj0fvwmA1jygA==, tarball: https://registry.npmjs.org engines: {node: '>=18'} - '@11ty/eleventy-utils@2.0.1': - resolution: {integrity: sha512-hicG0vPyqfLvgHJQLtoh3XAj6wUbLX4yY2se8bQLdhCIcxK46mt4zDpgcrYVP3Sjx4HPifQOdwRfOEECoUcyXQ==, tarball: https://registry.npmjs.org - engines: {node: '>=18'} - '@11ty/eleventy-utils@2.0.7': resolution: {integrity: sha512-6QE+duqSQ0GY9rENXYb4iPR4AYGdrFpqnmi59tFp9VrleOl0QSh8VlBr2yd6dlhkdtj7904poZW5PvGr9cMiJQ==, tarball: https://registry.npmjs.org engines: {node: '>=18'} @@ -5864,6 +5874,9 @@ packages: colorette@2.0.20: resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==, tarball: https://registry.npmjs.org + colorjs.io@0.5.2: + resolution: {integrity: sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==, tarball: https://registry.npmjs.org + command-line-args@5.1.2: resolution: {integrity: sha512-fytTsbndLbl+pPWtS0CxLV3BEWw9wJayB8NnU2cbQqVPsNdYezQeT+uIQv009m+GShnMNyuoBrRo8DTmuTfSCA==, tarball: https://registry.npmjs.org engines: {node: '>=4.0.0'} @@ -11462,7 +11475,7 @@ snapshots: send: 1.1.0 ssri: 11.0.0 urlpattern-polyfill: 10.0.0 - ws: 8.18.1 + ws: 8.18.2 transitivePeerDependencies: - bufferutil - supports-color @@ -11483,7 +11496,7 @@ snapshots: '@11ty/eleventy-plugin-vite@6.0.0(@types/node@22.13.10)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.5.3))(terser@5.39.0)(yaml@2.7.0)': dependencies: - '@11ty/eleventy-utils': 2.0.1 + '@11ty/eleventy-utils': 2.0.7 vite: 6.3.5(@types/node@22.13.10)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.5.3))(terser@5.39.0)(yaml@2.7.0) transitivePeerDependencies: - '@types/node' @@ -11498,8 +11511,6 @@ snapshots: - tsx - yaml - '@11ty/eleventy-utils@2.0.1': {} - '@11ty/eleventy-utils@2.0.7': {} '@11ty/eleventy@3.1.0': @@ -11574,7 +11585,7 @@ snapshots: dependencies: '@ampproject/remapping': 2.3.0 '@angular-devkit/architect': 0.1902.5(chokidar@4.0.1) - '@angular-devkit/build-webpack': 0.1902.5(chokidar@4.0.1)(webpack-dev-server@5.2.0(webpack@5.98.0))(webpack@5.98.0) + '@angular-devkit/build-webpack': 0.1902.5(chokidar@4.0.1)(webpack-dev-server@5.2.0(webpack@5.98.0))(webpack@5.98.0(esbuild@0.25.1)) '@angular-devkit/core': 19.2.5(chokidar@4.0.1) '@angular/build': 19.2.5(@angular/compiler-cli@19.2.3(@angular/compiler@19.2.3)(typescript@5.8.2))(@angular/compiler@19.2.3)(@types/node@22.13.10)(chokidar@4.0.1)(jiti@2.4.2)(karma@6.4.4)(less@4.2.2)(lightningcss@1.30.0)(postcss@8.5.2)(sugarss@4.0.1(postcss@8.5.2))(terser@5.39.0)(typescript@5.8.2)(yaml@2.7.0) '@angular/compiler-cli': 19.2.3(@angular/compiler@19.2.3)(typescript@5.8.2) @@ -11588,14 +11599,14 @@ snapshots: '@babel/preset-env': 7.26.9(@babel/core@7.26.10) '@babel/runtime': 7.26.10 '@discoveryjs/json-ext': 0.6.3 - '@ngtools/webpack': 19.2.5(@angular/compiler-cli@19.2.3(@angular/compiler@19.2.3)(typescript@5.8.2))(typescript@5.8.2)(webpack@5.98.0) + '@ngtools/webpack': 19.2.5(@angular/compiler-cli@19.2.3(@angular/compiler@19.2.3)(typescript@5.8.2))(typescript@5.8.2)(webpack@5.98.0(esbuild@0.25.1)) '@vitejs/plugin-basic-ssl': 1.2.0(vite@6.2.3(@types/node@22.13.10)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.5.2))(terser@5.39.0)(yaml@2.7.0)) ansi-colors: 4.1.3 autoprefixer: 10.4.20(postcss@8.5.2) - babel-loader: 9.2.1(@babel/core@7.26.10)(webpack@5.98.0) + babel-loader: 9.2.1(@babel/core@7.26.10)(webpack@5.98.0(esbuild@0.25.1)) browserslist: 4.24.4 - copy-webpack-plugin: 12.0.2(webpack@5.98.0) - css-loader: 7.1.2(webpack@5.98.0) + copy-webpack-plugin: 12.0.2(webpack@5.98.0(esbuild@0.25.1)) + css-loader: 7.1.2(webpack@5.98.0(esbuild@0.25.1)) esbuild-wasm: 0.25.1 fast-glob: 3.3.3 http-proxy-middleware: 3.0.3 @@ -11603,22 +11614,22 @@ snapshots: jsonc-parser: 3.3.1 karma-source-map-support: 1.4.0 less: 4.2.2 - less-loader: 12.2.0(less@4.2.2)(webpack@5.98.0) - license-webpack-plugin: 4.0.2(webpack@5.98.0) + less-loader: 12.2.0(less@4.2.2)(webpack@5.98.0(esbuild@0.25.1)) + license-webpack-plugin: 4.0.2(webpack@5.98.0(esbuild@0.25.1)) loader-utils: 3.3.1 - mini-css-extract-plugin: 2.9.2(webpack@5.98.0) + mini-css-extract-plugin: 2.9.2(webpack@5.98.0(esbuild@0.25.1)) open: 10.1.0 ora: 5.4.1 picomatch: 4.0.2 piscina: 4.8.0 postcss: 8.5.2 - postcss-loader: 8.1.1(postcss@8.5.2)(typescript@5.8.2)(webpack@5.98.0) + postcss-loader: 8.1.1(postcss@8.5.2)(typescript@5.8.2)(webpack@5.98.0(esbuild@0.25.1)) resolve-url-loader: 5.0.0 rxjs: 7.8.1 sass: 1.85.0 - sass-loader: 16.0.5(sass@1.85.0)(webpack@5.98.0) + sass-loader: 16.0.5(sass@1.85.0)(webpack@5.98.0(esbuild@0.25.1)) semver: 7.7.1 - source-map-loader: 5.0.0(webpack@5.98.0) + source-map-loader: 5.0.0(webpack@5.98.0(esbuild@0.25.1)) source-map-support: 0.5.21 terser: 5.39.0 tree-kill: 1.2.2 @@ -11628,7 +11639,7 @@ snapshots: webpack-dev-middleware: 7.4.2(webpack@5.98.0) webpack-dev-server: 5.2.0(webpack@5.98.0) webpack-merge: 6.0.1 - webpack-subresource-integrity: 5.1.0(webpack@5.98.0) + webpack-subresource-integrity: 5.1.0(webpack@5.98.0(esbuild@0.25.1)) optionalDependencies: esbuild: 0.25.1 karma: 6.4.4 @@ -11655,7 +11666,7 @@ snapshots: - webpack-cli - yaml - '@angular-devkit/build-webpack@0.1902.5(chokidar@4.0.1)(webpack-dev-server@5.2.0(webpack@5.98.0))(webpack@5.98.0)': + '@angular-devkit/build-webpack@0.1902.5(chokidar@4.0.1)(webpack-dev-server@5.2.0(webpack@5.98.0))(webpack@5.98.0(esbuild@0.25.1))': dependencies: '@angular-devkit/architect': 0.1902.5(chokidar@4.0.1) rxjs: 7.8.1 @@ -13612,7 +13623,7 @@ snapshots: '@next/swc-win32-x64-msvc@15.1.4': optional: true - '@ngtools/webpack@19.2.5(@angular/compiler-cli@19.2.3(@angular/compiler@19.2.3)(typescript@5.8.2))(typescript@5.8.2)(webpack@5.98.0)': + '@ngtools/webpack@19.2.5(@angular/compiler-cli@19.2.3(@angular/compiler@19.2.3)(typescript@5.8.2))(typescript@5.8.2)(webpack@5.98.0(esbuild@0.25.1))': dependencies: '@angular/compiler-cli': 19.2.3(@angular/compiler@19.2.3)(typescript@5.8.2) typescript: 5.8.2 @@ -13644,7 +13655,7 @@ snapshots: '@npmcli/fs@4.0.0': dependencies: - semver: 7.7.1 + semver: 7.7.2 '@npmcli/git@6.0.3': dependencies: @@ -13978,7 +13989,7 @@ snapshots: '@rollup/pluginutils@5.1.4(rollup@4.30.1)': dependencies: - '@types/estree': 1.0.6 + '@types/estree': 1.0.7 estree-walker: 2.0.2 picomatch: 4.0.2 optionalDependencies: @@ -13986,7 +13997,7 @@ snapshots: '@rollup/pluginutils@5.1.4(rollup@4.40.0)': dependencies: - '@types/estree': 1.0.6 + '@types/estree': 1.0.7 estree-walker: 2.0.2 picomatch: 4.0.2 optionalDependencies: @@ -14946,11 +14957,11 @@ snapshots: '@types/eslint-scope@3.7.7': dependencies: '@types/eslint': 9.6.1 - '@types/estree': 1.0.6 + '@types/estree': 1.0.7 '@types/eslint@9.6.1': dependencies: - '@types/estree': 1.0.6 + '@types/estree': 1.0.7 '@types/json-schema': 7.0.15 '@types/estree@1.0.6': {} @@ -15203,6 +15214,25 @@ snapshots: vite: 6.3.5(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.5.3))(terser@5.39.0)(yaml@2.7.0) vue: 3.4.34(typescript@5.8.2) + '@vitest/browser@3.1.1(msw@2.7.3(@types/node@22.13.1)(typescript@5.8.2))(playwright@1.52.0)(vite@6.3.5(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.4.31))(terser@5.39.0)(yaml@2.7.0))(vitest@3.1.1)': + dependencies: + '@testing-library/dom': 10.4.0 + '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.0) + '@vitest/mocker': 3.1.1(msw@2.7.3(@types/node@22.13.1)(typescript@5.8.2))(vite@6.3.5(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.4.31))(terser@5.39.0)(yaml@2.7.0)) + '@vitest/utils': 3.1.1 + magic-string: 0.30.17 + sirv: 3.0.1 + tinyrainbow: 2.0.0 + vitest: 3.1.1(@types/debug@4.1.12)(@types/node@22.13.1)(@vitest/browser@3.1.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(msw@2.7.3(@types/node@22.13.1)(typescript@5.8.2))(sass@1.85.0)(sugarss@4.0.1(postcss@8.4.31))(terser@5.39.0)(yaml@2.7.0) + ws: 8.18.2 + optionalDependencies: + playwright: 1.52.0 + transitivePeerDependencies: + - bufferutil + - msw + - utf-8-validate + - vite + '@vitest/browser@3.1.1(msw@2.7.3(@types/node@22.13.1)(typescript@5.8.2))(playwright@1.52.0)(vite@6.3.5(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.5.3))(terser@5.39.0)(yaml@2.7.0))(vitest@3.1.1)': dependencies: '@testing-library/dom': 10.4.0 @@ -15213,7 +15243,7 @@ snapshots: sirv: 3.0.1 tinyrainbow: 2.0.0 vitest: 3.1.1(@types/debug@4.1.12)(@types/node@22.13.1)(@vitest/browser@3.1.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(msw@2.7.3(@types/node@22.13.1)(typescript@5.8.2))(sass@1.85.0)(sugarss@4.0.1(postcss@8.5.3))(terser@5.39.0)(yaml@2.7.0) - ws: 8.18.1 + ws: 8.18.2 optionalDependencies: playwright: 1.52.0 transitivePeerDependencies: @@ -15233,7 +15263,7 @@ snapshots: sirv: 3.0.1 tinyrainbow: 2.0.0 vitest: 3.1.1(@types/debug@4.1.12)(@types/node@22.13.10)(@vitest/browser@3.1.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(msw@2.7.3(@types/node@22.13.10)(typescript@5.8.2))(sass@1.85.0)(sugarss@4.0.1(postcss@8.4.31))(terser@5.39.0)(yaml@2.7.0) - ws: 8.18.1 + ws: 8.18.2 optionalDependencies: playwright: 1.52.0 transitivePeerDependencies: @@ -15252,7 +15282,7 @@ snapshots: sirv: 3.0.1 tinyrainbow: 2.0.0 vitest: 3.1.1(@types/debug@4.1.12)(@types/node@22.13.10)(@vitest/browser@3.1.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(msw@2.7.3(@types/node@22.13.10)(typescript@5.8.2))(sass@1.85.0)(sugarss@4.0.1(postcss@8.5.3))(terser@5.37.0)(yaml@2.7.0) - ws: 8.18.1 + ws: 8.18.2 optionalDependencies: playwright: 1.52.0 transitivePeerDependencies: @@ -15271,7 +15301,7 @@ snapshots: sirv: 3.0.1 tinyrainbow: 2.0.0 vitest: 3.1.1(@types/debug@4.1.12)(@types/node@22.13.10)(@vitest/browser@3.1.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(msw@2.7.3(@types/node@22.13.10)(typescript@5.8.2))(sass@1.85.0)(sugarss@4.0.1(postcss@8.5.3))(terser@5.39.0)(yaml@2.7.0) - ws: 8.18.1 + ws: 8.18.2 optionalDependencies: playwright: 1.52.0 transitivePeerDependencies: @@ -15303,6 +15333,15 @@ snapshots: chai: 5.2.0 tinyrainbow: 2.0.0 + '@vitest/mocker@3.1.1(msw@2.7.3(@types/node@22.13.1)(typescript@5.8.2))(vite@6.3.5(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.4.31))(terser@5.39.0)(yaml@2.7.0))': + dependencies: + '@vitest/spy': 3.1.1 + estree-walker: 3.0.3 + magic-string: 0.30.17 + optionalDependencies: + msw: 2.7.3(@types/node@22.13.1)(typescript@5.8.2) + vite: 6.3.5(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.4.31))(terser@5.39.0)(yaml@2.7.0) + '@vitest/mocker@3.1.1(msw@2.7.3(@types/node@22.13.1)(typescript@5.8.2))(vite@6.3.5(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.5.3))(terser@5.39.0)(yaml@2.7.0))': dependencies: '@vitest/spy': 3.1.1 @@ -15492,7 +15531,7 @@ snapshots: '@web/config-loader@0.1.3': dependencies: - semver: 7.7.1 + semver: 7.7.2 '@webassemblyjs/ast@1.14.1': dependencies: @@ -15877,7 +15916,7 @@ snapshots: b4a@1.6.7: {} - babel-loader@9.2.1(@babel/core@7.26.10)(webpack@5.98.0): + babel-loader@9.2.1(@babel/core@7.26.10)(webpack@5.98.0(esbuild@0.25.1)): dependencies: '@babel/core': 7.26.10 find-cache-dir: 4.0.0 @@ -16328,6 +16367,8 @@ snapshots: colorette@2.0.20: {} + colorjs.io@0.5.2: {} + command-line-args@5.1.2: dependencies: array-back: 6.2.2 @@ -16478,7 +16519,7 @@ snapshots: dependencies: is-what: 3.14.1 - copy-webpack-plugin@12.0.2(webpack@5.98.0): + copy-webpack-plugin@12.0.2(webpack@5.98.0(esbuild@0.25.1)): dependencies: fast-glob: 3.3.3 glob-parent: 6.0.2 @@ -16573,7 +16614,7 @@ snapshots: dependencies: postcss: 8.4.31 - css-loader@7.1.2(webpack@5.98.0): + css-loader@7.1.2(webpack@5.98.0(esbuild@0.25.1)): dependencies: icss-utils: 5.1.0(postcss@8.5.3) postcss: 8.5.3 @@ -16582,7 +16623,7 @@ snapshots: postcss-modules-scope: 3.2.1(postcss@8.5.3) postcss-modules-values: 4.0.0(postcss@8.5.3) postcss-value-parser: 4.2.0 - semver: 7.7.1 + semver: 7.7.2 optionalDependencies: webpack: 5.98.0(esbuild@0.25.1) @@ -17396,7 +17437,7 @@ snapshots: estree-walker@3.0.3: dependencies: - '@types/estree': 1.0.6 + '@types/estree': 1.0.7 esutils@2.0.3: {} @@ -18478,7 +18519,7 @@ snapshots: '@babel/parser': 7.26.10 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.2 - semver: 7.7.1 + semver: 7.7.2 transitivePeerDependencies: - supports-color @@ -18719,7 +18760,7 @@ snapshots: legacy-javascript@0.0.1: {} - less-loader@12.2.0(less@4.2.2)(webpack@5.98.0): + less-loader@12.2.0(less@4.2.2)(webpack@5.98.0(esbuild@0.25.1)): dependencies: less: 4.2.2 optionalDependencies: @@ -18746,7 +18787,7 @@ snapshots: prelude-ls: 1.2.1 type-check: 0.4.0 - license-webpack-plugin@4.0.2(webpack@5.98.0): + license-webpack-plugin@4.0.2(webpack@5.98.0(esbuild@0.25.1)): dependencies: webpack-sources: 3.2.3 optionalDependencies: @@ -19214,7 +19255,7 @@ snapshots: mimic-response@4.0.0: {} - mini-css-extract-plugin@2.9.2(webpack@5.98.0): + mini-css-extract-plugin@2.9.2(webpack@5.98.0(esbuild@0.25.1)): dependencies: schema-utils: 4.3.0 tapable: 2.2.1 @@ -19311,7 +19352,7 @@ snapshots: pkg-types: 1.3.1 ufo: 1.5.4 - monaco-editor@0.52.2: {} + monaco-editor@0.52.2(patch_hash=7bb3e90ea5e88af3c2dd4178adc975df191ffc569dc81fcbbaa496122443cfa6): {} moo@0.5.2: {} @@ -20121,12 +20162,12 @@ snapshots: optionalDependencies: postcss: 8.4.31 - postcss-loader@8.1.1(postcss@8.5.2)(typescript@5.8.2)(webpack@5.98.0): + postcss-loader@8.1.1(postcss@8.5.2)(typescript@5.8.2)(webpack@5.98.0(esbuild@0.25.1)): dependencies: cosmiconfig: 9.0.0(typescript@5.8.2) jiti: 1.21.7 postcss: 8.5.2 - semver: 7.7.1 + semver: 7.7.2 optionalDependencies: webpack: 5.98.0(esbuild@0.25.1) transitivePeerDependencies: @@ -20832,7 +20873,7 @@ snapshots: safer-buffer@2.1.2: {} - sass-loader@16.0.5(sass@1.85.0)(webpack@5.98.0): + sass-loader@16.0.5(sass@1.85.0)(webpack@5.98.0(esbuild@0.25.1)): dependencies: neo-async: 2.6.2 optionalDependencies: @@ -21062,7 +21103,7 @@ snapshots: dependencies: color: 4.2.3 detect-libc: 2.0.3 - semver: 7.7.1 + semver: 7.7.2 optionalDependencies: '@img/sharp-darwin-arm64': 0.33.5 '@img/sharp-darwin-x64': 0.33.5 @@ -21270,7 +21311,7 @@ snapshots: source-map-js@1.2.1: {} - source-map-loader@5.0.0(webpack@5.98.0): + source-map-loader@5.0.0(webpack@5.98.0(esbuild@0.25.1)): dependencies: iconv-lite: 0.6.3 source-map-js: 1.2.1 @@ -21962,6 +22003,27 @@ snapshots: vary@1.1.2: {} + vite-node@3.1.1(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.4.31))(terser@5.39.0)(yaml@2.7.0): + dependencies: + cac: 6.7.14 + debug: 4.4.0 + es-module-lexer: 1.7.0 + pathe: 2.0.3 + vite: 6.3.5(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.4.31))(terser@5.39.0)(yaml@2.7.0) + transitivePeerDependencies: + - '@types/node' + - jiti + - less + - lightningcss + - sass + - sass-embedded + - stylus + - sugarss + - supports-color + - terser + - tsx + - yaml + vite-node@3.1.1(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.5.3))(terser@5.39.0)(yaml@2.7.0): dependencies: cac: 6.7.14 @@ -22135,6 +22197,25 @@ snapshots: terser: 5.39.0 yaml: 2.7.0 + vite@6.3.5(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.4.31))(terser@5.39.0)(yaml@2.7.0): + dependencies: + esbuild: 0.25.2 + fdir: 6.4.4(picomatch@4.0.2) + picomatch: 4.0.2 + postcss: 8.5.3 + rollup: 4.40.0 + tinyglobby: 0.2.13 + optionalDependencies: + '@types/node': 22.13.1 + fsevents: 2.3.3 + jiti: 2.4.2 + less: 4.2.2 + lightningcss: 1.30.0 + sass: 1.85.0 + sugarss: 4.0.1(postcss@8.4.31) + terser: 5.39.0 + yaml: 2.7.0 + vite@6.3.5(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.5.3))(terser@5.39.0)(yaml@2.7.0): dependencies: esbuild: 0.25.2 @@ -22215,6 +22296,46 @@ snapshots: optionalDependencies: vite: 6.3.5(@types/node@22.13.10)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.5.3))(terser@5.39.0)(yaml@2.7.0) + vitest@3.1.1(@types/debug@4.1.12)(@types/node@22.13.1)(@vitest/browser@3.1.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(msw@2.7.3(@types/node@22.13.1)(typescript@5.8.2))(sass@1.85.0)(sugarss@4.0.1(postcss@8.4.31))(terser@5.39.0)(yaml@2.7.0): + dependencies: + '@vitest/expect': 3.1.1 + '@vitest/mocker': 3.1.1(msw@2.7.3(@types/node@22.13.1)(typescript@5.8.2))(vite@6.3.5(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.4.31))(terser@5.39.0)(yaml@2.7.0)) + '@vitest/pretty-format': 3.1.3 + '@vitest/runner': 3.1.1 + '@vitest/snapshot': 3.1.1 + '@vitest/spy': 3.1.1 + '@vitest/utils': 3.1.1 + chai: 5.2.0 + debug: 4.4.0 + expect-type: 1.2.1 + magic-string: 0.30.17 + pathe: 2.0.3 + std-env: 3.9.0 + tinybench: 2.9.0 + tinyexec: 0.3.2 + tinypool: 1.0.2 + tinyrainbow: 2.0.0 + vite: 6.3.5(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.4.31))(terser@5.39.0)(yaml@2.7.0) + vite-node: 3.1.1(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.4.31))(terser@5.39.0)(yaml@2.7.0) + why-is-node-running: 2.3.0 + optionalDependencies: + '@types/debug': 4.1.12 + '@types/node': 22.13.1 + '@vitest/browser': 3.1.1(msw@2.7.3(@types/node@22.13.1)(typescript@5.8.2))(playwright@1.52.0)(vite@6.3.5(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.4.31))(terser@5.39.0)(yaml@2.7.0))(vitest@3.1.1) + transitivePeerDependencies: + - jiti + - less + - lightningcss + - msw + - sass + - sass-embedded + - stylus + - sugarss + - supports-color + - terser + - tsx + - yaml + vitest@3.1.1(@types/debug@4.1.12)(@types/node@22.13.1)(@vitest/browser@3.1.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(msw@2.7.3(@types/node@22.13.1)(typescript@5.8.2))(sass@1.85.0)(sugarss@4.0.1(postcss@8.5.3))(terser@5.39.0)(yaml@2.7.0): dependencies: '@vitest/expect': 3.1.1 @@ -22482,7 +22603,7 @@ snapshots: sockjs: 0.3.24 spdy: 4.0.2 webpack-dev-middleware: 7.4.2(webpack@5.98.0) - ws: 8.18.1 + ws: 8.18.2 optionalDependencies: webpack: 5.98.0(esbuild@0.25.1) transitivePeerDependencies: @@ -22499,7 +22620,7 @@ snapshots: webpack-sources@3.2.3: {} - webpack-subresource-integrity@5.1.0(webpack@5.98.0): + webpack-subresource-integrity@5.1.0(webpack@5.98.0(esbuild@0.25.1)): dependencies: typed-assert: 1.0.9 webpack: 5.98.0(esbuild@0.25.1) @@ -22509,7 +22630,7 @@ snapshots: webpack@5.98.0(esbuild@0.25.1): dependencies: '@types/eslint-scope': 3.7.7 - '@types/estree': 1.0.6 + '@types/estree': 1.0.7 '@webassemblyjs/ast': 1.14.1 '@webassemblyjs/wasm-edit': 1.14.1 '@webassemblyjs/wasm-parser': 1.14.1 diff --git a/projects/internals/metadata/static/lighthouse.json b/projects/internals/metadata/static/lighthouse.json index a9cb59a02..cc90030e8 100644 --- a/projects/internals/metadata/static/lighthouse.json +++ b/projects/internals/metadata/static/lighthouse.json @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1f9bc0385bef2c37840720d32f1f418554470a8ce71eaec4433f23db6d8450b6 -size 57169 +oid sha256:8f8ffa42678489c456983a45aa65c9b9de2a4450473b021ea2fdab2ff19fb8b5 +size 59564 diff --git a/projects/internals/vite/src/plugins/cem.config.mjs b/projects/internals/vite/src/plugins/cem.config.mjs index fafe83326..a74e11152 100644 --- a/projects/internals/vite/src/plugins/cem.config.mjs +++ b/projects/internals/vite/src/plugins/cem.config.mjs @@ -311,13 +311,14 @@ function rewriteExportedStringLiteralTypeAliasesPlugin() { // Evaluate types that look like this: // export type Interaction = 'emphasize' | 'destructive'; // export type FlatInteraction = 'flat' | `${'flat'}-${interaction}`; + // export type LineNumbersType = 'on' | 'off' | 'relative' | 'interval' | LineNumberFormatter; if (node.type.kind === ts.SyntaxKind.UnionType) { const typeAlias = node.name.escapedText; - const { types } = runtimeEnvironment.typeChecker.getTypeAtLocation(node); - if (types?.every(type => type.value !== undefined)) { - const stringLiterals = types.map(type => quoteWrap(type.value)); - stringLiteralsByTypeAlias.set(typeAlias, stringLiterals); - } + const stringLiterals = node.type.types.map(typeNode => { + const type = runtimeEnvironment.typeChecker.getTypeAtLocation(typeNode); + return type.value !== undefined ? quoteWrap(type.value) : typeNode.getText(); + }); + stringLiteralsByTypeAlias.set(typeAlias, stringLiterals); } // remove any @deprecated types diff --git a/projects/monaco/build/themes.ts b/projects/monaco/build/themes.ts new file mode 100644 index 000000000..4210eb651 --- /dev/null +++ b/projects/monaco/build/themes.ts @@ -0,0 +1,188 @@ +import fs from 'fs'; +import path from 'path'; +import { fileURLToPath } from 'url'; +import Color from 'colorjs.io'; + +// Tokens + +import lightTokens from '@nvidia-elements/themes/index.json' assert { type: 'json' }; +import darkTokens from '@nvidia-elements/themes/dark.json' assert { type: 'json' }; + +// Paths + +const scriptPath = path.dirname(fileURLToPath(import.meta.url)); +const inputPath = path.join(scriptPath, '../src/themes/'); +const outputPath = path.join(scriptPath, '../src/themes/generated/'); + +// Types + +type TokenColorWithAlphaRef = { token: string; alpha: number }; +type TokenColorRef = string | TokenColorWithAlphaRef; + +interface TokenBasedRule extends Record { + foreground?: TokenColorRef; + background?: TokenColorRef; +} + +interface TokenBasedThemeJSON extends Record { + colors: Record; + rules: TokenBasedRule[]; +} + +// Type Guards + +function hasProperties>( + value: unknown, + props: Record boolean> +): value is T { + if (!isObject(value)) { + return false; + } + return Object.entries(props).every(([key, guard]) => guard(value[key])); +} + +function isNumber(value: unknown): value is number { + return typeof value === 'number'; +} + +function isObject(value: unknown): value is Record { + return typeof value === 'object' && value !== null; +} + +function isOptional(guard: (v: unknown) => v is T): (v: unknown) => v is T | undefined { + return (value): value is T | undefined => value === undefined || guard(value); +} + +function isRecordOf(value: unknown, guard: (v: unknown) => v is T): value is Record { + return isObject(value) && Object.values(value).every(guard); +} + +function isString(value: unknown): value is string { + return typeof value === 'string'; +} + +function isTokenColorWithAlphaRef(ref: unknown): ref is TokenColorWithAlphaRef { + return hasProperties(ref, { + token: isString, + alpha: isNumber + }); +} + +function isTokenColorRef(ref: unknown): ref is TokenColorRef { + return isString(ref) || isTokenColorWithAlphaRef(ref); +} + +function isTokenBasedRule(rule: unknown): rule is TokenBasedRule { + return hasProperties(rule, { + foreground: isOptional(isTokenColorRef), + background: isOptional(isTokenColorRef) + }); +} + +function isTokenBasedThemeJSON(json: unknown): json is TokenBasedThemeJSON { + if (!isObject(json)) return false; + + return hasProperties(json, { + colors: value => isRecordOf(value, isTokenColorRef), + rules: value => isRecordOf(value, isTokenBasedRule) + }); +} + +// Theme processing logic + +function lookupTokenValue(path: string, tokens: Record): string { + try { + const tokenKey = `nve-${path.replace(/\./g, '-')}`; + if (tokenKey in tokens) { + const value = tokens[tokenKey]; + if (typeof value === 'string') { + return value; + } + throw new Error(`Token value is not a string: ${path}`); + } + throw new Error(`Token not found: ${path}`); + } catch (error) { + throw new Error( + `Failed to lookup token value for path "${path}": ${error instanceof Error ? error.message : String(error)}` + ); + } +} + +function parseColor(value: string) { + try { + const color = new Color(value); + return color; + } catch (error) { + throw new Error(`Invalid color value: ${value}`); + } +} + +function rewriteColor(ref: TokenColorRef, tokens: Record): string { + if (isString(ref)) { + const value = lookupTokenValue(ref, tokens); + return parseColor(value).to('srgb').toString({ format: 'hex', collapse: false }); + } + + const baseValue = lookupTokenValue(ref.token, tokens); + const color = parseColor(baseValue); + color.alpha = ref.alpha; + return color.to('srgb').toString({ format: 'hex', collapse: false }); +} + +function rewriteColors(colors: Record, tokens: Record): Record { + return Object.fromEntries(Object.entries(colors).map(([key, ref]) => [key, rewriteColor(ref, tokens)])); +} + +function rewriteRule(rule: TokenBasedRule, tokens: Record): TokenBasedRule { + const result: TokenBasedRule = { ...rule }; + if (rule.foreground !== undefined) { + result.foreground = rewriteColor(rule.foreground, tokens); + } + + if (rule.background !== undefined) { + result.background = rewriteColor(rule.background, tokens); + } + return result; +} + +function rewriteRules(rules: TokenBasedRule[], tokens: Record): TokenBasedRule[] { + return rules.map(rule => rewriteRule(rule, tokens)); +} + +function buildTheme(filePath: string, tokens: Record) { + try { + const theme = JSON.parse(fs.readFileSync(filePath, 'utf8')); + if (!isTokenBasedThemeJSON(theme)) { + throw new Error(`Invalid theme structure in file: ${filePath}`); + } + + const colors = rewriteColors(theme.colors, tokens); + const rules = rewriteRules(theme.rules, tokens); + + return { ...theme, colors, rules }; + } catch (error) { + throw new Error( + `Failed to build theme from file "${filePath}": ${error instanceof Error ? error.message : String(error)}` + ); + } +} + +// Main + +try { + const lightTheme = buildTheme(path.join(inputPath, 'light.json'), lightTokens); + const darkTheme = buildTheme(path.join(inputPath, 'dark.json'), darkTokens); + + // Ensure output directory exists + if (!fs.existsSync(outputPath)) { + fs.mkdirSync(outputPath, { recursive: true }); + } + + fs.writeFileSync(path.join(outputPath, 'light.json'), JSON.stringify(lightTheme, null, 2)); + fs.writeFileSync(path.join(outputPath, 'dark.json'), JSON.stringify(darkTheme, null, 2)); + + console.log('Successfully built themes'); +} catch (error) { + console.error('Failed to build themes:', error); + process.exit(1); +} diff --git a/projects/monaco/build/tsconfig.json b/projects/monaco/build/tsconfig.json new file mode 100644 index 000000000..faf13feec --- /dev/null +++ b/projects/monaco/build/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "skipLibCheck": true, + "target": "es2022", + "lib": ["es2022"], + "types": ["node"], + "module": "NodeNext", + "moduleResolution": "NodeNext", + "noEmit": true, + "resolveJsonModule": true, + "strict": true, + "baseUrl": "../", + "allowSyntheticDefaultImports": true, + "isolatedModules": true, + "verbatimModuleSyntax": true, + "paths": { + "@nvidia-elements/*": ["../*"] + } + }, + "include": ["./**/*.ts"] +} diff --git a/projects/monaco/package.json b/projects/monaco/package.json index 8b63615dd..8fe9f7f22 100644 --- a/projects/monaco/package.json +++ b/projects/monaco/package.json @@ -14,7 +14,13 @@ "customData": [ "./dist/data.html.json" ] - } + }, + "snippets": [ + { + "language": "html", + "path": "./dist/data.snippets.json" + } + ] }, "files": [ "README.md", @@ -28,15 +34,23 @@ "types": "./dist/custom-elements-jsx.d.ts" }, "./data.html.json": "./dist/data.html.json", + "./data.snippets.json": "./dist/data.snippets.json", "./*.stories.json": "./dist/*.stories.json", ".": { "types": "./dist/index.d.ts", "default": "./dist/index.js" }, + "./types": { + "types": "./dist/types.d.ts" + }, "./index.js": { "types": "./dist/index.d.ts", "default": "./dist/index.js" }, + "./monaco.js": { + "types": "./dist/monaco.d.ts", + "default": "./dist/monaco.js" + }, "./editor": { "types": "./dist/editor/index.d.ts", "default": "./dist/editor/index.js" @@ -48,6 +62,38 @@ "./editor/define.js": { "types": "./dist/editor/define.d.ts", "default": "./dist/editor/define.js" + }, + "./input": { + "types": "./dist/input/index.d.ts", + "default": "./dist/input/index.js" + }, + "./input/index.js": { + "types": "./dist/input/index.d.ts", + "default": "./dist/input/index.js" + }, + "./input/define.js": { + "types": "./dist/input/define.d.ts", + "default": "./dist/input/define.js" + }, + "./workers/json.worker.js": { + "types": "./dist/workers/json.worker.d.ts", + "default": "./dist/workers/json.worker.js" + }, + "./workers/css.worker.js": { + "types": "./dist/workers/css.worker.d.ts", + "default": "./dist/workers/css.worker.js" + }, + "./workers/html.worker.js": { + "types": "./dist/workers/html.worker.d.ts", + "default": "./dist/workers/html.worker.js" + }, + "./workers/ts.worker.js": { + "types": "./dist/workers/ts.worker.d.ts", + "default": "./dist/workers/ts.worker.js" + }, + "./workers/editor.worker.js": { + "types": "./dist/workers/editor.worker.d.ts", + "default": "./dist/workers/editor.worker.js" } }, "sideEffects": true, @@ -57,6 +103,7 @@ "build": "wireit", "build:watch": "wireit", "build:snippets": "wireit", + "build:themes": "wireit", "lint": "wireit", "test": "wireit", "test:axe": "wireit", @@ -81,9 +128,12 @@ "@nve-internals/eslint": "workspace:*", "@nve-internals/vite": "workspace:*", "@nvidia-elements/snippets": "workspace:*", + "@types/node": "catalog:", "@vitest/browser": "catalog:", "@vitest/coverage-istanbul": "catalog:", + "colorjs.io": "0.5.2", "eslint": "catalog:", + "postcss": "8.4.31", "publint": "catalog:", "typescript": "catalog:", "vite": "catalog:", @@ -129,15 +179,20 @@ "!src/**/*.test.axe.ts", "!src/**/*.test.ssr.ts", "!src/**/__screenshots__/**", + "!src/themes/generated/**", "package.json", "tsconfig.json", "tsconfig.lib.json", - "vite.config.ts" + "vite.config.ts", + "postcss.config.js" ], "output": [ - "dist/**" + "dist/**", + "!dist/data.snippets.json" ], "dependencies": [ + "build:snippets", + "build:themes", "../internals/vite:ci", { "script": "../elements:build", @@ -156,6 +211,31 @@ "build" ] }, + "build:snippets": { + "command": "@nve-snippets", + "files": [ + "**/*.snippets.html" + ], + "output": [ + "dist/data.snippets.json" + ] + }, + "build:themes": { + "command": "node --experimental-transform-types ./build/themes.ts", + "files": [ + "../themes/dist/**/*.json", + "src/themes/*.json" + ], + "output": [ + "src/themes/generated/*.json" + ], + "dependencies": [ + { + "script": "../themes:build", + "cascade": false + } + ] + }, "test": { "command": "playwright-lock 'vitest run'", "files": [ @@ -240,7 +320,8 @@ "files": [ "src/**/*.ts", "eslint.config.js", - "!src/**/__screenshots__/**" + "!src/**/__screenshots__/**", + "!src/themes/generated/**" ], "output": [], "dependencies": [ diff --git a/projects/monaco/postcss.config.js b/projects/monaco/postcss.config.js new file mode 100644 index 000000000..569a0881d --- /dev/null +++ b/projects/monaco/postcss.config.js @@ -0,0 +1,23 @@ +// @font-face() declarations within the Shadow DOM do not currently work in Chrome +// See: https://bugs.chromium.org/p/chromium/issues/detail?id=336876 + +// Workaround: +// - Remove the @font-face declarations (with inlined TTF) when importing monaco-editor CSS files +// - Dynamically create a +
    + + + + + + +
    + + ` +}; + +const csv = ` +resource_id,cpu_usage_percent,memory_usage_gb,storage_used_tb,network_traffic_gb +instance-001,45.2,8.5,2.3,156.7 +instance-002,78.9,12.3,4.1,289.4 +instance-003,23.4,4.2,1.5,89.3 +instance-004,92.1,16.7,5.8,412.6 +instance-005,34.7,6.8,2.9,178.2 +instance-006,67.8,10.1,3.7,256.9 +instance-007,12.5,2.9,0.8,45.6 +instance-008,88.3,14.5,4.9,378.1 +instance-009,56.4,9.2,3.2,198.5 +instance-010,41.2,7.6,2.5,167.8`.trim(); + +export type CSVValue = string; + +export class CSVExample extends FormControlMixin(LitElement) { + static readonly metadata = { + tag: 'ui-csv-grid', + version: '0.0.0', + validators: [csvStringValidator], + valueSchema: { + type: 'string' as const + }, + }; + + static styles = [ + css`:host { + display: block; + width: 100%; + }` + ]; + + get #getCSV() { + const rows = this.value.trim().split('\n'); + return { + columns: rows[0].split(','), + rows: rows.slice(1).map(row => row.split(',')) + }; + } + + render() { + return this.value + ? html` + + + ${this.#getCSV.columns.map(column => html`${column}`)} + + ${this.#getCSV.rows.map(row => html`${row.map(cell => html`${cell}`)}`)} + + ` + : nothing; + } +} + +customElements.get('ui-csv-grid') || customElements.define('ui-csv-grid', CSVExample); + +function csvStringValidator(value: string): ValidatorResult { + const message = isValidCSV(value); + if (message !== true) { + return { validity: { badInput: true }, message }; + } else { + return { validity: {} }; + } +} + +function isValidCSV(csvString: string): true | string { + if (!csvString || csvString.trim().length === 0) { + return 'empty'; + } + + const lines = csvString.split('\n'); + const firstLine = lines[0]; + const columnCount = (firstLine.match(/,/g) || []).length + 1; + + for (let i = 0; i < lines.length; i++) { + const line = lines[i]; + + // Skip empty lines + if (line.trim().length === 0) { + continue; + } + + // Check for unclosed quotes + let inQuotes = false; + for (let j = 0; j < line.length; j++) { + const char = line[j]; + + if (char === '"') { + // Check for escaped quotes + if (j > 0 && line[j - 1] === '\\') { + continue; + } + inQuotes = !inQuotes; + } + } + + if (inQuotes) { + return 'csv contains unclosed quotes'; + } + + // Check if the number of columns matches the first line + const currentColumnCount = (line.match(/,/g) || []).length + 1; + if (currentColumnCount !== columnCount) { + return 'csv contains invalid column count'; + } + } + + return true; +} diff --git a/projects/labs/forms/src/stories/index.stories.ts b/projects/labs/forms/src/stories/index.stories.ts deleted file mode 100644 index de5a22e56..000000000 --- a/projects/labs/forms/src/stories/index.stories.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { html } from 'lit'; -import { VERSION } from '../index.js'; - -export default { - title: 'Labs/Forms/Examples' -}; - -export const Default = { - render: () => html` -

    Forms v${VERSION}

    -` -}; diff --git a/projects/labs/forms/src/stories/light.stories.ts b/projects/labs/forms/src/stories/light.stories.ts new file mode 100644 index 000000000..5cdcc23fa --- /dev/null +++ b/projects/labs/forms/src/stories/light.stories.ts @@ -0,0 +1,195 @@ +import { html, LitElement, nothing, unsafeCSS } from 'lit'; +import { FormControlMixin } from '@nvidia-elements/forms/mixin'; +import './light.stories.js'; + +export default { + title: 'Labs/Forms/Examples' +}; + +export const Light = { + render: () => html` +
    + + 
    
+
    
+
+
+`
+};
+
+export const Events = {
+  render: () => html`
+
    
+  
+  
    
+  
    
+    
+    
+    
+  
    
+
    
+
+
+`
+};
+
+const styles = /* css */ `
+:host,
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+  max-width: 240px;
+}
+
+:host(:invalid) {
+  outline: 2px dashed red;
+}
+
+form {
+  position: relative;
+  min-width: 50px;
+  min-height: 50px;
+  display: flex;
+  align-items: center;
+  gap: var(--nve-ref-space-xs);
+  background: var(--nve-sys-interaction-background-200);
+  padding: var(--nve-ref-size-300);
+  border-radius: var(--nve-ref-border-radius-lg);
+}
+
+nve-icon {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  pointer-events: none;
+  z-index: 99;
+}
+
+input[name='status'] {
+  opacity: 0;
+  height: 20px;
+  width: 20px;
+}
+`;
+
+export interface LightCardValue {
+  status: 'off' | 'on';
+  dim: number;
+}
+
+/**
+ * Example of a custom element that uses the FormControlMixin with LitElement
+ */
+export class LightCard extends FormControlMixin(LitElement) {
+  static readonly metadata = {
+    tag: 'ui-light-card',
+    version: '0.0.0',
+    strict: false,
+    valueSchema: {
+      type: 'object' as const,
+      properties: {
+        status: {
+          type: 'enum' as const,
+          enum: ['off', 'on']
+        },
+        dim: {
+          type: 'number' as const,
+          minimum: 0,
+          maximum: 100
+        }
+      },
+      required: ['status', 'dim']
+    }
+  };
+
+  static styles = unsafeCSS(styles);
+
+  render() {
+    return this.value
+      ? html`
+    
    
+      
+      ${
+        this.readonly
+          ? nothing
+          : html`
+        
+        
+      `
+      }
+    
    `
+      : nothing;
+  }
+
+  constructor() {
+    super();
+    this.value = { status: 'off', dim: 50 };
+  }
+
+  #updateValue(event: Event) {
+    const form = this.shadowRoot?.querySelector('form') as HTMLFormElement;
+    this.value = { status: form.status.checked ? 'on' : 'off', dim: form.dim.valueAsNumber };
+    this.dispatchUpdateEvent(event.type as 'input' | 'change');
+  }
+}
+
+customElements.get('ui-light-card') ?? customElements.define('ui-light-card', LightCard);
\ No newline at end of file
diff --git a/projects/labs/forms/src/stories/simple.stories.ts b/projects/labs/forms/src/stories/simple.stories.ts
new file mode 100644
index 000000000..9055fe850
--- /dev/null
+++ b/projects/labs/forms/src/stories/simple.stories.ts
@@ -0,0 +1,184 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { FormControlMixin } from '@nvidia-elements/forms/mixin';
+
+export default {
+  title: 'Labs/Forms/Examples'
+};
+
+export const Simple = {
+  render: () => html`
+
    
+  
+  
    
+
    
+
+
+`
+};
+
+export const SimpleEvents = {
+  render: () => html`
+
    
+  
+  
    
+  
    
+    
+    
+    
+    
+  
    
+
    
+
+
+`
+};
+
+export interface QualityControlValue {
+  good: boolean;
+  fast: boolean;
+  cheap: boolean;
+}
+
+function qualityValidator(value: QualityControlValue) {
+  if (value.good && value.fast && value.cheap) {
+    return {
+      validity: { badInput: true },
+      message: 'at least one value must be false'
+    };
+  }
+  return { validity: { } };
+}
+
+/**
+ * Example of a custom element that uses the FormControlMixin with LitElement
+ */
+export class QualityControl extends FormControlMixin(LitElement) {
+  static styles = [
+    css`
+    :host {
+      display: block;
+    }
+
+    :host(:invalid) {
+      outline: 2px dashed red;
+    }
+    `
+  ];
+
+  static readonly metadata = {
+    tag: 'ui-quality-control',
+    version: '0.0.0',
+    strict: true,
+    validators: [qualityValidator],
+    valueSchema: {
+      type: 'object' as const,
+      properties: {
+        good: {
+          type: 'boolean' as const
+        },
+        fast: {
+          type: 'boolean' as const
+        },
+        cheap: {
+          type: 'boolean' as const
+        }
+      },
+      required: ['good', 'fast', 'cheap']
+    }
+  };
+
+  render() {
+    return this.value
+      ? html`
+    
    
+      
+      
+      
+    
    `
+      : nothing;
+  }
+
+  constructor() {
+    super();
+    this.value = { good: true, fast: true, cheap: true };
+  }
+
+  #updateValue(event: Event) {
+    const form = this.shadowRoot?.querySelector('form') as HTMLFormElement;
+    this.value = { good: form.good.checked, fast: form.fast.checked, cheap: form.cheap.checked };
+    this.dispatchUpdateEvent(event.type as 'input' | 'change');
+  }
+}
+
+customElements.get('ui-quality-control') ?? customElements.define('ui-quality-control', QualityControl);
\ No newline at end of file
diff --git a/projects/labs/forms/src/stories/visualization.stories.ts b/projects/labs/forms/src/stories/visualization.stories.ts
new file mode 100644
index 000000000..82cc90261
--- /dev/null
+++ b/projects/labs/forms/src/stories/visualization.stories.ts
@@ -0,0 +1,212 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { FormControlMixin } from '@nvidia-elements/forms/mixin';
+import '@nvidia-elements/core/color/define.js';
+import '@nvidia-elements/core/radio/define.js';
+import '@nvidia-elements/core/range/define.js';
+import './visualization.stories.js';
+
+export default {
+  title: 'Labs/Forms/Examples'
+};
+
+export const Visualization = {
+  render: () => html`
+
    
+  
    
+    
+      
+      
+    
+    
+      
+      
+        
+        
+      
+      
+        
+        
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+  
    
+  
+  
+
    
+
+`
+};
+
+const styles = css`
+:host {
+  display: block;
+}
+
+form {
+  background: var(--nve-sys-layer-container-background);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.1);
+}
+
+label {
+  display: flex;
+  align-items: center;
+  line-height: 1;
+  gap: 0.5rem;
+}
+
+input {
+  margin: 4px 0;
+}
+
+pre {
+  background: color-mix(in oklab, var(--nve-sys-layer-container-background) 100%, var(--nve-sys-text-muted-color) 7%);
+  padding: 12px;
+  margin: 0;
+}
+`;
+
+export interface DrawValue {
+  color: string;
+  shape: 'circle' | 'square';
+  scale: number;
+  particleCount: number;
+}
+
+export class Draw extends FormControlMixin(LitElement) {
+  static readonly metadata = {
+    version: '0.0.0',
+    tag: 'ui-entity-draw',
+    valueSchema: {
+      type: 'object' as const,
+      properties: {
+        color: {
+          type: 'string' as const,
+          format: 'color'
+        },
+        shape: {
+          type: 'enum' as const,
+          enum: ['circle', 'square']
+        },
+        scale: {
+          type: 'number' as const,
+          minimum: 1,
+          maximum: 100
+        },
+        particleCount: {
+          type: 'number' as const,
+          minimum: 1,
+          maximum: 10000
+        }
+      },
+      required: ['color', 'shape', 'scale', 'particleCount']
+    }
+  };
+
+  static styles = [
+    styles,
+    css`canvas {border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);}`
+  ];
+
+  #shapes: Array<{ x: number; y: number; rotation: number }> = [];
+  #canvas?: HTMLCanvasElement;
+  #animationFrame?: number;
+
+  render() {
+    return this.value
+      ? html`
+      
    
+        
+        
    ${JSON.stringify(this.value, null, 2)}
    
+      
    
+    `
+      : nothing;
+  }
+
+  constructor() {
+    super();
+    this.updateValue({ color: '#000000', shape: 'circle', scale: 50, particleCount: 20 });
+  }
+
+  firstUpdated() {
+    this.#canvas = this.renderRoot.querySelector('canvas');
+    this.#startAnimation();
+  }
+
+  updated(changedProperties: Map) {
+    super.updated(changedProperties);
+    if (this.value.particleCount !== this.#shapes.length) {
+      this.#shapes = new Array(this.value.particleCount).fill(0).map(() => {
+        return { x: Math.random() * 400, y: Math.random() * 400, rotation: Math.random() * Math.PI * 2 };
+      });
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.#animationFrame) {
+      cancelAnimationFrame(this.#animationFrame);
+    }
+  }
+
+  #startAnimation() {
+    const animate = () => {
+      this.#render(this.value);
+      this.#animationFrame = requestAnimationFrame(animate);
+    };
+    animate();
+  }
+
+  #render(value: DrawValue) {
+    const ctx = this.#canvas.getContext('2d');
+    ctx.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
+
+    const size = value.scale / 2.5;
+    this.#shapes.forEach((shape, i) => {
+      shape.y += Math.sin((Date.now() + i * 500) / 1000) * 0.5;
+      shape.x += Math.cos((Date.now() + i * 500) / 1000) * 0.5;
+      shape.rotation += 0.01;
+      shape.x = (shape.x + this.#canvas!.width) % this.#canvas!.width;
+      shape.y = (shape.y + this.#canvas!.height) % this.#canvas!.height;
+
+      ctx.save();
+      ctx.translate(shape.x, shape.y);
+      ctx.rotate(shape.rotation);
+      ctx.fillStyle = value.color;
+
+      if (value.shape === 'circle') {
+        ctx.beginPath();
+        ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
+        ctx.fill();
+      } else {
+        ctx.fillRect(-size / 2, -size / 2, size, size);
+      }
+
+      ctx.restore();
+    });
+  }
+}
+
+customElements.get('ui-entity-draw') || customElements.define('ui-entity-draw', Draw);
diff --git a/projects/labs/forms/vitest.config.ts b/projects/labs/forms/vitest.config.ts
index 9566f10bd..6f417b312 100644
--- a/projects/labs/forms/vitest.config.ts
+++ b/projects/labs/forms/vitest.config.ts
@@ -6,12 +6,13 @@ export default mergeConfig(libraryTestConfig, {
   test: {
     include: ['./src/**/*.test.ts'],
     alias: { '@nvidia-elements/forms': resolve(import.meta.dirname, './src') },
+    setupFiles: [],
     coverage: {
       thresholds: {
-        lines: 90,
-        branches: 90,
-        functions: 90,
-        statements: 90
+        lines: 96,
+        branches: 93,
+        functions: 95,
+        statements: 95
       }
     }
   }
diff --git a/projects/site/package.json b/projects/site/package.json
index ed9de6dac..1bd9d1849 100644
--- a/projects/site/package.json
+++ b/projects/site/package.json
@@ -33,7 +33,9 @@
         "../styles:build",
         "../themes:build",
         "../labs/code:build",
+        "../labs/forms:build",
         "../monaco:build",
+        "../internals/metadata:build",
         "../internals/patterns:build"
       ],
       "env": {

From 29fa038dbe522738d67646186d5d9007c8caeffd Mon Sep 17 00:00:00 2001
From: semantic-release-bot 
Date: Tue, 27 May 2025 21:18:08 +0000
Subject: [PATCH 0180/1100] chore(release): @nve-labs/forms-v1.0.0 [skip ci]

## @nve-labs/forms-v1.0.0 (2025-05-27)

### Features

* **labs-forms:** initial implementation ([bc7849e](https://gitlab-master.nvidia.com/ai-infra/elements/commit/bc7849eb1b0b9312a19fd7d421b2922864291465))
---
 projects/labs/forms/CHANGELOG.md | 6 ++++++
 projects/labs/forms/package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/projects/labs/forms/CHANGELOG.md b/projects/labs/forms/CHANGELOG.md
index e69de29bb..bed33bc7d 100644
--- a/projects/labs/forms/CHANGELOG.md
+++ b/projects/labs/forms/CHANGELOG.md
@@ -0,0 +1,6 @@
+## @nvidia-elements/forms-v1.0.0 (2025-05-27)
+
+
+### Features
+
+* **labs-forms:** initial implementation ([0ff272c](https://github.com/NVIDIA/elements/commit/0ff272c5a108859c476a96bc96cdd3f3161ddf96))
diff --git a/projects/labs/forms/package.json b/projects/labs/forms/package.json
index 37b76970a..12da6e535 100644
--- a/projects/labs/forms/package.json
+++ b/projects/labs/forms/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nvidia-elements/forms",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "description": "",
   "homepage": "https://NVIDIA.github.io/elements/",
   "repository": {

From 29bc135125308bd8a95560ed9744c3fb2cf9c8a2 Mon Sep 17 00:00:00 2001
From: John Yanarella 
Date: Tue, 27 May 2025 15:05:17 -0700
Subject: [PATCH 0181/1100] chore(ci): add support for vendored code

---
 .gitignore                                          |  1 +
 .prettierignore                                     |  1 +
 projects/internals/eslint/src/configs/app.js        | 11 ++++++++++-
 projects/internals/eslint/src/configs/javascript.js | 11 ++++++++++-
 projects/internals/eslint/src/configs/library.js    | 11 ++++++++++-
 projects/internals/eslint/src/configs/lit.js        | 11 ++++++++++-
 projects/internals/eslint/src/configs/typescript.js | 11 ++++++++++-
 7 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/.gitignore b/.gitignore
index c0d145bea..b91367097 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@ dist-storybook
 .visual/dist
 *.diff.png
 coverage
+vendor/
 projects/elements/src/icon/icons.ts
 projects/elements/index.html
 projects/monaco/src/themes/generated
diff --git a/.prettierignore b/.prettierignore
index e87711035..48d2830d5 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -19,5 +19,6 @@ projects/elements/src/icon/server.ts
 projects/elements-react/src/**/*
 projects/internals/metadata/static/*.json
 projects/monaco/src/themes/generated/*
+projects/**/src/vendor/**/*
 projects/**/.screencast/.auth/*
 .vscode/*.json.code-snippets
\ No newline at end of file
diff --git a/projects/internals/eslint/src/configs/app.js b/projects/internals/eslint/src/configs/app.js
index bf947c2ad..2ec0bf7ec 100644
--- a/projects/internals/eslint/src/configs/app.js
+++ b/projects/internals/eslint/src/configs/app.js
@@ -1,7 +1,16 @@
 import { config } from '@weiran.zsd/multi-eslint-rule-config'; // https://github.com/eslint/eslint/issues/19013
 
 const source = ['src/**/*.ts', 'src/**/*.d.ts'];
-const ignores = ['node_modules/', 'coverage/', 'dist/', 'build/', '.visual/', '.lighthouse/', '.wireit/'];
+const ignores = [
+  'node_modules/',
+  'coverage/',
+  'dist/',
+  'build/',
+  'src/vendor/',
+  '.visual/',
+  '.lighthouse/',
+  '.wireit/'
+];
 
 /** @type {import('eslint').Linter.Config[]} */
 export const appConfig = [
diff --git a/projects/internals/eslint/src/configs/javascript.js b/projects/internals/eslint/src/configs/javascript.js
index 10688ab07..c83ef9b3f 100644
--- a/projects/internals/eslint/src/configs/javascript.js
+++ b/projects/internals/eslint/src/configs/javascript.js
@@ -2,7 +2,16 @@ import js from '@eslint/js';
 import globals from 'globals';
 
 const source = ['src/**/*.js'];
-const ignores = ['node_modules/', 'coverage/', 'dist/', 'build/', '.visual/', '.lighthouse/', '.wireit/'];
+const ignores = [
+  'node_modules/',
+  'coverage/',
+  'dist/',
+  'build/',
+  'src/vendor/',
+  '.visual/',
+  '.lighthouse/',
+  '.wireit/'
+];
 
 const config = {
   files: [...source],
diff --git a/projects/internals/eslint/src/configs/library.js b/projects/internals/eslint/src/configs/library.js
index bc66eee16..a338e3243 100644
--- a/projects/internals/eslint/src/configs/library.js
+++ b/projects/internals/eslint/src/configs/library.js
@@ -10,7 +10,16 @@ const tests = [
   '**/*.test.ssr.ts'
 ];
 const stories = ['**/*.stories.ts'];
-const ignores = ['node_modules/', 'coverage/', 'dist/', 'build/', '.visual/', '.lighthouse/', '.wireit/'];
+const ignores = [
+  'node_modules/',
+  'coverage/',
+  'dist/',
+  'build/',
+  'src/vendor/',
+  '.visual/',
+  '.lighthouse/',
+  '.wireit/'
+];
 
 /** @type {import('eslint').Linter.Config[]} */
 export const libraryConfig = [
diff --git a/projects/internals/eslint/src/configs/lit.js b/projects/internals/eslint/src/configs/lit.js
index 5d56c55c1..9216f2e45 100644
--- a/projects/internals/eslint/src/configs/lit.js
+++ b/projects/internals/eslint/src/configs/lit.js
@@ -17,7 +17,16 @@ const tests = [
   '**/*.test.ssr.ts'
 ];
 const stories = ['**/*.stories.ts'];
-const ignores = ['node_modules/', 'coverage/', 'dist/', 'build/', '.visual/', '.lighthouse/', '.wireit/'];
+const ignores = [
+  'node_modules/',
+  'coverage/',
+  'dist/',
+  'build/',
+  'src/vendor/',
+  '.visual/',
+  '.lighthouse/',
+  '.wireit/'
+];
 
 rulesdir.RULES_DIR = resolve(url.fileURLToPath(new URL('.', import.meta.url)), '../plugins');
 
diff --git a/projects/internals/eslint/src/configs/typescript.js b/projects/internals/eslint/src/configs/typescript.js
index ba9914b0c..dff95396e 100644
--- a/projects/internals/eslint/src/configs/typescript.js
+++ b/projects/internals/eslint/src/configs/typescript.js
@@ -12,7 +12,16 @@ const tests = [
   '**/*.test.ssr.ts'
 ];
 const stories = ['**/*.stories.ts'];
-const ignores = ['node_modules/', 'coverage/', 'dist/', 'build/', '.visual/', '.lighthouse/', '.wireit/'];
+const ignores = [
+  'node_modules/',
+  'coverage/',
+  'dist/',
+  'build/',
+  'src/vendor/',
+  '.visual/',
+  '.lighthouse/',
+  '.wireit/'
+];
 
 /** @type {import('eslint').Linter.Config[]} */
 const config = {

From 3c77d95f09af13a46aa039a191a3012e72823bab Mon Sep 17 00:00:00 2001
From: John Yanarella 
Date: Tue, 27 May 2025 15:05:49 -0700
Subject: [PATCH 0182/1100] fix(monaco): prebundle vendored code

---
 package.json                                  |   2 +
 pnpm-lock.yaml                                | 290 +++++++++++++++++-
 projects/monaco/build/prebundle.ts            | 116 +++++++
 projects/monaco/package.json                  |  51 ++-
 projects/monaco/postcss.config.js             |  23 --
 projects/monaco/src/editor.main.css           |   2 +-
 projects/monaco/src/editor.main.ts            |   2 +-
 .../src/editor/editor.test.lighthouse.ts      |   6 +-
 .../monaco/src/input/input.test.lighthouse.ts |  22 +-
 projects/monaco/src/input/input.test.ts       |   2 +-
 projects/monaco/src/monaco.test.ts            |  12 +-
 projects/monaco/src/monaco.ts                 |   2 +-
 projects/monaco/src/themes/index.test.ts      |   4 +-
 projects/monaco/src/types.ts                  |   2 +-
 projects/monaco/src/workers/css.worker.ts     |   2 +-
 projects/monaco/src/workers/editor.worker.ts  |   2 +-
 projects/monaco/src/workers/html.worker.ts    |   2 +-
 projects/monaco/src/workers/json.worker.ts    |   2 +-
 projects/monaco/src/workers/ts.worker.ts      |   2 +-
 projects/monaco/vite.config.ts                |  61 +---
 projects/monaco/vitest.axe.ts                 |  10 -
 projects/monaco/vitest.config.ts              |  15 +-
 projects/monaco/vitest.lighthouse.ts          |  10 -
 23 files changed, 469 insertions(+), 173 deletions(-)
 create mode 100644 projects/monaco/build/prebundle.ts
 delete mode 100644 projects/monaco/postcss.config.js

diff --git a/package.json b/package.json
index 5d0b986bd..7013bef6c 100644
--- a/package.json
+++ b/package.json
@@ -200,6 +200,8 @@
         "!projects/internals/metadata/static/**",
         "!projects/elements-react/src/**/*",
         "!projects/monaco/src/themes/generated/**",
+        "!projects/**/src/vendor/**/*",
+        "!projects/**/.screencast/.auth/*",
         "!projects/starters/nextjs/next-env.d.ts"
       ],
       "output": []
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 250bb3f3b..8cc80f737 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -781,9 +781,6 @@ importers:
       lit:
         specifier: 'catalog:'
         version: 3.2.1
-      monaco-editor:
-        specifier: 0.52.2
-        version: 0.52.2(patch_hash=7bb3e90ea5e88af3c2dd4178adc975df191ffc569dc81fcbbaa496122443cfa6)
     devDependencies:
       '@eslint/js':
         specifier: 'catalog:'
@@ -821,9 +818,18 @@ importers:
       colorjs.io:
         specifier: 0.5.2
         version: 0.5.2
+      dts-bundle-generator:
+        specifier: 9.5.1
+        version: 9.5.1
+      esbuild:
+        specifier: 0.25.5
+        version: 0.25.5
       eslint:
         specifier: 'catalog:'
         version: 9.23.0(jiti@2.4.2)
+      monaco-editor:
+        specifier: 0.52.2
+        version: 0.52.2(patch_hash=7bb3e90ea5e88af3c2dd4178adc975df191ffc569dc81fcbbaa496122443cfa6)
       postcss:
         specifier: 8.4.31
         version: 8.4.31
@@ -2516,6 +2522,12 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
+  '@esbuild/aix-ppc64@0.25.5':
+    resolution: {integrity: sha512-9o3TMmpmftaCMepOdA5k/yDw8SfInyzWWTjYTFCX3kPSDJMROQTb8jg+h9Cnwnmm1vOzvxN7gIfB5V2ewpjtGA==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
   '@esbuild/android-arm64@0.24.2':
     resolution: {integrity: sha512-cNLgeqCqV8WxfcTIOeL4OAtSmL8JjcN6m09XIgro1Wi7cF4t/THaWEa7eL5CMoMBdjoHOTh/vwTO/o2TRXIyzg==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2534,6 +2546,12 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@esbuild/android-arm64@0.25.5':
+    resolution: {integrity: sha512-VGzGhj4lJO+TVGV1v8ntCZWJktV7SGCs3Pn1GRWI1SBFtRALoomm8k5E9Pmwg3HOAal2VDc2F9+PM/rEY6oIDg==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
   '@esbuild/android-arm@0.24.2':
     resolution: {integrity: sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2552,6 +2570,12 @@ packages:
     cpu: [arm]
     os: [android]
 
+  '@esbuild/android-arm@0.25.5':
+    resolution: {integrity: sha512-AdJKSPeEHgi7/ZhuIPtcQKr5RQdo6OO2IL87JkianiMYMPbCtot9fxPbrMiBADOWWm3T2si9stAiVsGbTQFkbA==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
   '@esbuild/android-x64@0.24.2':
     resolution: {integrity: sha512-B6Q0YQDqMx9D7rvIcsXfmJfvUYLoP722bgfBlO5cGvNVb5V/+Y7nhBE3mHV9OpxBf4eAS2S68KZztiPaWq4XYw==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2570,6 +2594,12 @@ packages:
     cpu: [x64]
     os: [android]
 
+  '@esbuild/android-x64@0.25.5':
+    resolution: {integrity: sha512-D2GyJT1kjvO//drbRT3Hib9XPwQeWd9vZoBJn+bu/lVsOZ13cqNdDeqIF/xQ5/VmWvMduP6AmXvylO/PIc2isw==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
   '@esbuild/darwin-arm64@0.24.2':
     resolution: {integrity: sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2588,6 +2618,12 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@esbuild/darwin-arm64@0.25.5':
+    resolution: {integrity: sha512-GtaBgammVvdF7aPIgH2jxMDdivezgFu6iKpmT+48+F8Hhg5J/sfnDieg0aeG/jfSvkYQU2/pceFPDKlqZzwnfQ==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@esbuild/darwin-x64@0.24.2':
     resolution: {integrity: sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2606,6 +2642,12 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  '@esbuild/darwin-x64@0.25.5':
+    resolution: {integrity: sha512-1iT4FVL0dJ76/q1wd7XDsXrSW+oLoquptvh4CLR4kITDtqi2e/xwXwdCVH8hVHU43wgJdsq7Gxuzcs6Iq/7bxQ==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
   '@esbuild/freebsd-arm64@0.24.2':
     resolution: {integrity: sha512-UN8HXjtJ0k/Mj6a9+5u6+2eZ2ERD7Edt1Q9IZiB5UZAIdPnVKDoG7mdTVGhHJIeEml60JteamR3qhsr1r8gXvg==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2624,6 +2666,12 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
+  '@esbuild/freebsd-arm64@0.25.5':
+    resolution: {integrity: sha512-nk4tGP3JThz4La38Uy/gzyXtpkPW8zSAmoUhK9xKKXdBCzKODMc2adkB2+8om9BDYugz+uGV7sLmpTYzvmz6Sw==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
   '@esbuild/freebsd-x64@0.24.2':
     resolution: {integrity: sha512-TvW7wE/89PYW+IevEJXZ5sF6gJRDY/14hyIGFXdIucxCsbRmLUcjseQu1SyTko+2idmCw94TgyaEZi9HUSOe3Q==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2642,6 +2690,12 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
+  '@esbuild/freebsd-x64@0.25.5':
+    resolution: {integrity: sha512-PrikaNjiXdR2laW6OIjlbeuCPrPaAl0IwPIaRv+SMV8CiM8i2LqVUHFC1+8eORgWyY7yhQY+2U2fA55mBzReaw==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@esbuild/linux-arm64@0.24.2':
     resolution: {integrity: sha512-7HnAD6074BW43YvvUmE/35Id9/NB7BeX5EoNkK9obndmZBUk8xmJJeU7DwmUeN7tkysslb2eSl6CTrYz6oEMQg==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2660,6 +2714,12 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  '@esbuild/linux-arm64@0.25.5':
+    resolution: {integrity: sha512-Z9kfb1v6ZlGbWj8EJk9T6czVEjjq2ntSYLY2cw6pAZl4oKtfgQuS4HOq41M/BcoLPzrUbNd+R4BXFyH//nHxVg==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
   '@esbuild/linux-arm@0.24.2':
     resolution: {integrity: sha512-n0WRM/gWIdU29J57hJyUdIsk0WarGd6To0s+Y+LwvlC55wt+GT/OgkwoXCXvIue1i1sSNWblHEig00GBWiJgfA==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2678,6 +2738,12 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  '@esbuild/linux-arm@0.25.5':
+    resolution: {integrity: sha512-cPzojwW2okgh7ZlRpcBEtsX7WBuqbLrNXqLU89GxWbNt6uIg78ET82qifUy3W6OVww6ZWobWub5oqZOVtwolfw==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
   '@esbuild/linux-ia32@0.24.2':
     resolution: {integrity: sha512-sfv0tGPQhcZOgTKO3oBE9xpHuUqguHvSo4jl+wjnKwFpapx+vUDcawbwPNuBIAYdRAvIDBfZVvXprIj3HA+Ugw==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2696,6 +2762,12 @@ packages:
     cpu: [ia32]
     os: [linux]
 
+  '@esbuild/linux-ia32@0.25.5':
+    resolution: {integrity: sha512-sQ7l00M8bSv36GLV95BVAdhJ2QsIbCuCjh/uYrWiMQSUuV+LpXwIqhgJDcvMTj+VsQmqAHL2yYaasENvJ7CDKA==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
   '@esbuild/linux-loong64@0.24.2':
     resolution: {integrity: sha512-CN9AZr8kEndGooS35ntToZLTQLHEjtVB5n7dl8ZcTZMonJ7CCfStrYhrzF97eAecqVbVJ7APOEe18RPI4KLhwQ==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2714,6 +2786,12 @@ packages:
     cpu: [loong64]
     os: [linux]
 
+  '@esbuild/linux-loong64@0.25.5':
+    resolution: {integrity: sha512-0ur7ae16hDUC4OL5iEnDb0tZHDxYmuQyhKhsPBV8f99f6Z9KQM02g33f93rNH5A30agMS46u2HP6qTdEt6Q1kg==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
   '@esbuild/linux-mips64el@0.24.2':
     resolution: {integrity: sha512-iMkk7qr/wl3exJATwkISxI7kTcmHKE+BlymIAbHO8xanq/TjHaaVThFF6ipWzPHryoFsesNQJPE/3wFJw4+huw==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2732,6 +2810,12 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
+  '@esbuild/linux-mips64el@0.25.5':
+    resolution: {integrity: sha512-kB/66P1OsHO5zLz0i6X0RxlQ+3cu0mkxS3TKFvkb5lin6uwZ/ttOkP3Z8lfR9mJOBk14ZwZ9182SIIWFGNmqmg==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
   '@esbuild/linux-ppc64@0.24.2':
     resolution: {integrity: sha512-shsVrgCZ57Vr2L8mm39kO5PPIb+843FStGt7sGGoqiiWYconSxwTiuswC1VJZLCjNiMLAMh34jg4VSEQb+iEbw==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2750,6 +2834,12 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
+  '@esbuild/linux-ppc64@0.25.5':
+    resolution: {integrity: sha512-UZCmJ7r9X2fe2D6jBmkLBMQetXPXIsZjQJCjgwpVDz+YMcS6oFR27alkgGv3Oqkv07bxdvw7fyB71/olceJhkQ==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
   '@esbuild/linux-riscv64@0.24.2':
     resolution: {integrity: sha512-4eSFWnU9Hhd68fW16GD0TINewo1L6dRrB+oLNNbYyMUAeOD2yCK5KXGK1GH4qD/kT+bTEXjsyTCiJGHPZ3eM9Q==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2768,6 +2858,12 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
+  '@esbuild/linux-riscv64@0.25.5':
+    resolution: {integrity: sha512-kTxwu4mLyeOlsVIFPfQo+fQJAV9mh24xL+y+Bm6ej067sYANjyEw1dNHmvoqxJUCMnkBdKpvOn0Ahql6+4VyeA==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
   '@esbuild/linux-s390x@0.24.2':
     resolution: {integrity: sha512-S0Bh0A53b0YHL2XEXC20bHLuGMOhFDO6GN4b3YjRLK//Ep3ql3erpNcPlEFed93hsQAjAQDNsvcK+hV90FubSw==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2786,6 +2882,12 @@ packages:
     cpu: [s390x]
     os: [linux]
 
+  '@esbuild/linux-s390x@0.25.5':
+    resolution: {integrity: sha512-K2dSKTKfmdh78uJ3NcWFiqyRrimfdinS5ErLSn3vluHNeHVnBAFWC8a4X5N+7FgVE1EjXS1QDZbpqZBjfrqMTQ==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
   '@esbuild/linux-x64@0.24.2':
     resolution: {integrity: sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2804,6 +2906,12 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  '@esbuild/linux-x64@0.25.5':
+    resolution: {integrity: sha512-uhj8N2obKTE6pSZ+aMUbqq+1nXxNjZIIjCjGLfsWvVpy7gKCOL6rsY1MhRh9zLtUtAI7vpgLMK6DxjO8Qm9lJw==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
   '@esbuild/netbsd-arm64@0.24.2':
     resolution: {integrity: sha512-wuLK/VztRRpMt9zyHSazyCVdCXlpHkKm34WUyinD2lzK07FAHTq0KQvZZlXikNWkDGoT6x3TD51jKQ7gMVpopw==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2822,6 +2930,12 @@ packages:
     cpu: [arm64]
     os: [netbsd]
 
+  '@esbuild/netbsd-arm64@0.25.5':
+    resolution: {integrity: sha512-pwHtMP9viAy1oHPvgxtOv+OkduK5ugofNTVDilIzBLpoWAM16r7b/mxBvfpuQDpRQFMfuVr5aLcn4yveGvBZvw==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
   '@esbuild/netbsd-x64@0.24.2':
     resolution: {integrity: sha512-VefFaQUc4FMmJuAxmIHgUmfNiLXY438XrL4GDNV1Y1H/RW3qow68xTwjZKfj/+Plp9NANmzbH5R40Meudu8mmw==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2840,6 +2954,12 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
+  '@esbuild/netbsd-x64@0.25.5':
+    resolution: {integrity: sha512-WOb5fKrvVTRMfWFNCroYWWklbnXH0Q5rZppjq0vQIdlsQKuw6mdSihwSo4RV/YdQ5UCKKvBy7/0ZZYLBZKIbwQ==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
   '@esbuild/openbsd-arm64@0.24.2':
     resolution: {integrity: sha512-YQbi46SBct6iKnszhSvdluqDmxCJA+Pu280Av9WICNwQmMxV7nLRHZfjQzwbPs3jeWnuAhE9Jy0NrnJ12Oz+0A==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2858,6 +2978,12 @@ packages:
     cpu: [arm64]
     os: [openbsd]
 
+  '@esbuild/openbsd-arm64@0.25.5':
+    resolution: {integrity: sha512-7A208+uQKgTxHd0G0uqZO8UjK2R0DDb4fDmERtARjSHWxqMTye4Erz4zZafx7Di9Cv+lNHYuncAkiGFySoD+Mw==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
   '@esbuild/openbsd-x64@0.24.2':
     resolution: {integrity: sha512-+iDS6zpNM6EnJyWv0bMGLWSWeXGN/HTaF/LXHXHwejGsVi+ooqDfMCCTerNFxEkM3wYVcExkeGXNqshc9iMaOA==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2876,6 +3002,12 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
+  '@esbuild/openbsd-x64@0.25.5':
+    resolution: {integrity: sha512-G4hE405ErTWraiZ8UiSoesH8DaCsMm0Cay4fsFWOOUcz8b8rC6uCvnagr+gnioEjWn0wC+o1/TAHt+It+MpIMg==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
   '@esbuild/sunos-x64@0.24.2':
     resolution: {integrity: sha512-hTdsW27jcktEvpwNHJU4ZwWFGkz2zRJUz8pvddmXPtXDzVKTTINmlmga3ZzwcuMpUvLw7JkLy9QLKyGpD2Yxig==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2894,6 +3026,12 @@ packages:
     cpu: [x64]
     os: [sunos]
 
+  '@esbuild/sunos-x64@0.25.5':
+    resolution: {integrity: sha512-l+azKShMy7FxzY0Rj4RCt5VD/q8mG/e+mDivgspo+yL8zW7qEwctQ6YqKX34DTEleFAvCIUviCFX1SDZRSyMQA==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
   '@esbuild/win32-arm64@0.24.2':
     resolution: {integrity: sha512-LihEQ2BBKVFLOC9ZItT9iFprsE9tqjDjnbulhHoFxYQtQfai7qfluVODIYxt1PgdoyQkz23+01rzwNwYfutxUQ==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2912,6 +3050,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@esbuild/win32-arm64@0.25.5':
+    resolution: {integrity: sha512-O2S7SNZzdcFG7eFKgvwUEZ2VG9D/sn/eIiz8XRZ1Q/DO5a3s76Xv0mdBzVM5j5R639lXQmPmSo0iRpHqUUrsxw==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
   '@esbuild/win32-ia32@0.24.2':
     resolution: {integrity: sha512-q+iGUwfs8tncmFC9pcnD5IvRHAzmbwQ3GPS5/ceCyHdjXubwQWI12MKWSNSMYLJMq23/IUCvJMS76PDqXe1fxA==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2930,6 +3074,12 @@ packages:
     cpu: [ia32]
     os: [win32]
 
+  '@esbuild/win32-ia32@0.25.5':
+    resolution: {integrity: sha512-onOJ02pqs9h1iMJ1PQphR+VZv8qBMQ77Klcsqv9CNW2w6yLqoURLcgERAIurY6QE63bbLuqgP9ATqajFLK5AMQ==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
   '@esbuild/win32-x64@0.24.2':
     resolution: {integrity: sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg==, tarball: https://registry.npmjs.org
     engines: {node: '>=18'}
@@ -2948,6 +3098,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@esbuild/win32-x64@0.25.5':
+    resolution: {integrity: sha512-TXv6YnJ8ZMVdX+SXWVBo/0p8LTcrUYngpWjvm91TMjjBQii7Oz11Lw5lbDV5Y0TzuhSJHwiH4hEtC1I42mMS0g==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
   '@eslint-community/eslint-utils@4.5.1':
     resolution: {integrity: sha512-soEIOALTfTK6EjmKMMoLugwaP0rzkad90iIWd1hMO9ARkSAyjfMfkRRhLvD5qH7vvM0Cg72pieUfR6yh6XxC4w==, tarball: https://registry.npmjs.org
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -6421,6 +6577,11 @@ packages:
     resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==, tarball: https://registry.npmjs.org
     engines: {node: '>=8'}
 
+  dts-bundle-generator@9.5.1:
+    resolution: {integrity: sha512-DxpJOb2FNnEyOzMkG11sxO2dmxPjthoVWxfKqWYJ/bI/rT1rvTMktF5EKjAYrRZu6Z6t3NhOUZ0sZ5ZXevOfbA==, tarball: https://registry.npmjs.org
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==, tarball: https://registry.npmjs.org
     engines: {node: '>= 0.4'}
@@ -6601,6 +6762,11 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  esbuild@0.25.5:
+    resolution: {integrity: sha512-P8OtKZRv/5J5hhz0cUAdu/cLuPIKXpQl1R9pZtvmHWQvrAUVd0UNIPT4IB4W3rNOqVO0rlqHmCIbSwxh/c9yUQ==, tarball: https://registry.npmjs.org
+    engines: {node: '>=18'}
+    hasBin: true
+
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==, tarball: https://registry.npmjs.org
     engines: {node: '>=6'}
@@ -12740,6 +12906,9 @@ snapshots:
   '@esbuild/aix-ppc64@0.25.2':
     optional: true
 
+  '@esbuild/aix-ppc64@0.25.5':
+    optional: true
+
   '@esbuild/android-arm64@0.24.2':
     optional: true
 
@@ -12749,6 +12918,9 @@ snapshots:
   '@esbuild/android-arm64@0.25.2':
     optional: true
 
+  '@esbuild/android-arm64@0.25.5':
+    optional: true
+
   '@esbuild/android-arm@0.24.2':
     optional: true
 
@@ -12758,6 +12930,9 @@ snapshots:
   '@esbuild/android-arm@0.25.2':
     optional: true
 
+  '@esbuild/android-arm@0.25.5':
+    optional: true
+
   '@esbuild/android-x64@0.24.2':
     optional: true
 
@@ -12767,6 +12942,9 @@ snapshots:
   '@esbuild/android-x64@0.25.2':
     optional: true
 
+  '@esbuild/android-x64@0.25.5':
+    optional: true
+
   '@esbuild/darwin-arm64@0.24.2':
     optional: true
 
@@ -12776,6 +12954,9 @@ snapshots:
   '@esbuild/darwin-arm64@0.25.2':
     optional: true
 
+  '@esbuild/darwin-arm64@0.25.5':
+    optional: true
+
   '@esbuild/darwin-x64@0.24.2':
     optional: true
 
@@ -12785,6 +12966,9 @@ snapshots:
   '@esbuild/darwin-x64@0.25.2':
     optional: true
 
+  '@esbuild/darwin-x64@0.25.5':
+    optional: true
+
   '@esbuild/freebsd-arm64@0.24.2':
     optional: true
 
@@ -12794,6 +12978,9 @@ snapshots:
   '@esbuild/freebsd-arm64@0.25.2':
     optional: true
 
+  '@esbuild/freebsd-arm64@0.25.5':
+    optional: true
+
   '@esbuild/freebsd-x64@0.24.2':
     optional: true
 
@@ -12803,6 +12990,9 @@ snapshots:
   '@esbuild/freebsd-x64@0.25.2':
     optional: true
 
+  '@esbuild/freebsd-x64@0.25.5':
+    optional: true
+
   '@esbuild/linux-arm64@0.24.2':
     optional: true
 
@@ -12812,6 +13002,9 @@ snapshots:
   '@esbuild/linux-arm64@0.25.2':
     optional: true
 
+  '@esbuild/linux-arm64@0.25.5':
+    optional: true
+
   '@esbuild/linux-arm@0.24.2':
     optional: true
 
@@ -12821,6 +13014,9 @@ snapshots:
   '@esbuild/linux-arm@0.25.2':
     optional: true
 
+  '@esbuild/linux-arm@0.25.5':
+    optional: true
+
   '@esbuild/linux-ia32@0.24.2':
     optional: true
 
@@ -12830,6 +13026,9 @@ snapshots:
   '@esbuild/linux-ia32@0.25.2':
     optional: true
 
+  '@esbuild/linux-ia32@0.25.5':
+    optional: true
+
   '@esbuild/linux-loong64@0.24.2':
     optional: true
 
@@ -12839,6 +13038,9 @@ snapshots:
   '@esbuild/linux-loong64@0.25.2':
     optional: true
 
+  '@esbuild/linux-loong64@0.25.5':
+    optional: true
+
   '@esbuild/linux-mips64el@0.24.2':
     optional: true
 
@@ -12848,6 +13050,9 @@ snapshots:
   '@esbuild/linux-mips64el@0.25.2':
     optional: true
 
+  '@esbuild/linux-mips64el@0.25.5':
+    optional: true
+
   '@esbuild/linux-ppc64@0.24.2':
     optional: true
 
@@ -12857,6 +13062,9 @@ snapshots:
   '@esbuild/linux-ppc64@0.25.2':
     optional: true
 
+  '@esbuild/linux-ppc64@0.25.5':
+    optional: true
+
   '@esbuild/linux-riscv64@0.24.2':
     optional: true
 
@@ -12866,6 +13074,9 @@ snapshots:
   '@esbuild/linux-riscv64@0.25.2':
     optional: true
 
+  '@esbuild/linux-riscv64@0.25.5':
+    optional: true
+
   '@esbuild/linux-s390x@0.24.2':
     optional: true
 
@@ -12875,6 +13086,9 @@ snapshots:
   '@esbuild/linux-s390x@0.25.2':
     optional: true
 
+  '@esbuild/linux-s390x@0.25.5':
+    optional: true
+
   '@esbuild/linux-x64@0.24.2':
     optional: true
 
@@ -12884,6 +13098,9 @@ snapshots:
   '@esbuild/linux-x64@0.25.2':
     optional: true
 
+  '@esbuild/linux-x64@0.25.5':
+    optional: true
+
   '@esbuild/netbsd-arm64@0.24.2':
     optional: true
 
@@ -12893,6 +13110,9 @@ snapshots:
   '@esbuild/netbsd-arm64@0.25.2':
     optional: true
 
+  '@esbuild/netbsd-arm64@0.25.5':
+    optional: true
+
   '@esbuild/netbsd-x64@0.24.2':
     optional: true
 
@@ -12902,6 +13122,9 @@ snapshots:
   '@esbuild/netbsd-x64@0.25.2':
     optional: true
 
+  '@esbuild/netbsd-x64@0.25.5':
+    optional: true
+
   '@esbuild/openbsd-arm64@0.24.2':
     optional: true
 
@@ -12911,6 +13134,9 @@ snapshots:
   '@esbuild/openbsd-arm64@0.25.2':
     optional: true
 
+  '@esbuild/openbsd-arm64@0.25.5':
+    optional: true
+
   '@esbuild/openbsd-x64@0.24.2':
     optional: true
 
@@ -12920,6 +13146,9 @@ snapshots:
   '@esbuild/openbsd-x64@0.25.2':
     optional: true
 
+  '@esbuild/openbsd-x64@0.25.5':
+    optional: true
+
   '@esbuild/sunos-x64@0.24.2':
     optional: true
 
@@ -12929,6 +13158,9 @@ snapshots:
   '@esbuild/sunos-x64@0.25.2':
     optional: true
 
+  '@esbuild/sunos-x64@0.25.5':
+    optional: true
+
   '@esbuild/win32-arm64@0.24.2':
     optional: true
 
@@ -12938,6 +13170,9 @@ snapshots:
   '@esbuild/win32-arm64@0.25.2':
     optional: true
 
+  '@esbuild/win32-arm64@0.25.5':
+    optional: true
+
   '@esbuild/win32-ia32@0.24.2':
     optional: true
 
@@ -12947,6 +13182,9 @@ snapshots:
   '@esbuild/win32-ia32@0.25.2':
     optional: true
 
+  '@esbuild/win32-ia32@0.25.5':
+    optional: true
+
   '@esbuild/win32-x64@0.24.2':
     optional: true
 
@@ -12956,6 +13194,9 @@ snapshots:
   '@esbuild/win32-x64@0.25.2':
     optional: true
 
+  '@esbuild/win32-x64@0.25.5':
+    optional: true
+
   '@eslint-community/eslint-utils@4.5.1(eslint@9.22.0(jiti@2.4.2))':
     dependencies:
       eslint: 9.22.0(jiti@2.4.2)
@@ -16928,6 +17169,11 @@ snapshots:
     dependencies:
       is-obj: 2.0.0
 
+  dts-bundle-generator@9.5.1:
+    dependencies:
+      typescript: 5.8.2
+      yargs: 17.7.2
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -17221,6 +17467,34 @@ snapshots:
       '@esbuild/win32-ia32': 0.25.2
       '@esbuild/win32-x64': 0.25.2
 
+  esbuild@0.25.5:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.5
+      '@esbuild/android-arm': 0.25.5
+      '@esbuild/android-arm64': 0.25.5
+      '@esbuild/android-x64': 0.25.5
+      '@esbuild/darwin-arm64': 0.25.5
+      '@esbuild/darwin-x64': 0.25.5
+      '@esbuild/freebsd-arm64': 0.25.5
+      '@esbuild/freebsd-x64': 0.25.5
+      '@esbuild/linux-arm': 0.25.5
+      '@esbuild/linux-arm64': 0.25.5
+      '@esbuild/linux-ia32': 0.25.5
+      '@esbuild/linux-loong64': 0.25.5
+      '@esbuild/linux-mips64el': 0.25.5
+      '@esbuild/linux-ppc64': 0.25.5
+      '@esbuild/linux-riscv64': 0.25.5
+      '@esbuild/linux-s390x': 0.25.5
+      '@esbuild/linux-x64': 0.25.5
+      '@esbuild/netbsd-arm64': 0.25.5
+      '@esbuild/netbsd-x64': 0.25.5
+      '@esbuild/openbsd-arm64': 0.25.5
+      '@esbuild/openbsd-x64': 0.25.5
+      '@esbuild/sunos-x64': 0.25.5
+      '@esbuild/win32-arm64': 0.25.5
+      '@esbuild/win32-ia32': 0.25.5
+      '@esbuild/win32-x64': 0.25.5
+
   escalade@3.2.0: {}
 
   escape-html@1.0.3: {}
@@ -22208,7 +22482,7 @@ snapshots:
 
   vite@6.3.5(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.4.31))(terser@5.39.0)(yaml@2.7.0):
     dependencies:
-      esbuild: 0.25.2
+      esbuild: 0.25.5
       fdir: 6.4.4(picomatch@4.0.2)
       picomatch: 4.0.2
       postcss: 8.5.3
@@ -22227,7 +22501,7 @@ snapshots:
 
   vite@6.3.5(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.5.3))(terser@5.39.0)(yaml@2.7.0):
     dependencies:
-      esbuild: 0.25.2
+      esbuild: 0.25.5
       fdir: 6.4.4(picomatch@4.0.2)
       picomatch: 4.0.2
       postcss: 8.5.3
@@ -22246,7 +22520,7 @@ snapshots:
 
   vite@6.3.5(@types/node@22.13.10)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.4.31))(terser@5.39.0)(yaml@2.7.0):
     dependencies:
-      esbuild: 0.25.2
+      esbuild: 0.25.5
       fdir: 6.4.4(picomatch@4.0.2)
       picomatch: 4.0.2
       postcss: 8.5.3
@@ -22265,7 +22539,7 @@ snapshots:
 
   vite@6.3.5(@types/node@22.13.10)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.5.3))(terser@5.37.0)(yaml@2.7.0):
     dependencies:
-      esbuild: 0.25.2
+      esbuild: 0.25.5
       fdir: 6.4.4(picomatch@4.0.2)
       picomatch: 4.0.2
       postcss: 8.5.3
@@ -22284,7 +22558,7 @@ snapshots:
 
   vite@6.3.5(@types/node@22.13.10)(jiti@2.4.2)(less@4.2.2)(lightningcss@1.30.0)(sass@1.85.0)(sugarss@4.0.1(postcss@8.5.3))(terser@5.39.0)(yaml@2.7.0):
     dependencies:
-      esbuild: 0.25.2
+      esbuild: 0.25.5
       fdir: 6.4.4(picomatch@4.0.2)
       picomatch: 4.0.2
       postcss: 8.5.3
diff --git a/projects/monaco/build/prebundle.ts b/projects/monaco/build/prebundle.ts
new file mode 100644
index 000000000..229550147
--- /dev/null
+++ b/projects/monaco/build/prebundle.ts
@@ -0,0 +1,116 @@
+import fs from 'fs';
+import path from 'path';
+
+import { generateDtsBundle } from 'dts-bundle-generator';
+
+import { build } from 'esbuild';
+import type { Plugin } from 'esbuild';
+
+import postcss from 'postcss';
+import type { AtRule, Result } from 'postcss';
+
+const outdir = path.resolve(import.meta.dirname, '../src/vendor/monaco-editor/');
+fs.mkdirSync(outdir, { recursive: true });
+
+const node_modules_dir = path.resolve(import.meta.dirname, '../node_modules');
+
+// ---
+
+// @font-face() declarations within the Shadow DOM do not currently work in Chrome
+// See: https://bugs.chromium.org/p/chromium/issues/detail?id=336876
+// Workaround:
+// - Remove the @font-face declarations (with inlined TTF) when importing monaco-editor CSS files
+// - Dynamically inject a stylesheet with the same declaration in monaco.ts and append it to the root DOM
+const targets = ['monaco-editor/esm/vs/base/browser/ui/codicons/codicon/codicon.css'];
+const postcssPlugin: Plugin = {
+  name: 'postcss-plugin',
+  setup(build) {
+    build.onLoad({ filter: /\.css$/ }, async ({ path }) => {
+      const code = await fs.promises.readFile(path, 'utf8');
+      const result = await postcss([
+        {
+          postcssPlugin: 'remove-font-faces',
+          AtRule: {
+            'font-face': (atRule: AtRule, { result }: { result: Result }) => {
+              if (targets.some(target => result.opts.from?.endsWith(target))) {
+                atRule.remove();
+              }
+            }
+          }
+        }
+      ]).process(code, { from: path });
+      return {
+        contents: result.css,
+        loader: 'css'
+      };
+    });
+  }
+};
+
+// ---
+
+// Add /* @vite-ignore */ to dynamic import()s within vendored monaco-editor code
+const viteIgnorePlugin: Plugin = {
+  name: 'vite-ignore-import',
+  setup(build) {
+    build.onLoad({ filter: /\.js$/ }, async ({ path }) => {
+      if (
+        path.endsWith('monaco-editor/esm/vs/base/common/worker/simpleWorker.js') ||
+        path.endsWith('monaco-editor/esm/vs/editor/common/services/editorSimpleWorker.js')
+      ) {
+        const code = await fs.promises.readFile(path, 'utf8');
+        return {
+          contents: code.replace(/import\(`(\$\{[^`]+\})`\)/g, 'import(/* @vite-ignore */`$1`)'),
+          loader: 'js'
+        };
+      }
+      return;
+    });
+  }
+};
+
+// ---
+
+// Prebundle the vendored monaco-editor code
+await build({
+  entryPoints: [
+    'monaco-editor/esm/vs/editor/editor.main.js',
+    'monaco-editor/esm/vs/editor/editor.worker.js',
+    'monaco-editor/esm/vs/language/css/css.worker.js',
+    'monaco-editor/esm/vs/language/html/html.worker.js',
+    'monaco-editor/esm/vs/language/json/json.worker.js',
+    'monaco-editor/esm/vs/language/typescript/ts.worker.js'
+  ],
+  plugins: [viteIgnorePlugin, postcssPlugin],
+  outdir,
+  format: 'esm',
+  target: 'es2020',
+  platform: 'browser',
+  bundle: true,
+  splitting: false,
+  minify: false
+});
+
+// ---
+
+// Prebundle the vendored monaco-editor types
+const types = generateDtsBundle([
+  {
+    filePath: path.resolve(node_modules_dir, 'monaco-editor/esm/vs/editor/editor.api.d.ts'),
+    libraries: {
+      inlinedLibraries: ['monaco-editor']
+    },
+    output: {
+      inlineDeclareExternals: true,
+      sortNodes: false,
+      noBanner: true
+    }
+  }
+]);
+
+fs.writeFileSync(path.resolve(outdir, 'editor/editor.api.d.ts'), types.join('\n'));
+
+// ---
+
+// Copy LICENSE to vendor directory
+fs.copyFileSync(path.resolve(node_modules_dir, 'monaco-editor/LICENSE'), path.resolve(outdir, 'LICENSE'));
diff --git a/projects/monaco/package.json b/projects/monaco/package.json
index 7bc98c902..2e5b8ffca 100644
--- a/projects/monaco/package.json
+++ b/projects/monaco/package.json
@@ -75,25 +75,25 @@
       "types": "./dist/input/define.d.ts",
       "default": "./dist/input/define.js"
     },
-    "./workers/json.worker.js": {
-      "types": "./dist/workers/json.worker.d.ts",
-      "default": "./dist/workers/json.worker.js"
-    },
     "./workers/css.worker.js": {
       "types": "./dist/workers/css.worker.d.ts",
       "default": "./dist/workers/css.worker.js"
     },
+    "./workers/editor.worker.js": {
+      "types": "./dist/workers/editor.worker.d.ts",
+      "default": "./dist/workers/editor.worker.js"
+    },
     "./workers/html.worker.js": {
       "types": "./dist/workers/html.worker.d.ts",
       "default": "./dist/workers/html.worker.js"
     },
+    "./workers/json.worker.js": {
+      "types": "./dist/workers/json.worker.d.ts",
+      "default": "./dist/workers/json.worker.js"
+    },
     "./workers/ts.worker.js": {
       "types": "./dist/workers/ts.worker.d.ts",
       "default": "./dist/workers/ts.worker.js"
-    },
-    "./workers/editor.worker.js": {
-      "types": "./dist/workers/editor.worker.d.ts",
-      "default": "./dist/workers/editor.worker.js"
     }
   },
   "sideEffects": true,
@@ -102,6 +102,7 @@
     "dev": "wireit",
     "build": "wireit",
     "build:watch": "wireit",
+    "build:prebundle": "wireit",
     "build:snippets": "wireit",
     "build:themes": "wireit",
     "lint": "wireit",
@@ -112,8 +113,7 @@
     "test:lighthouse": "wireit"
   },
   "dependencies": {
-    "lit": "catalog:",
-    "monaco-editor": "0.52.2"
+    "lit": "catalog:"
   },
   "peerDependencies": {
     "@nvidia-elements/core": "workspace:*",
@@ -121,18 +121,21 @@
   },
   "devDependencies": {
     "@eslint/js": "catalog:",
-    "@nvidia-elements/core": "workspace:*",
-    "@nvidia-elements/styles": "workspace:*",
-    "@nvidia-elements/themes": "workspace:*",
-    "@nvidia-elements/testing": "workspace:*",
     "@nve-internals/eslint": "workspace:*",
     "@nve-internals/vite": "workspace:*",
     "@nvidia-elements/snippets": "workspace:*",
+    "@nvidia-elements/core": "workspace:*",
+    "@nvidia-elements/styles": "workspace:*",
+    "@nvidia-elements/testing": "workspace:*",
+    "@nvidia-elements/themes": "workspace:*",
     "@types/node": "catalog:",
     "@vitest/browser": "catalog:",
     "@vitest/coverage-istanbul": "catalog:",
     "colorjs.io": "0.5.2",
+    "dts-bundle-generator": "9.5.1",
+    "esbuild": "0.25.5",
     "eslint": "catalog:",
+    "monaco-editor": "0.52.2",
     "postcss": "8.4.31",
     "publint": "catalog:",
     "typescript": "catalog:",
@@ -180,17 +183,18 @@
         "!src/**/*.test.ssr.ts",
         "!src/**/__screenshots__/**",
         "!src/themes/generated/**",
+        "!src/vendor/**",
         "package.json",
         "tsconfig.json",
         "tsconfig.lib.json",
-        "vite.config.ts",
-        "postcss.config.js"
+        "vite.config.ts"
       ],
       "output": [
         "dist/**",
         "!dist/data.snippets.json"
       ],
       "dependencies": [
+        "build:prebundle",
         "build:snippets",
         "build:themes",
         "../internals/vite:ci",
@@ -211,6 +215,16 @@
         "build"
       ]
     },
+    "build:prebundle": {
+      "command": "node --experimental-transform-types ./build/prebundle.ts",
+      "files": [
+        "build/prebundle.ts",
+        "build/tsconfig.json"
+      ],
+      "output": [
+        "src/vendor/monaco-editor/**"
+      ]
+    },
     "build:snippets": {
       "command": "@nve-snippets",
       "files": [
@@ -224,6 +238,8 @@
       "command": "node --experimental-transform-types ./build/themes.ts",
       "files": [
         "../themes/dist/**/*.json",
+        "build/themes.ts",
+        "build/tsconfig.json",
         "src/themes/*.json"
       ],
       "output": [
@@ -321,7 +337,8 @@
         "src/**/*.ts",
         "eslint.config.js",
         "!src/**/__screenshots__/**",
-        "!src/themes/generated/**"
+        "!src/themes/generated/**",
+        "!src/vendor/**"
       ],
       "output": [],
       "dependencies": [
diff --git a/projects/monaco/postcss.config.js b/projects/monaco/postcss.config.js
deleted file mode 100644
index 569a0881d..000000000
--- a/projects/monaco/postcss.config.js
+++ /dev/null
@@ -1,23 +0,0 @@
-// @font-face() declarations within the Shadow DOM do not currently work in Chrome
-// See: https://bugs.chromium.org/p/chromium/issues/detail?id=336876
-
-// Workaround:
-// - Remove the @font-face declarations (with inlined TTF) when importing monaco-editor CSS files
-// - Dynamically create a 
+
+| 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      |
+
+## Icon Button Name Directions 1.0 deprecation
+
+With the deprecation of directional icons the icon button now requires a explicit direction.
+
+Before:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+After:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Testing 1.0 deprecation
+
+The exported test utilities from `@nvidia-elements/core/test` are now supported in a dedicated testing package `@nvidia-elements/testing`.
+
+Before:
+
+```typescript
+import { createFixture, removeFixture, elementIsStable, emulateClick, untilEvent } from '@nvidia-elements/core/test';
+```
+
+After:
+
+```typescript
+import { createFixture, removeFixture, elementIsStable, emulateClick, untilEvent } from '@nvidia-elements/testing';
+```
+
+## Scoped Tags 1.0 deprecation
+
+The `defineScopedElement` is deprecated in favor of consuming application defining their own tag name. This allows the consuming application to have more control of the `@lit-labs/scoped-registry-mixin` package version.
+
+Before:
+
+```typescript
+import { defineScopedElement } from '@nvidia-elements/core/scoped';
+
+defineScopedElement('suffix', Element);
+```
+
+After:
+
+```typescript
+import { scope } from '@nvidia-elements/core/scoped';
+import { ScopedRegistryHost } from '@lit-labs/scoped-registry-mixin';
+
+customElements.define(`suffix-element`, scope(Element, ScopedRegistryHost));
+```
diff --git a/projects/site/src/docs/about/migration.md b/projects/site/src/docs/about/migration.md
index 2056c7917..c1c7960f0 100644
--- a/projects/site/src/docs/about/migration.md
+++ b/projects/site/src/docs/about/migration.md
@@ -1,6 +1,6 @@
 ---
 {
-  title: 'Migration Guide 1.0',
+  title: 'Migration Guide',
   layout: 'docs.11ty.js'
 }
 ---
@@ -9,20 +9,13 @@
 
 ## Why nve?
 
-Elements has been gradually transitioning its libraries to use the `@nvidia-elements/*` package
-scope and namespace. This change began in early 2024 with Elements, which already
-employed the `nve` namespace internally. The shift to `@nvidia-elements/*` aims to establish a
-clear ownership boundary and signal of support for our libraries. As we expand into new
-projects through [@nve-labs](./docs/labs/), this namespace will continue to signify which
-projects have the backing of the Elements team.
+Elements has been gradually transitioning its libraries to use the `@nvidia-elements/*` package scope and namespace. This change began in early 2024 with Elements, which already employed the `nve` namespace internally. The shift to `@nvidia-elements/*` aims to establish a clear ownership boundary and signal of support for our libraries. As we expand into new projects through [@nve-labs](./docs/labs/), this namespace will continue to signify which projects have the backing of the Elements team.
 
-The [1.0 release](./docs/changelog/#nve-elements-v1-0-0-2024-07-31) addresses a long standing issue where peer dependencies are inadvertently overlooked by package managers when the
-package itself has a '0.x' version number. [(npm)](https://docs.npmjs.com/cli/v10/configuring-npm/package-json#peerdependencies) [(semver)](https://semver.org/#spec-item-9)
+The [1.0 release](./docs/changelog/#nve-elements-v1-0-0-2024-07-31) addresses a long standing issue where peer dependencies are inadvertently overlooked by package managers when the package itself has a '0.x' version number. [(npm)](https://docs.npmjs.com/cli/v10/configuring-npm/package-json#peerdependencies) [(semver)](https://semver.org/#spec-item-9)
 
 ## Migration Steps (required)
 
-It is recommended to update to the latest 0.x release before migration to a 1.x release.
-To migrate from a 0.x release to 1.x follow the following steps:
+It is recommended to update to the latest 0.x release before migration to a 1.x release. To migrate from a 0.x release to 1.x follow the following steps:
 
 ### 1. Update Packages
 
@@ -56,13 +49,11 @@ import '@nvidia-elements/core/button/define.js';
 
 
   
-    
    The "mlv" API prefix will continue to be supported throughout 1.0 and its deprecation cycle.
    
+    
    The "mlv" API prefix will continue to be supported throughout 1.0 and its deprecation cycle.
    
       
     
 
-With the release of 1.0 the scope and namespace for Element APIs are now prefixed `nve`.
-All prior `mlv` prefixes are deprecated. These steps are not required to initially migrate and use 1.0.
-To incrementally migrate to the new prefix follow the following steps:
+With the release of 1.0 the scope and namespace for Element APIs are now prefixed `nve`. All prior `mlv` prefixes are deprecated. These steps are not required to initially migrate and use 1.0. To incrementally migrate to the new prefix follow the following steps:
 
 ### 1. Update CSS Imports
 

From a98f43a132c8cd93397f41ba86d78981f89b0a3d Mon Sep 17 00:00:00 2001
From: Cormac Rada 
Date: Thu, 15 May 2025 15:41:26 -0700
Subject: [PATCH 0198/1100] fix(elements): nve-progress-bar invisible space
 rendered on small overrides

---
 .../src/progress-bar/progress-bar.css         |  1 +
 .../src/progress-bar/progress-bar.stories.ts  | 13 +++++++++++-
 .../progress-bar/progress-bar.test.visual.ts  | 20 +++++++++++++++++++
 .../site/src/docs/elements/progress-bar.md    |  6 ++++++
 4 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/projects/elements/src/progress-bar/progress-bar.css b/projects/elements/src/progress-bar/progress-bar.css
index c3ca39999..80d283a7f 100644
--- a/projects/elements/src/progress-bar/progress-bar.css
+++ b/projects/elements/src/progress-bar/progress-bar.css
@@ -1,4 +1,5 @@
 :host {
+  display: flex;
   width: 100%;
   line-height: 0;
   --height: var(--nve-ref-size-200);
diff --git a/projects/elements/src/progress-bar/progress-bar.stories.ts b/projects/elements/src/progress-bar/progress-bar.stories.ts
index ecacba99d..13f6d4c17 100644
--- a/projects/elements/src/progress-bar/progress-bar.stories.ts
+++ b/projects/elements/src/progress-bar/progress-bar.stories.ts
@@ -67,4 +67,15 @@ export const IndeterminateCustomColor = {
   render: () => html`
     
   `
-};
\ No newline at end of file
+};
+export const CustomHeights = {
+  render: () => html`
+    
    
+      
+
+      
+
+      
+    
    
+  `
+};
diff --git a/projects/elements/src/progress-bar/progress-bar.test.visual.ts b/projects/elements/src/progress-bar/progress-bar.test.visual.ts
index 999991251..966190f94 100644
--- a/projects/elements/src/progress-bar/progress-bar.test.visual.ts
+++ b/projects/elements/src/progress-bar/progress-bar.test.visual.ts
@@ -31,3 +31,23 @@ function template(theme: '' | 'dark' = '') {
   
   `;
 }
+function template(theme: '' | 'dark' = '') {
+  return /* html */ `
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  `;
+}
diff --git a/projects/site/src/docs/elements/progress-bar.md b/projects/site/src/docs/elements/progress-bar.md
index 0374dbdec..e54243943 100644
--- a/projects/site/src/docs/elements/progress-bar.md
+++ b/projects/site/src/docs/elements/progress-bar.md
@@ -55,3 +55,9 @@ Or in combination with `status` colors.
 Alternatively, set the `--accent-color` css property for a branded progress bar style.
 
 {% story 'nve-progress-bar', 'IndeterminateCustomColor' %}
+
+## Height Customization
+
+The progress bar's height can be customized using the `--height` CSS custom property. This allows you to create progress bars that match your application's visual hierarchy and emphasis needs. For consistency and theming, we recommend using our design system tokens—but you're free to use any value that suits your layout.
+
+{% story 'nve-progress-bar', 'CustomHeights' %}

From 7d11cd9f2787bc37e38dff1149abb2ee81b6a4ef Mon Sep 17 00:00:00 2001
From: semantic-release-bot 
Date: Sat, 31 May 2025 00:16:27 +0000
Subject: [PATCH 0199/1100] chore(release): @nve/elements-v1.35.4 [skip ci]

## [@nve/elements-v1.35.4](https://gitlab-master.nvidia.com/ai-infra/elements/compare/@nve/elements-v1.35.3...@nve/elements-v1.35.4) (2025-05-31)

### Bug Fixes

* **elements:** nve-progress-bar invisible space rendered on small overrides ([43c357c](https://gitlab-master.nvidia.com/ai-infra/elements/commit/43c357c51215d423fe6435309ad1cce846e3a54a))
---
 projects/elements/CHANGELOG.md | 7 +++++++
 projects/elements/package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/projects/elements/CHANGELOG.md b/projects/elements/CHANGELOG.md
index 5b04b93e9..fae4ad1d4 100644
--- a/projects/elements/CHANGELOG.md
+++ b/projects/elements/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [@nvidia-elements/core-v1.35.4](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.35.3...@nvidia-elements/core-v1.35.4) (2025-05-31)
+
+
+### Bug Fixes
+
+* **elements:** nve-progress-bar invisible space rendered on small overrides ([539ca07](https://github.com/NVIDIA/elements/commit/539ca07a72c4f3790af2a32aeccc366eb1f0ee2b))
+
 ## [@nvidia-elements/core-v1.35.3](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.35.2...@nvidia-elements/core-v1.35.3) (2025-05-30)
 
 
diff --git a/projects/elements/package.json b/projects/elements/package.json
index 4b64812e2..39f50cb64 100644
--- a/projects/elements/package.json
+++ b/projects/elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nvidia-elements/core",
-  "version": "1.35.3",
+  "version": "1.35.4",
   "description": "The Design Language for AI/ML Factories Building at the Speed of Light",
   "homepage": "https://NVIDIA.github.io/elements/",
   "repository": {

From a98026c6d79ec3adcbe553e9db766eff192247aa Mon Sep 17 00:00:00 2001
From: Will Geller 
Date: Fri, 30 May 2025 15:53:20 -0400
Subject: [PATCH 0200/1100] feat(elements): add color prop support to
 nve-alert-group

---
 projects/elements/src/alert/alert-group.css   |  24 +--
 projects/elements/src/alert/alert-group.ts    |  10 +-
 projects/elements/src/alert/alert.stories.ts  | 144 ++++++++++++++++++
 .../src/alert/alert.test.lighthouse.ts        |   2 +-
 projects/elements/src/alert/alert.ts          |   1 -
 projects/site/src/docs/elements/alert.md      |   8 +
 6 files changed, 173 insertions(+), 16 deletions(-)

diff --git a/projects/elements/src/alert/alert-group.css b/projects/elements/src/alert/alert-group.css
index 07028de29..f5c824c24 100644
--- a/projects/elements/src/alert/alert-group.css
+++ b/projects/elements/src/alert/alert-group.css
@@ -6,11 +6,7 @@
   --icon-size: var(--nve-ref-size-600);
   --icon-color: var(--color);
   --color: var(--nve-sys-text-color);
-  --background: color-mix(
-    in oklab,
-    var(--status-color) var(--nve-sys-contrast-mute-ratio),
-    var(--nve-sys-contrast-mute-color)
-  );
+  --background: var(--state-color-background);
   width: 100%;
 }
 
@@ -41,26 +37,26 @@
   --border-radius: 0;
 }
 
-:host([prominence='emphasis']) {
+:host([prominence='emphasis']:not([color])) {
   --background: var(--nve-sys-support-color);
   --color: var(--nve-sys-text-white-color);
   --icon-color: var(--color);
 }
 
-:host([prominence='emphasis'][status='accent']) {
+:host([prominence='emphasis'][status='accent']:not([color])) {
   --background: var(--nve-sys-support-accent-color);
 }
 
-:host([prominence='emphasis'][status='success']) {
+:host([prominence='emphasis'][status='success']:not([color])) {
   --background: var(--nve-sys-support-success-color);
 }
 
-:host([prominence='emphasis'][status='warning']) {
+:host([prominence='emphasis'][status='warning']:not([color])) {
   --background: var(--nve-sys-support-warning-color);
   --color: var(--nve-sys-text-black-color);
 }
 
-:host([prominence='emphasis'][status='danger']) {
+:host([prominence='emphasis'][status='danger']:not([color])) {
   --background: var(--nve-sys-support-danger-color);
 }
 
@@ -72,3 +68,11 @@
 :host(:not([prominence='emphasis'])) ::slotted(nve-alert) {
   --icon-color: var(--status-color) !important;
 }
+
+:host([status]) {
+  --state-color-base: var(--status-color);
+}
+
+:host([color]) ::slotted(nve-alert) {
+  --status-color: var(--state-color-base) !important;
+}
diff --git a/projects/elements/src/alert/alert-group.ts b/projects/elements/src/alert/alert-group.ts
index 9d3805589..9a2bdbdc2 100644
--- a/projects/elements/src/alert/alert-group.ts
+++ b/projects/elements/src/alert/alert-group.ts
@@ -2,8 +2,8 @@ import type { PropertyValues } from 'lit';
 import { html, LitElement } from 'lit';
 import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
 import { property } from 'lit/decorators/property.js';
-import type { Container, Prominence, SupportStatus } from '@nvidia-elements/core/internal';
-import { attachInternals, useStyles, supportStateStyles, audit } from '@nvidia-elements/core/internal';
+import type { Color, Container, Prominence, SupportStatus } from '@nvidia-elements/core/internal';
+import { attachInternals, useStyles, supportStateStyles, audit, colorStateStyles } from '@nvidia-elements/core/internal';
 import { Alert } from './alert.js';
 import styles from './alert-group.css?inline';
 
@@ -13,7 +13,6 @@ import styles from './alert-group.css?inline';
  * @since 0.3.0
  * @entrypoint \@nvidia-elements/core/alert
  * @cssprop --gap
- * @cssprop --color
  * @cssprop --padding
  * @cssprop --font-size
  * @cssprop --background
@@ -25,7 +24,7 @@ import styles from './alert-group.css?inline';
  */
 @audit()
 export class AlertGroup extends LitElement {
-  static styles = useStyles([supportStateStyles, styles]);
+  static styles = useStyles([styles, supportStateStyles, colorStateStyles]);
 
   static readonly metadata = {
     tag: 'nve-alert-group',
@@ -39,6 +38,9 @@ export class AlertGroup extends LitElement {
   /** Determines the visual prominence or weight, emphasis is used for banner style alerts */
   @property({ type: String, reflect: true }) prominence?: Extract;
 
+  /** Allows for colors not defined by semantic status definitions to be used in non-status instances, such as callouts for tutorials or tips on a documentation site. */
+  @property({ type: String, reflect: true }) color: Color;
+
   /** Determines the container bounds of the element */
   @property({ type: String, reflect: true }) container?: Extract;
 
diff --git a/projects/elements/src/alert/alert.stories.ts b/projects/elements/src/alert/alert.stories.ts
index c3bafa8bb..bd07a8337 100644
--- a/projects/elements/src/alert/alert.stories.ts
+++ b/projects/elements/src/alert/alert.stories.ts
@@ -302,3 +302,147 @@ export const Multiline = {
     
   `
 }
+
+export const CustomColors = {
+  render: () => html`
+    
    
+      
+        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
+      
+    
    
+  `
+}
+
+
+export const CustomColorCombinations = {
+  render: () => html`
+    
    
+      
+        Custom color will theme the closable icon.
+      
+
+      
+        
+          Custom color is compatible with actions button.
+          action
+        
+      
+
+      
+        Combining custom color="pink-rose" with status yields the status icon with custom alert color.
+      
+
+      
+        Combining custom color="pink-rose" with status yields the status icon with custom alert color.
+      
+
+      
+        Combining custom color="pink-rose" with status yields the status icon with custom alert color.
+      
+
+      
+        Combining custom color="pink-rose" with status yields the status icon with custom alert color.
+      
+
+      
+        Combining custom color="blue-indigo" with status and prominence yields the status icon with an emphasized custom alert color.
+      
+
+      
+        Combining custom color="blue-indigo" with status and prominence yields the status icon with an emphasized custom alert color.
+      
+
+      
+        Combining custom color="blue-indigo" with status and prominence yields the status icon with an emphasized custom alert color.
+      
+
+      
+        Combining custom color="blue-indigo" with status and prominence yields the status icon with an emphasized custom alert color.
+      
+    
    
+  `
+}
\ No newline at end of file
diff --git a/projects/elements/src/alert/alert.test.lighthouse.ts b/projects/elements/src/alert/alert.test.lighthouse.ts
index 94569a378..3e8656434 100644
--- a/projects/elements/src/alert/alert.test.lighthouse.ts
+++ b/projects/elements/src/alert/alert.test.lighthouse.ts
@@ -30,6 +30,6 @@ describe('alert lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(21.5);
+    expect(report.payload.javascript.kb).toBeLessThan(22);
   });
 });
diff --git a/projects/elements/src/alert/alert.ts b/projects/elements/src/alert/alert.ts
index 6d9361be5..4935f4fe7 100644
--- a/projects/elements/src/alert/alert.ts
+++ b/projects/elements/src/alert/alert.ts
@@ -30,7 +30,6 @@ import styles from './alert.css?inline';
  * @slot - Default content placed inside of the alert.
  * @cssprop --gap
  * @cssprop --font-size
- * @cssprop --color
  * @cssprop --icon-color
  * @cssprop --icon-size
  * @cssprop --font-weight
diff --git a/projects/site/src/docs/elements/alert.md b/projects/site/src/docs/elements/alert.md
index ba9a771f9..0a40d42a2 100644
--- a/projects/site/src/docs/elements/alert.md
+++ b/projects/site/src/docs/elements/alert.md
@@ -56,3 +56,11 @@ An alert group is an element that displays a group of related and important mess
 {% api 'nve-alert', 'property', 'multiline' %}
 
 {% story 'nve-alert', 'Multiline' %}
+
+## Custom Colors
+
+{% api 'nve-alert-group', 'property', 'color' %}
+
+{% story 'nve-alert', 'CustomColors' %}
+
+{% story 'nve-alert', 'CustomColorCombinations' %}

From 3052e2747049dd798d6cec79c8a739588e8a08a7 Mon Sep 17 00:00:00 2001
From: semantic-release-bot 
Date: Tue, 3 Jun 2025 16:17:29 +0000
Subject: [PATCH 0201/1100] chore(release): @nve/elements-v1.36.0 [skip ci]

## [@nve/elements-v1.36.0](https://gitlab-master.nvidia.com/ai-infra/elements/compare/@nve/elements-v1.35.4...@nve/elements-v1.36.0) (2025-06-03)

### Features

* **elements:** add color prop support to nve-alert-group ([3eed23f](https://gitlab-master.nvidia.com/ai-infra/elements/commit/3eed23f6a5d0e9b886842c1a5dd1c8315e6de6dd))
---
 projects/elements/CHANGELOG.md | 7 +++++++
 projects/elements/package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/projects/elements/CHANGELOG.md b/projects/elements/CHANGELOG.md
index fae4ad1d4..a2305fc13 100644
--- a/projects/elements/CHANGELOG.md
+++ b/projects/elements/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [@nvidia-elements/core-v1.36.0](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.35.4...@nvidia-elements/core-v1.36.0) (2025-06-03)
+
+
+### Features
+
+* **elements:** add color prop support to nve-alert-group ([0d6a1a0](https://github.com/NVIDIA/elements/commit/0d6a1a0bd1b4625f413a4736dcb40c4089869f75))
+
 ## [@nvidia-elements/core-v1.35.4](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.35.3...@nvidia-elements/core-v1.35.4) (2025-05-31)
 
 
diff --git a/projects/elements/package.json b/projects/elements/package.json
index 39f50cb64..c2b587a74 100644
--- a/projects/elements/package.json
+++ b/projects/elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nvidia-elements/core",
-  "version": "1.35.4",
+  "version": "1.36.0",
   "description": "The Design Language for AI/ML Factories Building at the Speed of Light",
   "homepage": "https://NVIDIA.github.io/elements/",
   "repository": {

From 9c123adbdddaa3ed6753c937efd7a3cfb1b4d7d1 Mon Sep 17 00:00:00 2001
From: Cory Rylan 
Date: Fri, 30 May 2025 16:14:24 -0500
Subject: [PATCH 0202/1100] chore(ci): cleanup and test metadata related logic

- move storybook url generation & tests
- move entrypoint script generation & tests
- move markdown logic for CEM
- rename av-infra references
- remove unused/duplicate dependencies

Signed-off-by: Cory Rylan 
---
 pnpm-lock.yaml                                |  32 +-
 projects/internals/metadata/README.md         |   2 +-
 projects/internals/metadata/package.json      |  16 +-
 projects/internals/metadata/src/index.ts      |   1 +
 .../internals/metadata/src/node/av-infra.ts   |   9 +
 .../{maglev.utils.ts => av-infra.utils.ts}    |   4 +-
 .../internals/metadata/src/node/maglev.ts     |   9 -
 .../metadata/src/node/metadata.utils.test.ts  | 106 ++---
 .../metadata/src/node/metadata.utils.ts       |  72 ++--
 .../src/services/av-infra.service.test.ts     |  11 +
 .../metadata/src/services/av-infra.service.ts |  10 +
 .../internals/metadata/src/services/index.ts  |   2 +
 .../src/services/metadata.service.test.ts     |   7 -
 .../metadata/src/services/metadata.service.ts |  13 +-
 .../metadata/src/services/playground.test.ts  |  38 ++
 .../metadata/src/services/playground.ts       |  76 ++++
 projects/internals/metadata/src/types.ts      |  44 ++-
 .../metadata/src/utils/index.test.ts          | 369 ++++++++++++++++++
 .../internals/metadata/src/utils/index.ts     | 292 ++++++++++++++
 .../static/{maglev.json => av-infra.json}     |   0
 projects/internals/metadata/vitest.config.ts  |   6 +-
 projects/internals/vite/src/configs/build.js  |   2 +-
 .../internals/vite/src/plugins/cem.config.mjs |  21 +-
 projects/internals/vite/src/plugins/cem.js    |   2 +-
 projects/site/eleventy.config.js              |   6 +-
 projects/site/package.json                    |   2 -
 projects/site/src/_11ty/shortcodes/index.js   |  32 +-
 projects/site/src/_11ty/templates/api.js      |  14 +-
 .../src/_11ty/transforms/element-loader.js    |  25 +-
 .../site/src/_11ty/utils/playground-url.js    | 120 ------
 projects/site/src/_11ty/utils/version.js      |  16 +-
 .../metrics-carousel/metrics-carousel.ts      |  22 +-
 projects/site/src/docs/about/requests.md      |   2 +-
 .../site/src/docs/api-design/glossary.11ty.js |   4 +-
 .../site/src/docs/changelog/index.11tydata.js |  34 +-
 .../site/src/docs/integrations/angular.md     |   3 +-
 .../{maglev.11ty.js => av-infra.11ty.js}      |  17 +-
 .../src/docs/metrics/bundle-explorer.11ty.js  |   2 +-
 projects/site/src/docs/metrics/index.11ty.js  |  10 +-
 .../site/src/docs/metrics/metadata.11ty.js    |   2 +-
 .../metrics/testing-and-performance.11ty.js   |  16 +-
 projects/site/src/stories/index.11ty.js       |   6 +-
 projects/site/src/stories/index.ts            |  14 +-
 projects/site/src/stories/utils.js            |   1 +
 .../starters/eleventy-ssr/eleventy.config.js  |   2 +-
 .../starters/eleventy-ssr/src/index.11ty.js   |   6 +-
 projects/storybook/package.json               |   4 +-
 47 files changed, 1100 insertions(+), 404 deletions(-)
 create mode 100644 projects/internals/metadata/src/node/av-infra.ts
 rename projects/internals/metadata/src/node/{maglev.utils.ts => av-infra.utils.ts} (98%)
 delete mode 100644 projects/internals/metadata/src/node/maglev.ts
 create mode 100644 projects/internals/metadata/src/services/av-infra.service.test.ts
 create mode 100644 projects/internals/metadata/src/services/av-infra.service.ts
 create mode 100644 projects/internals/metadata/src/services/playground.test.ts
 create mode 100644 projects/internals/metadata/src/services/playground.ts
 create mode 100644 projects/internals/metadata/src/utils/index.test.ts
 create mode 100644 projects/internals/metadata/src/utils/index.ts
 rename projects/internals/metadata/static/{maglev.json => av-infra.json} (100%)
 delete mode 100644 projects/site/src/_11ty/utils/playground-url.js
 rename projects/site/src/docs/metrics/{maglev.11ty.js => av-infra.11ty.js} (88%)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5b9ecd67c..46bab2544 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -385,9 +385,15 @@ importers:
       '@types/node':
         specifier: 'catalog:'
         version: 22.13.1
+      fflate:
+        specifier: 0.8.2
+        version: 0.8.2
       glob:
         specifier: 'catalog:'
         version: 11.0.1
+      html-format:
+        specifier: 1.1.7
+        version: 1.1.7
       ts-morph:
         specifier: 'catalog:'
         version: 26.0.0
@@ -918,12 +924,6 @@ importers:
       eslint:
         specifier: 'catalog:'
         version: 9.23.0(jiti@2.4.2)
-      fflate:
-        specifier: 0.8.2
-        version: 0.8.2
-      html-format:
-        specifier: 1.1.7
-        version: 1.1.7
       html-minifier:
         specifier: 4.0.0
         version: 4.0.0
@@ -1475,15 +1475,9 @@ importers:
       '@nvidia-elements/themes':
         specifier: workspace:*
         version: link:../themes
-      html-format:
-        specifier: 1.1.7
-        version: 1.1.7
       lit:
         specifier: 'catalog:'
         version: 3.2.1
-      showdown:
-        specifier: 2.1.0
-        version: 2.1.0
     devDependencies:
       '@storybook/addon-docs':
         specifier: 8.5.0
@@ -6072,10 +6066,6 @@ packages:
     resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==, tarball: https://registry.npmjs.org
     engines: {node: '>= 12'}
 
-  commander@9.5.0:
-    resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==, tarball: https://registry.npmjs.org
-    engines: {node: ^12.20.0 || >=14}
-
   comment-parser@1.2.4:
     resolution: {integrity: sha512-pm0b+qv+CkWNriSTMsfnjChF9kH0kxz55y44Wo5le9qLxMj5xDQAaEd9ZN1ovSuk9CsrncWaFwgpOMg7ClJwkw==, tarball: https://registry.npmjs.org
     engines: {node: '>= 12.0.0'}
@@ -10340,10 +10330,6 @@ packages:
     resolution: {integrity: sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==, tarball: https://registry.npmjs.org
     engines: {node: '>= 0.4'}
 
-  showdown@2.1.0:
-    resolution: {integrity: sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==, tarball: https://registry.npmjs.org
-    hasBin: true
-
   side-channel-list@1.0.0:
     resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==, tarball: https://registry.npmjs.org
     engines: {node: '>= 0.4'}
@@ -16641,8 +16627,6 @@ snapshots:
 
   commander@8.3.0: {}
 
-  commander@9.5.0: {}
-
   comment-parser@1.2.4: {}
 
   commitlint@19.5.0(@types/node@22.13.10)(typescript@5.8.2):
@@ -21420,10 +21404,6 @@ snapshots:
 
   shell-quote@1.8.2: {}
 
-  showdown@2.1.0:
-    dependencies:
-      commander: 9.5.0
-
   side-channel-list@1.0.0:
     dependencies:
       es-errors: 1.3.0
diff --git a/projects/internals/metadata/README.md b/projects/internals/metadata/README.md
index 07ffd00a3..87b8d08d0 100644
--- a/projects/internals/metadata/README.md
+++ b/projects/internals/metadata/README.md
@@ -6,4 +6,4 @@ The metadata scripts generate common metadata about projects in the repo. This i
 
 - `pnpm run ci`: runs the metadata script, runs and gathers all project metadata, test results and code coverage to generate a single JSON report
 - `pnpm run build:lighthouse`: runs all lighthouse tests and generates the source controlled `/static/lighthouse.json` metadata.
-- `pnpm run build:elements`: generates the source controlled `/static/elements.json` metadata. This file reports elements usage within the elements repo. This script asumes the path to the elements repo is cloned as a sibling relative to this repo.
+- `pnpm run build:av-infra`: generates the source controlled `/static/av-infra.json` metadata. This file reports elements usage within the elements repo. This script assumes the path to the repo is cloned as a sibling relative to this repo.
diff --git a/projects/internals/metadata/package.json b/projects/internals/metadata/package.json
index c86cf4ee6..a584fca77 100644
--- a/projects/internals/metadata/package.json
+++ b/projects/internals/metadata/package.json
@@ -9,7 +9,7 @@
     "ci:all": "wireit",
     "build": "wireit",
     "build:metadata": "wireit",
-    "build:elements": "wireit",
+    "build:av-infra": "wireit",
     "build:lighthouse": "wireit",
     "test": "wireit",
     "test:watch": "wireit",
@@ -39,7 +39,7 @@
       "dependencies": [
         "build",
         "build:lighthouse",
-        "build:elements"
+        "build:av-infra"
       ]
     },
     "publint": {
@@ -262,14 +262,14 @@
         "../../../:lighthouse"
       ]
     },
-    "build:elements": {
-      "command": "node --experimental-strip-types ./src/node/elements.ts",
+    "build:av-infra": {
+      "command": "node --experimental-strip-types ./src/node/av-infra.ts",
       "files": [
-        "src/node/elements.ts",
-        "src/node/elements.utils.ts"
+        "src/node/av-infra.ts",
+        "src/node/av-infra.utils.ts"
       ],
       "output": [
-        "static/elements.json"
+        "static/av-infra.json"
       ],
       "dependencies": [
         "../../elements:build"
@@ -331,6 +331,8 @@
   },
   "dependencies": {
     "@types/node": "catalog:",
+    "fflate": "0.8.2",
+    "html-format": "1.1.7",
     "glob": "catalog:",
     "ts-morph": "catalog:"
   },
diff --git a/projects/internals/metadata/src/index.ts b/projects/internals/metadata/src/index.ts
index d77f57a74..b15b0ee08 100644
--- a/projects/internals/metadata/src/index.ts
+++ b/projects/internals/metadata/src/index.ts
@@ -1,2 +1,3 @@
 export * from './types.js';
 export * from './services/index.js';
+export * from './utils/index.js';
diff --git a/projects/internals/metadata/src/node/av-infra.ts b/projects/internals/metadata/src/node/av-infra.ts
new file mode 100644
index 000000000..5f26c5c03
--- /dev/null
+++ b/projects/internals/metadata/src/node/av-infra.ts
@@ -0,0 +1,9 @@
+import { writeFileSync } from 'node:fs';
+import { getProjects } from './av-infra.utils.ts';
+
+const projects = await getProjects();
+const created = new Date().toISOString();
+
+writeFileSync('./static/av-infra.json', JSON.stringify({ created, projects }, null, 2));
+
+console.log('✅ AV Infra metadata generated successfully.');
diff --git a/projects/internals/metadata/src/node/maglev.utils.ts b/projects/internals/metadata/src/node/av-infra.utils.ts
similarity index 98%
rename from projects/internals/metadata/src/node/maglev.utils.ts
rename to projects/internals/metadata/src/node/av-infra.utils.ts
index 917c685c1..c1cbbfabb 100644
--- a/projects/internals/metadata/src/node/maglev.utils.ts
+++ b/projects/internals/metadata/src/node/av-infra.utils.ts
@@ -72,7 +72,7 @@ function getElementsVersion(data) {
   return dependencies || devDependencies || peerDependencies;
 }
 
-export interface MaglevProject {
+export interface AVInfraProject {
   name: string;
   path: string;
   elementsVersion: string;
@@ -83,7 +83,7 @@ export interface MaglevProject {
   instanceTotal: number;
 }
 
-export async function getProjects(path = '../../../../elements'): Promise {
+export async function getProjects(path = '../../../../elements'): Promise {
   const elementTags = getManifest().map(d => d.tagName);
 
   return Promise.all(
diff --git a/projects/internals/metadata/src/node/maglev.ts b/projects/internals/metadata/src/node/maglev.ts
deleted file mode 100644
index e0cf861eb..000000000
--- a/projects/internals/metadata/src/node/maglev.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { writeFileSync } from 'node:fs';
-import { getProjects } from './elements.utils.ts';
-
-const projects = await getProjects();
-const created = new Date().toISOString();
-
-writeFileSync('./static/elements.json', JSON.stringify({ created, projects }, null, 2));
-
-console.log('✅ Maglev metadata generated successfully.');
diff --git a/projects/internals/metadata/src/node/metadata.utils.test.ts b/projects/internals/metadata/src/node/metadata.utils.test.ts
index ec1c44930..0bebbb058 100644
--- a/projects/internals/metadata/src/node/metadata.utils.test.ts
+++ b/projects/internals/metadata/src/node/metadata.utils.test.ts
@@ -18,76 +18,76 @@ describe('Metadata', () => {
   });
 
   it('should return the types', async () => {
-    expect(metadata.types).toBeDefined();
-    expect(metadata.types.props.length).toBeGreaterThan(0);
-    expect(metadata.types.props[0].name).toBeDefined();
-    expect(metadata.types.props[0].type).toBeDefined();
-    expect(metadata.types.props[0].description).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].types).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].types.length).toBeGreaterThan(0);
+    expect(metadata.projects['@nvidia-elements/core'].types[0].name).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].types[0].type).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].types[0].description).toBeDefined();
   });
 
   it('should return the project metadata', async () => {
-    expect(metadata['@nvidia-elements/core']).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].name).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].version).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].readme).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].changelog).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core']).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].name).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].version).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].readme).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].changelog).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests).toBeDefined();
   });
 
   it('should return the project tests', async () => {
-    expect(metadata['@nvidia-elements/core'].tests).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverage).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverage.length).toBeGreaterThan(0);
-    expect(metadata['@nvidia-elements/core'].tests.coverage[0].file).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverage[0].lines).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverage[0].lines.pct).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverage).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverage.length).toBeGreaterThan(0);
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverage[0].file).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverage[0].lines).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverage[0].lines.pct).toBeDefined();
   });
 
   it('should return the project elements', async () => {
-    expect(metadata['@nvidia-elements/core'].elements).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].elements.length).toBeGreaterThan(0);
-    expect(metadata['@nvidia-elements/core'].elements[0].name).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].elements[0].manifest).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].elements[0].tests).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].elements).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].elements.length).toBeGreaterThan(0);
+    expect(metadata.projects['@nvidia-elements/core'].elements[0].name).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].elements[0].manifest).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].elements[0].tests).toBeDefined();
   });
 
   it('should return the project test summary', async () => {
-    expect(metadata['@nvidia-elements/core'].tests).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.unitTestsTotal).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.axeTestsTotal).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.visualTestsTotal).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.ssrTestsTotal).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverageTotal).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverageTotal.lines).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverageTotal.lines.pct).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverageTotal.statements).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverageTotal.statements.pct).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverageTotal.branches).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverageTotal.branches.pct).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverageTotal.functions).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverageTotal.functions.pct).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.unitTestsTotal).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.axeTestsTotal).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.visualTestsTotal).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.ssrTestsTotal).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverageTotal).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverageTotal.lines).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverageTotal.lines.pct).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverageTotal.statements).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverageTotal.statements.pct).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverageTotal.branches).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverageTotal.branches.pct).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverageTotal.functions).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverageTotal.functions.pct).toBeDefined();
   });
 
   it('should return the project test files', async () => {
-    expect(metadata['@nvidia-elements/core'].tests).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverage).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverage.length).toBeGreaterThan(0);
-    expect(metadata['@nvidia-elements/core'].tests.coverage[0].file).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverage[0].lines).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverage[0].lines.pct).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverage[0].statements).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverage[0].statements.pct).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverage[0].branches).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverage[0].branches.pct).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverage[0].functions).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].tests.coverage[0].functions.pct).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverage).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverage.length).toBeGreaterThan(0);
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverage[0].file).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverage[0].lines).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverage[0].lines.pct).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverage[0].statements).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverage[0].statements.pct).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverage[0].branches).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverage[0].branches.pct).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverage[0].functions).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].tests.coverage[0].functions.pct).toBeDefined();
   });
 
   it('should return project element stories', async () => {
-    expect(metadata['@nvidia-elements/core'].elements[0].stories).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].elements[0].stories.length).toBeGreaterThan(0);
-    expect(metadata['@nvidia-elements/core'].elements[0].stories[0].id).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].elements[0].stories[0].file).toBeDefined();
-    expect(metadata['@nvidia-elements/core'].elements[0].stories[0].template).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].elements[0].stories).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].elements[0].stories.length).toBeGreaterThan(0);
+    expect(metadata.projects['@nvidia-elements/core'].elements[0].stories[0].id).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].elements[0].stories[0].file).toBeDefined();
+    expect(metadata.projects['@nvidia-elements/core'].elements[0].stories[0].template).toBeDefined();
   });
 });
diff --git a/projects/internals/metadata/src/node/metadata.utils.ts b/projects/internals/metadata/src/node/metadata.utils.ts
index 1d9615de4..febd4b05b 100644
--- a/projects/internals/metadata/src/node/metadata.utils.ts
+++ b/projects/internals/metadata/src/node/metadata.utils.ts
@@ -5,7 +5,7 @@ import { globSync } from 'glob';
 import type {
   MetadataCustomElementsManifest,
   MetadataCustomElementsManifestDeclaration,
-  MetadataElementSories,
+  MetadataElementStories,
   MetadataLighthouseElementReport,
   MetadataLighthouseReport,
   MetadataPackage,
@@ -15,12 +15,14 @@ import type {
   MetadataTestReport,
   MetadataUnitTestCoverageSummary,
   MetadataUnitTestCoverageSummaryReport,
-  MetadataSummary
+  MetadataType,
+  MetadataElement
 } from '../types.js';
+import { elementMetadataToMarkdown, getElementChangelog } from '../utils/index.ts';
 
 const BASE_ELEMENT_INTERFACE_PATH = resolve('../../elements/src/internal/types/index.ts');
 
-const stories: MetadataElementSories[] = [
+const stories: MetadataElementStories[] = [
   ...globSync(`${resolve('../../elements')}/dist/**/*.stories.json`),
   ...globSync(`${resolve('../../monaco')}/dist/**/*.stories.json`)
 ]
@@ -32,9 +34,10 @@ function getPackageFile(basePath: string): MetadataPackage {
 }
 
 function getChangelog(basePath: string): string {
-  return existsSync(new URL(basePath + '/CHANGELOG.md', import.meta.url))
+  const changelog = existsSync(new URL(basePath + '/CHANGELOG.md', import.meta.url))
     ? readFileSync(new URL(basePath + '/CHANGELOG.md', import.meta.url), 'utf8')
-    : null;
+    : '';
+  return changelog.includes('@elements') ? changelog.split('@elements')[0] : changelog;
 }
 
 function getReadMe(basePath: string): string {
@@ -144,6 +147,7 @@ function getSSRReport(basePath: string): MetadataSSRElementReport[] {
 
 function getElementMetadata(
   packageName: string,
+  packageChangelog: string,
   customElementsManifest: MetadataCustomElementsManifest,
   testCoverage: MetadataTestReport,
   lighthouseReport: MetadataLighthouseReport,
@@ -154,8 +158,9 @@ function getElementMetadata(
 
   return elementDeclarations
     .map(d => d.tagName)
-    .reduce((elements: MetadataProject[], name) => {
+    .reduce((elements: MetadataElement[], name) => {
       const manifest = elementDeclarations.find(e => e.tagName === name);
+      const markdown = elementMetadataToMarkdown(manifest);
       const lighthouse: MetadataLighthouseElementReport = lighthouseReport[packageName][
         Object.keys(lighthouseReport[packageName]).find(key => name === 'key' || name.startsWith(key)) ?? ''
       ] ?? {
@@ -177,8 +182,12 @@ function getElementMetadata(
         hydration: false
       };
 
-      const metadata = {
+      const changelog = getElementChangelog(name, packageChangelog);
+
+      const metadata: MetadataElement = {
         name,
+        markdown,
+        changelog,
         manifest,
         tests: {
           unit,
@@ -193,7 +202,7 @@ function getElementMetadata(
     .sort((a, b) => (a.name < b.name ? -1 : 1));
 }
 
-function getElementsStandardAPIProperties() {
+function getElementsStandardAPIProperties(): MetadataType[] {
   const project = new Project();
   const file = project.addSourceFileAtPath(BASE_ELEMENT_INTERFACE_PATH);
   const base = file
@@ -203,11 +212,11 @@ function getElementsStandardAPIProperties() {
     name: n.name,
     type: n.type,
     description: n.docs ? (n.docs[0] as OptionalKind)?.description : ''
-  }));
-  return { props: props ?? [] };
+  })) as MetadataType[];
+  return props ?? [];
 }
 
-async function getProjectMetadata(basePath) {
+async function getProjectMetadata(basePath): Promise {
   const packageFile = getPackageFile(basePath);
   const changelog = getChangelog(basePath);
   const readme = getReadMe(basePath);
@@ -222,25 +231,36 @@ async function getProjectMetadata(basePath) {
     readme,
     changelog,
     tests,
-    elements: getElementMetadata(packageFile.name, customElementsManifest, tests, lighthouseReport, ssrReport)
+    elements: getElementMetadata(
+      packageFile.name,
+      changelog,
+      customElementsManifest,
+      tests,
+      lighthouseReport,
+      ssrReport
+    )
   };
 }
 
 export async function getMetadata() {
+  const elements = await getProjectMetadata('../../../../elements');
+  elements.types = getElementsStandardAPIProperties();
+
   return {
     created: new Date().toISOString(),
-    types: getElementsStandardAPIProperties(),
-    '@nvidia-elements/core': await getProjectMetadata('../../../../elements'),
-    '@nvidia-elements/core-react': await getProjectMetadata('../../../../elements-react'),
-    '@nvidia-elements/styles': await getProjectMetadata('../../../../styles'),
-    '@nvidia-elements/testing': await getProjectMetadata('../../../../testing'),
-    '@nvidia-elements/themes': await getProjectMetadata('../../../../themes'),
-    '@nvidia-elements/behaviors-alpine': await getProjectMetadata('../../../../labs/behaviors-alpine'),
-    '@nvidia-elements/brand': await getProjectMetadata('../../../../labs/brand'),
-    '@nvidia-elements/code': await getProjectMetadata('../../../../labs/code'),
-    '@nvidia-elements/forms': await getProjectMetadata('../../../../labs/forms'),
-    '@nvidia-elements/playwright-screencast': await getProjectMetadata('../../../../labs/playwright-screencast'),
-    '@nvidia-elements/monaco': await getProjectMetadata('../../../../monaco'),
-    '@nve-internals/metadata': await getProjectMetadata('../../../../internals/metadata')
-  } as MetadataSummary;
+    projects: {
+      '@nvidia-elements/core': elements,
+      '@nvidia-elements/core-react': await getProjectMetadata('../../../../elements-react'),
+      '@nvidia-elements/styles': await getProjectMetadata('../../../../styles'),
+      '@nvidia-elements/testing': await getProjectMetadata('../../../../testing'),
+      '@nvidia-elements/themes': await getProjectMetadata('../../../../themes'),
+      '@nvidia-elements/behaviors-alpine': await getProjectMetadata('../../../../labs/behaviors-alpine'),
+      '@nvidia-elements/brand': await getProjectMetadata('../../../../labs/brand'),
+      '@nvidia-elements/code': await getProjectMetadata('../../../../labs/code'),
+      '@nvidia-elements/forms': await getProjectMetadata('../../../../labs/forms'),
+      '@nvidia-elements/playwright-screencast': await getProjectMetadata('../../../../labs/playwright-screencast'),
+      '@nvidia-elements/monaco': await getProjectMetadata('../../../../monaco'),
+      '@nve-internals/metadata': await getProjectMetadata('../../../../internals/metadata')
+    }
+  };
 }
diff --git a/projects/internals/metadata/src/services/av-infra.service.test.ts b/projects/internals/metadata/src/services/av-infra.service.test.ts
new file mode 100644
index 000000000..dc5e242b4
--- /dev/null
+++ b/projects/internals/metadata/src/services/av-infra.service.test.ts
@@ -0,0 +1,11 @@
+import { describe, expect, it } from 'vitest';
+import { AVInfraService } from './av-infra.service.js';
+
+describe('AVInfraService', () => {
+  it('should return the av-infra metadata', async () => {
+    const metadata = await AVInfraService.getMetadata();
+    expect(metadata).toBeDefined();
+    expect(metadata.created).toBeDefined();
+    expect(metadata.projects).toBeDefined();
+  });
+});
diff --git a/projects/internals/metadata/src/services/av-infra.service.ts b/projects/internals/metadata/src/services/av-infra.service.ts
new file mode 100644
index 000000000..06d43c719
--- /dev/null
+++ b/projects/internals/metadata/src/services/av-infra.service.ts
@@ -0,0 +1,10 @@
+export class AVInfraService {
+  static #metadata = null;
+
+  static async getMetadata() {
+    if (!AVInfraService.#metadata) {
+      AVInfraService.#metadata = (await import('../../static/av-infra.json', { with: { type: 'json' } })).default;
+    }
+    return AVInfraService.#metadata;
+  }
+}
diff --git a/projects/internals/metadata/src/services/index.ts b/projects/internals/metadata/src/services/index.ts
index 2b022704b..55b792143 100644
--- a/projects/internals/metadata/src/services/index.ts
+++ b/projects/internals/metadata/src/services/index.ts
@@ -1 +1,3 @@
 export * from './metadata.service.js';
+export * from './av-infra.service.js';
+export * from './playground.js';
diff --git a/projects/internals/metadata/src/services/metadata.service.test.ts b/projects/internals/metadata/src/services/metadata.service.test.ts
index 1a6f42831..b10fd915b 100644
--- a/projects/internals/metadata/src/services/metadata.service.test.ts
+++ b/projects/internals/metadata/src/services/metadata.service.test.ts
@@ -7,11 +7,4 @@ describe('MetadataService', () => {
     expect(metadata).toBeDefined();
     expect(metadata.created).toBeDefined();
   });
-
-  it('should return the elements metadata', async () => {
-    const elementsMetadata = await MetadataService.getMaglevMetadata();
-    expect(elementsMetadata).toBeDefined();
-    expect(elementsMetadata.created).toBeDefined();
-    expect(elementsMetadata.projects).toBeDefined();
-  });
 });
diff --git a/projects/internals/metadata/src/services/metadata.service.ts b/projects/internals/metadata/src/services/metadata.service.ts
index a45c89588..a21dc196e 100644
--- a/projects/internals/metadata/src/services/metadata.service.ts
+++ b/projects/internals/metadata/src/services/metadata.service.ts
@@ -5,12 +5,15 @@ export class MetadataService {
 
   static async getMetadata(): Promise {
     if (!MetadataService.#metadata) {
-      MetadataService.#metadata = (await import('../../static/index.json', { with: { type: 'json' } })).default;
+      try {
+        MetadataService.#metadata = (await import('../../static/index.json', { with: { type: 'json' } })).default;
+      } catch {
+        /* istanbul ignore next -- @preserve */
+        MetadataService.#metadata = fetch(
+          'https://NVIDIA.github.io/elements/metadata/index.json'
+        ).then(res => res.json());
+      }
     }
     return MetadataService.#metadata;
   }
-
-  static async getMaglevMetadata() {
-    return (await import('../../static/elements.json', { with: { type: 'json' } })).default;
-  }
 }
diff --git a/projects/internals/metadata/src/services/playground.test.ts b/projects/internals/metadata/src/services/playground.test.ts
new file mode 100644
index 000000000..afe6d8d8d
--- /dev/null
+++ b/projects/internals/metadata/src/services/playground.test.ts
@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest';
+import { createPlaygroundURL } from './playground.js';
+import type { MetadataSummary } from '../types.js';
+
+describe('createPlaygroundURL', () => {
+  const metadata = {
+    created: '2021-01-01',
+    projects: {
+      '@nvidia-elements/core': {
+        elements: [
+          {
+            name: 'nve-button',
+            manifest: { metadata: { entrypoint: '@nvidia-elements/core/button', markdown: ' ### Import ' } }
+          }
+        ]
+      },
+      '@nvidia-elements/monaco': {
+        elements: [
+          { name: 'nve-monaco', manifest: { metadata: { entrypoint: '@nvidia-elements/monaco/monaco', markdown: ' ### Import ' } } }
+        ]
+      }
+    }
+  } as unknown as MetadataSummary;
+
+  it('should create a playground URL', () => {
+    const url = createPlaygroundURL('nve-button', { id: 'nve-button', theme: 'light' }, metadata);
+    expect(url.includes('?story=nve-button&files=')).toBe(true);
+  });
+
+  it('should create a playground URL with a referer', () => {
+    const url = createPlaygroundURL(
+      'nve-button',
+      { id: 'nve-button', theme: 'light', referer: 'https://www.nvidia.com' },
+      metadata
+    );
+    expect(url.includes('?story=nve-button&ref=https://www.nvidia.com&files=')).toBe(true);
+  });
+});
diff --git a/projects/internals/metadata/src/services/playground.ts b/projects/internals/metadata/src/services/playground.ts
new file mode 100644
index 000000000..6d4d165b1
--- /dev/null
+++ b/projects/internals/metadata/src/services/playground.ts
@@ -0,0 +1,76 @@
+import { gzipSync } from 'fflate';
+import format from 'html-format';
+import { getElementImports } from '../utils/index.js';
+import type { MetadataSummary } from '../types.js';
+
+interface PlaygroundOptions {
+  id: string;
+  theme: string;
+  referer?: string;
+}
+
+export function createPlaygroundURL(source: string, options: PlaygroundOptions, metadata: MetadataSummary) {
+  const formattedSource = format(
+    source.replaceAll(' nve-theme="dark"', '').replaceAll(' nve-theme="light"', '').replaceAll(' nve-theme="root"', ''),
+    ' '.repeat(2),
+    120
+  );
+  const files = serialize(createDefaultFiles(formattedSource, metadata, options));
+  return `https://elements-stage.nvidia.com/ui/elements-playground/?story=${options.id}${options.referer ? `&ref=${options.referer}` : ''}&files=${files}&version=1`;
+}
+
+function serialize(data, compress = true) {
+  const encoded = new TextEncoder().encode(JSON.stringify(data));
+  const array = compress ? gzipSync(encoded) : encoded;
+  const base64 = globalThis.btoa(String.fromCharCode(...array));
+  return encodeURIComponent(base64);
+}
+
+function createDefaultFiles(content, metadata: MetadataSummary, options: PlaygroundOptions) {
+  const CDN_MODULES_URL = `https://esm.nvidia.com`;
+
+  const template = {
+    'index.html': {
+      content: `
+
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
+
+
+  ${content.trim()}
+
+`
+    },
+    'index.ts': {
+      content: `${getElementImports(content, metadata).join('\n')}`
+    },
+    'importmap.json': {
+      content: `{
+  "imports": {
+    "@nvidia-elements/core": "${CDN_MODULES_URL}/@nvidia-elements/core@latest",
+    "@nvidia-elements/core/": "${CDN_MODULES_URL}/@nvidia-elements/core@latest/",
+    "@nvidia-elements/styles": "${CDN_MODULES_URL}/@nvidia-elements/styles@latest",
+    "@nvidia-elements/styles/": "${CDN_MODULES_URL}/@nvidia-elements/styles@latest/",
+    "@nvidia-elements/themes": "${CDN_MODULES_URL}/@nvidia-elements/themes@latest",
+    "@nvidia-elements/themes/": "${CDN_MODULES_URL}/@nvidia-elements/themes@latest/",
+    "@nvidia-elements/monaco": "${CDN_MODULES_URL}/@nvidia-elements/monaco@latest",
+    "@nvidia-elements/monaco/": "${CDN_MODULES_URL}/@nvidia-elements/monaco@latest/",
+    "@nvidia-elements/code": "${CDN_MODULES_URL}/@nvidia-elements/code@latest",
+    "@nvidia-elements/code/": "${CDN_MODULES_URL}/@nvidia-elements/code@latest/",
+    "@nvidia-elements/forms": "${CDN_MODULES_URL}/@nvidia-elements/forms@latest",
+    "@nvidia-elements/forms/": "${CDN_MODULES_URL}/@nvidia-elements/forms@latest/"
+  }
+}`
+    }
+  };
+
+  return template;
+}
diff --git a/projects/internals/metadata/src/types.ts b/projects/internals/metadata/src/types.ts
index eeca0baa2..3eda3ff7e 100644
--- a/projects/internals/metadata/src/types.ts
+++ b/projects/internals/metadata/src/types.ts
@@ -1,15 +1,19 @@
 export interface MetadataSummary {
   created: string;
-  types: MetadataTypes;
-  '@nvidia-elements/core': MetadataProject;
-  '@nvidia-elements/core-react': MetadataProject;
-  '@nvidia-elements/testing': MetadataProject;
-  '@nvidia-elements/code': MetadataProject;
-  '@nvidia-elements/behaviors-alpine': MetadataProject;
-}
-
-export interface MetadataTypes {
-  props: { name: string; type: string; description: string }[];
+  projects: {
+    '@nvidia-elements/core': MetadataProject;
+    '@nvidia-elements/core-react': MetadataProject;
+    '@nvidia-elements/styles': MetadataProject;
+    '@nvidia-elements/testing': MetadataProject;
+    '@nvidia-elements/themes': MetadataProject;
+    '@nvidia-elements/behaviors-alpine': MetadataProject;
+    '@nvidia-elements/brand': MetadataProject;
+    '@nvidia-elements/code': MetadataProject;
+    '@nvidia-elements/forms': MetadataProject;
+    '@nvidia-elements/playwright-screencast': MetadataProject;
+    '@nvidia-elements/monaco': MetadataProject;
+    '@nve-internals/metadata': MetadataProject;
+  };
 }
 
 export interface MetadataProject {
@@ -19,11 +23,20 @@ export interface MetadataProject {
   changelog: string;
   tests: MetadataTestReport;
   elements: MetadataElement[];
+  types?: MetadataType[];
+}
+
+export interface MetadataType {
+  name: string;
+  type: string;
+  description: string;
 }
 
 export interface MetadataElement {
   name: string;
+  changelog?: string;
   manifest?: MetadataCustomElementsManifestDeclaration;
+  markdown?: string;
   tests: {
     unit: {
       coverageTotal: number;
@@ -34,10 +47,10 @@ export interface MetadataElement {
       hydration: boolean;
     };
   };
-  stories: MetadataStory[];
+  stories?: MetadataStory[];
 }
 
-export interface MetadataElementSories {
+export interface MetadataElementStories {
   element: string;
   stories: MetadataStory[];
 }
@@ -116,6 +129,8 @@ export interface MetadataCustomElementsManifestDeclaration {
   kind: string;
   path: string;
   name: string;
+  description: string;
+  deprecated: string;
   cssProperties: {
     name: string;
     description: string;
@@ -144,6 +159,10 @@ export interface MetadataCustomElementsManifestDeclaration {
     description: string;
     fieldName: string;
   }[];
+  events: {
+    name: string;
+    description: string;
+  }[];
   superclass: {
     name: string;
     package: string;
@@ -164,6 +183,7 @@ export interface MetadataCustomElementsManifestDeclaration {
     figma: string;
     status: string;
     behavior: string;
+    example: string;
   };
 }
 
diff --git a/projects/internals/metadata/src/utils/index.test.ts b/projects/internals/metadata/src/utils/index.test.ts
new file mode 100644
index 000000000..4f9e3586f
--- /dev/null
+++ b/projects/internals/metadata/src/utils/index.test.ts
@@ -0,0 +1,369 @@
+import { describe, expect, it } from 'vitest';
+import {
+  getElementImports,
+  getPublishedPackageNames,
+  searchPackageNames,
+  searchTagNames,
+  getChangelogs,
+  getCoverageSummaries,
+  elementMetadataToMarkdown,
+  searchPublishedPackageNames,
+  getPackageNames,
+  searchChangelogs,
+  getAvailableElementsAPIs
+} from './index.js';
+import type { MetadataSummary } from '../types.js';
+
+describe('getElementImports', () => {
+  const metadata = {
+    projects: {
+      '@nvidia-elements/core': {
+        elements: [
+          { name: 'nve-button', manifest: { metadata: { entrypoint: '@nvidia-elements/core/button' } } },
+          { name: 'nve-badge', manifest: { metadata: { entrypoint: '@nvidia-elements/core/badge' } } }
+        ]
+      },
+      '@nvidia-elements/monaco': {
+        elements: [{ name: 'nve-monaco-input', manifest: { metadata: { entrypoint: '@nvidia-elements/monaco/input' } } }]
+      }
+    }
+  } as unknown as MetadataSummary;
+
+  it('should get element imports', () => {
+    const html = '';
+    const imports = getElementImports(html, metadata);
+    expect(imports[0]).toBe(`import '@nvidia-elements/core/button/define.js';`);
+  });
+
+  it('should get multiple element imports', () => {
+    const html = ' ';
+    const imports = getElementImports(html, metadata);
+    expect(imports[0]).toBe(`import '@nvidia-elements/core/button/define.js';`);
+    expect(imports[1]).toBe(`import '@nvidia-elements/core/badge/define.js';`);
+  });
+
+  it('should get monaco imports', () => {
+    const html = '';
+    const imports = getElementImports(html, metadata);
+    expect(imports[0]).toBe(`import '@nvidia-elements/monaco/input/define.js';`);
+  });
+
+  it('should get codeblock imports', () => {
+    const html = '';
+    const imports = getElementImports(html, metadata);
+    expect(imports[0]).toBe(`import '@nvidia-elements/code/codeblock/languages/html.js';`);
+    expect(imports[1]).toBe(`import '@nvidia-elements/code/codeblock/languages/css.js';`);
+    expect(imports[2]).toBe(`import '@nvidia-elements/code/codeblock/languages/json.js';`);
+    expect(imports[3]).toBe(`import '@nvidia-elements/code/codeblock/languages/typescript.js';`);
+    expect(imports[4]).toBe(`import '@nvidia-elements/code/codeblock/define.js';`);
+  });
+
+  it('should get lazy element imports', () => {
+    const html = '';
+    const imports = getElementImports(html, metadata, true);
+    expect(imports[0]).toBe(`import('@nvidia-elements/core/button/define.js');`);
+  });
+});
+
+describe('getPackageNames', () => {
+  const metadata = {
+    projects: {
+      '@nvidia-elements/core': {},
+      '@nvidia-elements/monaco': {},
+      '@nvidia-elements/code': {},
+      '@nve-internals/metadata': {}
+    }
+  } as unknown as MetadataSummary;
+
+  it('should return package names', () => {
+    expect(getPackageNames(metadata)).toEqual([
+      '@nvidia-elements/core',
+      '@nvidia-elements/monaco',
+      '@nvidia-elements/code',
+      '@nve-internals/metadata'
+    ]);
+  });
+});
+
+describe('searchPackageNames', () => {
+  const metadata = {
+    projects: {
+      '@nvidia-elements/core': {},
+      '@nvidia-elements/monaco': {},
+      '@nvidia-elements/code': {}
+    }
+  } as unknown as MetadataSummary;
+
+  it('should search package names', () => {
+    expect(searchPackageNames('elements', metadata)).toEqual(['@nvidia-elements/core']);
+    expect(searchPackageNames('monaco', metadata)).toEqual(['@nvidia-elements/monaco']);
+    expect(searchPackageNames('code', metadata)).toEqual(['@nvidia-elements/code']);
+    expect(searchPackageNames('@nvidia-elements/core', metadata)).toEqual(['@nvidia-elements/core']);
+    expect(searchPackageNames('@nvidia-elements/monaco', metadata)).toEqual(['@nvidia-elements/monaco']);
+    expect(searchPackageNames('@nvidia-elements/code', metadata)).toEqual(['@nvidia-elements/code']);
+    expect(searchPackageNames('elements monaco code', metadata)).toEqual([
+      '@nvidia-elements/core',
+      '@nvidia-elements/monaco',
+      '@nvidia-elements/code'
+    ]);
+  });
+});
+
+describe('searchPublishedPackageNames', () => {
+  const metadata = {
+    projects: {
+      '@nvidia-elements/core': {},
+      '@nvidia-elements/monaco': {},
+      '@nvidia-elements/code': {},
+      '@nve-internals/metadata': {},
+      '@nvidia-elements/forms': { version: '0.0.0' }
+    }
+  } as unknown as MetadataSummary;
+
+  it('should search published package names', () => {
+    expect(searchPublishedPackageNames('elements', metadata)).toEqual(['@nvidia-elements/core']);
+    expect(searchPublishedPackageNames('monaco', metadata)).toEqual(['@nvidia-elements/monaco']);
+    expect(searchPublishedPackageNames('code', metadata)).toEqual(['@nvidia-elements/code']);
+    expect(searchPublishedPackageNames('@nvidia-elements/core', metadata)).toEqual(['@nvidia-elements/core']);
+    expect(searchPublishedPackageNames('@nvidia-elements/monaco', metadata)).toEqual(['@nvidia-elements/monaco']);
+    expect(searchPublishedPackageNames('@nvidia-elements/code', metadata)).toEqual(['@nvidia-elements/code']);
+    expect(searchPublishedPackageNames('elements monaco code', metadata)).toEqual([
+      '@nvidia-elements/core',
+      '@nvidia-elements/monaco',
+      '@nvidia-elements/code'
+    ]);
+
+    expect(searchPublishedPackageNames('forms', metadata)).toEqual(['@nvidia-elements/core', '@nvidia-elements/monaco', '@nvidia-elements/code']);
+
+    expect(searchPublishedPackageNames('metadata', metadata)).toEqual([
+      '@nvidia-elements/core',
+      '@nvidia-elements/monaco',
+      '@nvidia-elements/code'
+    ]);
+  });
+});
+
+describe('getPublishedPackageNames', () => {
+  const metadata = {
+    projects: {
+      '@nvidia-elements/core': { version: '1.0.0' },
+      '@nvidia-elements/monaco': { version: '1.0.0' },
+      '@nvidia-elements/code': { version: '1.0.0' },
+      '@nve-internals/metadata': { version: '0.0.0' }
+    }
+  } as unknown as MetadataSummary;
+
+  it('should get published package names', () => {
+    expect(getPublishedPackageNames(metadata)).toEqual(['@nvidia-elements/core', '@nvidia-elements/monaco', '@nvidia-elements/code']);
+  });
+});
+
+describe('getChangelogs', () => {
+  const metadata = {
+    projects: {
+      '@nvidia-elements/core': { changelog: '1.0.0' },
+      '@nvidia-elements/monaco': { changelog: '1.0.0' },
+      '@nvidia-elements/code': { changelog: '1.0.0' }
+    }
+  } as unknown as MetadataSummary;
+
+  it('should get changelogs', async () => {
+    expect(getChangelogs(metadata)).toEqual({
+      '@nvidia-elements/core': '1.0.0',
+      '@nvidia-elements/monaco': '1.0.0',
+      '@nvidia-elements/code': '1.0.0'
+    });
+  });
+});
+
+describe('searchChangelogs', () => {
+  const metadata = {
+    projects: {
+      '@nvidia-elements/core': { changelog: '1.0.0' },
+      '@nvidia-elements/monaco': { changelog: '1.0.0' },
+      '@nvidia-elements/code': { changelog: '1.0.0' }
+    }
+  } as unknown as MetadataSummary;
+
+  it('should search changelogs', () => {
+    expect(searchChangelogs('monaco', metadata)).toEqual({ '@nvidia-elements/monaco': '1.0.0' });
+    expect(searchChangelogs('elements', metadata)).toEqual({ '@nvidia-elements/core': '1.0.0' });
+    expect(searchChangelogs('code', metadata)).toEqual({ '@nvidia-elements/code': '1.0.0' });
+    expect(searchChangelogs('elements monaco', metadata)).toEqual({
+      '@nvidia-elements/core': '1.0.0',
+      '@nvidia-elements/monaco': '1.0.0'
+    });
+    expect(searchChangelogs('no-match', metadata)).toEqual({
+      '@nvidia-elements/core': '1.0.0',
+      '@nvidia-elements/monaco': '1.0.0',
+      '@nvidia-elements/code': '1.0.0'
+    });
+  });
+});
+
+describe('getAvailableElementsAPIs', () => {
+  const metadata = {
+    projects: {
+      '@nvidia-elements/core': {
+        elements: [
+          { name: 'nve-button', manifest: { description: 'button description' } },
+          { name: 'nve-badge', manifest: { description: 'badge description' } },
+          { name: 'nve-deprecated', manifest: { description: 'deprecated', deprecated: 'true' } },
+          { name: 'nve-no-description', manifest: {} }
+        ]
+      }
+    }
+  } as unknown as MetadataSummary;
+
+  it('should return list of available elements APIs', () => {
+    const apis = getAvailableElementsAPIs(metadata);
+    expect(apis.length).toEqual(2);
+    expect(apis).toEqual([
+      { name: 'nve-button', description: 'button description' },
+      { name: 'nve-badge', description: 'badge description' }
+    ]);
+  });
+});
+
+describe('searchTagNames', () => {
+  const metadata = {
+    projects: {
+      '@nvidia-elements/core': {
+        elements: [{ name: 'nve-button' }, { name: 'nve-badge' }, { name: 'nve-grid' }, { name: 'nve-grid-cell' }]
+      }
+    }
+  } as unknown as MetadataSummary;
+
+  it('should search tag names', () => {
+    expect(searchTagNames('nve-button', metadata)).toEqual(['nve-button']);
+    expect(searchTagNames('nve-badge', metadata)).toEqual(['nve-badge']);
+    expect(searchTagNames('nve-button and nve-badge', metadata)).toEqual(['nve-button', 'nve-badge']);
+    expect(searchTagNames('nve-grid', metadata)).toEqual(['nve-grid', 'nve-grid-cell']);
+    expect(searchTagNames('nve-grid-cell', metadata)).toEqual(['nve-grid', 'nve-grid-cell']);
+    expect(searchTagNames('no-match', metadata)).toEqual([]);
+    expect(searchTagNames('nve-no-match', metadata)).toEqual([]);
+  });
+});
+
+describe('getCoverageSummaries', () => {
+  const metadata = {
+    projects: {
+      '@nvidia-elements/core': {
+        tests: {
+          coverageTotal: {
+            branches: { pct: 100 },
+            lines: { pct: 100 },
+            statements: { pct: 100 },
+            functions: { pct: 100 }
+          }
+        }
+      },
+      '@nvidia-elements/monaco': {
+        tests: {
+          coverageTotal: {
+            branches: { pct: 100 },
+            lines: { pct: 100 },
+            statements: { pct: 100 },
+            functions: { pct: 100 }
+          }
+        }
+      },
+      '@nvidia-elements/code': {
+        tests: {
+          coverageTotal: {
+            branches: { pct: 100 },
+            lines: { pct: 100 },
+            statements: { pct: 100 },
+            functions: { pct: 100 }
+          }
+        }
+      }
+    }
+  } as unknown as MetadataSummary;
+
+  it('should get coverage summaries', () => {
+    expect(getCoverageSummaries(metadata)).toEqual({
+      '@nvidia-elements/core': { branches: 100, lines: 100, statements: 100, functions: 100, total: 100 },
+      '@nvidia-elements/monaco': { branches: 100, lines: 100, statements: 100, functions: 100, total: 100 },
+      '@nvidia-elements/code': { branches: 100, lines: 100, statements: 100, functions: 100, total: 100 }
+    });
+  });
+});
+
+describe('elementMetadataToMarkdown', () => {
+  const metadata = {
+    projects: {
+      '@nvidia-elements/core': {
+        elements: [
+          {
+            name: 'nve-button',
+            manifest: {
+              tagName: 'nve-button',
+              description: 'button description',
+              slots: [{ name: 'slot', description: 'slot description' }],
+              attributes: [
+                { name: 'attribute', description: 'attribute description', type: { text: 'attribute type' } }
+              ],
+              members: [{ name: 'member', description: 'member description', type: { text: 'member type' } }],
+              cssProperties: [
+                { name: 'cssProperty', description: 'cssProperty description', type: { text: 'cssProperty type' } }
+              ],
+              events: [{ name: 'event', description: 'event description' }],
+              metadata: {
+                entrypoint: '@nvidia-elements/core/button',
+                example: 'Hello'
+              }
+            }
+          },
+          {
+            name: 'nve-badge',
+            manifest: {
+              tagName: 'nve-badge',
+              metadata: {
+                entrypoint: '@nvidia-elements/core/badge'
+              }
+            }
+          }
+        ]
+      }
+    }
+  } as unknown as MetadataSummary;
+
+  it('should create CEM markdown', () => {
+    const markdown = elementMetadataToMarkdown(metadata.projects['@nvidia-elements/core'].elements[0].manifest);
+    expect(markdown.includes('## nve-button')).toBe(true);
+    expect(markdown.includes('button description')).toBe(true);
+    expect(markdown.includes('### Example')).toBe(true);
+    expect(markdown.includes('Hello')).toBe(true);
+    expect(markdown.includes('### Import')).toBe(true);
+    expect(markdown.includes('@nvidia-elements/core/button')).toBe(true);
+    expect(markdown.includes('### Slots')).toBe(true);
+    expect(markdown.includes('| slot | slot description |')).toBe(true);
+    expect(markdown.includes('### Attributes')).toBe(true);
+    expect(markdown.includes('| attribute | `attribute type` | attribute description |')).toBe(true);
+    expect(markdown.includes('### Properties')).toBe(true);
+    expect(markdown.includes('| member | `member type` | member description |')).toBe(true);
+    expect(markdown.includes('### Events')).toBe(true);
+    expect(markdown.includes('| event | event description |')).toBe(true);
+    expect(markdown.includes('### CSS Properties')).toBe(true);
+    expect(markdown.includes('| cssProperty | cssProperty description |')).toBe(true);
+  });
+
+  it('should create CEM markdown with placeholders', () => {
+    const markdown = elementMetadataToMarkdown(metadata.projects['@nvidia-elements/core'].elements[1].manifest);
+    expect(markdown.includes('## nve-badge')).toBe(true);
+    expect(markdown.includes('No example available.')).toBe(true);
+    expect(markdown.includes('### Import')).toBe(true);
+    expect(markdown.includes('@nvidia-elements/core/badge')).toBe(true);
+    expect(markdown.includes('### Slots')).toBe(true);
+    expect(markdown.includes('No slots available.')).toBe(true);
+    expect(markdown.includes('### Attributes')).toBe(true);
+    expect(markdown.includes('No Attributes available.')).toBe(true);
+    expect(markdown.includes('### Properties')).toBe(true);
+    expect(markdown.includes('No Properties available.')).toBe(true);
+    expect(markdown.includes('### Events')).toBe(true);
+    expect(markdown.includes('No Custom Events available.')).toBe(true);
+    expect(markdown.includes('### CSS Properties')).toBe(true);
+    expect(markdown.includes('No CSS Properties available.')).toBe(true);
+  });
+});
diff --git a/projects/internals/metadata/src/utils/index.ts b/projects/internals/metadata/src/utils/index.ts
new file mode 100644
index 000000000..b878339e3
--- /dev/null
+++ b/projects/internals/metadata/src/utils/index.ts
@@ -0,0 +1,292 @@
+import type { MetadataCustomElementsManifestDeclaration, MetadataSummary } from '../types.js';
+
+/**
+ * Given a query, returns the tags that match the query
+ */
+export function searchTagNames(query: string, metadata: MetadataSummary): string[] {
+  const elements = Object.values(metadata.projects)
+    .filter(i => i.elements)
+    .flatMap(i => i.elements);
+  return fuzzyMatch(
+    query,
+    elements.map(e => e.name)
+  );
+}
+
+function fuzzyMatch(search: string, candidates: string[]) {
+  const words = search
+    .toLowerCase()
+    .split(/[^a-z0-9\-]+/)
+    .filter(w => w.length > 2);
+
+  return candidates.filter(candidate => {
+    const candidateParts = new Set(
+      candidate
+        .toLowerCase()
+        .split(/[\/-]/)
+        .filter(i => i !== 'nve')
+    );
+    return words.some(word => {
+      return word.split(/[\/-]/).some(item => candidateParts.has(item));
+    });
+  });
+}
+
+export function searchPackageNames(query: string, metadata: MetadataSummary): string[] {
+  return fuzzyMatch(query, getPackageNames(metadata));
+}
+
+export function searchPublishedPackageNames(query: string, metadata: MetadataSummary): string[] {
+  const packages = getPublishedPackageNames(metadata);
+  const matches = fuzzyMatch(query, packages);
+  return matches.length ? matches : packages;
+}
+
+export function getPackageNames(metadata: MetadataSummary) {
+  return Object.keys(metadata.projects).filter(i => i.startsWith('@nve'));
+}
+
+export function getPublishedPackageNames(metadata: MetadataSummary) {
+  return Object.keys(metadata.projects).filter(
+    i => i.startsWith('@nve') && !i.startsWith('@nve-internals') && metadata.projects[i].version !== '0.0.0'
+  );
+}
+
+export function getChangelogs(metadata: MetadataSummary) {
+  return Object.keys(metadata.projects).reduce((results, project) => {
+    return { ...results, [project]: metadata.projects[project].changelog };
+  }, {});
+}
+
+export function searchChangelogs(query: string, metadata: MetadataSummary) {
+  const changelogs = getChangelogs(metadata);
+  const matches = fuzzyMatch(query, Object.keys(changelogs));
+  return Object.fromEntries(
+    Object.entries(changelogs).filter(([key]) => (matches.length ? matches.includes(key) : true))
+  );
+}
+
+export function searchElementsAPIsMarkdown(query: string, metadata: MetadataSummary) {
+  const matches = new Set(searchTagNames(query, metadata));
+  return Object.values(metadata.projects)
+    .flatMap(i => (i.elements.length ? i.elements : []))
+    .filter(e => matches.has(e.name))
+    .map(e => e.markdown);
+}
+
+export function getCoverageSummaries(metadata: MetadataSummary) {
+  return getPackageNames(metadata).reduce((results, project) => {
+    const coverage = metadata.projects[project].tests.coverageTotal;
+    const summary = {
+      total: coverage.branches.pct,
+      lines: coverage.lines.pct,
+      statements: coverage.statements.pct,
+      functions: coverage.functions.pct,
+      branches: coverage.branches.pct
+    };
+    return { ...results, [project]: summary };
+  }, {});
+}
+
+export function getAvailableElementsAPIs(metadata: MetadataSummary) {
+  return Object.values(metadata.projects)
+    .flatMap(i => (i.elements.length ? i.elements : []))
+    .filter(e => e.manifest?.deprecated !== 'true' && e.manifest.description)
+    .map(e => ({ name: e.name, description: e.manifest.description }));
+}
+
+/* istanbul ignore next -- @preserve */
+let versions: Record = null;
+/* istanbul ignore next -- @preserve */
+export async function getLatestPublishedVersions(metadata: MetadataSummary) {
+  if (!versions) {
+    const names = getPublishedPackageNames(metadata);
+    const packageFile = await Promise.all(
+      names
+        .map(name => `https://esm.nvidia.com/${name}@latest/package.json`)
+        .map(url => {
+          const controller = new AbortController();
+          const timeout = setTimeout(() => controller.abort(), 3000);
+          return fetch(url, { signal: controller.signal })
+            .then(res => {
+              clearTimeout(timeout);
+              return res.json();
+            })
+            .catch(() => {
+              console.warn('Could not fetch latest version from https://esm.nvidia.com');
+              return '0.0.0';
+            });
+        })
+    );
+    versions = packageFile.reduce((acc: Record, pkg) => ({ ...acc, [pkg.name]: pkg.version }), {});
+  }
+  return versions;
+}
+
+export function getElementImports(html: string, metadata: MetadataSummary, lazy = false) {
+  const IMPORTS = [...metadata.projects['@nvidia-elements/core'].elements, ...metadata.projects['@nvidia-elements/monaco'].elements]
+    .filter(element => html?.includes(`<${element.name}`))
+    .filter(element => element.manifest?.deprecated !== 'true' && element.manifest?.metadata.entrypoint)
+    .map(element => {
+      const path = `${element.manifest.metadata.entrypoint}/define.js`;
+      return lazy ? `import('${path}');` : `import '${path}';`;
+    });
+
+  const ELEMENTS_CODE_IMPORTS = html.includes('nve-codeblock')
+    ? [
+        `import '@nvidia-elements/code/codeblock/languages/html.js';`,
+        `import '@nvidia-elements/code/codeblock/languages/css.js';`,
+        `import '@nvidia-elements/code/codeblock/languages/json.js';`,
+        `import '@nvidia-elements/code/codeblock/languages/typescript.js';`,
+        `import '@nvidia-elements/code/codeblock/define.js';`
+      ]
+    : [];
+
+  return [...IMPORTS, ...ELEMENTS_CODE_IMPORTS];
+}
+
+export function changelogMarkdownToJSON(changelog: string) {
+  return changelog
+    .split('## [')
+    .map(release => `## [${release}`)
+    .map(releaseString => {
+      const title = releaseString.split('\n')[0].replace('## [', '[');
+      const releaseBody = releaseString.split('\n').slice(1).join('\n');
+      const bugFixes = releaseBody.includes('### Bug Fixes')
+        ? releaseBody
+            .split('### Bug Fixes')[1]
+            ?.trim()
+            ?.split('\n')
+            .map(line => line.trim())
+        : [];
+      const features = releaseBody.includes('### Features')
+        ? releaseBody
+            .split('### Features')[1]
+            ?.trim()
+            ?.split('\n')
+            .map(line => line.trim())
+        : [];
+      const breakingChanges = releaseBody.includes('### Breaking Changes')
+        ? releaseBody
+            .split('### Breaking Changes')[1]
+            ?.trim()
+            ?.split('\n')
+            .map(line => line.trim())
+        : [];
+      return { title, bugFixes, features, breakingChanges };
+    });
+}
+
+export function getElementChangelog(name: string, changelog: string) {
+  const changelogJSON = changelogMarkdownToJSON(changelog);
+  const elementChangelog = changelogJSON
+    .map(release => {
+      release.bugFixes =
+        release.bugFixes.filter(bugFix => bugFix.includes(name) || bugFix.includes(name.replace('nve-', ''))) || [];
+      release.features =
+        release.features.filter(feature => feature.includes(name) || feature.includes(name.replace('nve-', ''))) || [];
+      release.breakingChanges =
+        release.breakingChanges.filter(
+          breakingChange => breakingChange.includes(name) || breakingChange.includes(name.replace('nve-', ''))
+        ) || [];
+      return release;
+    })
+    .filter(
+      release => release.bugFixes.length > 0 || release.features.length > 0 || release.breakingChanges.length > 0
+    );
+
+  const releasesMarkdown = elementChangelog.map(release => {
+    const features = release.features.length > 0 ? `\n\n### Features\n${release.features.join('\n')}` : '';
+    const breakingChanges =
+      release.breakingChanges.length > 0 ? `\n\n### Breaking Changes\n${release.breakingChanges.join('\n')}` : '';
+    const bugFixes = release.bugFixes.length > 0 ? `\n\n### Bug Fixes\n${release.bugFixes.join('\n')}` : '';
+    return `## ${release.title}${features}${breakingChanges}${bugFixes}`;
+  });
+
+  return `# Changelog - ${name}\n\n${releasesMarkdown.join('\n\n')}`;
+}
+
+export function elementMetadataToMarkdown(manifest: MetadataCustomElementsManifestDeclaration) {
+  if (manifest.tagName) {
+    return `
+## ${manifest.tagName}
+${manifest.description ? `\n${manifest.description}` : ''}
+
+### Example
+
+${manifest.metadata.example ? `\`\`\`html\n${manifest.metadata.example}\n\`\`\`` : 'No example available.'}
+
+### Import
+
+\`\`\`javascript
+import '${manifest.metadata.entrypoint}/define.js';
+\`\`\`
+
+### Slots
+${
+  manifest.slots
+    ? `
+| name | description |
+| ---- | ----------- |
+${manifest.slots.map(i => `| ${i.name} | ${i.description} |`).join('\n')}`
+    : 'No slots available.'
+}
+
+### Attributes
+${
+  manifest.attributes?.length
+    ? `
+| name | value | description |
+| ---- | ----- | ----------- |
+${manifest.attributes
+  .map(i => {
+    const type = i.type?.text ? i.type.text.replace(/\|/g, '\\|').split('\n').join('') : '';
+    const description = i.description?.replace(/\|/g, '\\|')?.split('\n')?.join('');
+    return `| ${i.name} | \`${type}\` | ${description} |`;
+  })
+  .join('\n')}`
+    : 'No Attributes available.'
+}
+
+### Properties
+${
+  manifest.attributes?.length
+    ? `
+| name | value | description |
+| ---- | ----- | ----------- |
+${manifest.members
+  .map(i => {
+    const type = i.type?.text ? i.type.text.replace(/\|/g, '\\|').split('\n').join('') : '';
+    const description = i.description ? i.description.replace(/\|/g, '\\|').split('\n').join('') : '';
+    return `| ${i.name} | \`${type}\` | ${description ?? ''} |`;
+  })
+  .join('\n')}`
+    : 'No Properties available.'
+}
+
+### Events
+${
+  manifest.events?.length
+    ? `
+| name | description |
+| ---- | ----------- |
+${manifest.events
+  .map(i => {
+    const description = i.description ? i.description.replace(/\|/g, '\\|').split('\n').join('') : '';
+    return `| ${i.name} | ${description ?? ''} |`;
+  })
+  .join('\n')}`
+    : 'No Custom Events available.'
+}
+
+### CSS Properties
+${
+  manifest.cssProperties?.length
+    ? `
+| name | description |
+| ---- | ----------- |
+${manifest.cssProperties.map(i => `| ${i.name} | ${i.description ?? ''} |`).join('\n')}`
+    : 'No CSS Properties available.'
+}`.trim();
+  }
+}
diff --git a/projects/internals/metadata/static/maglev.json b/projects/internals/metadata/static/av-infra.json
similarity index 100%
rename from projects/internals/metadata/static/maglev.json
rename to projects/internals/metadata/static/av-infra.json
diff --git a/projects/internals/metadata/vitest.config.ts b/projects/internals/metadata/vitest.config.ts
index 5219e4eb6..ab3c0777f 100644
--- a/projects/internals/metadata/vitest.config.ts
+++ b/projects/internals/metadata/vitest.config.ts
@@ -9,7 +9,7 @@ export default mergeConfig(libraryNodeTestConfig, {
     coverage: {
       thresholds: {
         lines: 90,
-        branches: 80,
+        branches: 79,
         functions: 90,
         statements: 90
       },
@@ -17,8 +17,8 @@ export default mergeConfig(libraryNodeTestConfig, {
         // excluding node operations that write to local file system
         'src/node/metadata.ts',
         'src/node/lighthouse.ts',
-        'src/node/elements.ts',
-        'src/node/elements.utils.ts'
+        'src/node/av-infra.ts',
+        'src/node/av-infra.utils.ts'
       ]
     }
   }
diff --git a/projects/internals/vite/src/configs/build.js b/projects/internals/vite/src/configs/build.js
index 27cfaa774..67ad4ee45 100644
--- a/projects/internals/vite/src/configs/build.js
+++ b/projects/internals/vite/src/configs/build.js
@@ -23,7 +23,7 @@ const packageFile = JSON.parse(fs.readFileSync(resolve(process.cwd(), './package
  * @type {import('vite').UserConfig}
  */
 export const libraryBuildConfig = {
-  plugins: [initial(), tsc(), cem(), dts(), bundle(), storiesToJSON()],
+  plugins: [initial(), tsc(), dts(), bundle(), storiesToJSON(), cem()],
   build: {
     cssMinify: prod ? 'esbuild' : false,
     cssCodeSplit: true,
diff --git a/projects/internals/vite/src/plugins/cem.config.mjs b/projects/internals/vite/src/plugins/cem.config.mjs
index 9401c3642..c4dd28a37 100644
--- a/projects/internals/vite/src/plugins/cem.config.mjs
+++ b/projects/internals/vite/src/plugins/cem.config.mjs
@@ -41,7 +41,8 @@ function metadataPlugin() {
         'description',
         'since',
         'axe',
-        'entrypoint'
+        'entrypoint',
+        'example'
       ];
 
       switch (node.kind) {
@@ -79,6 +80,7 @@ function metadataPlugin() {
               themes: true,
               aria: false,
               entrypoint: '',
+              example: '',
               package: JSON.stringify(pkg.exports).includes(classDeclaration.tagName.split('-')[1]),
               ...classDeclaration.metadata
             };
@@ -87,6 +89,7 @@ function metadataPlugin() {
             classDeclaration.metadata.status = getElementStability(classDeclaration.metadata);
             classDeclaration.metadata.behavior = getBehaviorCategory(classDeclaration);
             classDeclaration.metadata.aria = getSpecUrl(classDeclaration);
+            classDeclaration.metadata.example = getExample(classDeclaration, moduleDoc.path);
           }
           break;
       }
@@ -94,6 +97,20 @@ function metadataPlugin() {
   };
 }
 
+function getExample(classDeclaration, path) {
+  if (classDeclaration.metadata.example?.length) {
+    return classDeclaration.metadata.example;
+  } else {
+    const storyPath = path.replace('src', 'dist').replace('.ts', '.stories.json');
+    if (fs.existsSync(storyPath)) {
+      const storyJSON = JSON.parse(fs.readFileSync(storyPath, 'utf-8'));
+      const example = storyJSON.stories[0]?.template?.trim();
+      return example ? example : '';
+    }
+  }
+  return '';
+}
+
 function getElementStability(metadata) {
   let status = 'unknown';
   const preRelease = metadata.apiReview && metadata.storybook?.length;
@@ -171,7 +188,7 @@ function getBehaviorCategory(classDeclaration) {
   return classDeclaration.metadata.category ?? 'content';
 }
 
-export function getSpecUrl(classDeclaration) {
+function getSpecUrl(classDeclaration) {
   if (classDeclaration.metadata.aria) {
     return classDeclaration.metadata.aria;
   }
diff --git a/projects/internals/vite/src/plugins/cem.js b/projects/internals/vite/src/plugins/cem.js
index 1ee93f8e6..acaea52c5 100644
--- a/projects/internals/vite/src/plugins/cem.js
+++ b/projects/internals/vite/src/plugins/cem.js
@@ -12,7 +12,7 @@ export function cem() {
   return {
     name: 'cem',
     apply: 'build',
-    async buildStart() {
+    async buildEnd() {
       if (process.env.VITE_INITIAL_BUILD) {
         const hasConfig = fs.existsSync(resolve('./custom-elements-manifest.config.mjs'));
         const configPath = hasConfig
diff --git a/projects/site/eleventy.config.js b/projects/site/eleventy.config.js
index e8eb0152c..c91c8303c 100644
--- a/projects/site/eleventy.config.js
+++ b/projects/site/eleventy.config.js
@@ -18,7 +18,6 @@ const metadata = await MetadataService.getMetadata();
 // Temporary:Exclude certain components that have low performance gains from SSR or high inline
 // This minimizes the memory footprint of Rollup which builds a dependency graph of all pages
 const ssrEntrypoints = new Set([
-  '@nvidia-elements/core/accordion',
   '@nvidia-elements/core/alert',
   '@nvidia-elements/core/avatar',
   '@nvidia-elements/core/badge',
@@ -28,12 +27,13 @@ const ssrEntrypoints = new Set([
   '@nvidia-elements/core/icon-button',
   '@nvidia-elements/core/logo',
   '@nvidia-elements/core/page',
-  '@nvidia-elements/core/page-header'
+  '@nvidia-elements/core/page-header',
+  '@nvidia-elements/core/tabs'
 ]);
 
 const entrypoints = [
   ...new Set(
-    metadata['@nvidia-elements/core'].elements
+    metadata.projects['@nvidia-elements/core'].elements
       .filter(e => e.manifest?.metadata?.entrypoint && ssrEntrypoints.has(e.manifest?.metadata?.entrypoint))
       .map(
         e => `node_modules/${e.manifest.metadata.entrypoint.replace('@nvidia-elements/core', '@nvidia-elements/core/dist')}/define.js`
diff --git a/projects/site/package.json b/projects/site/package.json
index 1bd9d1849..5b45a916b 100644
--- a/projects/site/package.json
+++ b/projects/site/package.json
@@ -149,9 +149,7 @@
     "@nvidia-elements/themes": "workspace:*",
     "@sentry/browser": "catalog:",
     "compare-versions": "6.1.1",
-    "fflate": "0.8.2",
     "eslint": "catalog:",
-    "html-format": "1.1.7",
     "html-minifier": "4.0.0",
     "lighthouse": "catalog:",
     "lightningcss": "1.30.0",
diff --git a/projects/site/src/_11ty/shortcodes/index.js b/projects/site/src/_11ty/shortcodes/index.js
index 493710961..d8280d0e9 100644
--- a/projects/site/src/_11ty/shortcodes/index.js
+++ b/projects/site/src/_11ty/shortcodes/index.js
@@ -1,14 +1,12 @@
-import { resolve } from 'node:path';
-import { globSync } from 'glob';
-import { readFileSync } from 'node:fs';
+// @ts-check
+
 import markdownIt from 'markdown-it';
-import { MetadataService } from '@nve-internals/metadata';
-import { camelToKebab } from '../utils/index.js';
-import { createPlaygroundURLFromStorySource } from '../utils/playground-url.js';
+import { MetadataService, createPlaygroundURL } from '@nve-internals/metadata';
+import { stories } from '../../../src/stories/utils.js';
 
 const md = markdownIt();
 const metadata = await MetadataService.getMetadata();
-const elements = Object.keys(metadata).flatMap(packageName => metadata[packageName].elements ?? []);
+const elements = Object.keys(metadata.projects).flatMap(packageName => metadata.projects[packageName].elements ?? []);
 
 export async function installShortcode(tag) {
   const element = elements.find(d => d.name === tag);
@@ -42,32 +40,22 @@ export async function apiShortcode(tag, type, value) {
 export async function storyShortcode(tag, storyName, userConfig = { inline: true, height: '95%' }) {
   const config = typeof userConfig === 'string' ? JSON.parse(userConfig) : userConfig;
   let story;
-  let path;
-  let iframePath = '';
 
   if (tag.includes('.stories.json')) {
-    path = tag;
-    story = (await import(path, { with: { type: 'json' } })).default.stories?.find(s => s.id === storyName);
-    iframePath = `stories/${path.replace('.stories.json', '-')}${camelToKebab(storyName)}/`;
+    story = stories.find(s => s.path.includes(tag) && s.id === storyName);
   } else {
-    const stories = globSync(`${resolve('../elements')}/dist/**/*.stories.json`).map(path =>
-      JSON.parse(readFileSync(new URL(path, import.meta.url), 'utf8'))
-    );
-    let name = tag.replace('nve-', '');
-    path = `@nvidia-elements/core/${name}/${name}.stories.json`;
-    story = stories.find(s => s.element === tag)?.stories?.find(s => s.id === storyName);
-    iframePath = `stories/@nvidia-elements/core/${name}/${name}-${camelToKebab(storyName)}/`;
+    story = stories.find(s => s.tagName === tag && s.id === storyName);
   }
 
   const playgroundButton = story
-    ? /* html */ `Playground`
+    ? /* html */ `Playground`
     : '';
 
   const reload =
     process.env.ELEVENTY_RUN_MODE === 'serve' && config.inline && story && !tag.includes('.stories.json') // eslint-disable-line no-undef
       ? /* html */ `
   `.replace(
+    ``.replace(
       /\n/g,
       ''
     )
diff --git a/projects/site/src/_11ty/utils/playground-url.js b/projects/site/src/_11ty/utils/playground-url.js
deleted file mode 100644
index cfb0168cb..000000000
--- a/projects/site/src/_11ty/utils/playground-url.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import { gzipSync } from 'fflate';
-import format from 'html-format';
-import packageFile from '../../../../elements/package.json' with { type: 'json' };
-import { ESM_ELEMENTS_VERSION } from './version.js';
-import { MetadataService } from '@nve-internals/metadata';
-
-const metrics = await MetadataService.getMetadata();
-
-// SB context
-// {
-//   id: string;
-//   globals: {
-//     theme: string;
-//     scale: string;
-//     debug: string;
-//     animation: string;
-//     experimental: string;
-//     systemOptions: string;
-//   };
-// }
-
-export function createPlaygroundURLFromStorySource(source, context) {
-  const formattedSource = format(
-    source.replaceAll(' nve-theme="dark"', '').replaceAll(' nve-theme="light"', '').replaceAll(' nve-theme="root"', ''),
-    ' '.repeat(2),
-    120
-  );
-  const files = serialize(addCssContent(createDefaultFiles(formattedSource, context), context));
-  return `https://elements-stage.nvidia.com/ui/elements-playground/?story=${context.id}&files=${files}&version=1`;
-}
-
-function serialize(data, compress = true) {
-  const json = JSON.stringify(data);
-  const encoded = new TextEncoder().encode(json);
-  const array = compress ? gzipSync(encoded) : encoded;
-  const base64 = globalThis.btoa(String.fromCharCode(...array));
-  return encodeURIComponent(base64);
-}
-
-function createDefaultFiles(content, context) {
-  const CDN_MODULES_URL = `https://esm.nvidia.com`;
-  const { globals } = context;
-  const themes = [
-    globals.theme,
-    globals.scale,
-    globals.debug,
-    globals.animation,
-    globals.experimental,
-    globals.systemOptions
-  ]
-    .filter(i => i !== '')
-    .join(' ')
-    .trim();
-
-  const template = {
-    'index.html': {
-      content: `
-
-
-  
-  
-  
-  
-  
-  
-  
-  
-  ${context.id.includes('foundations-layout') ? `` : ''}
-
-
-
-${content}
-
-
-`
-    },
-    'index.ts': {
-      content: `${getImports(globals.scope)}`
-    },
-    'importmap.json': {
-      content: `{
-  "imports": {
-    "@nvidia-elements/core": "${CDN_MODULES_URL}/@nvidia-elements/core@${ESM_ELEMENTS_VERSION}",
-    "@nvidia-elements/core/": "${CDN_MODULES_URL}/@nvidia-elements/core@${ESM_ELEMENTS_VERSION}/",
-    "@nvidia-elements/styles/": "${CDN_MODULES_URL}/@nvidia-elements/styles@latest/",
-    "@nvidia-elements/themes/": "${CDN_MODULES_URL}/@nvidia-elements/themes@latest/"
-  }
-}`
-    }
-  };
-
-  return template;
-}
-
-function getImports(scope) {
-  return [...metrics['@nvidia-elements/core'].elements, { name: 'forms' }]
-    .filter(e => packageFile.exports[`./${e.name.replace('nve-', '')}/define.js`])
-    .filter(e => !e.name.includes('json-viewer'))
-    .map(e => `import '${scope === 'mlv' ? '@elements' : '@nve'}/elements/${e.name.replace('nve-', '')}/define.js';`)
-    .join('\n');
-}
-
-function addCssContent(defaultFiles, context) {
-  if (context.id.includes('foundations-layout')) {
-    defaultFiles['index.css'] = {
-      content: `section {
-  height: 95vh;
-  width: 95vw;
-
-  nve-card {
-    min-width: 60px;
-    min-height: 60px;
-  }
-}`
-    };
-    return defaultFiles;
-  } else {
-    return defaultFiles;
-  }
-}
diff --git a/projects/site/src/_11ty/utils/version.js b/projects/site/src/_11ty/utils/version.js
index c132add19..4c986eaf4 100644
--- a/projects/site/src/_11ty/utils/version.js
+++ b/projects/site/src/_11ty/utils/version.js
@@ -1,13 +1,5 @@
-const controller = new AbortController();
-const timeout = setTimeout(() => controller.abort(), 3000);
-const LATEST_URL = 'https://esm.nvidia.com/@nvidia-elements/core@latest/package.json';
+import { MetadataService, getLatestPublishedVersions } from '@nve-internals/metadata';
 
-export const ESM_ELEMENTS_VERSION = await fetch(LATEST_URL, { signal: controller.signal })
-  .then(async response => {
-    clearTimeout(timeout);
-    return (await response.json()).version;
-  })
-  .catch(() => {
-    console.warn('Could not fetch latest version from https://esm.nvidia.com');
-    return '0.0.0';
-  });
+export const ESM_PACKAGE_VERSIONS = await getLatestPublishedVersions(await MetadataService.getMetadata());
+
+export const ESM_ELEMENTS_VERSION = ESM_PACKAGE_VERSIONS['@nvidia-elements/core'];
diff --git a/projects/site/src/_internal/metrics-carousel/metrics-carousel.ts b/projects/site/src/_internal/metrics-carousel/metrics-carousel.ts
index c00ae4630..128de40e4 100644
--- a/projects/site/src/_internal/metrics-carousel/metrics-carousel.ts
+++ b/projects/site/src/_internal/metrics-carousel/metrics-carousel.ts
@@ -171,7 +171,7 @@ export class MetricsCarousel extends LitElement {
   }
 
   async #getMetrics(): Promise {
-    const { MetadataService } = await import('@nve-internals/metadata');
+    const { MetadataService, AVInfraService } = await import('@nve-internals/metadata');
     const metrics = await MetadataService.getMetadata();
 
     function isMetadataProject(projectMetrics: unknown): projectMetrics is MetadataProject {
@@ -190,7 +190,7 @@ export class MetricsCarousel extends LitElement {
     let totalAxeTests = 0;
     let totalVisualTests = 0;
     let totalSsrTests = 0;
-    for (const [project, projectMetrics] of Object.entries(metrics)) {
+    for (const [project, projectMetrics] of Object.entries(metrics.projects)) {
       if (!project.startsWith('@nve') || !isMetadataProject(projectMetrics)) {
         continue;
       }
@@ -207,17 +207,17 @@ export class MetricsCarousel extends LitElement {
       }
     }
 
-    const elementsTestCoverage = metrics['@nvidia-elements/core'].tests.coverageTotal.branches.pct;
+    const elementsTestCoverage = metrics.projects['@nvidia-elements/core'].tests.coverageTotal.branches.pct;
 
     const totalLighthouseTests = totalParentElements + totalProjects; // one for each element + project bundle
     const totalAutomatedTests =
       totalUnitTests + totalAxeTests + totalVisualTests + totalSsrTests + totalLighthouseTests;
 
-    const elementsMetrics = await MetadataService.getMaglevMetadata();
+    const avInfraMetrics = await AVInfraService.getMetadata();
 
-    let totalMaglevInstances = 0;
-    for (const project of elementsMetrics.projects) {
-      totalMaglevInstances += project.instanceTotal;
+    let totalAVInfraInstances = 0;
+    for (const project of avInfraMetrics.projects) {
+      totalAVInfraInstances += project.instanceTotal;
     }
 
     return [
@@ -276,10 +276,10 @@ export class MetricsCarousel extends LitElement {
         metricCount: totalSsrTests
       },
       {
-        href: '/elements/docs/metrics/elements/',
-        title: 'Instances in MagLev',
-        label: 'View Maglev adoption metrics',
-        metricCount: totalMaglevInstances
+        href: '/elements/docs/metrics/av-infra/',
+        title: 'Instances in AV Infra',
+        label: 'View AV Infra adoption metrics',
+        metricCount: totalAVInfraInstances
       }
     ];
   }
diff --git a/projects/site/src/docs/about/requests.md b/projects/site/src/docs/about/requests.md
index 26b96ed13..6cac93908 100644
--- a/projects/site/src/docs/about/requests.md
+++ b/projects/site/src/docs/about/requests.md
@@ -7,6 +7,6 @@
 
 # {{ title }}
 
-Elements primary support customer is Maglev and AV teams. Priority is given to their requests.
+Elements primary support customer is AV and AV Infra teams. Priority is given to their requests.
 
 
diff --git a/projects/site/src/docs/api-design/glossary.11ty.js b/projects/site/src/docs/api-design/glossary.11ty.js
index 48b133faf..983bb2f00 100644
--- a/projects/site/src/docs/api-design/glossary.11ty.js
+++ b/projects/site/src/docs/api-design/glossary.11ty.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 import { MetadataService } from '@nve-internals/metadata';
 
 const metrics = await MetadataService.getMetadata();
@@ -22,7 +24,7 @@ Below are the common base properties that define the consistent API definition a
     Description
     Type
   
-  ${metrics.types.props
+  ${metrics.projects['@nvidia-elements/core'].types
     ?.map(
       prop => /* html */ `
   
diff --git a/projects/site/src/docs/changelog/index.11tydata.js b/projects/site/src/docs/changelog/index.11tydata.js
index 465e47d4b..f70815071 100644
--- a/projects/site/src/docs/changelog/index.11tydata.js
+++ b/projects/site/src/docs/changelog/index.11tydata.js
@@ -1,55 +1,59 @@
-import { readFileSync } from 'fs';
+// @ts-check
+
+import { MetadataService } from '@nve-internals/metadata';
+
+const metadata = await MetadataService.getMetadata();
 
 // https://www.11ty.dev/docs/data-js/
 export default [
   {
     title: '@nvidia-elements/core',
     permalink: '/',
-    changelog: readFileSync('../elements/CHANGELOG.md', 'utf8')
+    changelog: metadata.projects['@nvidia-elements/core'].changelog
   },
   {
     title: '@nvidia-elements/core-react',
     permalink: '/elements-react/',
-    changelog: readFileSync('../elements-react/CHANGELOG.md', 'utf8')
+    changelog: metadata.projects['@nvidia-elements/core-react'].changelog
   },
   {
     title: '@nvidia-elements/styles',
     permalink: '/styles/',
-    changelog: readFileSync('../styles/CHANGELOG.md', 'utf8')
+    changelog: metadata.projects['@nvidia-elements/styles'].changelog
   },
   {
     title: '@nvidia-elements/themes',
     permalink: '/themes/',
-    changelog: readFileSync('../themes/CHANGELOG.md', 'utf8')
+    changelog: metadata.projects['@nvidia-elements/themes'].changelog
   },
   {
     title: '@nvidia-elements/testing',
     permalink: '/testing/',
-    changelog: readFileSync('../testing/CHANGELOG.md', 'utf8')
+    changelog: metadata.projects['@nvidia-elements/testing'].changelog
   },
   // {
   //   title: '@nvidia-elements/brand',
   //   permalink: '/labs-brand/',
-  //   changelog: readFileSync('../labs/brand/CHANGELOG.md', 'utf8')
+  //   changelog: metadata.projects['@nvidia-elements/brand'].changelog
   // },
   {
     title: '@nvidia-elements/code',
     permalink: '/labs-code/',
-    changelog: readFileSync('../labs/code/CHANGELOG.md', 'utf8')
+    changelog: metadata.projects['@nvidia-elements/code'].changelog
+  },
+  {
+    title: '@nvidia-elements/forms',
+    permalink: '/labs-forms/',
+    changelog: metadata.projects['@nvidia-elements/forms'].changelog
   },
-  // {
-  //   title: '@nvidia-elements/forms',
-  //   permalink: '/labs-forms/',
-  //   changelog: readFileSync('../labs/forms/CHANGELOG.md', 'utf8')
-  // },
   {
     title: '@nvidia-elements/behaviors-alpine',
     permalink: '/labs-behaviors-alpine/',
-    changelog: readFileSync('../labs/behaviors-alpine/CHANGELOG.md', 'utf8')
+    changelog: metadata.projects['@nvidia-elements/behaviors-alpine'].changelog
   },
   {
     title: '@nvidia-elements/monaco',
     permalink: '/monaco/',
-    changelog: readFileSync('../monaco/CHANGELOG.md', 'utf8')
+    changelog: metadata.projects['@nvidia-elements/monaco'].changelog
   }
 ];
diff --git a/projects/site/src/docs/integrations/angular.md b/projects/site/src/docs/integrations/angular.md
index 0bb75fc79..13681eb6f 100644
--- a/projects/site/src/docs/integrations/angular.md
+++ b/projects/site/src/docs/integrations/angular.md
@@ -60,8 +60,7 @@ Once added, properties and events can be used via the standard Angular template
 
 ## Forms
 
-Maglev Elements provides a suite of form components that leverage standard HTML input types. This enables frameworks
-to take advantage of built in framework features like [Angular Reactive Forms](https://angular.io/guide/reactive-forms) for managing form validation and state.
+Elements provides a suite of form components that leverage standard HTML input types. This enables frameworks to take advantage of built in framework features like [Angular Reactive Forms](https://angular.io/guide/reactive-forms) for managing form validation and state.
 
 To integrate custom form control types into Elements checkout our custom control documentation.
 
diff --git a/projects/site/src/docs/metrics/maglev.11ty.js b/projects/site/src/docs/metrics/av-infra.11ty.js
similarity index 88%
rename from projects/site/src/docs/metrics/maglev.11ty.js
rename to projects/site/src/docs/metrics/av-infra.11ty.js
index 812094325..66a09d3fb 100644
--- a/projects/site/src/docs/metrics/maglev.11ty.js
+++ b/projects/site/src/docs/metrics/av-infra.11ty.js
@@ -1,9 +1,12 @@
-import { MetadataService } from '@nve-internals/metadata';
+import { MetadataService, AVInfraService } from '@nve-internals/metadata';
 import { compareVersions } from 'compare-versions';
 import { ESM_ELEMENTS_VERSION } from '../../_11ty/utils/version.js';
 
+const metrics = await MetadataService.getMetadata();
+const metricsAVInfra = await AVInfraService.getMetadata();
+
 export const data = {
-  title: 'Maglev',
+  title: 'AV Infra',
   layout: 'docs.11ty.js'
 };
 
@@ -23,15 +26,15 @@ export function render() {
       Metrics
       Testing & Performance
       Bundle Explorer
-      Maglev
+      AV Infra
       Raw Metadata
     
     
     
    
       
    Summary:
    
       
    
-        Total Maglev Instances
-        ${metricsMaglev.projects.reduce((p, n) => n.instanceTotal + p, 0)}
+        Total AV Infra Instances
+        ${metricsAVInfra.projects.reduce((p, n) => n.instanceTotal + p, 0)}
       
    
     
    
     
@@ -44,7 +47,7 @@ export function render() {
         Instances
         Source
       
-      ${metricsMaglev.projects
+      ${metricsAVInfra.projects
         .sort((a, b) => compareVersions(a.elementsVersion, b.elementsVersion))
         .reverse()
         .map(
@@ -66,8 +69,6 @@ export function render() {
   );
 }
 
-const metrics = await MetadataService.getMetadata();
-const metricsMaglev = await MetadataService.getMaglevMetadata();
 const reportDate = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium', timeStyle: 'long' }).format(
   new Date(metrics.created)
 );
diff --git a/projects/site/src/docs/metrics/bundle-explorer.11ty.js b/projects/site/src/docs/metrics/bundle-explorer.11ty.js
index 82949acfe..066a9638c 100644
--- a/projects/site/src/docs/metrics/bundle-explorer.11ty.js
+++ b/projects/site/src/docs/metrics/bundle-explorer.11ty.js
@@ -21,7 +21,7 @@ export function render() {
       Metrics
       Testing & Performance
       Bundle Explorer
-      Maglev
+      AV Infra
       Raw Metadata
     
     
diff --git a/projects/site/src/docs/metrics/index.11ty.js b/projects/site/src/docs/metrics/index.11ty.js
index b52acaf15..a9fcd04f6 100644
--- a/projects/site/src/docs/metrics/index.11ty.js
+++ b/projects/site/src/docs/metrics/index.11ty.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 import { MetadataService } from '@nve-internals/metadata';
 import { badgeStatus, badgeCoverage, badgeBundle, badgeLighthouse, badgeAxe } from '../../_11ty/templates/api.js';
 import { ESM_ELEMENTS_VERSION } from '../../_11ty/utils/version.js';
@@ -23,7 +25,7 @@ export function render() {
       Metrics
       Testing & Performance
       Bundle Explorer
-      Maglev
+      AV Infra
       Raw Metadata
     
     
@@ -33,12 +35,12 @@ export function render() {
     
    
       Total Available Web Components
       
-        ${metrics['@nvidia-elements/core'].elements.length}
+        ${metrics.projects['@nvidia-elements/core'].elements.length}
       
       -
       Total Available Parent Elements
       
-        ${[...new Set(metrics['@nvidia-elements/core'].elements.map(el => el.name.split('-')[1]))].length + 2}
+        ${[...new Set(metrics.projects['@nvidia-elements/core'].elements.map(el => el.name.split('-')[1]))].length + 2}
       
     
    
   

@@ -96,7 +98,7 @@ const metrics = await MetadataService.getMetadata();
 const reportDate = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium', timeStyle: 'long' }).format(
   new Date(metrics.created)
 );
-const elements = metrics['@nvidia-elements/core'].elements;
+const elements = metrics.projects['@nvidia-elements/core'].elements;
 const columns = {
   element: { width: '200px', tooltip: 'Custom Element API' },
   status: { width: '120px', tooltip: 'Element Stability Status' },
diff --git a/projects/site/src/docs/metrics/metadata.11ty.js b/projects/site/src/docs/metrics/metadata.11ty.js
index d4b6d9b65..c95cfc6f6 100644
--- a/projects/site/src/docs/metrics/metadata.11ty.js
+++ b/projects/site/src/docs/metrics/metadata.11ty.js
@@ -21,7 +21,7 @@ export function render() {
       Metrics
       Testing & Performance
       Bundle Explorer
-      Maglev
+      AV Infra
       Raw Metadata
     
 
diff --git a/projects/site/src/docs/metrics/testing-and-performance.11ty.js b/projects/site/src/docs/metrics/testing-and-performance.11ty.js
index e42cdc313..1631d4d71 100644
--- a/projects/site/src/docs/metrics/testing-and-performance.11ty.js
+++ b/projects/site/src/docs/metrics/testing-and-performance.11ty.js
@@ -1,3 +1,5 @@
+// @ts-check
+
 import { MetadataService } from '@nve-internals/metadata';
 import { badgeCoverage, badgeBundle, badgeLighthouse } from '../../_11ty/templates/api.js';
 import { ESM_ELEMENTS_VERSION } from '../../_11ty/utils/version.js';
@@ -28,7 +30,7 @@ export function render() {
       Metrics
       Testing & Performance
       Bundle Explorer
-      Maglev
+      AV Infra
       Raw Metadata
     
     
@@ -39,19 +41,19 @@ export function render() {
         
Test Coverage:

         

           Statements
-          ${badgeCoverage(metrics['@nvidia-elements/core'].tests.coverageTotal.statements.pct, 'flat')}
+          ${badgeCoverage(metrics.projects['@nvidia-elements/core'].tests.coverageTotal.statements.pct, 'flat')}
         

         

           Lines
-          ${badgeCoverage(metrics['@nvidia-elements/core'].tests.coverageTotal.lines.pct, 'flat')}
+          ${badgeCoverage(metrics.projects['@nvidia-elements/core'].tests.coverageTotal.lines.pct, 'flat')}
         

         

           Functions
-          ${badgeCoverage(metrics['@nvidia-elements/core'].tests.coverageTotal.functions.pct, 'flat')}
+          ${badgeCoverage(metrics.projects['@nvidia-elements/core'].tests.coverageTotal.functions.pct, 'flat')}
         

         

           Branches
-          ${badgeCoverage(metrics['@nvidia-elements/core'].tests.coverageTotal.branches.pct, 'flat')}
+          ${badgeCoverage(metrics.projects['@nvidia-elements/core'].tests.coverageTotal.branches.pct, 'flat')}
         

       

       
@@ -62,7 +64,7 @@ export function render() {
           Functions
           Branches
         
-        ${metrics['@nvidia-elements/core'].tests.coverage
+        ${metrics.projects['@nvidia-elements/core'].tests.coverage
           .map(
             cov => /* html */ `
           
${cov.file}

@@ -86,7 +88,7 @@ export function render() {
         Best Practices
         Bundle Size
       
-      ${metrics['@nvidia-elements/core'].elements
+      ${metrics.projects['@nvidia-elements/core'].elements
         .map(
           element => /* html */ `
           ${element.name}
diff --git a/projects/site/src/stories/index.11ty.js b/projects/site/src/stories/index.11ty.js
index 14c008cb7..0d9580b51 100644
--- a/projects/site/src/stories/index.11ty.js
+++ b/projects/site/src/stories/index.11ty.js
@@ -1,10 +1,12 @@
 /* eslint-env node */
 /* global process */
 
-import { createPlaygroundURLFromStorySource } from '../_11ty/utils/playground-url.js';
+import { MetadataService, createPlaygroundURL } from '@nve-internals/metadata';
 import { renderGlobalsScript } from '../_11ty/layouts/common.js';
 import { stories, BASE_URL } from './utils.js';
 
+const metadata = await MetadataService.getMetadata();
+
 export const data = {
   title: 'Stories',
   pagination: {
@@ -42,7 +44,7 @@ export function render(data) {
   
   
     
     

diff --git a/projects/site/src/stories/index.ts b/projects/site/src/stories/index.ts
index 0f288d225..5ca9f3165 100644
--- a/projects/site/src/stories/index.ts
+++ b/projects/site/src/stories/index.ts
@@ -1,7 +1,15 @@
-const isStoryViewer = globalThis.window.top?.location.href.includes('/stories/');
-const isIframe = globalThis.window.self !== globalThis.window.top;
+let isStoryViewer = false;
+let isIframe = false;
+let editor = false;
 
-if (isStoryViewer && isIframe) {
+try {
+  isIframe = globalThis.window.self !== globalThis.window.top;
+  isStoryViewer = !!globalThis.window.top?.location?.href?.includes('/stories/');
+} catch {
+  editor = true;
+}
+
+if ((isStoryViewer && isIframe) || editor) {
   const links = globalThis.document.getElementById('iframe-links')!;
   if (links) {
     links.hidden = false;
diff --git a/projects/site/src/stories/utils.js b/projects/site/src/stories/utils.js
index 819bcc4c3..53b6845f1 100644
--- a/projects/site/src/stories/utils.js
+++ b/projects/site/src/stories/utils.js
@@ -39,6 +39,7 @@ export const stories = getStories().flatMap(storiesFile => {
     title: camelToKebab(story.id),
     permalink: `${storiesFile.path.replace('.stories.json', '-')}${camelToKebab(story.id)}/`,
     template: story.template,
+    tagName: storiesFile.element,
     element: storiesFile.element?.replace('nve-', ''),
     path: storiesFile.path
   }));
diff --git a/projects/starters/eleventy-ssr/eleventy.config.js b/projects/starters/eleventy-ssr/eleventy.config.js
index 2a5ae5273..7aa643a04 100644
--- a/projects/starters/eleventy-ssr/eleventy.config.js
+++ b/projects/starters/eleventy-ssr/eleventy.config.js
@@ -4,7 +4,7 @@ import litPlugin from '@lit-labs/eleventy-plugin-lit';
 import { MetadataService } from '@nve-internals/metadata';
 
 const metadata = await MetadataService.getMetadata();
-const entrypoints = metadata['@nvidia-elements/core'].elements
+const entrypoints = metadata.projects['@nvidia-elements/core'].elements
   .filter(e => e.manifest?.metadata?.entrypoint)
   .map(e => `node_modules/${e.manifest.metadata.entrypoint.replace('@nvidia-elements/core', '@nvidia-elements/core/dist')}/define.js`);
 
diff --git a/projects/starters/eleventy-ssr/src/index.11ty.js b/projects/starters/eleventy-ssr/src/index.11ty.js
index c4a8cd94c..1350c173b 100644
--- a/projects/starters/eleventy-ssr/src/index.11ty.js
+++ b/projects/starters/eleventy-ssr/src/index.11ty.js
@@ -4,11 +4,11 @@ import { MetadataService } from '@nve-internals/metadata';
 
 const metadata = await MetadataService.getMetadata();
 
-const stories = metadata['@nvidia-elements/core'].elements
+const stories = metadata.projects['@nvidia-elements/core'].elements
   .filter(e => !e.name.includes('nve-page-loader') && !e.name.includes('nve-app-header'))
-  .filter(e => e.stories.find(s => s.id.includes('Default')))
+  .filter(e => e.stories?.find(s => s.id.includes('Default')))
   .map(e => {
-    const story = e.stories.find(s => s.id.includes('Default'));
+    const story = e.stories?.find(s => s.id.includes('Default'));
     let template = story?.template.includes('${') ? '' : story?.template;
     template = template
       ?.replaceAll('

  `;
 }

From c45d223f12c94dee787ede7b92f3fe6ca0761ff8 Mon Sep 17 00:00:00 2001
From: semantic-release-bot 
Date: Wed, 4 Jun 2025 16:39:10 +0000
Subject: [PATCH 0205/1100] chore(release): @nve/monaco-v1.0.5 [skip ci]

## [@nve/monaco-v1.0.5](https://gitlab-master.nvidia.com/ai-infra/elements/compare/@nve/monaco-v1.0.4...@nve/monaco-v1.0.5) (2025-06-04)

### Bug Fixes

* **monaco:** sticky scroll colors ([de7effd](https://gitlab-master.nvidia.com/ai-infra/elements/commit/de7effdb74c1ca4ae7a3a717157a3e265979113a))
---
 projects/monaco/CHANGELOG.md | 7 +++++++
 projects/monaco/package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/projects/monaco/CHANGELOG.md b/projects/monaco/CHANGELOG.md
index 98de4fb8f..650690026 100644
--- a/projects/monaco/CHANGELOG.md
+++ b/projects/monaco/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [@nvidia-elements/monaco-v1.0.5](https://github.com/NVIDIA/elements/compare/@nvidia-elements/monaco-v1.0.4...@nvidia-elements/monaco-v1.0.5) (2025-06-04)
+
+
+### Bug Fixes
+
+* **monaco:** sticky scroll colors ([549a78c](https://github.com/NVIDIA/elements/commit/549a78c971b25036069ce6468a78018e54d3695d))
+
 ## [@nvidia-elements/monaco-v1.0.4](https://github.com/NVIDIA/elements/compare/@nvidia-elements/monaco-v1.0.3...@nvidia-elements/monaco-v1.0.4) (2025-05-29)
 
 
diff --git a/projects/monaco/package.json b/projects/monaco/package.json
index ffbe6a476..26e4e56f1 100644
--- a/projects/monaco/package.json
+++ b/projects/monaco/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nvidia-elements/monaco",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Monaco Editor Web Component",
   "homepage": "https://NVIDIA.github.io/elements/",
   "repository": {

From c5fb17405071ad6e3fe936dcb1dc71ed867e8d55 Mon Sep 17 00:00:00 2001
From: Will Geller 
Date: Tue, 3 Jun 2025 12:55:01 -0400
Subject: [PATCH 0206/1100] fix(elements): change alert text color to emphasis

---
 projects/elements/src/alert/alert-group.css | 2 +-
 projects/elements/src/alert/alert.css       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/elements/src/alert/alert-group.css b/projects/elements/src/alert/alert-group.css
index f5c824c24..fb9c99104 100644
--- a/projects/elements/src/alert/alert-group.css
+++ b/projects/elements/src/alert/alert-group.css
@@ -5,7 +5,7 @@
   --border-radius: var(--nve-ref-border-radius-md);
   --icon-size: var(--nve-ref-size-600);
   --icon-color: var(--color);
-  --color: var(--nve-sys-text-color);
+  --color: var(--nve-sys-text-emphasis-color);
   --background: var(--state-color-background);
   width: 100%;
 }
diff --git a/projects/elements/src/alert/alert.css b/projects/elements/src/alert/alert.css
index b3dc0736e..7778ca627 100644
--- a/projects/elements/src/alert/alert.css
+++ b/projects/elements/src/alert/alert.css
@@ -1,7 +1,7 @@
 :host {
   --gap: var(--nve-ref-space-xs);
   --font-size: var(--nve-ref-font-size-100);
-  --color: var(--nve-sys-text-color);
+  --color: var(--nve-sys-text-emphasis-color);
   --icon-color: var(--status-color);
   --icon-size: var(--nve-ref-size-400);
   --font-weight: var(--nve-ref-font-weight-medium);

From 30f72d2a77f8428ed17c1110080f78ff2d051113 Mon Sep 17 00:00:00 2001
From: Will Geller 
Date: Tue, 3 Jun 2025 12:56:03 -0400
Subject: [PATCH 0207/1100] chore(docs): show support status stories for badge
 in markdown files

---
 projects/elements/src/alert/alert.stories.ts         | 6 +++---
 projects/site/src/docs/elements/badge.md             | 2 ++
 projects/site/src/docs/foundations/themes/support.md | 4 ++++
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/projects/elements/src/alert/alert.stories.ts b/projects/elements/src/alert/alert.stories.ts
index bd07a8337..af9e5b6c3 100644
--- a/projects/elements/src/alert/alert.stories.ts
+++ b/projects/elements/src/alert/alert.stories.ts
@@ -291,13 +291,13 @@ export const Multiline = {
       
         Session Paused:
         

-          
Failed to verify drives. Check Status

-          
-          
+          
Failed to verify drives.

+          
 10:06:01 AM [verify] update /virtual:/verify/
 10:06:11 AM [build] update /virtual:/build/
 10:06:22 AM [error] update /virtual:/error/ - failed to connect to remote

         

+        Collapse Details
       
     
   `
diff --git a/projects/site/src/docs/elements/badge.md b/projects/site/src/docs/elements/badge.md
index ee671ecdf..59e2a7352 100644
--- a/projects/site/src/docs/elements/badge.md
+++ b/projects/site/src/docs/elements/badge.md
@@ -20,6 +20,8 @@
 
 {% story 'nve-badge', 'Status' %}
 
+{% story 'nve-badge', 'Support' %}
+
 ## Flat
 
 {% api 'nve-badge', 'property', 'container' %}
diff --git a/projects/site/src/docs/foundations/themes/support.md b/projects/site/src/docs/foundations/themes/support.md
index ef68b5b75..2df2fb3e8 100644
--- a/projects/site/src/docs/foundations/themes/support.md
+++ b/projects/site/src/docs/foundations/themes/support.md
@@ -23,6 +23,10 @@ Support colors are used in combination of text or iconography to convey status o
 
 {% story '@nvidia-elements/core/dot/dot.stories.json', 'SupportStatus' %}
 
+## Badge Support
+
+{% story '@nvidia-elements/core/badge/badge.stories.json', 'Support' %}
+
 ## Alert Support
 
 {% story '@nvidia-elements/core/alert/alert.stories.json', 'Status' %}

From ddfee6eb658072c77a6bc5fb7ac4342fb494cc08 Mon Sep 17 00:00:00 2001
From: semantic-release-bot 
Date: Wed, 4 Jun 2025 17:19:00 +0000
Subject: [PATCH 0208/1100] chore(release): @nve/elements-v1.36.1 [skip ci]

## [@nve/elements-v1.36.1](https://gitlab-master.nvidia.com/ai-infra/elements/compare/@nve/elements-v1.36.0...@nve/elements-v1.36.1) (2025-06-04)

### Bug Fixes

* **elements:** change alert text color to emphasis ([9781ce0](https://gitlab-master.nvidia.com/ai-infra/elements/commit/9781ce0013084802dc389f86a4ce70d3592e583c))
---
 projects/elements/CHANGELOG.md | 7 +++++++
 projects/elements/package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/projects/elements/CHANGELOG.md b/projects/elements/CHANGELOG.md
index a2305fc13..3321da9df 100644
--- a/projects/elements/CHANGELOG.md
+++ b/projects/elements/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [@nvidia-elements/core-v1.36.1](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.36.0...@nvidia-elements/core-v1.36.1) (2025-06-04)
+
+
+### Bug Fixes
+
+* **elements:** change alert text color to emphasis ([5d277fe](https://github.com/NVIDIA/elements/commit/5d277fed1c29e831be90c9e05d26a989315d6047))
+
 ## [@nvidia-elements/core-v1.36.0](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.35.4...@nvidia-elements/core-v1.36.0) (2025-06-03)
 
 
diff --git a/projects/elements/package.json b/projects/elements/package.json
index c2b587a74..1f69ab56e 100644
--- a/projects/elements/package.json
+++ b/projects/elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nvidia-elements/core",
-  "version": "1.36.0",
+  "version": "1.36.1",
   "description": "The Design Language for AI/ML Factories Building at the Speed of Light",
   "homepage": "https://NVIDIA.github.io/elements/",
   "repository": {

From 928bd73acd65b0ebdca45d3a16c92d74c896b75f Mon Sep 17 00:00:00 2001
From: Jared De La Cruz 
Date: Fri, 30 May 2025 15:29:04 -0700
Subject: [PATCH 0209/1100] chore(docs): add gtag event for element stories

---
 projects/site/src/_11ty/shortcodes/index.js  |  2 +-
 projects/site/src/_internal/canvas/canvas.ts | 19 +++++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/projects/site/src/_11ty/shortcodes/index.js b/projects/site/src/_11ty/shortcodes/index.js
index d8280d0e9..58909dcc1 100644
--- a/projects/site/src/_11ty/shortcodes/index.js
+++ b/projects/site/src/_11ty/shortcodes/index.js
@@ -66,7 +66,7 @@ export async function storyShortcode(tag, storyName, userConfig = { inline: true
   return story
     ? /* html */ `
 ${story.description ? `
${md.utils.escapeHtml(story.description)}
` : ''}
-
+
 ${playgroundButton}
 
 ${
diff --git a/projects/site/src/_internal/canvas/canvas.ts b/projects/site/src/_internal/canvas/canvas.ts
index df54cc1ff..8d45842f3 100644
--- a/projects/site/src/_internal/canvas/canvas.ts
+++ b/projects/site/src/_internal/canvas/canvas.ts
@@ -49,10 +49,10 @@ export class Canvas extends LitElement {
         

         

           ${this.source ? html`` : nothing}
-          
+          
         

         

-           (this['showSource'] = !this.showSource)}>Source 
+          Source 
           
             
-  
-  
-    
-    
-  
-  
-    
-    
-  
-`
+
+  
+  
+`
 };
 
 export const States = () => {
diff --git a/projects/elements/src/checkbox/checkbox.ts b/projects/elements/src/checkbox/checkbox.ts
index 00004e4aa..146fce98d 100644
--- a/projects/elements/src/checkbox/checkbox.ts
+++ b/projects/elements/src/checkbox/checkbox.ts
@@ -1,5 +1,5 @@
 import type { CSSResult } from 'lit';
-import { hostAttr, useStyles } from '@nvidia-elements/core/internal';
+import { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';
 import { Control } from '@nvidia-elements/core/forms';
 import styles from './checkbox.css?inline';
 
@@ -15,6 +15,7 @@ import styles from './checkbox.css?inline';
  * @figma https://www.figma.com/file/vbcJuxNZO6t2KScQ8y5H7z/%F0%9F%93%9A-MagLev-Elements-Design-Catalog---WIP?node-id=29-15&t=CAAM7yEBvG18tRRa-0
  * @aria https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
  */
+@audit()
 export class Checkbox extends Control {
   @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';
 
@@ -22,6 +23,7 @@ export class Checkbox extends Control {
 
   static readonly metadata = {
     tag: 'nve-checkbox',
-    version: '0.0.0'
+    version: '0.0.0',
+    children: ['label', 'input', 'nve-control-message']
   };
 }
diff --git a/projects/elements/src/index.test.lighthouse.ts b/projects/elements/src/index.test.lighthouse.ts
index cfd422760..25cb6ef3c 100644
--- a/projects/elements/src/index.test.lighthouse.ts
+++ b/projects/elements/src/index.test.lighthouse.ts
@@ -95,6 +95,6 @@ describe('lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.requests[Object.keys(report.payload.javascript.requests)[0]].kb).toBeLessThan(72);
+    expect(report.payload.javascript.requests[Object.keys(report.payload.javascript.requests)[0]].kb).toBeLessThan(72.5);
   });
 });
diff --git a/projects/elements/src/menu/menu.ts b/projects/elements/src/menu/menu.ts
index ec849fc4a..2b1e3e4f1 100644
--- a/projects/elements/src/menu/menu.ts
+++ b/projects/elements/src/menu/menu.ts
@@ -29,7 +29,7 @@ export class Menu extends LitElement {
   static readonly metadata = {
     tag: 'nve-menu',
     version: '0.0.0',
-    children: ['nve-menu-item']
+    children: ['nve-menu-item', 'nve-divider']
   };
 
   static elementDefinitions = {};
diff --git a/projects/elements/src/radio/radio-group.ts b/projects/elements/src/radio/radio-group.ts
index cdb74f061..22578c7ff 100644
--- a/projects/elements/src/radio/radio-group.ts
+++ b/projects/elements/src/radio/radio-group.ts
@@ -19,6 +19,6 @@ export class RadioGroup extends ControlGroup {
   static readonly metadata = {
     tag: 'nve-radio-group',
     version: '0.0.0',
-    children: ['nve-radio']
+    children: ['label', 'nve-control-message', 'nve-radio']
   };
 }
diff --git a/projects/elements/src/radio/radio.ts b/projects/elements/src/radio/radio.ts
index 73fe007f0..ff672b1a8 100644
--- a/projects/elements/src/radio/radio.ts
+++ b/projects/elements/src/radio/radio.ts
@@ -1,5 +1,5 @@
 import type { CSSResult } from 'lit';
-import { hostAttr, useStyles } from '@nvidia-elements/core/internal';
+import { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';
 import { Control } from '@nvidia-elements/core/forms';
 import styles from './radio.css?inline';
 
@@ -15,6 +15,7 @@ import styles from './radio.css?inline';
  * @figma https://www.figma.com/file/vbcJuxNZO6t2KScQ8y5H7z/%F0%9F%93%9A-MagLev-Elements-Design-Catalog---WIP?node-id=29-16&t=iOYah8Uct8CFd69k-0
  * @aria https://www.w3.org/WAI/ARIA/apg/patterns/radio/
  */
+@audit()
 export class Radio extends Control {
   @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';
 
@@ -22,6 +23,7 @@ export class Radio extends Control {
 
   static readonly metadata = {
     tag: 'nve-radio',
-    version: '0.0.0'
+    version: '0.0.0',
+    children: ['label', 'input', 'nve-control-message']
   };
 }
diff --git a/projects/elements/src/select/select.test.lighthouse.ts b/projects/elements/src/select/select.test.lighthouse.ts
index b20b6d1a5..c23a86f33 100644
--- a/projects/elements/src/select/select.test.lighthouse.ts
+++ b/projects/elements/src/select/select.test.lighthouse.ts
@@ -20,6 +20,6 @@ describe('select lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(33.8);
+    expect(report.payload.javascript.kb).toBeLessThan(33.9);
   });
 });
diff --git a/projects/elements/src/switch/switch-group.ts b/projects/elements/src/switch/switch-group.ts
index 46f2adddf..24bbfde7a 100644
--- a/projects/elements/src/switch/switch-group.ts
+++ b/projects/elements/src/switch/switch-group.ts
@@ -1,13 +1,15 @@
 import type { CSSResult } from 'lit';
-import { useStyles } from '@nvidia-elements/core/internal';
+import { audit, useStyles } from '@nvidia-elements/core/internal';
 import { ControlGroup } from '@nvidia-elements/core/forms';
 import styles from './switch-group.css?inline';
 
+@audit()
 export class SwitchGroup extends ControlGroup {
   static styles: CSSResult[] = useStyles([...ControlGroup.styles, styles]);
 
   static readonly metadata = {
     tag: 'nve-switch-group',
-    version: '0.0.0'
+    version: '0.0.0',
+    children: ['label', 'nve-control-message', 'nve-switch']
   };
 }
diff --git a/projects/elements/src/switch/switch.test.lighthouse.ts b/projects/elements/src/switch/switch.test.lighthouse.ts
index e0cb268a0..8dfb8492a 100644
--- a/projects/elements/src/switch/switch.test.lighthouse.ts
+++ b/projects/elements/src/switch/switch.test.lighthouse.ts
@@ -16,6 +16,6 @@ describe('switch lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(18.9);
+    expect(report.payload.javascript.kb).toBeLessThan(20.5);
   });
 });
diff --git a/projects/elements/src/switch/switch.ts b/projects/elements/src/switch/switch.ts
index ad3ded685..c69ad6cc4 100644
--- a/projects/elements/src/switch/switch.ts
+++ b/projects/elements/src/switch/switch.ts
@@ -1,5 +1,5 @@
 import type { CSSResult } from 'lit';
-import { hostAttr, useStyles } from '@nvidia-elements/core/internal';
+import { audit, hostAttr, useStyles } from '@nvidia-elements/core/internal';
 import { Control } from '@nvidia-elements/core/forms';
 import styles from './switch.css?inline';
 
@@ -21,6 +21,7 @@ import styles from './switch.css?inline';
  * @figma https://www.figma.com/file/vbcJuxNZO6t2KScQ8y5H7z/%F0%9F%93%9A-MagLev-Elements-Design-Catalog---WIP?node-id=29-28&t=clRGqnKDRGNhR0Yu-0
  * @aria https://www.w3.org/WAI/ARIA/apg/patterns/switch/
  */
+@audit()
 export class Switch extends Control {
   @hostAttr({ attribute: 'nve-control' }) protected nveControl = 'inline';
 
@@ -28,6 +29,7 @@ export class Switch extends Control {
 
   static readonly metadata = {
     tag: 'nve-switch',
-    version: '0.0.0'
+    version: '0.0.0',
+    children: ['label', 'input', 'nve-control-message']
   };
 }

From 61358b62fd7df20083e468da15b0a03219ae0763 Mon Sep 17 00:00:00 2001
From: semantic-release-bot 
Date: Thu, 5 Jun 2025 14:29:12 +0000
Subject: [PATCH 0216/1100] chore(release): @nve/elements-v1.36.2 [skip ci]

## [@nve/elements-v1.36.2](https://gitlab-master.nvidia.com/ai-infra/elements/compare/@nve/elements-v1.36.1...@nve/elements-v1.36.2) (2025-06-05)

### Bug Fixes

* **elements:** audit warnings and group height ([24a30c7](https://gitlab-master.nvidia.com/ai-infra/elements/commit/24a30c782792ef43ef28b850f71f5be9665ede11))
---
 projects/elements/CHANGELOG.md | 7 +++++++
 projects/elements/package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/projects/elements/CHANGELOG.md b/projects/elements/CHANGELOG.md
index 3321da9df..994f3a06a 100644
--- a/projects/elements/CHANGELOG.md
+++ b/projects/elements/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [@nvidia-elements/core-v1.36.2](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.36.1...@nvidia-elements/core-v1.36.2) (2025-06-05)
+
+
+### Bug Fixes
+
+* **elements:** audit warnings and group height ([a50e66a](https://github.com/NVIDIA/elements/commit/a50e66a04d0bab72d89ebd336978ce17a4265896))
+
 ## [@nvidia-elements/core-v1.36.1](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.36.0...@nvidia-elements/core-v1.36.1) (2025-06-04)
 
 
diff --git a/projects/elements/package.json b/projects/elements/package.json
index 1f69ab56e..5af8a5f3a 100644
--- a/projects/elements/package.json
+++ b/projects/elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nvidia-elements/core",
-  "version": "1.36.1",
+  "version": "1.36.2",
   "description": "The Design Language for AI/ML Factories Building at the Speed of Light",
   "homepage": "https://NVIDIA.github.io/elements/",
   "repository": {

From 31f4e066cee57219b60ae9db75e41a45a6c85fce Mon Sep 17 00:00:00 2001
From: John Yanarella 
Date: Thu, 5 Jun 2025 05:17:57 -0700
Subject: [PATCH 0217/1100] chore(monaco): add visual tests

---
 .../monaco/.visual/monaco-editor.dark.png     |  3 +
 projects/monaco/.visual/monaco-editor.png     |  3 +
 projects/monaco/.visual/monaco-input.dark.png |  3 +
 projects/monaco/.visual/monaco-input.png      |  3 +
 projects/monaco/package.json                  | 28 ++++++++-
 .../monaco/src/editor/editor.test.visual.ts   | 60 ++++++++++++++++++
 .../monaco/src/input/input.test.visual.ts     | 61 +++++++++++++++++++
 projects/monaco/vitest.visual.html            | 33 ++++++++++
 projects/monaco/vitest.visual.ts              | 11 ++++
 9 files changed, 203 insertions(+), 2 deletions(-)
 create mode 100644 projects/monaco/.visual/monaco-editor.dark.png
 create mode 100644 projects/monaco/.visual/monaco-editor.png
 create mode 100644 projects/monaco/.visual/monaco-input.dark.png
 create mode 100644 projects/monaco/.visual/monaco-input.png
 create mode 100644 projects/monaco/src/editor/editor.test.visual.ts
 create mode 100644 projects/monaco/src/input/input.test.visual.ts
 create mode 100644 projects/monaco/vitest.visual.html
 create mode 100644 projects/monaco/vitest.visual.ts

diff --git a/projects/monaco/.visual/monaco-editor.dark.png b/projects/monaco/.visual/monaco-editor.dark.png
new file mode 100644
index 000000000..db599541f
--- /dev/null
+++ b/projects/monaco/.visual/monaco-editor.dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7ef4803f9c926a49428b55f079b835136c77d8b5c6178e2622d5654b3e2964b8
+size 51130
diff --git a/projects/monaco/.visual/monaco-editor.png b/projects/monaco/.visual/monaco-editor.png
new file mode 100644
index 000000000..08cdcba27
--- /dev/null
+++ b/projects/monaco/.visual/monaco-editor.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a16d1349096f6b2b3f62b87b93424e0539006c16058c22bab246b12cb74b6215
+size 50866
diff --git a/projects/monaco/.visual/monaco-input.dark.png b/projects/monaco/.visual/monaco-input.dark.png
new file mode 100644
index 000000000..5b9a6aa76
--- /dev/null
+++ b/projects/monaco/.visual/monaco-input.dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bab9ea3ea01277db01db24dc0700764fade59e8896b9f8fdd99531d8e9981b64
+size 19888
diff --git a/projects/monaco/.visual/monaco-input.png b/projects/monaco/.visual/monaco-input.png
new file mode 100644
index 000000000..babe93fa4
--- /dev/null
+++ b/projects/monaco/.visual/monaco-input.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6dcea07ff1e0180bcebee9b90713a72296a020eb20e31037cd45e4799a90522a
+size 19498
diff --git a/projects/monaco/package.json b/projects/monaco/package.json
index 26e4e56f1..d1578d38b 100644
--- a/projects/monaco/package.json
+++ b/projects/monaco/package.json
@@ -110,7 +110,8 @@
     "test:axe": "wireit",
     "test:coverage": "wireit",
     "test:watch": "wireit",
-    "test:lighthouse": "wireit"
+    "test:lighthouse": "wireit",
+    "test:visual": "wireit"
   },
   "dependencies": {
     "lit": "catalog:",
@@ -157,7 +158,8 @@
         "lint",
         "publint",
         "test:axe",
-        "test:coverage"
+        "test:coverage",
+        "test:visual"
       ]
     },
     "publint": {
@@ -337,6 +339,28 @@
         "NODE_ENV": "production"
       }
     },
+    "test:visual": {
+      "command": "playwright-lock 'vitest run --config=vitest.visual.ts'",
+      "clean": false,
+      "files": [
+        "dist/**/*.js",
+        "src/index.test.visual.ts",
+        "src/**/*.test.visual.ts",
+        "vitest.visual.html",
+        "vitest.visual.ts"
+      ],
+      "output": [
+        ".visual/*.png",
+        "coverage/visual/**"
+      ],
+      "dependencies": [
+        "../internals/vite:ci",
+        {
+          "script": "build",
+          "cascade": false
+        }
+      ]
+    },
     "lint": {
       "command": "eslint -c ./eslint.config.js --color --cache --cache-location .eslintcache/",
       "files": [
diff --git a/projects/monaco/src/editor/editor.test.visual.ts b/projects/monaco/src/editor/editor.test.visual.ts
new file mode 100644
index 000000000..33988d7d2
--- /dev/null
+++ b/projects/monaco/src/editor/editor.test.visual.ts
@@ -0,0 +1,60 @@
+import { expect, test, describe } from 'vitest';
+import { visualRunner } from '@nve-internals/vite';
+
+describe('monaco editor visual', () => {
+  test('editor should match visual baseline', async () => {
+    const report = await visualRunner.render('monaco-editor', template(), { network: true });
+    expect(report.maxDiffPercentage).toBeLessThanOrEqual(5);
+  });
+
+  test('editor should match visual baseline dark theme', async () => {
+    const report = await visualRunner.render('monaco-editor.dark', template('dark'), { network: true });
+    expect(report.maxDiffPercentage).toBeLessThanOrEqual(5);
+  });
+});
+
+const exampleValue = `type Package = {
+  name: string;
+  description: string;
+}
+
+class PackageService {
+  #packages: Package[] = [];
+
+  constructor() {
+    this.#packages.push({
+      name: '@nvidia-elements/monaco',
+      description: 'Monaco Editor Elements'
+    });
+  }
+
+  findByName(name: string): Package | undefined {
+    return this.#packages.find(p => p.name === name);
+  }
+}
+
+const service = new PackageService();
+console.log(service.findByName('@nvidia-elements/monaco'));
+`;
+
+function template(theme: '' | 'dark' = '') {
+  return /* html */ `
+  
+
+  

+    
+  

+
+  
+  `;
+}
diff --git a/projects/monaco/src/input/input.test.visual.ts b/projects/monaco/src/input/input.test.visual.ts
new file mode 100644
index 000000000..07c66937d
--- /dev/null
+++ b/projects/monaco/src/input/input.test.visual.ts
@@ -0,0 +1,61 @@
+import { expect, test, describe } from 'vitest';
+import { visualRunner } from '@nve-internals/vite';
+
+describe('monaco input visual', () => {
+  test('input should match visual baseline', async () => {
+    const report = await visualRunner.render('monaco-input', template(), { network: true });
+    expect(report.maxDiffPercentage).toBeLessThanOrEqual(5);
+  });
+
+  test('input should match visual baseline dark theme', async () => {
+    const report = await visualRunner.render('monaco-input.dark', template('dark'), { network: true });
+    expect(report.maxDiffPercentage).toBeLessThanOrEqual(5);
+  });
+});
+
+const jsonValue = `{
+  "name": "my-app",
+  "version": "1.0.0"
+}`;
+
+const invalidJsonValue = `{
+  "name": "my-app",
+  "version": "1.0.0",
+  "description": 42
+}`;
+
+const jsonSchema = `{
+  "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"]
+}`;
+
+function template(theme: '' | 'dark' = '') {
+  return /* html */ `
+  
+
+  

+    
+
+    
+      
+      
+      •︎•︎•︎•︎•︎•︎
+    
+
+    
+      
+      
+      •︎•︎•︎•︎•︎•︎
+    
+  

+  `;
+}
diff --git a/projects/monaco/vitest.visual.html b/projects/monaco/vitest.visual.html
new file mode 100644
index 000000000..39b129b9e
--- /dev/null
+++ b/projects/monaco/vitest.visual.html
@@ -0,0 +1,33 @@
+
+
+  
+    
+    
+    
+    
+    Visual
+    
+  
+  
+
diff --git a/projects/monaco/vitest.visual.ts b/projects/monaco/vitest.visual.ts
new file mode 100644
index 000000000..1f3d8ab13
--- /dev/null
+++ b/projects/monaco/vitest.visual.ts
@@ -0,0 +1,11 @@
+import { mergeConfig } from 'vitest/config';
+import { libraryVisualTestConfig } from '@nve-internals/vite';
+
+export default mergeConfig(libraryVisualTestConfig, {
+  test: {
+    include: ['src/**/*.test.visual.ts'],
+    outputFile: {
+      junit: './coverage/visual/junit.xml'
+    }
+  }
+});

From c27757299f7175323fb3aada7fb1afc1b86362cf Mon Sep 17 00:00:00 2001
From: John Yanarella 
Date: Thu, 5 Jun 2025 09:09:54 -0700
Subject: [PATCH 0218/1100] chore(docs): tweak monaco nav order

---
 projects/site/src/_11ty/layouts/common.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/projects/site/src/_11ty/layouts/common.js b/projects/site/src/_11ty/layouts/common.js
index baf527025..d99950ade 100644
--- a/projects/site/src/_11ty/layouts/common.js
+++ b/projects/site/src/_11ty/layouts/common.js
@@ -269,11 +269,6 @@ export const renderDocsNav = data => /* html */ `
     Getting Started
   
 
-  
-
   
     Code
     Codeblock
@@ -281,8 +276,8 @@ export const renderDocsNav = data => /* html */ `
 
   
     Monaco
-    Editor
     Input
+    Editor
   
 
   

From 8fbfb11d81c0c0b36ca0c960ac7ad355f3ee0ab9 Mon Sep 17 00:00:00 2001
From: Cory Rylan 
Date: Thu, 5 Jun 2025 13:42:03 -0500
Subject: [PATCH 0219/1100] feat(labs-brand): enable release

Signed-off-by: Cory Rylan 
---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index bc3e1f08b..3e8848207 100644
--- a/package.json
+++ b/package.json
@@ -119,6 +119,7 @@
         "release:elements",
         "release:elements-react",
         "release:labs-behaviors-alpine",
+        "release:labs-brand",
         "release:labs-code",
         "release:labs-forms",
         "release:monaco",

From 236294d21bed7b400ba137d6f7df53bb38bbdddb Mon Sep 17 00:00:00 2001
From: Cory Rylan 
Date: Thu, 5 Jun 2025 13:43:34 -0500
Subject: [PATCH 0220/1100] fix(themes): tag comments

- fix issue with tag comments not bundling in output
- add missing deprecation comment

Signed-off-by: Cory Rylan 
---
 projects/themes/build/style-dictionary.config.js | 7 +++++--
 projects/themes/src/index.test.lighthouse.ts     | 8 ++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/projects/themes/build/style-dictionary.config.js b/projects/themes/build/style-dictionary.config.js
index ead604fea..27627e787 100644
--- a/projects/themes/build/style-dictionary.config.js
+++ b/projects/themes/build/style-dictionary.config.js
@@ -105,7 +105,9 @@ StyleDictionary.registerTransform({
 StyleDictionary.registerFormat({
   name: 'custom/css',
   format: async ({ dictionary, options }) => {
-    const experimental = dictionary.allTokens.find(t => t.name.includes('experimental')) ? '/** @experimental */' : '';
+    const experimental = dictionary.allTokens.find(t => t.name.includes('experimental'))
+      ? '/*!\n * @experimental\n */'
+      : '';
     const selector =
       options.theme !== 'index'
         ? `[nve-theme*='${options.theme}'], [nve-theme*='${options.theme}']`
@@ -127,7 +129,8 @@ StyleDictionary.registerFormat({
       })
       .join('\n');
 
-    return `${experimental}\n${options.theme === 'index' ? `${baseReset}\n` : ''}${configString}${selector} {\n${formatted}\n}`;
+    const deprecated = options.theme.includes('brand') ? '/*!\n * @deprecated - use @nvidia-elements/brand instead\n */' : '';
+    return `${deprecated}\n${experimental}\n${options.theme === 'index' ? `${baseReset}\n` : ''}${configString}${selector} {\n${formatted}\n}`;
   }
 });
 
diff --git a/projects/themes/src/index.test.lighthouse.ts b/projects/themes/src/index.test.lighthouse.ts
index 25b34fdbe..803040e71 100644
--- a/projects/themes/src/index.test.lighthouse.ts
+++ b/projects/themes/src/index.test.lighthouse.ts
@@ -75,8 +75,8 @@ describe('lighthouse report', () => {
       
     `);
 
-    expect(report.payload.css.kb).toBeLessThan(0.85); // total
-    expect(report.payload.css.requests['ddb.css'].kb).toBeLessThan(0.85);
+    expect(report.payload.css.kb).toBeLessThan(1); // total
+    expect(report.payload.css.requests['ddb.css'].kb).toBeLessThan(1);
   });
 
   test('brand.css should remain within compressed bundle limits', async () => {
@@ -97,7 +97,7 @@ describe('lighthouse report', () => {
       
     `);
 
-    expect(report.payload.css.kb).toBeLessThan(0.85); // total
-    expect(report.payload.css.requests['brand.css'].kb).toBeLessThan(0.85);
+    expect(report.payload.css.kb).toBeLessThan(1); // total
+    expect(report.payload.css.requests['brand.css'].kb).toBeLessThan(1);
   });
 });

From 7a3d540848297e87e6c65950f57fd4d2c6ca6832 Mon Sep 17 00:00:00 2001
From: Cory Rylan 
Date: Thu, 5 Jun 2025 13:45:26 -0500
Subject: [PATCH 0221/1100] chore(docs): improve popover docs

- add missing MDN reference links
- add additional popover API details
- add labs docs

Signed-off-by: Cory Rylan 
---
 projects/elements/src/dialog/dialog.ts        |  2 +-
 projects/elements/src/drawer/drawer.ts        |  2 +-
 projects/elements/src/dropdown/dropdown.ts    |  2 +-
 .../internal/controllers/popover.stories.ts   | 18 ++++-
 .../elements/src/notification/notification.ts |  2 +-
 projects/elements/src/toast/toast.ts          |  2 +-
 projects/elements/src/toggletip/toggletip.ts  |  2 +-
 projects/elements/src/tooltip/tooltip.ts      |  2 +-
 projects/labs/forms/README.md                 | 36 +++-------
 projects/site/src/_11ty/layouts/common.js     |  2 +
 projects/site/src/_11ty/layouts/docs.css      |  6 ++
 .../site/src/docs/changelog/index.11tydata.js | 20 +++---
 projects/site/src/docs/elements/dialog.md     |  2 +
 projects/site/src/docs/elements/drawer.md     |  2 +
 projects/site/src/docs/elements/dropdown.md   |  2 +
 .../site/src/docs/elements/notification.md    |  2 +
 projects/site/src/docs/elements/toast.md      |  2 +
 projects/site/src/docs/elements/toggletip.md  |  2 +
 projects/site/src/docs/elements/tooltip.md    |  2 +
 .../site/src/docs/foundations/popovers.md     | 30 ++++----
 .../src/docs/foundations/themes/index.11ty.js | 72 +++++++++----------
 projects/site/src/docs/labs/forms.md          | 38 +++++++++-
 projects/site/src/docs/labs/index.md          | 12 ++--
 23 files changed, 155 insertions(+), 107 deletions(-)

diff --git a/projects/elements/src/dialog/dialog.ts b/projects/elements/src/dialog/dialog.ts
index 310a6dfb9..65b219fc6 100644
--- a/projects/elements/src/dialog/dialog.ts
+++ b/projects/elements/src/dialog/dialog.ts
@@ -16,7 +16,7 @@ import styles from './dialog.css?inline';
 
 /**
  * @element nve-dialog
- * @description Dialog is a component that appears above main content. A modal dialog is used to display critical information that requires users attention. Use `hidden` to show or hide the dialog.
+ * @description Dialog is a component that appears above main content. A modal dialog is used to display critical information that requires users attention that interrupts user flow. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/dialog
  * @event open - Dispatched when the dialog is opened.
diff --git a/projects/elements/src/drawer/drawer.ts b/projects/elements/src/drawer/drawer.ts
index 18f70df81..b30dcc2de 100644
--- a/projects/elements/src/drawer/drawer.ts
+++ b/projects/elements/src/drawer/drawer.ts
@@ -15,7 +15,7 @@ import styles from './drawer.css?inline';
 
 /**
  * @element nve-drawer
- * @description Drawer are to display content that is out of context of the rest of the page (notifications, navigations, settings). Alternatively [Panel](./docs/elements/panel/) is inline as its content is coupled or closely related to the content on the page (details, additional actions/options).
+ * @description Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings). Alternatively [Panel](./docs/elements/panel/) is inline as its content is coupled or closely related to the content on the page (details, additional actions/options). [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
  * @since 0.16.0
  * @entrypoint \@nvidia-elements/core/drawer
  * @event open - Dispatched when the drawer is opened.
diff --git a/projects/elements/src/dropdown/dropdown.ts b/projects/elements/src/dropdown/dropdown.ts
index 0abad6a1d..aa318cc5e 100644
--- a/projects/elements/src/dropdown/dropdown.ts
+++ b/projects/elements/src/dropdown/dropdown.ts
@@ -16,7 +16,7 @@ import styles from './dropdown.css?inline';
 
 /**
  * @element nve-dropdown
- * @description Generic dropdown element for rendering a variety of different content within a dropdown container.
+ * @description 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)
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/dropdown
  * @event open - Dispatched when the dropdown is opened.
diff --git a/projects/elements/src/internal/controllers/popover.stories.ts b/projects/elements/src/internal/controllers/popover.stories.ts
index 58b93ab95..13e6e4f21 100644
--- a/projects/elements/src/internal/controllers/popover.stories.ts
+++ b/projects/elements/src/internal/controllers/popover.stories.ts
@@ -22,7 +22,7 @@ export const Anchor = {
   render: () => html`
     tooltip 1
     tooltip 2
-    

+    

       button 1
       button 2
     

@@ -56,6 +56,22 @@ export const Nested = {
   `
 }
 
+export const ProgrammaticTrigger = {
+  render: () => html`
+
+open after 2s
+
+`
+}
+
 export const Interactive = {
   render: () => html`
     

diff --git a/projects/elements/src/notification/notification.ts b/projects/elements/src/notification/notification.ts
index 476f8faac..8984aa541 100644
--- a/projects/elements/src/notification/notification.ts
+++ b/projects/elements/src/notification/notification.ts
@@ -17,7 +17,7 @@ import styles from './notification.css?inline';
 
 /**
  * @element nve-notification
- * @description Displays real time updates without interrupting the user's workflow to communicate an important message or status.
+ * @description 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)
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/notification
  * @event open - Dispatched when the notification is opened.
diff --git a/projects/elements/src/toast/toast.ts b/projects/elements/src/toast/toast.ts
index 513f7d449..765815eaf 100644
--- a/projects/elements/src/toast/toast.ts
+++ b/projects/elements/src/toast/toast.ts
@@ -18,7 +18,7 @@ import styles from './toast.css?inline';
 
 /**
  * @element nve-toast
- * @description 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.
+ * @description 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)
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/toast
  * @event open - Dispatched when the toast is opened.
diff --git a/projects/elements/src/toggletip/toggletip.ts b/projects/elements/src/toggletip/toggletip.ts
index 2141e1786..67fe67376 100644
--- a/projects/elements/src/toggletip/toggletip.ts
+++ b/projects/elements/src/toggletip/toggletip.ts
@@ -19,7 +19,7 @@ import globalStyles from './toggletip.global.css?inline';
 
 /**
  * @element nve-toggletip
- * @description Generic toggletip element for rendering a variety of different content within a toggletip container.
+ * @description 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)
  * @since 0.38.0
  * @entrypoint \@nvidia-elements/core/toggletip
  * @event open - Dispatched when the toggletip is opened.
diff --git a/projects/elements/src/tooltip/tooltip.ts b/projects/elements/src/tooltip/tooltip.ts
index 2fdfc1ec3..10babcd09 100644
--- a/projects/elements/src/tooltip/tooltip.ts
+++ b/projects/elements/src/tooltip/tooltip.ts
@@ -15,7 +15,7 @@ import styles from './tooltip.css?inline';
 
 /**
  * @element nve-tooltip
- * @description A contextual popup that displays a description for an element. Tooltips are [triggered](https://w3c.github.io/aria/#tooltip) by hovering, focusing, or tapping an element and cannot have interactive elements within them.
+ * @description 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)
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/tooltip
  * @event open - Dispatched when the tooltip is opened.
diff --git a/projects/labs/forms/README.md b/projects/labs/forms/README.md
index 0c29469af..bf55a292c 100644
--- a/projects/labs/forms/README.md
+++ b/projects/labs/forms/README.md
@@ -1,32 +1,16 @@
 # @nvidia-elements/forms
 
-The forms utility library provides a base mixin to make it easy to create form associated custom elements. Form associated custom elements enable components to integrate and participate in form value state and validation. This creates a reliable and predictable API contract for components.
+The forms utility library provides a base mixin to make it easy to create form associated custom elements. Form associated custom elements enable components to integrate and participate in form value state and validation. This creates a reliable and predictable API contract for components. This project is in the very early stages of exploration. [Documentation](https://NVIDIA.github.io/elements/docs/labs/forms/)
 
-## Usage
+## Getting Started
 
-```typescript
+```bash
+# local .npmrc file
+registry=https://registry.npmjs.org
 
-```
-
-## API
-
-### Events
+# https://registry.npmjs.org
+npm login
 
-- `input` emitted when the value changes as a result of a user action
-- `change` emitted when the user modifies and commits the element's value.
-- `reset` emitted when the control state was reset to its initial value
-- `invalid` emitted when the control is invalid
-
-### Properties
-
-- `value` contains component state
-- `readonly` determine if component is in readonly/non-editable
-- `disabled` determine if component is interactive
-- `name` name associated to parent form
-- `noValidate` getter to check if component is in a no validation state
-- `form` getter to get a reference to component parent form
-- `willValidate` determine if component will validate
-- `validity` validity state of the component
-- `validationMessage` current validation message of the component
-- `valueAsString` stringified value of the component
-- `valueAsNumber` parsed number value of the component
+# install
+npm install @nvidia-elements/forms
+```
diff --git a/projects/site/src/_11ty/layouts/common.js b/projects/site/src/_11ty/layouts/common.js
index d99950ade..76dbcc4fa 100644
--- a/projects/site/src/_11ty/layouts/common.js
+++ b/projects/site/src/_11ty/layouts/common.js
@@ -284,6 +284,8 @@ export const renderDocsNav = data => /* html */ `
     Labs
     About
     Behaviors Alpine
+    Brand
+    Forms
   
 
   
diff --git a/projects/site/src/_11ty/layouts/docs.css b/projects/site/src/_11ty/layouts/docs.css
index 583e62b2c..ceee0619d 100644
--- a/projects/site/src/_11ty/layouts/docs.css
+++ b/projects/site/src/_11ty/layouts/docs.css
@@ -22,6 +22,12 @@
   }
 }
 
+#docs-nav nve-tree-node:not([expanded]) > a {
+  &::after {
+    inset: 0 0 0 -24px !important;
+  }
+}
+
 h2[nve-text='heading xl mkd'] {
   border-bottom: 1px solid var(--nve-ref-border-color);
 }
diff --git a/projects/site/src/docs/changelog/index.11tydata.js b/projects/site/src/docs/changelog/index.11tydata.js
index f70815071..bfacf0541 100644
--- a/projects/site/src/docs/changelog/index.11tydata.js
+++ b/projects/site/src/docs/changelog/index.11tydata.js
@@ -26,21 +26,26 @@ export default [
     permalink: '/themes/',
     changelog: metadata.projects['@nvidia-elements/themes'].changelog
   },
+  {
+    title: '@nvidia-elements/monaco',
+    permalink: '/monaco/',
+    changelog: metadata.projects['@nvidia-elements/monaco'].changelog
+  },
   {
     title: '@nvidia-elements/testing',
     permalink: '/testing/',
     changelog: metadata.projects['@nvidia-elements/testing'].changelog
   },
-  // {
-  //   title: '@nvidia-elements/brand',
-  //   permalink: '/labs-brand/',
-  //   changelog: metadata.projects['@nvidia-elements/brand'].changelog
-  // },
   {
     title: '@nvidia-elements/code',
     permalink: '/labs-code/',
     changelog: metadata.projects['@nvidia-elements/code'].changelog
   },
+  {
+    title: '@nvidia-elements/brand',
+    permalink: '/labs-brand/',
+    changelog: metadata.projects['@nvidia-elements/brand'].changelog
+  },
   {
     title: '@nvidia-elements/forms',
     permalink: '/labs-forms/',
@@ -50,10 +55,5 @@ export default [
     title: '@nvidia-elements/behaviors-alpine',
     permalink: '/labs-behaviors-alpine/',
     changelog: metadata.projects['@nvidia-elements/behaviors-alpine'].changelog
-  },
-  {
-    title: '@nvidia-elements/monaco',
-    permalink: '/monaco/',
-    changelog: metadata.projects['@nvidia-elements/monaco'].changelog
   }
 ];
diff --git a/projects/site/src/docs/elements/dialog.md b/projects/site/src/docs/elements/dialog.md
index d29eb129c..3434b134e 100644
--- a/projects/site/src/docs/elements/dialog.md
+++ b/projects/site/src/docs/elements/dialog.md
@@ -9,6 +9,8 @@
 
 ## Installation
 
+Learn more about native [Popover APIs](docs/foundations/popovers/).
+
 {% install 'nve-dialog' %}
 
 ## Standard
diff --git a/projects/site/src/docs/elements/drawer.md b/projects/site/src/docs/elements/drawer.md
index 8d684f380..5f783e3d2 100644
--- a/projects/site/src/docs/elements/drawer.md
+++ b/projects/site/src/docs/elements/drawer.md
@@ -9,6 +9,8 @@
 
 ## Installation
 
+Learn more about native [Popover APIs](docs/foundations/popovers/).
+
 {% install 'nve-drawer' %}
 
 ## Standard
diff --git a/projects/site/src/docs/elements/dropdown.md b/projects/site/src/docs/elements/dropdown.md
index e0b3ea848..85087fa82 100644
--- a/projects/site/src/docs/elements/dropdown.md
+++ b/projects/site/src/docs/elements/dropdown.md
@@ -9,6 +9,8 @@
 
 ## Installation
 
+Learn more about native [Popover APIs](docs/foundations/popovers/).
+
 {% install 'nve-dropdown' %}
 
 ## Standard
diff --git a/projects/site/src/docs/elements/notification.md b/projects/site/src/docs/elements/notification.md
index b1c3f1ea6..743524d8c 100644
--- a/projects/site/src/docs/elements/notification.md
+++ b/projects/site/src/docs/elements/notification.md
@@ -9,6 +9,8 @@
 
 ## Installation
 
+Learn more about native [Popover APIs](docs/foundations/popovers/).
+
 {% install 'nve-notification' %}
 
 ## Standard
diff --git a/projects/site/src/docs/elements/toast.md b/projects/site/src/docs/elements/toast.md
index a1a0d0bd9..bf5b45f1c 100644
--- a/projects/site/src/docs/elements/toast.md
+++ b/projects/site/src/docs/elements/toast.md
@@ -8,6 +8,8 @@
 
 ## Installation
 
+Learn more about native [Popover APIs](docs/foundations/popovers/).
+
 {% install 'nve-toast' %}
 
 ## Standard
diff --git a/projects/site/src/docs/elements/toggletip.md b/projects/site/src/docs/elements/toggletip.md
index 64269b97d..7e7df6eb5 100644
--- a/projects/site/src/docs/elements/toggletip.md
+++ b/projects/site/src/docs/elements/toggletip.md
@@ -9,6 +9,8 @@
 
 ## Installation
 
+Learn more about native [Popover APIs](docs/foundations/popovers/).
+
 {% install 'nve-toggletip' %}
 
 ## Standard
diff --git a/projects/site/src/docs/elements/tooltip.md b/projects/site/src/docs/elements/tooltip.md
index 0116ee130..657df474e 100644
--- a/projects/site/src/docs/elements/tooltip.md
+++ b/projects/site/src/docs/elements/tooltip.md
@@ -8,6 +8,8 @@
 
 ## Installation
 
+Learn more about native [Popover APIs](docs/foundations/popovers/).
+
 {% install 'nve-tooltip' %}
 
 ## Standard
diff --git a/projects/site/src/docs/foundations/popovers.md b/projects/site/src/docs/foundations/popovers.md
index 5edeca0b3..51580c89a 100644
--- a/projects/site/src/docs/foundations/popovers.md
+++ b/projects/site/src/docs/foundations/popovers.md
@@ -7,10 +7,7 @@
 
 # {{ title }}
 
-Elements provides a set of popover type components based on the popover spec and aria guidelines.
-
-- [popover spec](https://open-ui.org/components/popup.research.explainer)
-- [w3c aria patterns](https://www.w3.org/WAI/ARIA/apg/patterns/)
+Elements provides a set of popover type components built on the native browser [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
 
 ## Available Elements
 
@@ -37,8 +34,6 @@ import '@nvidia-elements/core/notification/define.js';
 
 ## Usage
 
-Element popover types use the browser standard [Popover API](https://developer.chrome.com/blog/introducing-popover-api)
-
 ```html
 hello there
 button
@@ -51,17 +46,20 @@ Element popover types use the browser standard [Popover API](https://developer.c
 Some popover types such as tooltip have complex interactions such as showing when hovered or focused. To simplify these interactions all popover type elements provide a `open` and `close` event to notify when the popover is attempting to close or open based on a user interaction. You can also listen
 to the native `toggle` or `beforetoggle` popover events.
 
-{% story 'nve-tooltip', 'Events', '{ "inline": false, "height": "400px" }' %}
+- [toggle](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)
+- [beforetoggle](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)
 
-```html
-hello there
-button
-
-```
+{% story 'nve-tooltip', 'Events', '{ "inline": false, "height": "150px" }' %}
+
+## Programmatic Trigger
+
+Popovers can be triggered manually via the native popover APIs.
+
+- [showPopover()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/showPopover)
+- [hidePopover()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidePopover)
+- [togglePopover()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/togglePopover)
+
+{% story '@nvidia-elements/core/internal/controllers/popover.stories.json', 'ProgrammaticTrigger', '{ "inline": false, "height": "150px" }' %}
 
 ## Positioning
 
diff --git a/projects/site/src/docs/foundations/themes/index.11ty.js b/projects/site/src/docs/foundations/themes/index.11ty.js
index 073a89f8e..150e1960a 100644
--- a/projects/site/src/docs/foundations/themes/index.11ty.js
+++ b/projects/site/src/docs/foundations/themes/index.11ty.js
@@ -10,6 +10,7 @@ export function render(data) {
 # ${data.title}
 
 Themes are built leveraging CSS Custom Properties. Themes are applied by setting the \`nve-theme\` attribute on the host \`html\` element.
+Themes can be independently loaded as needed to reduce the size of the initial bundle.
 
 \`\`\`css
 @import '@nvidia-elements/themes/fonts/inter.css';
@@ -29,6 +30,9 @@ Themes are built leveraging CSS Custom Properties. Themes are applied by setting
   If your application cannot access root nodes like html or body then apply nve-theme="root" to set the root background colors and fonts.
 
 
+
+## Autodetect Preferences
+
 Themes can be applied dynamically based on user preferences.
 
 \`\`\`javascript
@@ -47,21 +51,49 @@ Themes can be applied dynamically based on user preferences.
 
 ## Dark
 
+\`\`\`css
+@import '@nvidia-elements/themes/dark.css';
+\`\`\`
+
 ${getThemeDemo('dark')}
 
 ## Light (Default)
 
+\`\`\`css
+@import '@nvidia-elements/themes/index.css';
+\`\`\`
+
 ${getThemeDemo('light')}
 
 ## Debug
 
 The \`debug\` theme will highlight elements with a green outline, layouts with a purple outline and typography with a gold outline.
 
+\`\`\`css
+@import '@nvidia-elements/themes/debug.css';
+\`\`\`
+
 ${getThemeDemo('debug')}
 
 ## High Contrast
 
+\`\`\`css
+@import '@nvidia-elements/themes/high-contrast.css';
+\`\`\`
+
 ${getThemeDemo('high-contrast')}
+
+## Brand
+
+The \`brand\` theme is a set of themes that are designed to be used with the \`@nvidia-elements/brand\` package.
+[Learn more](docs/labs/brand/).
+
+\`\`\`css
+@import '@nvidia-elements/brand/index.css';
+@import '@nvidia-elements/brand/dark.css';
+\`\`\`
+
+${getThemeDemo('brand-dark')}
 `,
     'md'
   );
@@ -81,20 +113,6 @@ function getThemeDemo(theme) {
 function getThemeContent() {
   return /* html */ `
     

-    

-        
-        
-        
-        
-        
-      

-      

-        
-        
-        
-        
-        
-      

       

         default
         emphasis
@@ -124,32 +142,6 @@ function getThemeContent() {
         success
         danger
       

-      

-        
-          default
-          default
-        
-
-        
-          accent
-          accent
-        
-
-        
-          warning
-          warning
-        
-
-        
-          success
-          success
-        
-
-        
-          danger
-          danger
-        
-      

     

     `;
 }
diff --git a/projects/site/src/docs/labs/forms.md b/projects/site/src/docs/labs/forms.md
index 69eef00b9..4ebc0ba68 100644
--- a/projects/site/src/docs/labs/forms.md
+++ b/projects/site/src/docs/labs/forms.md
@@ -7,4 +7,40 @@
 
 # Forms
 
-[Project Source](https://github.com/NVIDIA/elements/-/tree/main/projects/labs/forms)
+The forms utility library provides a base mixin to make it easy to create form associated custom elements. Form associated custom elements enable components to integrate and participate in form value state and validation. This creates a reliable and predictable API contract for components. This project is in the very early stages of exploration. [Project Source](https://github.com/NVIDIA/elements/-/tree/main/projects/labs/forms)
+
+## Getting Started
+
+```shell
+# local .npmrc file
+registry=https://registry.npmjs.org
+
+# https://registry.npmjs.org
+npm login
+
+# install
+npm install @nvidia-elements/forms
+```
+
+## API
+
+### Events
+
+- `input` emitted when the value changes as a result of a user action
+- `change` emitted when the user modifies and commits the element's value.
+- `reset` emitted when the control state was reset to its initial value
+- `invalid` emitted when the control is invalid
+
+### Properties
+
+- `value` contains component state
+- `readonly` determine if component is in readonly/non-editable
+- `disabled` determine if component is interactive
+- `name` name associated to parent form
+- `noValidate` getter to check if component is in a no validation state
+- `form` getter to get a reference to component parent form
+- `willValidate` determine if component will validate
+- `validity` validity state of the component
+- `validationMessage` current validation message of the component
+- `valueAsString` stringified value of the component
+- `valueAsNumber` parsed number value of the component
diff --git a/projects/site/src/docs/labs/index.md b/projects/site/src/docs/labs/index.md
index 05a83a8a0..c45d90066 100644
--- a/projects/site/src/docs/labs/index.md
+++ b/projects/site/src/docs/labs/index.md
@@ -21,22 +21,22 @@ main @nve package scope. Labs projects may be deprecated or removed at any time.
   
     @nvidia-elements/code
     A package containing UI components for displaying and editing source code.
-    In Development
+    Available / In Development
   
   
     @nvidia-elements/behaviors-alpine
     A package containing AlpineJS utilities.
-    In Development
+    Available / In Development
   
   
     @nvidia-elements/brand
-    
-    In Development
+    A custom marketing/brand theme.
+    Available / In Development
   
   
     @nvidia-elements/forms
-    
-    In Development
+    Utilities for building custom form control APIs.
+    Available / In Development
   
   
     @nvidia-elements/playwright-screencast

From 546be6d6674291ebdaee930593731ed692d89007 Mon Sep 17 00:00:00 2001
From: semantic-release-bot 
Date: Thu, 5 Jun 2025 20:34:23 +0000
Subject: [PATCH 0222/1100] chore(release): @nve/themes-v1.6.1 [skip ci]

## [@nve/themes-v1.6.1](https://gitlab-master.nvidia.com/ai-infra/elements/compare/@nve/themes-v1.6.0...@nve/themes-v1.6.1) (2025-06-05)

### Bug Fixes

* **themes:** tag comments ([66adb3d](https://gitlab-master.nvidia.com/ai-infra/elements/commit/66adb3da1ac8e27c67a0e07b94470093f1ccd09a))
---
 projects/themes/CHANGELOG.md | 7 +++++++
 projects/themes/package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/projects/themes/CHANGELOG.md b/projects/themes/CHANGELOG.md
index 9575b7cb6..194193f4a 100644
--- a/projects/themes/CHANGELOG.md
+++ b/projects/themes/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [@nvidia-elements/themes-v1.6.1](https://github.com/NVIDIA/elements/compare/@nvidia-elements/themes-v1.6.0...@nvidia-elements/themes-v1.6.1) (2025-06-05)
+
+
+### Bug Fixes
+
+* **themes:** tag comments ([fea79f6](https://github.com/NVIDIA/elements/commit/fea79f678b57bdfeb66cc47da51a5aa9e19d4706))
+
 ## [@nvidia-elements/themes-v1.6.0](https://github.com/NVIDIA/elements/compare/@nvidia-elements/themes-v1.5.1...@nvidia-elements/themes-v1.6.0) (2025-06-05)
 
 
diff --git a/projects/themes/package.json b/projects/themes/package.json
index 84ae26e8e..a80444afa 100644
--- a/projects/themes/package.json
+++ b/projects/themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nvidia-elements/themes",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "Elements themes and tokens",
   "homepage": "https://NVIDIA.github.io/elements/",
   "repository": {

From 6176859254513d74832895f2d935787d750a5eed Mon Sep 17 00:00:00 2001
From: John Yanarella 
Date: Thu, 5 Jun 2025 14:36:27 -0700
Subject: [PATCH 0223/1100] fix(monaco): types export fix

---
 projects/monaco/src/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/monaco/src/types.ts b/projects/monaco/src/types.ts
index 54e265e4e..4b2fba55d 100644
--- a/projects/monaco/src/types.ts
+++ b/projects/monaco/src/types.ts
@@ -1,4 +1,4 @@
-import type * as monaco from './vendor/monaco-editor/editor/editor.api';
+import type * as monaco from './vendor/monaco-editor/editor/editor.api.js';
 
 export type { monaco };
 

From 729785f4bb26faa6b489338c3861796757536576 Mon Sep 17 00:00:00 2001
From: semantic-release-bot 
Date: Fri, 6 Jun 2025 14:56:16 +0000
Subject: [PATCH 0224/1100] chore(release): @nve/monaco-v1.0.6 [skip ci]

## [@nve/monaco-v1.0.6](https://gitlab-master.nvidia.com/ai-infra/elements/compare/@nve/monaco-v1.0.5...@nve/monaco-v1.0.6) (2025-06-06)

### Bug Fixes

* **monaco:** types export fix ([3ae7404](https://gitlab-master.nvidia.com/ai-infra/elements/commit/3ae740481bc2abcb1eb7fac622a1066645aa1245))
---
 projects/monaco/CHANGELOG.md | 7 +++++++
 projects/monaco/package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/projects/monaco/CHANGELOG.md b/projects/monaco/CHANGELOG.md
index 650690026..8578a0ed1 100644
--- a/projects/monaco/CHANGELOG.md
+++ b/projects/monaco/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [@nvidia-elements/monaco-v1.0.6](https://github.com/NVIDIA/elements/compare/@nvidia-elements/monaco-v1.0.5...@nvidia-elements/monaco-v1.0.6) (2025-06-06)
+
+
+### Bug Fixes
+
+* **monaco:** types export fix ([4c59645](https://github.com/NVIDIA/elements/commit/4c596454cf4f6ed936dd7141b07d6d5d0f47d992))
+
 ## [@nvidia-elements/monaco-v1.0.5](https://github.com/NVIDIA/elements/compare/@nvidia-elements/monaco-v1.0.4...@nvidia-elements/monaco-v1.0.5) (2025-06-04)
 
 
diff --git a/projects/monaco/package.json b/projects/monaco/package.json
index d1578d38b..5a5b3a71a 100644
--- a/projects/monaco/package.json
+++ b/projects/monaco/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nvidia-elements/monaco",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Monaco Editor Web Component",
   "homepage": "https://NVIDIA.github.io/elements/",
   "repository": {

From 7bebd324f5c9b1e87bfd2b9cbe8b2d02c8bef0bf Mon Sep 17 00:00:00 2001
From: Cory Rylan 
Date: Fri, 6 Jun 2025 13:58:02 -0500
Subject: [PATCH 0225/1100] fix(themes): interaction color contrast

- aligns interaction color to figma and fixes color contrast issue

Signed-off-by: Cory Rylan 
---
 projects/themes/.visual/dark.accent.png        |  4 ++--
 projects/themes/.visual/dark.border-color.png  |  2 +-
 projects/themes/.visual/dark.color.png         |  4 ++--
 projects/themes/.visual/dark.interaction.png   |  4 ++--
 projects/themes/.visual/dark.layer.png         |  4 ++--
 projects/themes/.visual/dark.opacity.png       |  2 +-
 projects/themes/.visual/dark.status.png        |  4 ++--
 projects/themes/.visual/dark.text.png          |  4 ++--
 projects/themes/.visual/theme.accent.png       |  4 ++--
 projects/themes/.visual/theme.border-color.png |  2 +-
 .../themes/.visual/theme.border-radius.png     |  4 ++--
 projects/themes/.visual/theme.border-width.png |  4 ++--
 projects/themes/.visual/theme.color.png        |  4 ++--
 projects/themes/.visual/theme.font-size.png    |  4 ++--
 projects/themes/.visual/theme.interaction.png  |  4 ++--
 projects/themes/.visual/theme.layer.png        |  4 ++--
 projects/themes/.visual/theme.opacity.png      |  4 ++--
 projects/themes/.visual/theme.size.png         |  4 ++--
 projects/themes/.visual/theme.space.png        |  4 ++--
 projects/themes/.visual/theme.status.png       |  4 ++--
 projects/themes/.visual/theme.text.png         |  4 ++--
 projects/themes/src/dark.json                  | 18 +++---------------
 projects/themes/src/index.json                 | 10 +++++-----
 23 files changed, 47 insertions(+), 59 deletions(-)

diff --git a/projects/themes/.visual/dark.accent.png b/projects/themes/.visual/dark.accent.png
index 91f51d8f5..b5eb8915e 100644
--- a/projects/themes/.visual/dark.accent.png
+++ b/projects/themes/.visual/dark.accent.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7df2937db0f78080ba6944b5d4d3ae4e677ee3356445b9752cfb99c311e0ca73
-size 511
+oid sha256:8257958aaf8c6ed0fbdcca635cd7f34a598e7200c4f727fdd108f0e7ced4c4df
+size 537
diff --git a/projects/themes/.visual/dark.border-color.png b/projects/themes/.visual/dark.border-color.png
index 083a19457..38d2a82a6 100644
--- a/projects/themes/.visual/dark.border-color.png
+++ b/projects/themes/.visual/dark.border-color.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e2b2d294983681f4bbd6cc5463acf5a99362be86208b0c708faa1a5ba17e0997
+oid sha256:d4002cd7ce5d65e5fa9a417428a4365331b8f1e0de9b5d5f7fbe08e087e2e143
 size 730
diff --git a/projects/themes/.visual/dark.color.png b/projects/themes/.visual/dark.color.png
index c4bee2e17..9ec370325 100644
--- a/projects/themes/.visual/dark.color.png
+++ b/projects/themes/.visual/dark.color.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ce183fe2e44857279c88e14e22aed5d2ccfa9461f75993993b22110fe7312e5f
-size 39758
+oid sha256:a4775d686ce8ca130f0499975269fc24f129ed5ae0a0000daac970a48903a174
+size 40195
diff --git a/projects/themes/.visual/dark.interaction.png b/projects/themes/.visual/dark.interaction.png
index d0eac4e1c..2da63478f 100644
--- a/projects/themes/.visual/dark.interaction.png
+++ b/projects/themes/.visual/dark.interaction.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bc1dae59effd5e9ac40e04aeb902aa5b35e38524b75887ff87a1c785cca0821c
-size 3924
+oid sha256:a7cc220c4dac63b8dfe4db593f3f40851812764f98e4c35a1f3d241a3e50c002
+size 3971
diff --git a/projects/themes/.visual/dark.layer.png b/projects/themes/.visual/dark.layer.png
index 7414226e1..1ac0b9e82 100644
--- a/projects/themes/.visual/dark.layer.png
+++ b/projects/themes/.visual/dark.layer.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:715f0b334a16612d90ac7add79e9e62fb699c434b551a852803bde318193c532
-size 2510
+oid sha256:e259e61bae746e98ceb878e8373377fd6d2579eca8e057db9e3731bf3fff6742
+size 2589
diff --git a/projects/themes/.visual/dark.opacity.png b/projects/themes/.visual/dark.opacity.png
index 7400496ce..60bf13ef2 100644
--- a/projects/themes/.visual/dark.opacity.png
+++ b/projects/themes/.visual/dark.opacity.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3f5967538978ae2a83b94087b8f1c9df97c6e6456836e1cf5996e18809fd89f3
+oid sha256:7c52d42f0c89c650db262606c58b727db2b5951d404db25e72f050e699a18a01
 size 1437
diff --git a/projects/themes/.visual/dark.status.png b/projects/themes/.visual/dark.status.png
index 5729b03b0..2456fe612 100644
--- a/projects/themes/.visual/dark.status.png
+++ b/projects/themes/.visual/dark.status.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3bd4237c2f6f9c3177626f1d0e153136a1f8b8843840e8a98147a04da934b3a4
-size 1685
+oid sha256:2c3befe7f7beac7401d69c768bcc656b61d7c65f7b4285347fa03b9140a64c5d
+size 1733
diff --git a/projects/themes/.visual/dark.text.png b/projects/themes/.visual/dark.text.png
index ed88c1f02..d2ef94b27 100644
--- a/projects/themes/.visual/dark.text.png
+++ b/projects/themes/.visual/dark.text.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:936e3b0a3454075d108bb266cfc4055139738ded5efea92053efc914fefad68e
-size 1557
+oid sha256:51ff360ebd294cd0dc8af3432eefca8737304b4a0c75772af1ed8a460d1364fc
+size 1593
diff --git a/projects/themes/.visual/theme.accent.png b/projects/themes/.visual/theme.accent.png
index d08273bed..2e8ff2d76 100644
--- a/projects/themes/.visual/theme.accent.png
+++ b/projects/themes/.visual/theme.accent.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e47fdd6f7e2cb8ebe15f7d434b11aacc6c33e7020b53bf50c075b7a90c225f33
-size 508
+oid sha256:fa83aa275eaa5df3eec587efe8d7cc768ec275bb11af622f8fcacb0464c6909f
+size 530
diff --git a/projects/themes/.visual/theme.border-color.png b/projects/themes/.visual/theme.border-color.png
index 090d5364b..c934563f3 100644
--- a/projects/themes/.visual/theme.border-color.png
+++ b/projects/themes/.visual/theme.border-color.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9beed75fb36fdee7887e4baab5b03dbb3d50aad2c4a09d0f6039ed4175e340a9
+oid sha256:8e420e65bc2087eaad27e2ee0fb86df94b28fb85c0deef0e5e071eb2e4e198af
 size 728
diff --git a/projects/themes/.visual/theme.border-radius.png b/projects/themes/.visual/theme.border-radius.png
index 17652acc7..0aaa57c4a 100644
--- a/projects/themes/.visual/theme.border-radius.png
+++ b/projects/themes/.visual/theme.border-radius.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2cf04aa6e631b74595d043ca77c8b053840736cdccd028ccf920764429b9a424
-size 4499
+oid sha256:50e666bfc2af647e17aabacded09e4414815519ba9b4593a6ccd6db03fcdf145
+size 4508
diff --git a/projects/themes/.visual/theme.border-width.png b/projects/themes/.visual/theme.border-width.png
index 001c432ba..d06b0a8c8 100644
--- a/projects/themes/.visual/theme.border-width.png
+++ b/projects/themes/.visual/theme.border-width.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f0663a0401f58057d3a9dd10ba8595f96bcaa8ea83bd8145a575c41c3a783320
-size 664
+oid sha256:d1a18ffae342fe751629cdfc145657c2515837b9f47d53a7c4c013f0567b615e
+size 682
diff --git a/projects/themes/.visual/theme.color.png b/projects/themes/.visual/theme.color.png
index 13ef64e7c..abbba3c1a 100644
--- a/projects/themes/.visual/theme.color.png
+++ b/projects/themes/.visual/theme.color.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cd8bc27eafc84c5eb714489f3b76e3fd66db7b13a47bb9d048cabde2930100d9
-size 39547
+oid sha256:dde02f0c012289a6a1053f48ca54e13f06aa6e18b92f4df082411d01db94454d
+size 39570
diff --git a/projects/themes/.visual/theme.font-size.png b/projects/themes/.visual/theme.font-size.png
index 6bceb77dd..4664e371a 100644
--- a/projects/themes/.visual/theme.font-size.png
+++ b/projects/themes/.visual/theme.font-size.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cf2963bd7810a44890394ed0e6c6c4693f124662360a499eef62b4bc2db13640
-size 1850
+oid sha256:ddc90b8933e0e76118586b31ec5e6b411a5ce5d79938dc7b82a90fefd4c9cfa4
+size 1855
diff --git a/projects/themes/.visual/theme.interaction.png b/projects/themes/.visual/theme.interaction.png
index 2bea13efb..949a12183 100644
--- a/projects/themes/.visual/theme.interaction.png
+++ b/projects/themes/.visual/theme.interaction.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b35b8404d8c1288d554628df6dd594a9338bbe228eb76908e9e9a346039c0cfb
-size 3873
+oid sha256:2a590b07bf711a229fb8d8de4d93f54d611e6c666fab1e084a0844a85b9ad831
+size 3924
diff --git a/projects/themes/.visual/theme.layer.png b/projects/themes/.visual/theme.layer.png
index 6115dabe4..fa541965d 100644
--- a/projects/themes/.visual/theme.layer.png
+++ b/projects/themes/.visual/theme.layer.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c424d281475cfa4e20d5ce8caa8478663dbfc21d1dd981e5c74b16c85c9145ca
-size 2457
+oid sha256:d15698ec306e4d29f8ec28fdb5a33c984809d67b4dfec2b1737b092803414ef6
+size 2485
diff --git a/projects/themes/.visual/theme.opacity.png b/projects/themes/.visual/theme.opacity.png
index c69206775..70fe3aee3 100644
--- a/projects/themes/.visual/theme.opacity.png
+++ b/projects/themes/.visual/theme.opacity.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:dfbd4159845babda016822e73cef8efac50c1211a3c09185ffa6752ed657b616
-size 1390
+oid sha256:f3dac4f1ff9fce9064f74f88a02174cc9cee7dd4880f1ffb5356aa20286d632b
+size 1416
diff --git a/projects/themes/.visual/theme.size.png b/projects/themes/.visual/theme.size.png
index 75682c2f8..0b2b84d49 100644
--- a/projects/themes/.visual/theme.size.png
+++ b/projects/themes/.visual/theme.size.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9cf319878f095bd1524a64ebb46821450e097ee71e572e28c44cf5be7e8cbbd6
-size 1735
+oid sha256:008a6ebdb33e0997243bf52fefcb0e35ad4cc7ee72ea19e71f661dd789360b88
+size 1757
diff --git a/projects/themes/.visual/theme.space.png b/projects/themes/.visual/theme.space.png
index a254f8ded..4bda05c0a 100644
--- a/projects/themes/.visual/theme.space.png
+++ b/projects/themes/.visual/theme.space.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0a755a5e224e5f50487e2ff409c0f0c1266d1719d16e2c3df2028b5a70d2a26d
-size 1348
+oid sha256:ed237968e980d25a1c50769e630166298f38504e2306d55aa1ff269222b60300
+size 1372
diff --git a/projects/themes/.visual/theme.status.png b/projects/themes/.visual/theme.status.png
index 3d14f5a25..633f5408d 100644
--- a/projects/themes/.visual/theme.status.png
+++ b/projects/themes/.visual/theme.status.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bca827d03406e18827a019a95b3b1a9d0167d64d22a34fb3edda6a7b5336e1b9
-size 1714
+oid sha256:886cb851f08733aad8794f10cc475e982657ae4ef37ff6f8d4c48cd223e2acee
+size 1728
diff --git a/projects/themes/.visual/theme.text.png b/projects/themes/.visual/theme.text.png
index 131c09da5..610a6e26f 100644
--- a/projects/themes/.visual/theme.text.png
+++ b/projects/themes/.visual/theme.text.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e10e8c981c5b533231cd906cedbdb71250358f2a62a8501edea0012457e6c095
-size 1547
+oid sha256:69382a8ecdfd84352e2bc12f03c8aac796ac818df6ecbb8d068e674a8db65b83
+size 1570
diff --git a/projects/themes/src/dark.json b/projects/themes/src/dark.json
index 15cc68636..a7ee29e42 100644
--- a/projects/themes/src/dark.json
+++ b/projects/themes/src/dark.json
@@ -1396,7 +1396,7 @@
     },
     "interaction": {
       "color": {
-        "value": "{sys.text.color}",
+        "value": "{ref.color.neutral.1200}",
         "type": "color"
       },
       "background": {
@@ -1451,7 +1451,7 @@
       },
       "emphasis": {
         "color": {
-          "value": "{sys.text.white.color}",
+          "value": "{sys.text.black.color}",
           "type": "color"
         },
         "background": {
@@ -1465,7 +1465,7 @@
           "type": "color"
         },
         "background": {
-          "value": "{ref.color.red-cardinal.1000}",
+          "value": "{ref.color.red-cardinal.800}",
           "type": "color"
         }
       },
@@ -1533,18 +1533,6 @@
       },
       "mix": {
         "value": "{ref.color.white}"
-      },
-      "ratio-hover": {
-        "value": "4%"
-      },
-      "ratio-disabled": {
-        "value": "4%"
-      },
-      "ratio-active": {
-        "value": "8%"
-      },
-      "ratio-selected": {
-        "value": "8%"
       }
     },
     "layer": {
diff --git a/projects/themes/src/index.json b/projects/themes/src/index.json
index 86050307c..e5c71f9b6 100644
--- a/projects/themes/src/index.json
+++ b/projects/themes/src/index.json
@@ -1865,7 +1865,7 @@
       },
       "emphasis": {
         "color": {
-          "value": "{sys.text.white.color}",
+          "value": "{sys.text.black.color}",
           "type": "color"
         },
         "background": {
@@ -1942,16 +1942,16 @@
         "value": "initial"
       },
       "ratio-hover": {
-        "value": "2%"
+        "value": "4%"
       },
       "ratio-disabled": {
-        "value": "2%"
+        "value": "4%"
       },
       "ratio-active": {
-        "value": "4%"
+        "value": "8%"
       },
       "ratio-selected": {
-        "value": "4%"
+        "value": "8%"
       }
     },
     "layer": {

From 63cf1f89a9877658078a460f29850e1cec889a8a Mon Sep 17 00:00:00 2001
From: Cory Rylan 
Date: Fri, 6 Jun 2025 13:59:28 -0500
Subject: [PATCH 0226/1100] fix(elements): interaction color contrast

- aligns interaction color to figma and fixes color contrast issue
- fixes step selection contrast
- fixes missing neutral color in doc

Signed-off-by: Cory Rylan 
---
 projects/elements/.visual/button.dark.png          |  4 ++--
 projects/elements/.visual/steps.dark.png           |  4 ++--
 projects/elements/.visual/steps.png                |  4 ++--
 projects/elements/src/button/button.css            |  8 ++------
 projects/elements/src/button/button.test.axe.ts    |  4 +---
 .../elements/src/button/button.test.lighthouse.ts  |  2 +-
 projects/elements/src/button/button.ts             |  1 -
 .../elements/src/color/color.test.lighthouse.ts    |  2 +-
 .../src/combobox/combobox.test.lighthouse.ts       |  2 +-
 .../src/datetime/datetime.test.lighthouse.ts       |  2 +-
 .../elements/src/month/month.test.lighthouse.ts    |  2 +-
 projects/elements/src/steps/steps-item.css         | 13 +++----------
 projects/elements/src/steps/steps.test.visual.ts   | 14 ++++++++++++++
 projects/site/src/docs/elements/steps.md           |  4 ++--
 .../site/src/docs/foundations/themes/color.11ty.js |  1 +
 15 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/projects/elements/.visual/button.dark.png b/projects/elements/.visual/button.dark.png
index 67a74c579..b37545832 100644
--- a/projects/elements/.visual/button.dark.png
+++ b/projects/elements/.visual/button.dark.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d82b70533071a54ea78c11b792590d6b472e8d15396c9e58e73fcc5051461dcb
-size 19751
+oid sha256:5c30ee5385a7a928df9ba7548c69656feb31887a9c458eff783d94ec11a3c058
+size 19800
diff --git a/projects/elements/.visual/steps.dark.png b/projects/elements/.visual/steps.dark.png
index fe08608c7..8a5a3ca94 100644
--- a/projects/elements/.visual/steps.dark.png
+++ b/projects/elements/.visual/steps.dark.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:135e0030ce30fafe05e83239f6a53b1fd6e31edb1cc95397e6ce037d79e3aad5
-size 24917
+oid sha256:32efdad13bdefbfa12c4ccfa59f702d905a60d014134e59de1ec3a90de27281c
+size 33482
diff --git a/projects/elements/.visual/steps.png b/projects/elements/.visual/steps.png
index 803d64816..64a2fa365 100644
--- a/projects/elements/.visual/steps.png
+++ b/projects/elements/.visual/steps.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0e7b22d084a3740175ea4639d7e1dd2b4e7a460eae1b7cd5561ac3c498b51da4
-size 25662
+oid sha256:a4a8e0842787760543dacc837a3b4dad360475761aa7f40764d10ca8bb3c78f4
+size 34544
diff --git a/projects/elements/src/button/button.css b/projects/elements/src/button/button.css
index 5d82c49e4..8f85003c1 100644
--- a/projects/elements/src/button/button.css
+++ b/projects/elements/src/button/button.css
@@ -93,10 +93,6 @@
   --nve-sys-interaction-state-ratio: 0;
 }
 
-:host([container='flat']:not([interaction]):not([disabled]):not([readonly])) {
-  --nve-sys-interaction-state-ratio-hover: 8%;
-}
-
 :host([size='sm']) {
   --height: var(--nve-ref-size-700);
 }
@@ -180,7 +176,7 @@
 }
 
 :host([container*='flat'][interaction='destructive']) {
-  --color: var(--nve-sys-interaction-destructive-background);
+  --color: color-mix(in oklab, var(--nve-sys-interaction-destructive-background) 100%, currentColor 20%);
 }
 
 :host([container*='inline']) {
@@ -266,7 +262,7 @@
 }
 
 :host([container='inline'][interaction='destructive']) {
-  --color: var(--nve-sys-interaction-destructive-background);
+  --color: color-mix(in oklab, var(--nve-sys-interaction-destructive-background) 100%, currentColor 20%);
 }
 
 :host([container='inline'][interaction='emphasis']) {
diff --git a/projects/elements/src/button/button.test.axe.ts b/projects/elements/src/button/button.test.axe.ts
index 6a7f58260..5023b2bfa 100644
--- a/projects/elements/src/button/button.test.axe.ts
+++ b/projects/elements/src/button/button.test.axe.ts
@@ -26,9 +26,7 @@ describe(Button.metadata.tag, () => {
   });
 
   it('should pass axe check', async () => {
-    const results = await runAxe([Button.metadata.tag], {
-      rules: { 'color-contrast': { enabled: false } } // interaction emphasis fails minimum color-contrast
-    });
+    const results = await runAxe([Button.metadata.tag]);
     expect(results.violations.length).toBe(0);
   });
 });
diff --git a/projects/elements/src/button/button.test.lighthouse.ts b/projects/elements/src/button/button.test.lighthouse.ts
index 814d215db..049db362f 100644
--- a/projects/elements/src/button/button.test.lighthouse.ts
+++ b/projects/elements/src/button/button.test.lighthouse.ts
@@ -13,7 +13,7 @@ describe('button lighthouse report', () => {
     `);
 
     expect(report.scores.performance).toBe(100);
-    expect(report.scores.accessibility).toBe(87);
+    expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
     expect(report.payload.javascript.kb).toBeLessThan(11.6);
   });
diff --git a/projects/elements/src/button/button.ts b/projects/elements/src/button/button.ts
index 29b8517db..c9bcb3403 100644
--- a/projects/elements/src/button/button.ts
+++ b/projects/elements/src/button/button.ts
@@ -26,7 +26,6 @@ import styles from './button.css?inline';
  * @storybook https://NVIDIA.github.io/elements/docs/elements/button/
  * @figma https://www.figma.com/file/vbcJuxNZO6t2KScQ8y5H7z/%F0%9F%93%9A-MagLev-Elements-Design-Catalog---WIP?node-id=29-6&t=CAAM7yEBvG18tRRa-0
  * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/
- * @axe color-contrast
  */
 export class Button extends BaseButton {
   static styles = useStyles([styles]);
diff --git a/projects/elements/src/color/color.test.lighthouse.ts b/projects/elements/src/color/color.test.lighthouse.ts
index 6bc603581..4f5b07244 100644
--- a/projects/elements/src/color/color.test.lighthouse.ts
+++ b/projects/elements/src/color/color.test.lighthouse.ts
@@ -16,6 +16,6 @@ describe('color lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(24.2);
+    expect(report.payload.javascript.kb).toBeLessThan(24.3);
   });
 });
diff --git a/projects/elements/src/combobox/combobox.test.lighthouse.ts b/projects/elements/src/combobox/combobox.test.lighthouse.ts
index 315507632..c8f6e005a 100644
--- a/projects/elements/src/combobox/combobox.test.lighthouse.ts
+++ b/projects/elements/src/combobox/combobox.test.lighthouse.ts
@@ -22,6 +22,6 @@ describe('combobox lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(34.7);
+    expect(report.payload.javascript.kb).toBeLessThan(34.9);
   });
 });
diff --git a/projects/elements/src/datetime/datetime.test.lighthouse.ts b/projects/elements/src/datetime/datetime.test.lighthouse.ts
index 7f6a383c5..60e74931e 100644
--- a/projects/elements/src/datetime/datetime.test.lighthouse.ts
+++ b/projects/elements/src/datetime/datetime.test.lighthouse.ts
@@ -16,6 +16,6 @@ describe('datetime lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(23.8);
+    expect(report.payload.javascript.kb).toBeLessThan(23.9);
   });
 });
diff --git a/projects/elements/src/month/month.test.lighthouse.ts b/projects/elements/src/month/month.test.lighthouse.ts
index ec0d40697..c308a9f53 100644
--- a/projects/elements/src/month/month.test.lighthouse.ts
+++ b/projects/elements/src/month/month.test.lighthouse.ts
@@ -16,6 +16,6 @@ describe('month lighthouse report', () => {
     expect(report.scores.performance).toBe(100);
     expect(report.scores.accessibility).toBe(100);
     expect(report.scores.bestPractices).toBe(100);
-    expect(report.payload.javascript.kb).toBeLessThan(23.8);
+    expect(report.payload.javascript.kb).toBeLessThan(23.9);
   });
 });
diff --git a/projects/elements/src/steps/steps-item.css b/projects/elements/src/steps/steps-item.css
index 7ea8d41f4..124a0c406 100644
--- a/projects/elements/src/steps/steps-item.css
+++ b/projects/elements/src/steps/steps-item.css
@@ -10,6 +10,7 @@
 }
 
 [internal-host] {
+  --_icon-button-color: var(--color);
   width: var(--width);
   gap: var(--nve-ref-space-xs);
   padding: var(--nve-ref-size-200) var(--nve-ref-size-300) var(--nve-ref-size-200) var(--nve-ref-size-200);
@@ -43,6 +44,7 @@ nve-icon-button#number-icon {
   box-sizing: content-box;
   border: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis);
   border-radius: 100%;
+  --color: var(--_icon-button-color);
   --height: var(--nve-ref-size-600);
   --width: var(--nve-ref-size-600);
   --background: transparent;
@@ -50,10 +52,7 @@ nve-icon-button#number-icon {
 
 nve-icon-button[interaction='emphasis'] {
   --background: var(--nve-sys-support-success-color);
-}
-
-nve-icon-button[interaction='danger'] {
-  --background-color: var(--nve-sys-support-danger-color);
+  --color: var(--nve-sys-text-white-color);
 }
 
 :host(:state(selected)) {
@@ -68,15 +67,9 @@ nve-icon-button[interaction='danger'] {
 }
 
 :host(:hover:not(:state(disabled), :state(selected))) {
-  --color: var(--nve-sys-text-emphasis-color);
   --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);
 }
 
-:host(:state(selected)) nve-icon-button,
-:host(:hover:not(:state(disabled))) nve-icon-button {
-  --color: var(--nve-sys-text-emphasis-color);
-}
-
 :host([container='condensed']) div {
   padding: var(--nve-ref-size-200);
 }
diff --git a/projects/elements/src/steps/steps.test.visual.ts b/projects/elements/src/steps/steps.test.visual.ts
index 2b3f4ca57..18c9d5952 100644
--- a/projects/elements/src/steps/steps.test.visual.ts
+++ b/projects/elements/src/steps/steps.test.visual.ts
@@ -27,6 +27,20 @@ function template(theme: '' | 'dark' = '') {
     •︎•︎•︎•︎•︎•︎
   
 
+  
+    •︎•︎•︎•︎•︎•︎
+    •︎•︎•︎•︎•︎•︎
+    •︎•︎•︎•︎•︎•︎
+    •︎•︎•︎•︎•︎•︎
+  
+
+  
+    •︎•︎•︎•︎•︎•︎
+    •︎•︎•︎•︎•︎•︎
+    •︎•︎•︎•︎•︎•︎
+    •︎•︎•︎•︎•︎•︎
+  
+
   
     •︎•︎•︎•︎•︎•︎
     •︎•︎•︎•︎•︎•︎
diff --git a/projects/site/src/docs/elements/steps.md b/projects/site/src/docs/elements/steps.md
index 00a1ee4b9..dbf430aed 100644
--- a/projects/site/src/docs/elements/steps.md
+++ b/projects/site/src/docs/elements/steps.md
@@ -25,13 +25,13 @@ Additionally, all keyboard navigation and [accessibility](https://www.w3.org/WAI
 
 ## Condensed
 
-Steps can be displayed in a condensed view where the text labels are hidden. Set `container="condensed"` on ``
+{% api 'nve-steps-item', 'property', 'container' %}
 
 {% story 'nve-steps', 'Condensed' %}
 
 ## Vertical Steps
 
-Steps can be used as the foundation for a side menu by enabling vertical mode. Simply set `vertical` on ``
+{% api 'nve-steps', 'property', 'vertical' %}
 
 {% story 'nve-steps', 'VerticalSteps' %}
 
diff --git a/projects/site/src/docs/foundations/themes/color.11ty.js b/projects/site/src/docs/foundations/themes/color.11ty.js
index 80117a51b..7edfc46c4 100644
--- a/projects/site/src/docs/foundations/themes/color.11ty.js
+++ b/projects/site/src/docs/foundations/themes/color.11ty.js
@@ -42,6 +42,7 @@ Colors should be used via the system tokens (--nve-sys-*) when possible to ensur
   }
 
 

+${getColorScale('ref-color-neutral')}
 ${getColorScale('ref-color-gray-slate')}
 ${getColorScale('ref-color-gray-denim')}
 ${getColorScale('ref-color-green-grass')}

From 2269d972c138e8e14a4ee08d6fd505cece73c1bb Mon Sep 17 00:00:00 2001
From: Cory Rylan 
Date: Fri, 6 Jun 2025 17:49:50 -0500
Subject: [PATCH 0227/1100] chore(labs-brand): update visual tests

Signed-off-by: Cory Rylan 
---
 .../elements/src/button/button.stories.ts     | 73 ++++++++++++-------
 projects/elements/src/menu/menu.stories.ts    | 15 ++++
 .../internals/metadata/static/lighthouse.json |  4 +-
 projects/site/src/_11ty/shortcodes/index.js   |  3 +-
 projects/site/src/docs/elements/button.md     |  2 -
 projects/site/src/docs/elements/menu.md       | 15 +---
 projects/site/src/stories/utils.js            |  1 +
 7 files changed, 68 insertions(+), 45 deletions(-)

diff --git a/projects/elements/src/button/button.stories.ts b/projects/elements/src/button/button.stories.ts
index 502497130..0000ecd3b 100644
--- a/projects/elements/src/button/button.stories.ts
+++ b/projects/elements/src/button/button.stories.ts
@@ -49,28 +49,34 @@ export const ButtonWithIcon = {
 
 export const Interaction = {
   render: () => html`
-    standard
-    emphasis
-    destructive
-    disabled
+    

+      standard
+      emphasis
+      destructive
+      disabled
+    

   `
 }
 
 export const Flat = {
   render: () => html`
-    standard
-    emphasis
-    destructive
-    disabled
+    

+      standard
+      emphasis
+      destructive
+      disabled
+    

   `
 }
 
 export const Inline = {
   render: () => html`
-    standard
-    emphasis
-    destructive
-    disabled
+    

+      standard
+      emphasis
+      destructive
+      disabled
+    

   `
 }
 
@@ -86,41 +92,51 @@ export const Deprecated = {
 
 export const Size = {
   render: () => html`
-    small button
-    standard button
-    large button
+    

+      small button
+      standard button
+      large button
+    

   `
 }
 
 export const Link = {
   render: () => html`
-standard
-emphasis
-destructive
-disabled
+    
   `
 }
 
 export const Pressed = {
   render: () => html`
-    pressed
-    unpressed
+    

+      pressed
+      unpressed
+    

   `
 }
 
 export const SelectedFlat = {
   render: () => html`
-    selected
-    unselected
-    unselected
+    

+      selected
+      unselected
+      unselected
+    

   `
 }
 
 export const LinkFlat = {
   render: () => html`
-flat
-flat emphasis
-flat destructive
+    
   `
 }
 
@@ -173,6 +189,9 @@ export const FormSubmit = {
 `
 }
 
+/**
+ * @description Form control option allows a button to be styled like a control field. This is helpful for using button to trigger custom form control components or dropdowns.
+ */
 export const FormControl = {
   render: () => html`
 

diff --git a/projects/elements/src/menu/menu.stories.ts b/projects/elements/src/menu/menu.stories.ts
index b1ccebacd..37b34676f 100644
--- a/projects/elements/src/menu/menu.stories.ts
+++ b/projects/elements/src/menu/menu.stories.ts
@@ -26,6 +26,9 @@ export const Default = {
   `
 };
 
+/**
+ * @description An example of a dropdown menu. [ARIA Spec](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)
+ */
 export const Dropdown = {
   render: () => html`
   dropdown
@@ -63,6 +66,9 @@ export const Current = {
   `
 };
 
+/**
+ * @description By default Menu will show a blue border on the selected item. You can change the border color by setting `--border-background` on the ``
+ */
 export const BorderBackground = {
   render: () => html`
   
@@ -107,6 +113,9 @@ export const Links = {
   `
 };
 
+/**
+ * @description Menu item features a default slot for content, along with a suffix slot for displaying elements such as keyboard shortcuts at the end of the menu item container.
+ */
 export const Suffix = {
   render: () => html`
   
@@ -154,6 +163,9 @@ export const Complex = {
   `
 };
 
+/**
+ * @description Navigation drawers overlay the existing page content. Navigation is for out of page context navigation.
+ */
 export const VerticalNavigationDrawer = {
   render: () => html`
   

@@ -180,6 +192,9 @@ export const VerticalNavigationDrawer = {
   `
 };
 
+/**
+ * @description Navigation panels are inline to the page and push the existing page content to the side. Navigation should be relevant and contextual to the page content.
+ */
 export const VerticalNavigationPanel = {
   render: () => html`
   

diff --git a/projects/internals/metadata/static/lighthouse.json b/projects/internals/metadata/static/lighthouse.json
index 4e8a5bf7e..43d874bc9 100644
--- a/projects/internals/metadata/static/lighthouse.json
+++ b/projects/internals/metadata/static/lighthouse.json
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f9e0fec1004d0917c832397045cda92ace614b8461c63e21f6575a8c7362d9e6
-size 62271
+oid sha256:6861a8c388cdbe7d8aa5b7f7f0cd3e006f0945b868ba0b8a73c4c1d48eff3e8e
+size 67976
diff --git a/projects/site/src/_11ty/shortcodes/index.js b/projects/site/src/_11ty/shortcodes/index.js
index bd0323e5f..b9c37e532 100644
--- a/projects/site/src/_11ty/shortcodes/index.js
+++ b/projects/site/src/_11ty/shortcodes/index.js
@@ -3,6 +3,7 @@
 import markdownIt from 'markdown-it';
 import { MetadataService, createPlaygroundURL } from '@nve-internals/metadata';
 import { stories } from '../../../src/stories/utils.js';
+import markdown from '../libraries/markdown.js';
 
 const md = markdownIt();
 const metadata = await MetadataService.getMetadata();
@@ -65,7 +66,7 @@ export async function storyShortcode(tag, storyName, userConfig = { inline: true
 
   return story
     ? /* html */ `
-${story.description ? `
${md.utils.escapeHtml(story.description)}
` : ''}
+${markdown.render(story.description ?? '')}
 
 ${playgroundButton}
 
diff --git a/projects/site/src/docs/elements/button.md b/projects/site/src/docs/elements/button.md
index 4e1e3babf..09f5cc3b8 100644
--- a/projects/site/src/docs/elements/button.md
+++ b/projects/site/src/docs/elements/button.md
@@ -77,6 +77,4 @@ If you need to slot an icon in a linked button, put `nve-icon` adjacent to the a
 
 ## Form Control
 
-Form control option allows a button to be styled like a control field. This is helpful for using button to trigger custom form control components or dropdowns.
-
 {% story 'nve-button', 'FormControl' %}
diff --git a/projects/site/src/docs/elements/menu.md b/projects/site/src/docs/elements/menu.md
index 26bfbe89d..5b9bf0ef8 100644
--- a/projects/site/src/docs/elements/menu.md
+++ b/projects/site/src/docs/elements/menu.md
@@ -29,8 +29,6 @@
 
 ## Border Background
 
-By default Menu will show a blue border on the selected item. You can change the border color by setting `--border-background` on the ``
-
 {% story 'nve-menu', 'BorderBackground' %}
 
 ## Disabled
@@ -49,21 +47,14 @@ By default Menu will show a blue border on the selected item. You can change the
 
 ## Dropdown
 
-[ARIA Spec](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)
-
-{% story 'nve-menu', 'Dropdown', '{ "inline": false, "height": "300px" }' %}
+{% story 'nve-menu', 'Dropdown', '{ "inline": false, "height": "380px" }' %}
 
 ## Vertical Navigation Drawer
 
-Navigation drawers overlay the existing page content. Navigation is for out of page context navigation.
-
-{% story 'nve-menu', 'VerticalNavigationDrawer', '{ "inline": false, "height": "300px" }' %}
+{% story 'nve-menu', 'VerticalNavigationDrawer', '{ "inline": false, "height": "380px" }' %}
 
 ## Vertical Navigation Panel
 
-Navigation panels are inline to the page and push the existing page content to the side.
-Navigation should be relevant and contextual to the page content.
-
 {% story 'nve-menu', 'VerticalNavigationPanel' %}
 
 ## Menu Item Tooltip
@@ -80,8 +71,6 @@ Navigation should be relevant and contextual to the page content.
 
 ## Suffix Slot
 
-Menu item features a default slot for content, along with a suffix slot for displaying elements such as keyboard shortcuts at the end of the menu item container.
-
 {% story 'nve-menu', 'Suffix' %}
 
 ## Danger Status
diff --git a/projects/site/src/stories/utils.js b/projects/site/src/stories/utils.js
index 53b6845f1..957771079 100644
--- a/projects/site/src/stories/utils.js
+++ b/projects/site/src/stories/utils.js
@@ -38,6 +38,7 @@ export const stories = getStories().flatMap(storiesFile => {
     id: story.id,
     title: camelToKebab(story.id),
     permalink: `${storiesFile.path.replace('.stories.json', '-')}${camelToKebab(story.id)}/`,
+    description: story.description,
     template: story.template,
     tagName: storiesFile.element,
     element: storiesFile.element?.replace('nve-', ''),

From 3b76fde15322beb5516173bdeb21f6f4384ae83b Mon Sep 17 00:00:00 2001
From: semantic-release-bot 
Date: Tue, 10 Jun 2025 14:39:47 +0000
Subject: [PATCH 0228/1100] chore(release): @nve/themes-v1.6.2 [skip ci]

## [@nve/themes-v1.6.2](https://gitlab-master.nvidia.com/ai-infra/elements/compare/@nve/themes-v1.6.1...@nve/themes-v1.6.2) (2025-06-10)

### Bug Fixes

* **themes:** interaction color contrast ([426ee89](https://gitlab-master.nvidia.com/ai-infra/elements/commit/426ee89934283116a93de57cab519368050e94e0))
---
 projects/themes/CHANGELOG.md | 7 +++++++
 projects/themes/package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/projects/themes/CHANGELOG.md b/projects/themes/CHANGELOG.md
index 194193f4a..3b214a02b 100644
--- a/projects/themes/CHANGELOG.md
+++ b/projects/themes/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [@nvidia-elements/themes-v1.6.2](https://github.com/NVIDIA/elements/compare/@nvidia-elements/themes-v1.6.1...@nvidia-elements/themes-v1.6.2) (2025-06-10)
+
+
+### Bug Fixes
+
+* **themes:** interaction color contrast ([a7a9ab8](https://github.com/NVIDIA/elements/commit/a7a9ab8c92a76f3ab39e507401f119e151595be5))
+
 ## [@nvidia-elements/themes-v1.6.1](https://github.com/NVIDIA/elements/compare/@nvidia-elements/themes-v1.6.0...@nvidia-elements/themes-v1.6.1) (2025-06-05)
 
 
diff --git a/projects/themes/package.json b/projects/themes/package.json
index a80444afa..c5a69a1b3 100644
--- a/projects/themes/package.json
+++ b/projects/themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nvidia-elements/themes",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "Elements themes and tokens",
   "homepage": "https://NVIDIA.github.io/elements/",
   "repository": {

From 082e8f2e7344c1347eeb3345538931716ce19824 Mon Sep 17 00:00:00 2001
From: semantic-release-bot 
Date: Tue, 10 Jun 2025 14:40:04 +0000
Subject: [PATCH 0229/1100] chore(release): @nve/elements-v1.36.3 [skip ci]

## [@nve/elements-v1.36.3](https://gitlab-master.nvidia.com/ai-infra/elements/compare/@nve/elements-v1.36.2...@nve/elements-v1.36.3) (2025-06-10)

### Bug Fixes

* **elements:** interaction color contrast ([fb27bb8](https://gitlab-master.nvidia.com/ai-infra/elements/commit/fb27bb8392d6492a29cac59e6fbcaa38c38df0e4))
---
 projects/elements/CHANGELOG.md | 7 +++++++
 projects/elements/package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/projects/elements/CHANGELOG.md b/projects/elements/CHANGELOG.md
index 994f3a06a..4a3f117f2 100644
--- a/projects/elements/CHANGELOG.md
+++ b/projects/elements/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [@nvidia-elements/core-v1.36.3](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.36.2...@nvidia-elements/core-v1.36.3) (2025-06-10)
+
+
+### Bug Fixes
+
+* **elements:** interaction color contrast ([810fc53](https://github.com/NVIDIA/elements/commit/810fc53de8037f1ac5faa15ab9bfb98c7c7c0002))
+
 ## [@nvidia-elements/core-v1.36.2](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v1.36.1...@nvidia-elements/core-v1.36.2) (2025-06-05)
 
 
diff --git a/projects/elements/package.json b/projects/elements/package.json
index 5af8a5f3a..40e7099f9 100644
--- a/projects/elements/package.json
+++ b/projects/elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nvidia-elements/core",
-  "version": "1.36.2",
+  "version": "1.36.3",
   "description": "The Design Language for AI/ML Factories Building at the Speed of Light",
   "homepage": "https://NVIDIA.github.io/elements/",
   "repository": {

From a7f3ff8fd03ba601695df93b4a16c2dc784e0cd3 Mon Sep 17 00:00:00 2001
From: Will Geller 
Date: Fri, 6 Jun 2025 16:52:16 -0400
Subject: [PATCH 0230/1100] chore(docs): add spacing to html templates for
 legibility

---
 projects/site/src/_11ty/layouts/docs.11ty.js   | 12 ++++++++++++
 projects/site/src/_11ty/templates/api.js       | 13 +++++++++++++
 projects/site/src/docs/changelog/index.11ty.js |  4 ++++
 3 files changed, 29 insertions(+)

diff --git a/projects/site/src/_11ty/layouts/docs.11ty.js b/projects/site/src/_11ty/layouts/docs.11ty.js
index 4f97381fe..0ebfe508f 100644
--- a/projects/site/src/_11ty/layouts/docs.11ty.js
+++ b/projects/site/src/_11ty/layouts/docs.11ty.js
@@ -24,24 +24,34 @@ export function render(data) {
           import '/_11ty/layouts/docs.ts';
         
       
+
       
         
           
             
             Elements
+
             Catalog
+
             Playground
+
             Starters
+
             Gitlab
+
             System Themes
           
+
           
             
               
+
               ${renderDocsNav(data)}
             
           
+
           
+
           

             

               

@@ -50,9 +60,11 @@ export function render(data) {
                 ${data.tag ? `${elementStatus(data.tag)}${elementTable(data.tag)}` : ''}
                 ${data.associatedElements?.length ? data.associatedElements.map(tag => elementTable(tag)).join('') : ''}
               

+              
               
             

           

+
           
   `
diff --git a/projects/elements/src/pagination/pagination.stories.ts b/projects/elements/src/pagination/pagination.stories.ts
index df4df63a2..2ca74917b 100644
--- a/projects/elements/src/pagination/pagination.stories.ts
+++ b/projects/elements/src/pagination/pagination.stories.ts
@@ -7,6 +7,9 @@ export default {
   component: 'nve-pagination',
 };
 
+/**
+ * @description Basic pagination component with default styling and behavior.
+ */
 export const Default = {
   render: () => html`
   
@@ -17,36 +20,55 @@ export const Default = {
   `
 };
 
+/**
+ * @description Pagination with skip buttons to navigate to first and last pages quickly.
+ */
 export const Skippable = {
   render: () => html`
     
   `
 };
 
+/**
+ * @description Disabled pagination component that prevents user interaction.
+ */
 export const Disabled = {
   render: () => html`
     
   `
 };
 
+/**
+ * @description Pagination with flat container styling for a more minimal appearance.
+ */
 export const Flat = {
   render: () => html`
     
   `
 };
 
+/**
+ * @description Inline pagination layout that fits inline with content.
+ */
 export const Inline = {
   render: () => html`
     
   `
 };
 
+/**
+ * @description Inline pagination with disabled step selector to prevent page size changes.
+ */
 export const DisableStep = {
   render: () => html`
     
   `
 };
 
+/**
+ * @description Pagination is [form associated component](https://web.dev/more-capable-form-controls)
+ * and can be used within FormData.
+ */
 export const Forms = {
   render: () => html`
     

@@ -72,6 +94,9 @@ export const Forms = {
   `
 };
 
+/**
+ * @description Pagination without items count display, useful when total count is unknown.
+ */
 export const NoItemsCount = {
   render: () => html`
     
@@ -91,6 +116,9 @@ export const NoItemsCount = {
   `
 };
 
+/**
+ * @description Pagination component displayed in light theme with disabled state.
+ */
 export const LightTheme = {
   render: () => html`
 

@@ -99,6 +127,9 @@ export const LightTheme = {
   `
 }
 
+/**
+ * @description Pagination component displayed in dark theme with disabled state.
+ */
 export const DarkTheme = {
   render: () => html`
 

@@ -107,12 +138,20 @@ export const DarkTheme = {
   `
 }
 
+/**
+ * @description Pagination handling large datasets with higher step values for efficient navigation.
+ */
 export const LargeValues = {
   render: () => html`
     
   `
 }
 
+/**
+ * @description If the upper bound of items is unknown the `last-page` event can
+ * be used to determine when to load additional data and update the pagination
+ * with the latest total of items.
+ */
 export const DynamicItems = {
   render: () => html`
     
@@ -133,6 +172,10 @@ export const DynamicItems = {
   `
 }
 
+/**
+ * @description When custom step is provided, the select options dynamically
+ * adapt to the step and is appended to the default option list.
+ */
 export const DynamicStepSize = {
   render: () => html`
   
@@ -140,10 +183,83 @@ export const DynamicStepSize = {
   `
 };
 
+/**
+ * @description Use the `suffix-label` slot to customize the "of total" label
+ * when dealing with approximated totals from API responses. This is useful
+ * when the API returns a limited count but indicates there are more items
+ * available.
+ */
 export const SuffixLabel = {
   render: () => html`
     
       of 50,000+
     
   `
-};
\ No newline at end of file
+};
+
+/**
+ * @description Custom pagination pattern using toolbar with numbered page
+ * buttons and navigation arrows. [Figma](https://www.figma.com/design/vbcJuxNZO6t2KScQ8y5H7z/%F0%9F%93%9A-Nvidia-Elements-Design-Catalog?node-id=3689-87177&p=f&t=odpJ12NktrAtL2vK-0)
+ */
+export const PageListPattern = {
+  render: () => html`
+    
+       previous
+      1
+      2
+      3
+      4
+      next 
+    
+  `
+};
+
+/**
+ * @description Enhanced pagination pattern with first/last page buttons and numbered page navigation.
+ */
+export const PageListSkipPattern = {
+  render: () => html`
+    
+      
+      
+      1
+      2
+      3
+      4
+      
+      
+    
+  `
+};
+
+/**
+ * @description Vertical pagination pattern with up/down navigation arrows for
+ * compact layouts. [Figma](https://www.figma.com/design/vbcJuxNZO6t2KScQ8y5H7z/%F0%9F%93%9A-Nvidia-Elements-Design-Catalog?node-id=14605-25522&p=f&t=odpJ12NktrAtL2vK-0)
+ */
+export const VerticalPattern = {
+  render: () => html`
+    
+      
+      
+      
+    
+  `
+};
+
+/**
+ * @description Custom pagination with select dropdown for page size and navigation arrows.
+ */
+export const CustomSelectPattern = {
+  render: () => html`
+    
+      
+        
+      
+      
+      
+      
+    
+  `
+};
diff --git a/projects/elements/src/toolbar/toolbar.stories.ts b/projects/elements/src/toolbar/toolbar.stories.ts
index aecd757aa..cd237eb5f 100644
--- a/projects/elements/src/toolbar/toolbar.stories.ts
+++ b/projects/elements/src/toolbar/toolbar.stories.ts
@@ -7,64 +7,69 @@ 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/color/define.js';
 
 export default {
   title: 'Elements/Toolbar',
   component: 'nve-toolbar',
 };
 
+/**
+ * @description Basic toolbar with action buttons and a settings icon in the suffix slot.
+ */
 export const Default = {
   render: () => html`
-  

     
        create
        delete
       
     
-  

   `
 };
 
+/**
+ * @description Toolbar with flat container styling for a more subtle appearance.
+ */
 export const ContainerFlat = {
   render: () => html`
-  

     
        create
        delete
       
     
-  

   `
 };
 
+/**
+ * @description Toolbar with inset container styling and constrained width for contained layouts.
+ */
 export const ContainerInset = {
   render: () => html`
-  

-    
+    
        create
        delete
-      
+      
     
-  

   `
 };
 
+/**
+ * @description Toolbar with full container styling that spans the entire width.
+ */
 export const ContainerFull = {
   render: () => html`
-  

     
        create
        delete
       
     
-  

   `
 };
 
+/**
+ * @description Complex toolbar with grouped controls including select dropdowns, button groups, and dividers for text editing scenarios.
+ */
 export const Groups = {
   render: () => html`
-  

     
       
          (this.columns = { ...this.columns, [name]: { visible: !this.columns[name].visible } })} />
-          
-        `)}
-      
-    
-    `
-  }
-
-  get #actionBar() {
-    return html`
-    

-      
-         this.#search(e.target.value)} />
-      
-      

-        
1,145 results found

-         this.workflowGridSettings = !this.workflowGridSettings}>
-            display settings
-        
-      

-      

-      

-         this.showCreateWorkflowDialog = true} interaction="emphasis">create
-      

-    
`
-  }
-
-  get #detailPanel() {
-    return html`
-     this.workflowDetail = null} closable style="min-width: 400px">
-      
-        
Workflow: ${this.workflowDetail?.id}

-      
-      
-        

-          
-          
${this.workflowDetail?.task}

-        

-        

-          
-          ${this.workflowDetail?.priority}
-        

-        

-          
-          ${this.workflowDetail?.status}
-        

-        

-          
-          
-            ${this.workflowDetail?.coverage > 0 ? '+' : ''}${this.workflowDetail?.coverage}%
-          
-        

-        

-          
-          
${this.workflowDetail?.reviews}

-        

-        

-          
-          
${this.workflowDetail?.region}

-        

-        

-          
-          
${this.workflowDetail?.created}

-        

-      
-      
-         this.#deleteWorkflow(this.workflowDetail)} interaction="destructive">delete
-      
-    `
-  }
-
-  get #placeholder() {
-    return !this.filteredWorkflows.length ? html`
-    
-      

-        No active workflows found. Try adjusting your filters or reloading.
-         this.#reloadWorkflows()}>reload workflows 
-      

-    ` : '';
-  }
-
-  get #createWorkflowDialog() {
-    return html`
-     this.showCreateWorkflowDialog = false}>
-      
-        
Workflow

-      
-      
-        
-          
-            
-            
-          
-          
-            
-            
-          
-          
-            
-            
-          
-           
-        
-      
-      
-         this.#createWorkflow()}>Create Workflow
-      
-    `
-  }
-
-  get #aboutDialog() {
-    return html`
-     this.showAboutDialog = false}>
-      
-        
About Grid Kitchen Sink

-      
-      
-        

-          This is a demo that demonstrates the full feature set of the datgrid component.
-        

-      
-    `
-  }
-
-  get #notification() {
-    return html`
-     this.workflowNotification = null} status=${this.workflowNotification?.status} close-timeout="4000" position="top">
-      
${this.workflowNotification?.title}

-      
${this.workflowNotification?.message}

-    `
-  }
-
-  get #bulkActions() {
-    return this.#selectedCount ? html`
-    
-       this.#selectAll(false)}>
-      
${this.#selectedCount} selected

-       this.showCreateWorkflowDialog = true} .disabled=${this.#selectedCount !== 1} container="flat" slot="suffix">edit
-       this.#deleteSelectedWorkflows()} .disabled=${this.#selectedCount < 1} container="flat" interaction="destructive" slot="suffix">delete
-    ` : '';
-  }
-
-  render() {
-    return html`
-      ${this.#appHeader}
-      

-        ${this.#header}
-        

-          ${this.#settingsDropdown}
-          

-            ${this.#actionBar}
-            
-              
-                
-                  
-                     this.#selectAll(e.target.checked)} />
-                  
-                
-                ${Object.entries(this.columns).map(([name, column]) => column.visible ? html`${name}` : '')}
-                
-              
-              ${this.filteredWorkflows.map(workflow => html`
-              
-                
-                  
-                     this.#selectWorkflow(e, workflow)} .checked=${workflow.selected} aria-label="select drive ${workflow.id}" />
-                  
-                
-                
-                  

-                    
${workflow.task}

-                    
${workflow.id}

-                  

-                
-                ${this.columns.status.visible ? html`${workflow.status}` : ''}
-                ${this.columns.priority.visible ? html`${workflow.priority}`: ''}
-                ${this.columns.coverage.visible ? html`${workflow.coverage > 0 ? '+' : ''}${workflow.coverage}%` : ''}
-                ${this.columns.reviews.visible ? html`${workflow.reviews}` : ''}
-                ${this.columns.region.visible ? html`${workflow.region}` : ''}
-                ${this.columns.created.visible ? html`${new Intl.DateTimeFormat('en-US', { dateStyle: 'medium', timeStyle: 'long' }).format(workflow.created)}` : ''}
-                
-                   this.workflowDetail = workflow}>
-                
-              `)}
-              ${this.#placeholder}
-              
-                
last updated ${new Date()}

-              
-              ${this.#bulkActions}
-            
-          

-          ${this.#detailPanel}
-        

-      

-    

-    ${this.#createWorkflowDialog}
-    ${this.#aboutDialog}
-    ${this.#notification}
-    `
-  }
-
-  #search(value: string) {
-    this.search = value;
-    this.#updateWorkflows();
-  }
-
-  #selectAll(select: boolean) {
-    this.#workflows.forEach(r => r.selected = select);
-    this.#updateWorkflows();
-  }
-
-  #selectWorkflow(event, workflow) {
-    workflow.selected = event.target.checked;
-    this.#updateWorkflows();
-  }
-
-  #deleteSelectedWorkflows() {
-    this.#workflows = this.#workflows.filter(w => !w.selected);
-    this.#updateWorkflows();
-    setTimeout(() => this.workflowNotification = { status: 'danger', title: 'Workflows Deleted', message: 'workflows removed from queue' }, 1000);
-  }
-
-  #createWorkflow() {
-    const values: Partial = Object.fromEntries(new FormData(this.#workflowForm));
-    const workflow: Workflow = { task: values.task, priority: values.priority, region: values.region, id: generateId(), status: 'pending', coverage: 0, reviews: '0/3', selected: false, created: new Date() };
-    this.#workflows.unshift(workflow);
-    this.#updateWorkflows();
-    this.showCreateWorkflowDialog = false;
-    setTimeout(() => this.workflowNotification = { status: 'success', title: 'Workflow Created', message: 'submitted to queue' }, 1000);
-  }
-
-  #deleteWorkflow(workflow: Workflow) {
-    this.#workflows = this.#workflows.filter(w => w !== workflow);
-    this.workflowDetail = null;
-    this.#updateWorkflows();
-    setTimeout(() => this.workflowNotification = { status: 'danger', title: 'Workflow Deleted', message: 'workflow removed from queue' }, 1000);
-  }
-
-  #reloadWorkflows() {
-    this.search = '';
-    this.#workflows = workflowData();
-    this.#updateWorkflows();
-  }
-
-  #updateWorkflows() {
-    this.filteredWorkflows = [...this.#workflows].filter(row => JSON.stringify(row).toLowerCase().includes(this.search.toLowerCase()));
-  }
-}
-
-export const KitchenSink = {
-  render: () => html`
-

-  
-

-  `
-};
diff --git a/projects/elements/src/grid/grid.stories.ts b/projects/elements/src/grid/grid.stories.ts
index 2c854bf08..18148a778 100644
--- a/projects/elements/src/grid/grid.stories.ts
+++ b/projects/elements/src/grid/grid.stories.ts
@@ -1320,104 +1320,6 @@ export const PanelGrid = {
   }
 }
 
-export const All = {
-  render: () => html`
-

-  

-    
Grid

-    ${Default.render()}
-  

-  

-    
Multi Select

-    ${MultiSelect.render()}
-  

-  

-    
Multi Select Bulk Actions

-    ${MultiSelectBulkActions.render()}
-  

-  

-    
Single Select

-    ${SingleSelect.render()}
-  

-  

-    
Card Tabs

-    ${CardTabs.render()}
-  

-  

-    
Panel Detail

-    ${PanelDetail.render()}
-  

-  

-    
Column Multi Fixed

-    ${ColumnMultiFixed.render()}
-  

-  

-    
Column Fixed

-    ${ColumnFixed.render()}
-  

-  

-    
Column Dynamic Fixed

-    ${ColumnDynamicFixed.render()}
-  

-  

-    
Column Width

-    ${ColumnWidth.render()}
-  

-  

-    
Footer

-    ${Footer.render()}
-  

-  

-    
Scroll

-    ${Scroll.render()}
-  

-  

-    
Column Align center

-    ${ColumnAlignCenter.render()}
-  

-  

-    
Column Align End

-    ${ColumnAlignEnd.render()}
-  

-  

-    
Row Action

-    ${RowAction.render()}
-  

-  

-    
Row Sort

-    ${RowSort.render()}
-  

-  

-    
Pagination

-    ${Pagination.render()}
-  

-  

-    
Stripe

-    ${Stripe.render()}
-  

-  

-    
Card

-    ${Card.render()}
-  

-  

-    
Placeholder

-    ${Placeholder.render()}
-  

-  

-    
Full

-    ${Full.render()}
-  

-  

-    
Flat

-    ${Flat.render()}
-  

-  

-    
Content Width

-    ${Content.render()}
-  

-
`
-}
-
 export const InvalidDOM = {
   render: () => html`
 
diff --git a/projects/elements/src/icon/icon.stories.ts b/projects/elements/src/icon/icon.stories.ts
index b81e5280b..ef34e6169 100644
--- a/projects/elements/src/icon/icon.stories.ts
+++ b/projects/elements/src/icon/icon.stories.ts
@@ -1,4 +1,4 @@
-import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
+import { html, LitElement, unsafeCSS } from 'lit';
 import { state } from 'lit/decorators/state.js';
 import layout from '@nvidia-elements/styles/layout.css?inline';
 import typography from '@nvidia-elements/styles/typography.css?inline';
@@ -237,585 +237,534 @@ export const Source = {
   `
 }
 
-
-class IconPerformanceDemo extends LitElement {
-  static styles = [unsafeCSS(layout), css`
-  :host {
-    display: block;
-    height: 500px;
-    padding: 24px 0;
-  }
-
-  div {
-    height: 675px;
-    width: 675px;
-    contain: layout;
-    overflow: hidden;
-  }
-  `];
-
-  #multiplier = 1000;
-
-  @state() private show = false;
-
-  @state() private icons = Array(this.#multiplier).fill('').map(() => html``)
-
-  render() {
-    return html`
-       this.show = !this.show}>show icons
-      
${this.#multiplier}

-      

-        ${this.show ? this.icons : nothing}
-      

-    `
-  }
-}
-
-customElements.get('icon-performance-demo') || customElements.define('icon-performance-demo', IconPerformanceDemo);
-
-export const Performance = {
-  render: () => html`
-

-  
-

-  `
-};
-
-const GUI_NAMES = [
-  "3d-3d-axis",
-  "3d-cloth",
-  "3d-cube",
-  "3d-dolly",
-  "3d-emissive",
-  "3d-explode",
-  "3d-instance",
-  "3d-light-rect",
-  "3d-light-rotate",
-  "3d-material",
-  "3d-move-global",
-  "3d-reference",
-  "3d-rotate-3d",
-  "3d-rotate-global",
-  "3d-segment",
-  "3d-shader",
-  "3d-shader-ball",
-  "3d-skeleton",
-  "3d-teapot",
-  "3d-teleport",
-  "3d-texture",
-  "av-auto-record",
-  "av-auto-record-off",
-  "av-broadcast",
-  "av-camera",
-  "av-camera-off",
-  "av-clap-board",
-  "av-display-surround",
-  "av-eject",
-  "av-equalizer",
-  "av-faders",
-  "av-fast-forward",
-  "av-fast-reverse",
-  "av-film",
-  "av-film-add",
-  "av-film-collection",
-  "av-fps",
-  "av-high-quality",
-  "av-hud",
-  "av-loop",
-  "av-loop-off",
-  "av-microphone",
-  "av-microphone-off",
-  "av-next",
-  "av-notes",
-  "av-pause",
-  "av-picture-in-picture",
-  "av-play",
-  "av-previous",
-  "av-record",
-  "av-replay",
-  "av-replay-off",
-  "av-soundwaves",
-  "av-speaker",
-  "av-speaker-high",
-  "av-speaker-low",
-  "av-speaker-medium",
-  "av-speaker-mute",
-  "av-speaker-off",
-  "av-step-forward",
-  "av-step-reverse",
-  "av-stop",
-  "av-videocam",
-  "av-videocam-off",
-  "common-add",
-  "common-add-circle",
-  "common-alarm",
-  "common-bell",
-  "common-bell-off",
-  "common-calendar",
-  "common-cancel",
-  "common-check",
-  "common-check-circle",
-  "common-clipboard",
-  "common-clock",
-  "common-close",
-  "common-close-circle",
-  "common-cog",
-  "common-cog-off",
-  "common-copy-doc",
-  "common-copy-generic",
-  "common-error",
-  "common-exit",
-  "common-eye",
-  "common-eye-off",
-  "common-filter",
-  "common-help-circle",
-  "common-history",
-  "common-home",
-  "common-home-off",
-  "common-info-circle",
-  "common-link",
-  "common-link-break",
-  "common-lock-closed",
-  "common-lock-open",
-  "common-magnifying-glass",
-  "common-magnifying-glass-minus",
-  "common-magnifying-glass-plus",
-  "common-menu",
-  "common-more-horiz",
-  "common-more-vert",
-  "common-paperplane",
-  "common-redo",
-  "common-refresh",
-  "common-reset",
-  "common-retry",
-  "common-share",
-  "common-sort",
-  "common-star",
-  "common-subtract",
-  "common-subtract-circle",
-  "common-sync",
-  "common-sync-off",
-  "common-timer",
-  "common-trash",
-  "common-undo",
-  "common-warning",
-  "communication-cloud",
-  "communication-cloud-off",
-  "communication-data",
-  "communication-download",
-  "communication-envelope",
-  "communication-envelope-off",
-  "communication-firewall",
-  "communication-firewall-off",
-  "communication-forward",
-  "communication-isp",
-  "communication-isp-off",
-  "communication-network-signal",
-  "communication-network-signal-off",
-  "communication-reply",
-  "communication-sync-warning",
-  "communication-transfer-horizontal",
-  "communication-transfer-vertical",
-  "communication-upload",
-  "communication-wifi",
-  "communication-wifi-off",
-  "cursor-arrow",
-  "cursor-crosshair",
-  "cursor-hand-closed",
-  "cursor-hand-open",
-  "cursor-hand-pinch",
-  "cursor-hand-point",
-  "cursor-hourglass",
-  "editor-anchor-center",
-  "editor-anchor-e",
-  "editor-anchor-n",
-  "editor-anchor-ne",
-  "editor-anchor-nw",
-  "editor-anchor-s",
-  "editor-anchor-se",
-  "editor-anchor-sw",
-  "editor-anchor-w",
-  "editor-bold",
-  "editor-branch",
-  "editor-chart",
-  "editor-chart-bar",
-  "editor-chart-flow",
-  "editor-chart-hierarchy",
-  "editor-chart-performance",
-  "editor-chart-pie",
-  "editor-chart-tree",
-  "editor-commit",
-  "editor-export-to-clipboard",
-  "editor-fit",
-  "editor-fork",
-  "editor-freehand",
-  "editor-grid",
-  "editor-grid-off",
-  "editor-h-align-center",
-  "editor-h-align-left",
-  "editor-h-align-right",
-  "editor-image",
-  "editor-italic",
-  "editor-iterate",
-  "editor-keyframe",
-  "editor-layers",
-  "editor-layers-off",
-  "editor-line-segment",
-  "editor-list-bullet",
-  "editor-list-checkmark",
-  "editor-list-number",
-  "editor-merge",
-  "editor-move",
-  "editor-paperclip",
-  "editor-paragraph",
-  "editor-pencil",
-  "editor-pull",
-  "editor-rotate",
-  "editor-rotate-90-clockwise",
-  "editor-rotate-90-counter",
-  "editor-ruler",
-  "editor-scale-down",
-  "editor-scale-reset",
-  "editor-scale-up",
-  "editor-section",
-  "editor-section-bottom",
-  "editor-section-top",
-  "editor-select-brush",
-  "editor-signature",
-  "editor-skip",
-  "editor-sliders",
-  "editor-sticker",
-  "editor-sticker-image",
-  "editor-sticker-shape",
-  "editor-sticker-text",
-  "editor-sticker-zoom",
-  "editor-strikethrough",
-  "editor-stroke-width",
-  "editor-style",
-  "editor-swatches",
-  "editor-text",
-  "editor-text-align-center",
-  "editor-text-align-full",
-  "editor-text-align-left",
-  "editor-text-align-right",
-  "editor-text-framed",
-  "editor-trash-delete",
-  "editor-underline",
-  "editor-v-align-bottom",
-  "editor-v-align-center",
-  "editor-v-align-top",
-  "editor-wand",
-  "editor-wrench",
-  "files-archive",
-  "files-db",
-  "files-document",
-  "files-document-new",
-  "files-document-preview",
-  "files-export",
-  "files-floppy",
-  "files-folder-closed",
-  "files-folder-open",
-  "files-import",
-  "hardware-2-b-left-click",
-  "hardware-battery-0",
-  "hardware-battery-0-off",
-  "hardware-battery-100",
-  "hardware-battery-25",
-  "hardware-battery-50",
-  "hardware-battery-75",
-  "hardware-battery-boost",
-  "hardware-battery-charging",
-  "hardware-bluetooth",
-  "hardware-bluetooth-off",
-  "hardware-calculator",
-  "hardware-cpu",
-  "hardware-display",
-  "hardware-display-collection",
-  "hardware-display-off",
-  "hardware-drive-cloud",
-  "hardware-drive-cloud-off",
-  "hardware-drive-network",
-  "hardware-drive-network-off",
-  "hardware-drive-removable",
-  "hardware-drive-removable-off",
-  "hardware-drive-usb",
-  "hardware-drive-usb-off",
-  "hardware-ethernet",
-  "hardware-fan",
-  "hardware-fan-loud",
-  "hardware-fan-quiet",
-  "hardware-gamepad",
-  "hardware-gamepad-off",
-  "hardware-gamepad-start",
-  "hardware-gpu",
-  "hardware-gpu-card",
-  "hardware-gpu-card-multi",
-  "hardware-gpu-card-off",
-  "hardware-gpu-off",
-  "hardware-keyboard",
-  "hardware-laptop",
-  "hardware-lightning",
-  "hardware-mac",
-  "hardware-mac-off",
-  "hardware-media-optical",
-  "hardware-mosaic",
-  "hardware-mouse-2-b",
-  "hardware-mouse-2-b-right-click",
-  "hardware-mouse-3-b",
-  "hardware-mouse-scrollwheel",
-  "hardware-mouse-scrollwheel-active",
-  "hardware-multidrive",
-  "hardware-network",
-  "hardware-network-connection",
-  "hardware-network-pcs",
-  "hardware-nvidia-shield",
-  "hardware-nvidia-shield-stand",
-  "hardware-performance-high",
-  "hardware-performance-low",
-  "hardware-performance-medium",
-  "hardware-plug-recepticle",
-  "hardware-plug-usb",
-  "hardware-plugin",
-  "hardware-power",
-  "hardware-ram",
-  "hardware-remote",
-  "hardware-robot-arm",
-  "hardware-sd-card",
-  "hardware-smartphone",
-  "hardware-smartphone-off",
-  "hardware-tablet",
-  "hardware-tablet-off",
-  "hardware-telephone",
-  "hardware-telephone-off",
-  "hardware-usb",
-  "hardware-vr",
-  "hardware-watch",
-  "hardware-webcam",
-  "hardware-webcam-off",
-  "hardware-webcam-settings",
-  "hardware-whispermode",
-  "hardware-wireless-modem",
-  "hardware-wireless-modem-off",
-  "hardware-workstation",
-  "hardware-workstation-off",
-  "hardware-workstation-system",
-  "hardware-workstation-system-off",
-  "image-brush",
-  "image-bucket",
-  "image-camera-360",
-  "image-camera-linked",
-  "image-camera-super",
-  "image-collection",
-  "image-crop",
-  "image-easel",
-  "image-eraser",
-  "image-eyedropper",
-  "image-group",
-  "image-import-image",
-  "image-mask-inside",
-  "image-mask-outside",
-  "image-mirror",
-  "image-outpainting",
-  "image-palette",
-  "image-scale",
-  "image-scale-relative",
-  "image-scale-relative-off",
-  "image-select-ellipse",
-  "image-select-polygon",
-  "image-select-rectangle",
-  "image-shapes",
-  "image-sun-high",
-  "image-sun-low",
-  "image-sun-off-high",
-  "image-transparency",
-  "images-denoise",
-  "maps-airplane",
-  "maps-briefcase",
-  "maps-bush",
-  "maps-business",
-  "maps-dirt",
-  "maps-factory",
-  "maps-flag",
-  "maps-flower",
-  "maps-fog",
-  "maps-grass",
-  "maps-gravel",
-  "maps-hill",
-  "maps-location",
-  "maps-location-off",
-  "maps-map",
-  "maps-map-off",
-  "maps-mountain",
-  "maps-mud",
-  "maps-river",
-  "maps-rock",
-  "maps-sand",
-  "maps-sea",
-  "maps-sky",
-  "maps-snow",
-  "maps-stone",
-  "maps-straw",
-  "maps-suitcase",
-  "maps-toolbox",
-  "maps-tree",
-  "maps-trees",
-  "maps-water",
-  "maps-world",
-  "maps-world-off",
-  "misc-bandaid",
-  "misc-beaker",
-  "misc-blackboard",
-  "misc-book",
-  "misc-bug",
-  "misc-bug-off",
-  "misc-code",
-  "misc-compass",
-  "misc-ekg",
-  "misc-function",
-  "misc-gift",
-  "misc-graduate",
-  "misc-graph-node",
-  "misc-health",
-  "misc-hot-air-balloon",
-  "misc-ime",
-  "misc-key",
-  "misc-library",
-  "misc-library-games",
-  "misc-lightbulb",
-  "misc-magnet",
-  "misc-math",
-  "misc-microscope",
-  "misc-mode-component",
-  "misc-moon",
-  "misc-moon-off",
-  "misc-mug",
-  "misc-neural-network",
-  "misc-news",
-  "misc-package",
-  "misc-payment-card",
-  "misc-pulse",
-  "misc-qrcode",
-  "misc-radar",
-  "misc-radioactive",
-  "misc-rocket",
-  "misc-running",
-  "misc-scale-balance",
-  "misc-school",
-  "misc-seed",
-  "misc-sensor",
-  "misc-shield",
-  "misc-shield-off",
-  "misc-ship-wheel",
-  "misc-shopping-bag",
-  "misc-shopping-basket",
-  "misc-shopping-cart",
-  "misc-shopping-cart-open",
-  "misc-tag",
-  "misc-tag-label",
-  "misc-telescope",
-  "misc-thermometer",
-  "misc-weight",
-  "misc-weight-bar",
-  "shape-diamond",
-  "shape-diamond-off",
-  "shapes-arrow-down",
-  "shapes-arrow-down-left",
-  "shapes-arrow-down-max",
-  "shapes-arrow-down-right",
-  "shapes-arrow-left",
-  "shapes-arrow-left-max",
-  "shapes-arrow-right",
-  "shapes-arrow-right-max",
-  "shapes-arrow-up",
-  "shapes-arrow-up-left",
-  "shapes-arrow-up-max",
-  "shapes-arrow-up-right",
-  "shapes-chevron-double-down",
-  "shapes-chevron-double-left",
-  "shapes-chevron-double-right",
-  "shapes-chevron-double-up",
-  "shapes-chevron-down",
-  "shapes-chevron-down-left-up-right",
-  "shapes-chevron-left",
-  "shapes-chevron-left-right",
-  "shapes-chevron-right",
-  "shapes-chevron-up",
-  "shapes-chevron-up-down",
-  "shapes-chevron-up-left-down-right",
-  "shapes-return",
-  "shapes-shape-circle",
-  "shapes-shape-circle-off",
-  "shapes-shape-hexagon",
-  "shapes-shape-octogon",
-  "shapes-shape-square",
-  "shapes-shape-square-off",
-  "shapes-shape-triangle",
-  "social-award-ribbon",
-  "social-award-trophy",
-  "social-bookmark",
-  "social-bookmark-off",
-  "social-chat-message",
-  "social-chat-multi",
-  "social-chat-single",
-  "social-feeling-happy",
-  "social-feeling-neutral",
-  "social-feeling-sad",
-  "social-feeling-very-happy",
-  "social-feeling-very-sad",
-  "social-founders",
-  "social-founders-tier-1",
-  "social-founders-tier-2",
-  "social-founders-tier-3",
-  "social-heart",
-  "social-heart-off",
-  "social-pin",
-  "social-pin-off",
-  "social-profile",
-  "social-profile-group",
-  "social-profile-off",
-  "social-ranking-xp",
-  "social-thumb-down",
-  "social-thumb-up",
-  "view-apps",
-  "view-display-share",
-  "view-dual",
-  "view-feedback",
-  "view-fit-to-page",
-  "view-fullscreen",
-  "view-fullscreen-exit",
-  "view-gallery-strip",
-  "view-grip-area",
-  "view-grip-corner",
-  "view-grip-edge-horizontal",
-  "view-grip-edge-vertical",
-  "view-grip-mini",
-  "view-layout-columns",
-  "view-layout-detail",
-  "view-layout-grid",
-  "view-layout-list",
-  "view-layout-rows",
-  "view-map",
-  "view-open-external",
-  "view-render",
-  "view-window",
-  "view-window-code",
-  "view-window-grid",
-  "view-window-stack",
-  "view-window-terminal",
-  "view-workspace",
-  "view-workspace-group"
-];
-
-export const Branding = {
+/**
+ * @description The `` element can be used to render any SVG path such as those from the NVIDIA Brand Assets.
+ */
+export const Brand = {
   render: () => html`
-    

-      

-        ${GUI_NAMES.map(name => html``)}
-      

-      
-      

-        ${GUI_NAMES.map(name => html``)}
-      

-    

+  ${[
+      "3d-3d-axis",
+      "3d-cloth",
+      "3d-cube",
+      "3d-dolly",
+      "3d-emissive",
+      "3d-explode",
+      "3d-instance",
+      "3d-light-rect",
+      "3d-light-rotate",
+      "3d-material",
+      "3d-move-global",
+      "3d-reference",
+      "3d-rotate-3d",
+      "3d-rotate-global",
+      "3d-segment",
+      "3d-shader",
+      "3d-shader-ball",
+      "3d-skeleton",
+      "3d-teapot",
+      "3d-teleport",
+      "3d-texture",
+      "av-auto-record",
+      "av-auto-record-off",
+      "av-broadcast",
+      "av-camera",
+      "av-camera-off",
+      "av-clap-board",
+      "av-display-surround",
+      "av-eject",
+      "av-equalizer",
+      "av-faders",
+      "av-fast-forward",
+      "av-fast-reverse",
+      "av-film",
+      "av-film-add",
+      "av-film-collection",
+      "av-fps",
+      "av-high-quality",
+      "av-hud",
+      "av-loop",
+      "av-loop-off",
+      "av-microphone",
+      "av-microphone-off",
+      "av-next",
+      "av-notes",
+      "av-pause",
+      "av-picture-in-picture",
+      "av-play",
+      "av-previous",
+      "av-record",
+      "av-replay",
+      "av-replay-off",
+      "av-soundwaves",
+      "av-speaker",
+      "av-speaker-high",
+      "av-speaker-low",
+      "av-speaker-medium",
+      "av-speaker-mute",
+      "av-speaker-off",
+      "av-step-forward",
+      "av-step-reverse",
+      "av-stop",
+      "av-videocam",
+      "av-videocam-off",
+      "common-add",
+      "common-add-circle",
+      "common-alarm",
+      "common-bell",
+      "common-bell-off",
+      "common-calendar",
+      "common-cancel",
+      "common-check",
+      "common-check-circle",
+      "common-clipboard",
+      "common-clock",
+      "common-close",
+      "common-close-circle",
+      "common-cog",
+      "common-cog-off",
+      "common-copy-doc",
+      "common-copy-generic",
+      "common-error",
+      "common-exit",
+      "common-eye",
+      "common-eye-off",
+      "common-filter",
+      "common-help-circle",
+      "common-history",
+      "common-home",
+      "common-home-off",
+      "common-info-circle",
+      "common-link",
+      "common-link-break",
+      "common-lock-closed",
+      "common-lock-open",
+      "common-magnifying-glass",
+      "common-magnifying-glass-minus",
+      "common-magnifying-glass-plus",
+      "common-menu",
+      "common-more-horiz",
+      "common-more-vert",
+      "common-paperplane",
+      "common-redo",
+      "common-refresh",
+      "common-reset",
+      "common-retry",
+      "common-share",
+      "common-sort",
+      "common-star",
+      "common-subtract",
+      "common-subtract-circle",
+      "common-sync",
+      "common-sync-off",
+      "common-timer",
+      "common-trash",
+      "common-undo",
+      "common-warning",
+      "communication-cloud",
+      "communication-cloud-off",
+      "communication-data",
+      "communication-download",
+      "communication-envelope",
+      "communication-envelope-off",
+      "communication-firewall",
+      "communication-firewall-off",
+      "communication-forward",
+      "communication-isp",
+      "communication-isp-off",
+      "communication-network-signal",
+      "communication-network-signal-off",
+      "communication-reply",
+      "communication-sync-warning",
+      "communication-transfer-horizontal",
+      "communication-transfer-vertical",
+      "communication-upload",
+      "communication-wifi",
+      "communication-wifi-off",
+      "cursor-arrow",
+      "cursor-crosshair",
+      "cursor-hand-closed",
+      "cursor-hand-open",
+      "cursor-hand-pinch",
+      "cursor-hand-point",
+      "cursor-hourglass",
+      "editor-anchor-center",
+      "editor-anchor-e",
+      "editor-anchor-n",
+      "editor-anchor-ne",
+      "editor-anchor-nw",
+      "editor-anchor-s",
+      "editor-anchor-se",
+      "editor-anchor-sw",
+      "editor-anchor-w",
+      "editor-bold",
+      "editor-branch",
+      "editor-chart",
+      "editor-chart-bar",
+      "editor-chart-flow",
+      "editor-chart-hierarchy",
+      "editor-chart-performance",
+      "editor-chart-pie",
+      "editor-chart-tree",
+      "editor-commit",
+      "editor-export-to-clipboard",
+      "editor-fit",
+      "editor-fork",
+      "editor-freehand",
+      "editor-grid",
+      "editor-grid-off",
+      "editor-h-align-center",
+      "editor-h-align-left",
+      "editor-h-align-right",
+      "editor-image",
+      "editor-italic",
+      "editor-iterate",
+      "editor-keyframe",
+      "editor-layers",
+      "editor-layers-off",
+      "editor-line-segment",
+      "editor-list-bullet",
+      "editor-list-checkmark",
+      "editor-list-number",
+      "editor-merge",
+      "editor-move",
+      "editor-paperclip",
+      "editor-paragraph",
+      "editor-pencil",
+      "editor-pull",
+      "editor-rotate",
+      "editor-rotate-90-clockwise",
+      "editor-rotate-90-counter",
+      "editor-ruler",
+      "editor-scale-down",
+      "editor-scale-reset",
+      "editor-scale-up",
+      "editor-section",
+      "editor-section-bottom",
+      "editor-section-top",
+      "editor-select-brush",
+      "editor-signature",
+      "editor-skip",
+      "editor-sliders",
+      "editor-sticker",
+      "editor-sticker-image",
+      "editor-sticker-shape",
+      "editor-sticker-text",
+      "editor-sticker-zoom",
+      "editor-strikethrough",
+      "editor-stroke-width",
+      "editor-style",
+      "editor-swatches",
+      "editor-text",
+      "editor-text-align-center",
+      "editor-text-align-full",
+      "editor-text-align-left",
+      "editor-text-align-right",
+      "editor-text-framed",
+      "editor-trash-delete",
+      "editor-underline",
+      "editor-v-align-bottom",
+      "editor-v-align-center",
+      "editor-v-align-top",
+      "editor-wand",
+      "editor-wrench",
+      "files-archive",
+      "files-db",
+      "files-document",
+      "files-document-new",
+      "files-document-preview",
+      "files-export",
+      "files-floppy",
+      "files-folder-closed",
+      "files-folder-open",
+      "files-import",
+      "hardware-2-b-left-click",
+      "hardware-battery-0",
+      "hardware-battery-0-off",
+      "hardware-battery-100",
+      "hardware-battery-25",
+      "hardware-battery-50",
+      "hardware-battery-75",
+      "hardware-battery-boost",
+      "hardware-battery-charging",
+      "hardware-bluetooth",
+      "hardware-bluetooth-off",
+      "hardware-calculator",
+      "hardware-cpu",
+      "hardware-display",
+      "hardware-display-collection",
+      "hardware-display-off",
+      "hardware-drive-cloud",
+      "hardware-drive-cloud-off",
+      "hardware-drive-network",
+      "hardware-drive-network-off",
+      "hardware-drive-removable",
+      "hardware-drive-removable-off",
+      "hardware-drive-usb",
+      "hardware-drive-usb-off",
+      "hardware-ethernet",
+      "hardware-fan",
+      "hardware-fan-loud",
+      "hardware-fan-quiet",
+      "hardware-gamepad",
+      "hardware-gamepad-off",
+      "hardware-gamepad-start",
+      "hardware-gpu",
+      "hardware-gpu-card",
+      "hardware-gpu-card-multi",
+      "hardware-gpu-card-off",
+      "hardware-gpu-off",
+      "hardware-keyboard",
+      "hardware-laptop",
+      "hardware-lightning",
+      "hardware-mac",
+      "hardware-mac-off",
+      "hardware-media-optical",
+      "hardware-mosaic",
+      "hardware-mouse-2-b",
+      "hardware-mouse-2-b-right-click",
+      "hardware-mouse-3-b",
+      "hardware-mouse-scrollwheel",
+      "hardware-mouse-scrollwheel-active",
+      "hardware-multidrive",
+      "hardware-network",
+      "hardware-network-connection",
+      "hardware-network-pcs",
+      "hardware-nvidia-shield",
+      "hardware-nvidia-shield-stand",
+      "hardware-performance-high",
+      "hardware-performance-low",
+      "hardware-performance-medium",
+      "hardware-plug-recepticle",
+      "hardware-plug-usb",
+      "hardware-plugin",
+      "hardware-power",
+      "hardware-ram",
+      "hardware-remote",
+      "hardware-robot-arm",
+      "hardware-sd-card",
+      "hardware-smartphone",
+      "hardware-smartphone-off",
+      "hardware-tablet",
+      "hardware-tablet-off",
+      "hardware-telephone",
+      "hardware-telephone-off",
+      "hardware-usb",
+      "hardware-vr",
+      "hardware-watch",
+      "hardware-webcam",
+      "hardware-webcam-off",
+      "hardware-webcam-settings",
+      "hardware-whispermode",
+      "hardware-wireless-modem",
+      "hardware-wireless-modem-off",
+      "hardware-workstation",
+      "hardware-workstation-off",
+      "hardware-workstation-system",
+      "hardware-workstation-system-off",
+      "image-brush",
+      "image-bucket",
+      "image-camera-360",
+      "image-camera-linked",
+      "image-camera-super",
+      "image-collection",
+      "image-crop",
+      "image-easel",
+      "image-eraser",
+      "image-eyedropper",
+      "image-group",
+      "image-import-image",
+      "image-mask-inside",
+      "image-mask-outside",
+      "image-mirror",
+      "image-outpainting",
+      "image-palette",
+      "image-scale",
+      "image-scale-relative",
+      "image-scale-relative-off",
+      "image-select-ellipse",
+      "image-select-polygon",
+      "image-select-rectangle",
+      "image-shapes",
+      "image-sun-high",
+      "image-sun-low",
+      "image-sun-off-high",
+      "image-transparency",
+      "images-denoise",
+      "maps-airplane",
+      "maps-briefcase",
+      "maps-bush",
+      "maps-business",
+      "maps-dirt",
+      "maps-factory",
+      "maps-flag",
+      "maps-flower",
+      "maps-fog",
+      "maps-grass",
+      "maps-gravel",
+      "maps-hill",
+      "maps-location",
+      "maps-location-off",
+      "maps-map",
+      "maps-map-off",
+      "maps-mountain",
+      "maps-mud",
+      "maps-river",
+      "maps-rock",
+      "maps-sand",
+      "maps-sea",
+      "maps-sky",
+      "maps-snow",
+      "maps-stone",
+      "maps-straw",
+      "maps-suitcase",
+      "maps-toolbox",
+      "maps-tree",
+      "maps-trees",
+      "maps-water",
+      "maps-world",
+      "maps-world-off",
+      "misc-bandaid",
+      "misc-beaker",
+      "misc-blackboard",
+      "misc-book",
+      "misc-bug",
+      "misc-bug-off",
+      "misc-code",
+      "misc-compass",
+      "misc-ekg",
+      "misc-function",
+      "misc-gift",
+      "misc-graduate",
+      "misc-graph-node",
+      "misc-health",
+      "misc-hot-air-balloon",
+      "misc-ime",
+      "misc-key",
+      "misc-library",
+      "misc-library-games",
+      "misc-lightbulb",
+      "misc-magnet",
+      "misc-math",
+      "misc-microscope",
+      "misc-mode-component",
+      "misc-moon",
+      "misc-moon-off",
+      "misc-mug",
+      "misc-neural-network",
+      "misc-news",
+      "misc-package",
+      "misc-payment-card",
+      "misc-pulse",
+      "misc-qrcode",
+      "misc-radar",
+      "misc-radioactive",
+      "misc-rocket",
+      "misc-running",
+      "misc-scale-balance",
+      "misc-school",
+      "misc-seed",
+      "misc-sensor",
+      "misc-shield",
+      "misc-shield-off",
+      "misc-ship-wheel",
+      "misc-shopping-bag",
+      "misc-shopping-basket",
+      "misc-shopping-cart",
+      "misc-shopping-cart-open",
+      "misc-tag",
+      "misc-tag-label",
+      "misc-telescope",
+      "misc-thermometer",
+      "misc-weight",
+      "misc-weight-bar",
+      "shape-diamond",
+      "shape-diamond-off",
+      "shapes-arrow-down",
+      "shapes-arrow-down-left",
+      "shapes-arrow-down-max",
+      "shapes-arrow-down-right",
+      "shapes-arrow-left",
+      "shapes-arrow-left-max",
+      "shapes-arrow-right",
+      "shapes-arrow-right-max",
+      "shapes-arrow-up",
+      "shapes-arrow-up-left",
+      "shapes-arrow-up-max",
+      "shapes-arrow-up-right",
+      "shapes-chevron-double-down",
+      "shapes-chevron-double-left",
+      "shapes-chevron-double-right",
+      "shapes-chevron-double-up",
+      "shapes-chevron-down",
+      "shapes-chevron-down-left-up-right",
+      "shapes-chevron-left",
+      "shapes-chevron-left-right",
+      "shapes-chevron-right",
+      "shapes-chevron-up",
+      "shapes-chevron-up-down",
+      "shapes-chevron-up-left-down-right",
+      "shapes-return",
+      "shapes-shape-circle",
+      "shapes-shape-circle-off",
+      "shapes-shape-hexagon",
+      "shapes-shape-octogon",
+      "shapes-shape-square",
+      "shapes-shape-square-off",
+      "shapes-shape-triangle",
+      "social-award-ribbon",
+      "social-award-trophy",
+      "social-bookmark",
+      "social-bookmark-off",
+      "social-chat-message",
+      "social-chat-multi",
+      "social-chat-single",
+      "social-feeling-happy",
+      "social-feeling-neutral",
+      "social-feeling-sad",
+      "social-feeling-very-happy",
+      "social-feeling-very-sad",
+      "social-founders",
+      "social-founders-tier-1",
+      "social-founders-tier-2",
+      "social-founders-tier-3",
+      "social-heart",
+      "social-heart-off",
+      "social-pin",
+      "social-pin-off",
+      "social-profile",
+      "social-profile-group",
+      "social-profile-off",
+      "social-ranking-xp",
+      "social-thumb-down",
+      "social-thumb-up",
+      "view-apps",
+      "view-display-share",
+      "view-dual",
+      "view-feedback",
+      "view-fit-to-page",
+      "view-fullscreen",
+      "view-fullscreen-exit",
+      "view-gallery-strip",
+      "view-grip-area",
+      "view-grip-corner",
+      "view-grip-edge-horizontal",
+      "view-grip-edge-vertical",
+      "view-grip-mini",
+      "view-layout-columns",
+      "view-layout-detail",
+      "view-layout-grid",
+      "view-layout-list",
+      "view-layout-rows",
+      "view-map",
+      "view-open-external",
+      "view-render",
+      "view-window",
+      "view-window-code",
+      "view-window-grid",
+      "view-window-stack",
+      "view-window-terminal",
+      "view-workspace",
+      "view-workspace-group"
+    ].map(name => html``)}
   `
 }
diff --git a/projects/elements/src/internal/controllers/type-popover.controller.stories.ts b/projects/elements/src/internal/controllers/type-popover.controller.stories.ts
index c1a852caa..2d4f6412f 100644
--- a/projects/elements/src/internal/controllers/type-popover.controller.stories.ts
+++ b/projects/elements/src/internal/controllers/type-popover.controller.stories.ts
@@ -94,17 +94,6 @@ export const TypePopoverControllerDemo = {
 
 export const TypePopoverControllerAlignmentDemo = {
   render: () => html`
-    
-
   
   top start
   top center
diff --git a/projects/internals/metadata/README.md b/projects/internals/metadata/README.md
index 87b8d08d0..e9beecc1a 100644
--- a/projects/internals/metadata/README.md
+++ b/projects/internals/metadata/README.md
@@ -1,6 +1,6 @@
 # Metadata
 
-The metadata scripts generate common metadata about projects in the repo. This information is then consumed in a variety of ways such as displaying information in [Storybook](https://NVIDIA.github.io/elements/docs/metrics/) or reporting to [GitLab](https://github.com/NVIDIA/elements/-/graphs/main/charts).
+The metadata scripts generate common metadata about projects in the repo. This information is then consumed in a variety of ways such as displaying information our [documentation](https://NVIDIA.github.io/elements/docs/metrics/) or reporting to [GitLab](https://github.com/NVIDIA/elements/-/graphs/main/charts).
 
 ## Commands
 
diff --git a/projects/internals/vite/src/configs/test.js b/projects/internals/vite/src/configs/test.js
index 704af8031..26f855958 100644
--- a/projects/internals/vite/src/configs/test.js
+++ b/projects/internals/vite/src/configs/test.js
@@ -63,7 +63,6 @@ export const libraryTestConfig = {
         '**/dist/**',
         '**/build/**',
         '**/.lighthouse/**',
-        '**/.storybook/**',
         '**/.wireit/**',
         '**/.pnpm/**',
         '**/*.test.ts',
diff --git a/projects/labs/code/.gitignore b/projects/labs/code/.gitignore
index 2f268b896..db4c6d9b6 100644
--- a/projects/labs/code/.gitignore
+++ b/projects/labs/code/.gitignore
@@ -1,3 +1,2 @@
 dist
-node_modules
-storybook-build
\ No newline at end of file
+node_modules
\ No newline at end of file
diff --git a/projects/labs/forms/.gitignore b/projects/labs/forms/.gitignore
index 2f268b896..db4c6d9b6 100644
--- a/projects/labs/forms/.gitignore
+++ b/projects/labs/forms/.gitignore
@@ -1,3 +1,2 @@
 dist
-node_modules
-storybook-build
\ No newline at end of file
+node_modules
\ No newline at end of file
diff --git a/projects/pages/index.js b/projects/pages/index.js
index 1529877ef..f36651b0e 100644
--- a/projects/pages/index.js
+++ b/projects/pages/index.js
@@ -11,7 +11,6 @@ if (!existsSync('./dist')) {
 
 cpSync('./_redirects', './dist/_redirects');
 cpSync('../site/dist/', './dist/', { recursive: true });
-cpSync('../storybook/dist/', './dist/api/', { recursive: true });
 cpSync('../internals/metadata/static/index.json', './dist/metadata/index.json');
 
 cpSync('../starters/dist/', './dist/starters/download/', { recursive: true });
diff --git a/projects/pages/package.json b/projects/pages/package.json
index dd3148f10..f94d6128b 100644
--- a/projects/pages/package.json
+++ b/projects/pages/package.json
@@ -18,7 +18,6 @@
         "dist"
       ],
       "dependencies": [
-        "../storybook:build",
         "../site:build",
         "../starters:build",
         "../internals/metadata:build"
diff --git a/projects/site/README.md b/projects/site/README.md
index 49574dcd4..8c17f64a5 100644
--- a/projects/site/README.md
+++ b/projects/site/README.md
@@ -1,6 +1,6 @@
 # Elements Site
 
-This is the static site project for Elements. The `/site` project is built alongside `/storybook` and `/starters` projects and deployed via the Gitlab `/pages` project.
+This is the static site project for Elements. The `/site` project is built alongside `/starters` projects and deployed via the Gitlab `/pages` project.
 
 ### Google Analytics
 
diff --git a/projects/site/src/_11ty/layouts/page.11ty.js b/projects/site/src/_11ty/layouts/page.11ty.js
index c54a13e16..6be66e5fe 100644
--- a/projects/site/src/_11ty/layouts/page.11ty.js
+++ b/projects/site/src/_11ty/layouts/page.11ty.js
@@ -1,7 +1,7 @@
 import { renderBaseHead } from './common.js';
 
 /**
- * Basic page layout template that aligns with Storybook and Starters page header.
+ * Basic page layout template that aligns with Starters page header.
  * Provides a consistent header with navigation and system theme controls.
  *
  * @param {Object} data - The page data object from 11ty
diff --git a/projects/site/src/_11ty/shortcodes/svg-logos.js b/projects/site/src/_11ty/shortcodes/svg-logos.js
index ed6a98147..f2cf78478 100644
--- a/projects/site/src/_11ty/shortcodes/svg-logos.js
+++ b/projects/site/src/_11ty/shortcodes/svg-logos.js
@@ -3,7 +3,6 @@ export function svgLogosShortcode(...svgs) {