@nvidia-elements/core 2.7.3 → 2.8.1

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+## [2.8.1](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v2.8.0...@nvidia-elements/core-v2.8.1) (2026-09-23)
+
+### Features
+
+* **lint:** improve slotted element checks ([0e1985d](https://github.com/NVIDIA/elements/commit/0e1985deb9edba09cbcbd9eec121e445d3559624))
+
+### Bug Fixes
+
+* **cli:** update @inquirer/prompts to 8.7.2 ([b6984b5](https://github.com/NVIDIA/elements/commit/b6984b58a80a666b7a83aac1e109337e90c469d1))
+* **core:** textarea slots ([0f8fb33](https://github.com/NVIDIA/elements/commit/0f8fb33a38c60a08aaf37e774a92338cf5416401))
+* **lint:** skip generated eleventy vite directories in eslint ([92e5d50](https://github.com/NVIDIA/elements/commit/92e5d506fe0a951c354641a1aad2b1a9dd75a212))
+
+## [2.8.0](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v2.7.3...@nvidia-elements/core-v2.8.0) (2026-09-19)
+
+### Features
+
+* **code:** support code element slot content ([25486f5](https://github.com/NVIDIA/elements/commit/25486f52fa95ac2cb865a20748467d4d5729e673))
+* **core:** tag slots ([c4e0edd](https://github.com/NVIDIA/elements/commit/c4e0edd7b5bdd8c619ca969fd537352466fc759a))
+* **lint:** support markdown linting ([652e751](https://github.com/NVIDIA/elements/commit/652e7517bb9c0f17a2e4cc1a4760206f414b24d2))
+
+### Bug Fixes
+
+* **ci:** ignore test runner artifacts in knip cache ([7415260](https://github.com/NVIDIA/elements/commit/74152608703345d5507ba5f64e5f1535f98b36e3))
+* **ci:** pin conventionalcommits preset for release notes ([6c93057](https://github.com/NVIDIA/elements/commit/6c93057adec0a1d8fb22335a84af1bb4b9be41ae))
+* **cli:** improve skill tool call and creation steps ([b30455c](https://github.com/NVIDIA/elements/commit/b30455cad0deab646ad20ccd18bdafda39056860))
+* **docs:** align card presentation ([f811f0a](https://github.com/NVIDIA/elements/commit/f811f0a685ffcb95c68c6bd2bb48129cf8349561))
+* **docs:** align card title typography ([056404a](https://github.com/NVIDIA/elements/commit/056404a2a6717e325106cd78bda82983e2f76d90))
+* **docs:** correct jsdelivr bundle urls ([c7432be](https://github.com/NVIDIA/elements/commit/c7432be0394225f3d9d7b2c193b7e491c751c9a9))
+* **docs:** make page title weights consistent ([07bc98b](https://github.com/NVIDIA/elements/commit/07bc98b12a646f4050d2cc873d7ed3a00b8304f7))
+* **docs:** refine navigation group titles ([2e3c3e0](https://github.com/NVIDIA/elements/commit/2e3c3e089e07c0b2f261a58bd966bf2f772333a9))
+* **docs:** update responsive pattern icon ([6126e1c](https://github.com/NVIDIA/elements/commit/6126e1c2bc9fff2a222ce81c88f51de47149cad7))
+* **docs:** use canvas background for component headers ([5547c47](https://github.com/NVIDIA/elements/commit/5547c473f0f20dffe29ac8de8a24513126c56f99))
+* **lint:** no-excessive-primary-actions rule to handle popover elements ([398c0df](https://github.com/NVIDIA/elements/commit/398c0df6a2987e8ece663d8c2994d1626a1b2596))
+* **media:** since version release ([583f6bc](https://github.com/NVIDIA/elements/commit/583f6bcd5384e4d4c5ca953b2f9e74cfbb313750))
+
 ## <small>2.7.3 (2026-09-03)</small>
 
 * fix(core): control message metadata ([1abec58](https://github.com/NVIDIA/elements/commit/1abec58))

package/README.md

@@ -57,3 +57,11 @@ import '@nvidia-elements/core/dot/define.js';
 <!-- use component in HTML template -->
 <nve-button>hello there</nve-button>
 ```
+
+## NVIDIA Elements Skill
+
+Install the Elements agent skill with the open [skills](https://www.skills.sh/nvidia/elements/elements) CLI:
+
+```shell
+npx skills add https://github.com/nvidia/elements --skill elements
+```

package/dist/_virtual/{_@oxc-project_runtime@0.139.0 → _@oxc-project_runtime@0.147.0}/helpers/esm/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.147.0/helpers/esm/decorate.js
 function e(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);

package/dist/accordion/accordion.examples.json

@@ -5,7 +5,7 @@
     {
       "id": "accordion",
       "name": "Default",
-      "template": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n",
+      "template": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\">Workspace Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>\n",
       "summary": "Basic accordion component for collapsible content sections. Use accordions to progressively disclose information, helping users focus on relevant content while keeping the interface compact and scannable.",
       "description": "",
       "composition": false,
@@ -14,7 +14,7 @@
     {
       "id": "accordion-disabled",
       "name": "Disabled",
-      "template": "<nve-accordion behavior-expand disabled>\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Admin Settings</h2>\n    <p nve-text=\"body\">Requires administrator access</p>\n  </nve-accordion-header>\n  <nve-accordion-content\n    >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n  >\n</nve-accordion>\n",
+      "template": "<nve-accordion behavior-expand disabled>\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Admin Settings</h2>\n    <p nve-text=\"body\">Requires administrator access</p>\n  </nve-accordion-header>\n  <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n</nve-accordion>\n",
       "summary": "Disabled accordion state for read-only content display. Use when accordion sections are temporarily unavailable or conditionally accessible based on user permissions, providing visual feedback about inaccessible content.",
       "description": "",
       "composition": false,
@@ -23,7 +23,7 @@
     {
       "id": "accordion-container",
       "name": "Container",
-      "template": "<div nve-layout=\"column gap:md\">\n  <nve-accordion-group behavior-expand>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n      </nve-accordion-header>\n      <nve-accordion-content\n        >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n      >\n    </nve-accordion>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n      </nve-accordion-header>\n      <nve-accordion-content\n        >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n      >\n    </nve-accordion>\n  </nve-accordion-group>\n  <nve-accordion-group container=\"inset\" behavior-expand>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n      </nve-accordion-header>\n      <nve-accordion-content\n        >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n      >\n    </nve-accordion>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n      </nve-accordion-header>\n      <nve-accordion-content\n        >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n      >\n    </nve-accordion>\n  </nve-accordion-group>\n  <nve-accordion-group container=\"flat\" behavior-expand>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n      </nve-accordion-header>\n      <nve-accordion-content\n        >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n      >\n    </nve-accordion>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n      </nve-accordion-header>\n      <nve-accordion-content\n        >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n      >\n    </nve-accordion>\n  </nve-accordion-group>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:md\">\n  <nve-accordion-group behavior-expand>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n      </nve-accordion-header>\n      <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n    </nve-accordion>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n      </nve-accordion-header>\n      <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n    </nve-accordion>\n  </nve-accordion-group>\n  <nve-accordion-group container=\"inset\" behavior-expand>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n      </nve-accordion-header>\n      <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n    </nve-accordion>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n      </nve-accordion-header>\n      <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n    </nve-accordion>\n  </nve-accordion-group>\n  <nve-accordion-group container=\"flat\" behavior-expand>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">General</h2>\n      </nve-accordion-header>\n      <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n    </nve-accordion>\n    <nve-accordion>\n      <nve-accordion-header>\n        <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Settings</h2>\n      </nve-accordion-header>\n      <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n    </nve-accordion>\n  </nve-accordion-group>\n</div>\n",
       "summary": "Accordion container variants for different visual emphasis levels. Use default for standard sections, inset for elevated content within cards, and flat for minimal visual weight in dense layouts or sidebars.",
       "description": "",
       "composition": false,
@@ -32,7 +32,7 @@
     {
       "id": "accordion-animated",
       "name": "Animated",
-      "template": "<nve-accordion behavior-expand style=\"--transition: height 0.3s ease-in-out\">\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Release Notes</h2>\n    <p nve-text=\"body\">Version 3.2.0</p>\n  </nve-accordion-header>\n  <nve-accordion-content\n    >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n  >\n</nve-accordion>\n",
+      "template": "<nve-accordion behavior-expand style=\"--transition: height 0.3s ease-in-out\">\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Release Notes</h2>\n    <p nve-text=\"body\">Version 3.2.0</p>\n  </nve-accordion-header>\n  <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n</nve-accordion>\n",
       "summary": "Accordion with custom CSS transitions for enhanced visual feedback during state changes. Use animated accordions to provide smoother, more polished interactions, particularly in content-heavy interfaces where transitions help users track what changed.",
       "description": "",
       "composition": false,
@@ -43,7 +43,7 @@
     {
       "id": "accordion-behavior-expand-single",
       "name": "BehaviorExpandSingle",
-      "template": "<nve-accordion-group behavior-expand-single>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Account Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Security</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n",
+      "template": "<nve-accordion-group behavior-expand-single>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Account Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Security</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>\n",
       "summary": "Accordion group allowing only one section expanded at a time, automatically closing others. Use single-expand behavior when content sections are mutually exclusive or when you want to maintain compact vertical space by limiting expanded content to one section.",
       "description": "",
       "composition": false,
@@ -52,7 +52,7 @@
     {
       "id": "accordion-custom-icon-button",
       "name": "CustomIconButton",
-      "template": "<nve-accordion id=\"custom-icon-button-accordion\">\n  <nve-icon-button slot=\"icon-button\" icon-name=\"add\" size=\"sm\" container=\"flat\"></nve-icon-button>\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Additional Resources</h2>\n  </nve-accordion-header>\n  <nve-accordion-content\n    >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n  >\n</nve-accordion>\n<script type=\"module\">\n  const accordion = document.querySelector(\"#custom-icon-button-accordion\");\n  const accordionHeader = accordion.querySelector(\"nve-accordion-header\");\n  const iconButton = accordion.querySelector(\"nve-icon-button\");\n  accordionHeader.addEventListener(\"click\", () => toggle());\n  iconButton.addEventListener(\"click\", () => toggle());\n  function toggle() {\n    accordion.expanded = !accordion.expanded;\n    iconButton.iconName = accordion.expanded ? \"minus\" : \"add\";\n  }\n</script>\n",
+      "template": "<nve-accordion id=\"custom-icon-button-accordion\">\n  <nve-icon-button slot=\"icon-button\" icon-name=\"add\" size=\"sm\" container=\"flat\"></nve-icon-button>\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Additional Resources</h2>\n  </nve-accordion-header>\n  <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n</nve-accordion>\n<script type=\"module\">\n  const accordion = document.querySelector(\"#custom-icon-button-accordion\");\n  const accordionHeader = accordion.querySelector(\"nve-accordion-header\");\n  const iconButton = accordion.querySelector(\"nve-icon-button\");\n  accordionHeader.addEventListener(\"click\", () => toggle());\n  iconButton.addEventListener(\"click\", () => toggle());\n  function toggle() {\n    accordion.expanded = !accordion.expanded;\n    iconButton.iconName = accordion.expanded ? \"minus\" : \"add\";\n  }\n</script>\n",
       "summary": "Accordion with custom icon button that changes based on state. Use custom icons to provide more semantic indicators (e.g., plus/minus for add/remove patterns, chevron for expand/collapse).",
       "description": "",
       "composition": false,
@@ -63,7 +63,7 @@
     {
       "id": "accordion-with-actions",
       "name": "WithActions",
-      "template": "<nve-accordion behavior-expand>\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Pipeline Configuration</h2>\n    <p nve-text=\"body\">Last updated 2 hours ago <nve-button container=\"inline\">view history</nve-button></p>\n    <nve-icon-button container=\"flat\" icon-name=\"add\" size=\"sm\" slot=\"suffix\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"delete\" size=\"sm\" slot=\"suffix\"></nve-icon-button>\n  </nve-accordion-header>\n  <nve-accordion-content\n    >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n  >\n</nve-accordion>\n",
+      "template": "<nve-accordion behavior-expand>\n  <nve-accordion-header>\n    <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Pipeline Configuration</h2>\n    <p nve-text=\"body\">Last updated 2 hours ago <nve-button container=\"inline\">view history</nve-button></p>\n    <nve-icon-button container=\"flat\" icon-name=\"add\" size=\"sm\" slot=\"suffix\"></nve-icon-button>\n    <nve-icon-button container=\"flat\" icon-name=\"delete\" size=\"sm\" slot=\"suffix\"></nve-icon-button>\n  </nve-accordion-header>\n  <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n</nve-accordion>\n",
       "summary": "Accordion with action buttons in header for quick operations without expanding. Perfect for list items where users need both to view details and perform actions like edit, delete, or add, keeping common actions immediately accessible.",
       "description": "",
       "composition": true,
@@ -83,7 +83,7 @@
     {
       "id": "accordion-single",
       "name": "Single",
-      "template": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Appearance</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n",
+      "template": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Appearance</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>\n",
       "summary": "Basic accordion component for collapsible content sections with expand/collapse functionality.",
       "description": "",
       "composition": false,
@@ -94,7 +94,7 @@
     {
       "id": "accordion-multiple",
       "name": "Multiple",
-      "template": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Account Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Privacy</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-accordion-group>\n",
+      "template": "<nve-accordion-group behavior-expand>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Account Settings</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n  <nve-accordion>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Privacy</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences and project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>\n",
       "summary": "Brings together many accordion components for embedded multi-section content organization.",
       "description": "",
       "composition": false,

package/dist/accordion/accordion2.js

@@ -8,7 +8,7 @@ import { TypeExpandableController as o } from "../internal/controllers/type-expa
 import { hostAttr as s } from "../internal/decorators/host-attr.js";
 import { scopedRegistry as c } from "../internal/decorators/scoped-registry.js";
 import { useStyles as l } from "../internal/styles/index.js";
-import u from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import u from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { IconButton as d } from "../icon-button/icon-button2.js";
 import f from "./accordion.js";
 import p from "./accordion-header.js";
@@ -28,7 +28,7 @@ var b = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-accordion-header",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	render() {
@@ -46,7 +46,7 @@ var x = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-accordion-content",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	render() {
@@ -62,7 +62,7 @@ var x = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-accordion",
-			version: "2.7.3",
+			version: "2.8.1",
 			children: [
 				b.metadata.tag,
 				x.metadata.tag,
@@ -120,7 +120,7 @@ var C = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-accordion-group",
-			version: "2.7.3",
+			version: "2.8.1",
 			children: [S.metadata.tag]
 		};
 	}

package/dist/accordion/accordion2.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion2.js","names":["#i18nController","#header","#typeExpandableController","#toggle","#updateChildAttributes","#onOpen"],"sources":["../../src/accordion/accordion.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport type { ContainerElement, Container } from '@nvidia-elements/core/internal';\nimport {\n  stateExpanded,\n  I18nController,\n  TypeExpandableController,\n  useStyles,\n  attachInternals,\n  generateId,\n  isFocusable,\n  hostAttr,\n  audit,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport accordionStyleSheet from './accordion.css?inline';\nimport accordionHeaderStyleSheet from './accordion-header.css?inline';\nimport accordionContentStyleSheet from './accordion-content.css?inline';\nimport accordionGroupStyleSheet from './accordion-group.css?inline';\n\n/**\n * @element nve-accordion-header\n * @description Provides the clickable heading region of an accordion that toggles the visibility of associated content.\n * @documentation https://nvidia.github.io/elements/docs/elements/accordion/\n * @since 0.12.0\n * @entrypoint \\@nvidia-elements/core/accordion\n * @slot - Heading text and supporting content that labels the accordion section.\n * @slot prefix - slot for prefix content\n * @slot suffix - slot for suffix content\n * @cssprop --cursor\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\nexport class AccordionHeader extends LitElement {\n  static styles = useStyles([accordionHeaderStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-accordion-header',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </div>\n    `;\n  }\n\n  /** @private */\n  @hostAttr() slot = 'header';\n\n  connectedCallback() {\n    super.connectedCallback(); // Do not override connectedCallback w/out supering\n    attachInternals(this);\n    this._internals.role = 'heading';\n    this._internals.ariaLevel = '2';\n  }\n}\n\n/**\n * @element nve-accordion-content\n * @description Contains the collapsible body content that reveals or hides when the parent accordion expands or collapses.\n * @documentation https://nvidia.github.io/elements/docs/elements/accordion/\n * @since 0.12.0\n * @entrypoint \\@nvidia-elements/core/accordion\n * @slot - This is a default/unnamed slot for accordion content\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\nexport class AccordionContent extends LitElement {\n  static styles = useStyles([accordionContentStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-accordion-content',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\n/**\n * @element nve-accordion\n * @description An accordion is a vertical stack of interactive headings used to toggle the display of further information.\n * @documentation https://nvidia.github.io/elements/docs/elements/accordion/\n * @since 0.12.0\n * @entrypoint \\@nvidia-elements/core/accordion\n * @command --open - use to open the accordion\n * @command --close - use to close the accordion\n * @command --toggle - use to toggle the accordion\n * @slot - Content displayed in the collapsible region, typically an `nve-accordion-content` element.\n * @slot icon-button - icon elements to display for expand/collapse\n * @slot header - header element (Use `accordion-header` or custom content)\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --header-padding - Padding around the header content.\n * @cssprop --cursor\n * @cssprop --transition\n * @csspart icon-button - The toggle icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\n@audit()\n@scopedRegistry()\n@stateExpanded<Accordion>()\nexport class Accordion extends LitElement implements ContainerElement {\n  static styles = useStyles([accordionStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-accordion',\n    version: '0.0.0',\n    children: [AccordionHeader.metadata.tag, AccordionContent.metadata.tag, IconButton.metadata.tag]\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n  #typeExpandableController = new TypeExpandableController(this);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /**\n   * Determines the container styles of component. Flat suits nesting accordions within other containers. Inset suits more complex accordions where content needs distinct separation.\n   */\n  @property({ type: String, reflect: true }) container?: Extract<Container, 'flat' | 'inset'>;\n\n  /**\n   * Determines whether the accordion expands to display its contents.\n   */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /**\n   * Determines whether the accordion is expandable\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless)\n   */\n  @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;\n\n  get #header() {\n    return this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=header]')?.assignedElements()[0];\n  }\n\n  #toggle(element: HTMLElement) {\n    if (!this.disabled && (!isFocusable(element) || element.id === 'internal-trigger')) {\n      this.#typeExpandableController.toggle();\n    }\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <div id=\"header\"\n          @click=${(e: Event) => this.#toggle(e.target as HTMLElement)}\n          .ariaLabel=${this.expanded ? this.i18n.close : this.i18n.expand}\n          .ariaControls=${'content'}\n          >\n          <slot name=\"header\"></slot>\n\n          <slot name=\"icon-button\">\n            <nve-icon-button part=\"icon-button\"\n            exportparts=\"icon:icon-button-icon\"\n              id=\"internal-trigger\"\n              container=\"inline\"\n              icon-name=\"caret\"\n              direction=${this.expanded ? 'up' : 'down'}\n              ?disabled=${this.disabled}\n              ?pressed=${this.expanded}\n              .expanded=${this.expanded}\n              .ariaLabel=${this.expanded ? this.i18n.close : this.i18n.expand}\n            ></nve-icon-button>\n          </slot>\n        </div>\n\n        <div id=\"content\" .ariaHidden=${!this.expanded}>\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'region';\n  }\n\n  async firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n\n    if (this.#header) {\n      this.#header.id ||= generateId();\n      this.setAttribute('aria-labelledby', this.#header.id);\n    }\n  }\n}\n\n/**\n * @element nve-accordion-group\n * @description Organizes many accordions into a cohesive group, enabling coordinated expand/collapse behavior such as single-item expansion.\n * @documentation https://nvidia.github.io/elements/docs/elements/accordion/\n * @since 0.12.0\n * @entrypoint \\@nvidia-elements/core/accordion\n * @cssprop --padding\n * @slot - This is a default slot for accordions within the group\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\n@audit()\nexport class AccordionGroup extends LitElement {\n  declare _internals: ElementInternals;\n  static styles = useStyles([accordionGroupStyleSheet]);\n\n  /**\n   * Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless)\n   */\n  @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;\n\n  /**\n   * Determines whether the accordion should opt-in to stateful expansion of a single accordion at a time\n   */\n  @property({ type: Boolean, attribute: 'behavior-expand-single' }) behaviorExpandSingle = false;\n\n  /**\n   * Controls the container style applied to child accordions. `flat` removes the visual container, `inset` adds rounded containment, and omission uses the default divided presentation.\n   */\n  @property({ type: String, reflect: true }) container?: Extract<Container, 'flat' | 'inset'>;\n\n  static readonly metadata = {\n    tag: 'nve-accordion-group',\n    version: '0.0.0',\n    children: [Accordion.metadata.tag]\n  };\n\n  @queryAssignedElements() private accordions!: Accordion[];\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${() => this.#updateChildAttributes()}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n    this.addEventListener('open', this.#onOpen);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('open', this.#onOpen);\n  }\n\n  #onOpen = (e: Event) => {\n    if (this.behaviorExpandSingle && this.accordions.find(accordion => accordion === e.target)) {\n      this.accordions.filter(accordion => accordion !== e.target).forEach(accordion => (accordion.expanded = false));\n    }\n  };\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this.#updateChildAttributes();\n  }\n\n  #updateChildAttributes() {\n    this.accordions.forEach(accordion => (accordion.container = this.container));\n    this.accordions.forEach(accordion => (accordion.behaviorExpand = this.behaviorExpand || this.behaviorExpandSingle));\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"accordion2.js","names":[],"sources":["../../src/accordion/accordion.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport type { ContainerElement, Container } from '@nvidia-elements/core/internal';\nimport {\n  stateExpanded,\n  I18nController,\n  TypeExpandableController,\n  useStyles,\n  attachInternals,\n  generateId,\n  isFocusable,\n  hostAttr,\n  audit,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport accordionStyleSheet from './accordion.css?inline';\nimport accordionHeaderStyleSheet from './accordion-header.css?inline';\nimport accordionContentStyleSheet from './accordion-content.css?inline';\nimport accordionGroupStyleSheet from './accordion-group.css?inline';\n\n/**\n * @element nve-accordion-header\n * @description Provides the clickable heading region of an accordion that toggles the visibility of associated content.\n * @documentation https://nvidia.github.io/elements/docs/elements/accordion/\n * @since 0.12.0\n * @entrypoint \\@nvidia-elements/core/accordion\n * @slot - Heading text and supporting content that labels the accordion section.\n * @slot prefix - slot for prefix content\n * @slot suffix - slot for suffix content\n * @cssprop --cursor\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\nexport class AccordionHeader extends LitElement {\n  static styles = useStyles([accordionHeaderStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-accordion-header',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </div>\n    `;\n  }\n\n  /** @private */\n  @hostAttr() slot = 'header';\n\n  connectedCallback() {\n    super.connectedCallback(); // Do not override connectedCallback w/out supering\n    attachInternals(this);\n    this._internals.role = 'heading';\n    this._internals.ariaLevel = '2';\n  }\n}\n\n/**\n * @element nve-accordion-content\n * @description Contains the collapsible body content that reveals or hides when the parent accordion expands or collapses.\n * @documentation https://nvidia.github.io/elements/docs/elements/accordion/\n * @since 0.12.0\n * @entrypoint \\@nvidia-elements/core/accordion\n * @slot - This is a default/unnamed slot for accordion content\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\nexport class AccordionContent extends LitElement {\n  static styles = useStyles([accordionContentStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-accordion-content',\n    version: '0.0.0'\n  };\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n}\n\n/**\n * @element nve-accordion\n * @description An accordion is a vertical stack of interactive headings used to toggle the display of further information.\n * @documentation https://nvidia.github.io/elements/docs/elements/accordion/\n * @since 0.12.0\n * @entrypoint \\@nvidia-elements/core/accordion\n * @command --open - use to open the accordion\n * @command --close - use to close the accordion\n * @command --toggle - use to toggle the accordion\n * @slot - Content displayed in the collapsible region, typically an `nve-accordion-content` element.\n * @slot icon-button - icon elements to display for expand/collapse\n * @slot header - header element (Use `accordion-header` or custom content)\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --header-padding - Padding around the header content.\n * @cssprop --cursor\n * @cssprop --transition\n * @csspart icon-button - The toggle icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\n@audit()\n@scopedRegistry()\n@stateExpanded<Accordion>()\nexport class Accordion extends LitElement implements ContainerElement {\n  static styles = useStyles([accordionStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-accordion',\n    version: '0.0.0',\n    children: [AccordionHeader.metadata.tag, AccordionContent.metadata.tag, IconButton.metadata.tag]\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n  #typeExpandableController = new TypeExpandableController(this);\n\n  /**\n   * Enables updating internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /**\n   * Determines the container styles of component. Flat suits nesting accordions within other containers. Inset suits more complex accordions where content needs distinct separation.\n   */\n  @property({ type: String, reflect: true }) container?: Extract<Container, 'flat' | 'inset'>;\n\n  /**\n   * Determines whether the accordion expands to display its contents.\n   */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /**\n   * Determines whether the accordion is expandable\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless)\n   */\n  @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;\n\n  get #header() {\n    return this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=header]')?.assignedElements()[0];\n  }\n\n  #toggle(element: HTMLElement) {\n    if (!this.disabled && (!isFocusable(element) || element.id === 'internal-trigger')) {\n      this.#typeExpandableController.toggle();\n    }\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <div id=\"header\"\n          @click=${(e: Event) => this.#toggle(e.target as HTMLElement)}\n          .ariaLabel=${this.expanded ? this.i18n.close : this.i18n.expand}\n          .ariaControls=${'content'}\n          >\n          <slot name=\"header\"></slot>\n\n          <slot name=\"icon-button\">\n            <nve-icon-button part=\"icon-button\"\n            exportparts=\"icon:icon-button-icon\"\n              id=\"internal-trigger\"\n              container=\"inline\"\n              icon-name=\"caret\"\n              direction=${this.expanded ? 'up' : 'down'}\n              ?disabled=${this.disabled}\n              ?pressed=${this.expanded}\n              .expanded=${this.expanded}\n              .ariaLabel=${this.expanded ? this.i18n.close : this.i18n.expand}\n            ></nve-icon-button>\n          </slot>\n        </div>\n\n        <div id=\"content\" .ariaHidden=${!this.expanded}>\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'region';\n  }\n\n  async firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n\n    if (this.#header) {\n      this.#header.id ||= generateId();\n      this.setAttribute('aria-labelledby', this.#header.id);\n    }\n  }\n}\n\n/**\n * @element nve-accordion-group\n * @description Organizes many accordions into a cohesive group, enabling coordinated expand/collapse behavior such as single-item expansion.\n * @documentation https://nvidia.github.io/elements/docs/elements/accordion/\n * @since 0.12.0\n * @entrypoint \\@nvidia-elements/core/accordion\n * @cssprop --padding\n * @slot - This is a default slot for accordions within the group\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/\n */\n@audit()\nexport class AccordionGroup extends LitElement {\n  declare _internals: ElementInternals;\n  static styles = useStyles([accordionGroupStyleSheet]);\n\n  /**\n   * Determines whether the accordion should opt-in to stateful expansion behavior (defaults to stateless)\n   */\n  @property({ type: Boolean, attribute: 'behavior-expand' }) behaviorExpand = false;\n\n  /**\n   * Determines whether the accordion should opt-in to stateful expansion of a single accordion at a time\n   */\n  @property({ type: Boolean, attribute: 'behavior-expand-single' }) behaviorExpandSingle = false;\n\n  /**\n   * Controls the container style applied to child accordions. `flat` removes the visual container, `inset` adds rounded containment, and omission uses the default divided presentation.\n   */\n  @property({ type: String, reflect: true }) container?: Extract<Container, 'flat' | 'inset'>;\n\n  static readonly metadata = {\n    tag: 'nve-accordion-group',\n    version: '0.0.0',\n    children: [Accordion.metadata.tag]\n  };\n\n  @queryAssignedElements() private accordions!: Accordion[];\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${() => this.#updateChildAttributes()}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n    this.addEventListener('open', this.#onOpen);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('open', this.#onOpen);\n  }\n\n  #onOpen = (e: Event) => {\n    if (this.behaviorExpandSingle && this.accordions.find(accordion => accordion === e.target)) {\n      this.accordions.filter(accordion => accordion !== e.target).forEach(accordion => (accordion.expanded = false));\n    }\n  };\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this.#updateChildAttributes();\n  }\n\n  #updateChildAttributes() {\n    this.accordions.forEach(accordion => (accordion.container = this.container));\n    this.accordions.forEach(accordion => (accordion.behaviorExpand = this.behaviorExpand || this.behaviorExpandSingle));\n  }\n}\n"],"mappings":"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"}

package/dist/alert/alert-group2.js

@@ -1,7 +1,7 @@
 import { audit as e } from "../internal/controllers/audit.controller.js";
 import { attachInternals as t } from "../internal/utils/a11y.js";
 import { colorStateStyles as n, supportStateStyles as r, useStyles as i } from "../internal/styles/index.js";
-import a from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import a from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { Alert as o } from "./alert2.js";
 import s from "./alert-group.js";
 import { LitElement as c, html as l } from "lit";
@@ -19,7 +19,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-alert-group",
-			version: "2.7.3",
+			version: "2.8.1",
 			children: [o.metadata.tag]
 		};
 	}

package/dist/alert/alert-group2.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-group2.js","names":["#updateStatus"],"sources":["../../src/alert/alert-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { property } from 'lit/decorators/property.js';\nimport type { Color, Container, Prominence, SupportStatus } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  useStyles,\n  supportStateStyles,\n  audit,\n  colorStateStyles\n} from '@nvidia-elements/core/internal';\nimport { Alert } from './alert.js';\nimport styles from './alert-group.css?inline';\n\n/**\n * @element nve-alert-group\n * @description An alert group is an element that displays a group of related and important messages in a way that attracts the user's attention without interrupting the user's task.\n * @documentation https://nvidia.github.io/elements/docs/elements/alert/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/alert\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --background\n * @slot - default slot for nve-alert\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n */\n@audit()\nexport class AlertGroup extends LitElement {\n  static styles = useStyles([styles, supportStateStyles, colorStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-alert-group',\n    version: '0.0.0',\n    children: [Alert.metadata.tag]\n  };\n\n  /** Defines visual treatment to represent a ongoing task or support status. */\n  @property({ type: String, reflect: true }) status?: SupportStatus;\n\n  /** Determines the visual prominence or weight, emphasis applies banner style alerts */\n  @property({ type: String, reflect: true }) prominence?: Extract<Prominence, 'emphasis'>;\n\n  /** Allows colors not defined by semantic status definitions for non-status instances, such as callouts for tutorials or tips on a documentation site. */\n  @property({ type: String, reflect: true }) color: Color;\n\n  /** Determines the container bounds of the element */\n  @property({ type: String, reflect: true }) container?: Extract<Container, 'full'>;\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  @queryAssignedElements() private alerts!: Alert[];\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${() => this.#updateStatus()}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this.#updateStatus();\n  }\n\n  #updateStatus() {\n    this.alerts.forEach(alert => (alert.status = this.status));\n  }\n}\n"],"mappings":";;;;;;;;;;AAmCO,IAAA,IAAA,cAAyB,EAAW;;gBACzB,EAAU;GAAC;GAAQ;GAAoB;EAAgB,CAAC;;;kBAE7C;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,EAAM,SAAS,GAAG;EAC/B;;CAmBA,SAAS;EACP,OAAO,CAAI,+CAEmB,KAAKA,GAAc,EAAE;CAGrD;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAKA,GAAc;CACrB;CAEA,KAAgB;EACd,KAAK,OAAO,SAAQ,MAAU,EAAM,SAAS,KAAK,MAAO;CAC3D;AACF;GAtCG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAKxC,EAAsB,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,UAzBxB,EAAM,CAAA,GAAA,CAAA"}
+{"version":3,"file":"alert-group2.js","names":[],"sources":["../../src/alert/alert-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { property } from 'lit/decorators/property.js';\nimport type { Color, Container, Prominence, SupportStatus } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  useStyles,\n  supportStateStyles,\n  audit,\n  colorStateStyles\n} from '@nvidia-elements/core/internal';\nimport { Alert } from './alert.js';\nimport styles from './alert-group.css?inline';\n\n/**\n * @element nve-alert-group\n * @description An alert group is an element that displays a group of related and important messages in a way that attracts the user's attention without interrupting the user's task.\n * @documentation https://nvidia.github.io/elements/docs/elements/alert/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/alert\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --background\n * @slot - default slot for nve-alert\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n */\n@audit()\nexport class AlertGroup extends LitElement {\n  static styles = useStyles([styles, supportStateStyles, colorStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-alert-group',\n    version: '0.0.0',\n    children: [Alert.metadata.tag]\n  };\n\n  /** Defines visual treatment to represent a ongoing task or support status. */\n  @property({ type: String, reflect: true }) status?: SupportStatus;\n\n  /** Determines the visual prominence or weight, emphasis applies banner style alerts */\n  @property({ type: String, reflect: true }) prominence?: Extract<Prominence, 'emphasis'>;\n\n  /** Allows colors not defined by semantic status definitions for non-status instances, such as callouts for tutorials or tips on a documentation site. */\n  @property({ type: String, reflect: true }) color: Color;\n\n  /** Determines the container bounds of the element */\n  @property({ type: String, reflect: true }) container?: Extract<Container, 'full'>;\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  @queryAssignedElements() private alerts!: Alert[];\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${() => this.#updateStatus()}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this.#updateStatus();\n  }\n\n  #updateStatus() {\n    this.alerts.forEach(alert => (alert.status = this.status));\n  }\n}\n"],"mappings":";;;;;;;;;;AAmCO,IAAM,IAAN,cAAyB,EAAW;;EACzB,KAAA,SAAA,EAAU;GAAC;GAAQ;GAAoB;EAAgB,CAAC;;;EAE7C,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,EAAM,SAAS,GAAG;EAC/B;;CAmBA,SAAS;EACP,OAAO,CAAI,+CAEmB,KAAK,GAAc,EAAE;CAGrD;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAK,GAAc;CACrB;CAEA,KAAgB;EACd,KAAK,OAAO,SAAQ,MAAU,EAAM,SAAS,KAAK,MAAO;CAC3D;AACF;AAtCG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAsB,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAzBxB,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}

package/dist/alert/alert.examples.json

@@ -54,7 +54,7 @@
     {
       "id": "alert-invoker-command",
       "name": "InvokerCommand",
-      "template": "<nve-alert-group>\n  <nve-alert id=\"alert-1\">\n    Alert Notification Message 1\n    <nve-icon-button\n      commandfor=\"alert-1\"\n      command=\"--close\"\n      slot=\"actions\"\n      container=\"flat\"\n      icon-name=\"cancel\"\n      size=\"sm\"\n      aria-label=\"close\"\n    ></nve-icon-button>\n  </nve-alert>\n  <nve-alert id=\"alert-2\">\n    Alert Notification Message 2\n    <nve-icon-button\n      commandfor=\"alert-2\"\n      command=\"--close\"\n      slot=\"actions\"\n      container=\"flat\"\n      icon-name=\"cancel\"\n      size=\"sm\"\n      aria-label=\"close\"\n    ></nve-icon-button>\n  </nve-alert>\n</nve-alert-group>\n",
+      "template": "<nve-alert-group>\n  <nve-alert id=\"alert-1\">\n    Alert Notification Message 1\n    <nve-icon-button commandfor=\"alert-1\" command=\"--close\" slot=\"actions\" container=\"flat\" icon-name=\"cancel\" size=\"sm\" aria-label=\"close\"></nve-icon-button>\n  </nve-alert>\n  <nve-alert id=\"alert-2\">\n    Alert Notification Message 2\n    <nve-icon-button commandfor=\"alert-2\" command=\"--close\" slot=\"actions\" container=\"flat\" icon-name=\"cancel\" size=\"sm\" aria-label=\"close\"></nve-icon-button>\n  </nve-alert>\n</nve-alert-group>\n",
       "summary": "Dismissible alerts using the Invoker Command API for declarative close behavior. Use `commandfor` and `command=\"--close\"` on action buttons to dismiss individual alerts without custom JavaScript event handling.",
       "description": "",
       "composition": false,
@@ -81,7 +81,7 @@
     {
       "id": "alert-prominence",
       "name": "Prominence",
-      "template": "<nve-page document-scroll>\n  <nve-alert-group slot=\"header\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Standard</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"accent\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Accent</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"warning\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Warning</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"success\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Success</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"danger\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Danger</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n</nve-page>\n",
+      "template": "<nve-page document-scroll>\n  <nve-alert-group slot=\"header\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable><span slot=\"prefix\">Standard</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"accent\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable><span slot=\"prefix\">Accent</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"warning\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable><span slot=\"prefix\">Warning</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"success\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable><span slot=\"prefix\">Success</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"danger\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable><span slot=\"prefix\">Danger</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert>\n  </nve-alert-group>\n</nve-page>\n",
       "summary": "High-prominence alerts with emphasis styling for full-width banners. Use prominence=\"emphasis\" for system-wide announcements like maintenance windows, feature launches, or critical security updates that need max visibility and impact across the entire interface.",
       "description": "",
       "composition": false,
@@ -110,7 +110,7 @@
     {
       "id": "alert-custom-color-combinations",
       "name": "CustomColorCombinations",
-      "template": "<div nve-layout=\"column gap:md\">\n  <nve-alert-group color=\"blue-indigo\">\n    <nve-alert closable\n      >Custom <code nve-text=\"code\">color</code> will theme the <code nve-text=\"code\">closable</code> icon.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"teal-seafoam\">\n    <nve-alert>\n      Custom <code nve-text=\"code\">color</code> is compatible with <code nve-text=\"code\">actions</code> button.\n      <nve-button slot=\"actions\" container=\"flat\">action</nve-button>\n    </nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"accent\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields\n      the status icon with custom alert color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"success\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields\n      the status icon with custom alert color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"warning\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields\n      the status icon with custom alert color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"danger\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields\n      the status icon with custom alert color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"accent\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and\n      <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom alert\n      color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"success\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and\n      <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom alert\n      color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"warning\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and\n      <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom alert\n      color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"danger\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and\n      <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom alert\n      color.</nve-alert\n    >\n  </nve-alert-group>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:md\">\n  <nve-alert-group color=\"blue-indigo\">\n    <nve-alert closable>Custom <code nve-text=\"code\">color</code> will theme the <code nve-text=\"code\">closable</code> icon.</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"teal-seafoam\">\n    <nve-alert>\n      Custom <code nve-text=\"code\">color</code> is compatible with <code nve-text=\"code\">actions</code> button.\n      <nve-button slot=\"actions\" container=\"flat\">action</nve-button>\n    </nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"accent\">\n    <nve-alert>Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields the status icon with custom alert color.</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"success\">\n    <nve-alert>Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields the status icon with custom alert color.</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"warning\">\n    <nve-alert>Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields the status icon with custom alert color.</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"danger\">\n    <nve-alert>Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields the status icon with custom alert color.</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"accent\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom\n      alert color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"success\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom\n      alert color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"warning\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom\n      alert color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"danger\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom\n      alert color.</nve-alert\n    >\n  </nve-alert-group>\n</div>\n",
       "summary": "Custom color combinations with status icons and prominence for advanced theming. Custom colors interact with status icons and emphasis styling, useful for maintaining brand consistency while preserving semantic meaning through status indicators.",
       "description": "",
       "composition": false,

package/dist/alert/alert2.js

@@ -5,7 +5,7 @@ import { TypeClosableController as r } from "../internal/controllers/type-closab
 import { scopedRegistry as i } from "../internal/decorators/scoped-registry.js";
 import { statusStateStyles as a, supportStateStyles as o, useStyles as s } from "../internal/styles/index.js";
 import { statusIcons as c } from "../internal/types/index.js";
-import l from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import l from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { Icon as u } from "../icon/icon2.js";
 import { IconButton as d } from "../icon-button/icon-button2.js";
 import f from "./alert.global.js";
@@ -28,7 +28,7 @@ var v = class extends m {
 	static {
 		this.metadata = {
 			tag: "nve-alert",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	static {

package/dist/alert/alert2.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert2.js","names":["#i18nController","#typeClosableController"],"sources":["../../src/alert/alert.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { SupportStatus, TaskStatus } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  I18nController,\n  statusIcons,\n  TypeClosableController,\n  useStyles,\n  statusStateStyles,\n  supportStateStyles,\n  appendRootNodeStyle,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport globalStyles from './alert.global.css?inline';\nimport styles from './alert.css?inline';\n\n/**\n * @element nve-alert\n * @description Alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.\n * @documentation https://nvidia.github.io/elements/docs/elements/alert/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/alert\n * @event close - Dispatched when the alert closes within an alert group.\n * @command --close - Use to set the alert closed/hidden state.\n * @slot icon - Icon slot renders on the left side of the alert. Icons typically represent the alert's status.\n * @slot prefix - Prefix slot renders between the icon and the content. Prefixes typically represent the alert's status.\n * @slot actions - Actions render on the right side of the alert. Actions are typically buttons, but can also be links. Use actions for steps the user can take to resolve the alert.\n * @slot content - Content for large overflow text.\n * @slot - Default content placed inside of the alert.\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --color\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --font-weight\n * @cssprop --justify-content\n * @cssprop --align-items\n * @cssprop --min-height\n * @cssprop --text-transform\n * @cssprop --height\n * @cssprop --width\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n */\n@scopedRegistry()\nexport class Alert extends LitElement {\n  static styles = useStyles([styles, statusStateStyles, supportStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-alert',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon,\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /** Defines visual treatment to represent a ongoing task or support status. */\n  @property({ type: String, reflect: true }) status?: SupportStatus | TaskStatus | 'muted';\n\n  /** When used in an `alert-group` the `closable` property enables dismissing alerts within the same group. */\n  @property({ type: Boolean }) closable = false;\n\n  #typeClosableController = new TypeClosableController(this);\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Enables updating internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  @queryAssignedElements({ slot: 'prefix', flatten: true }) private prefixItems!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'actions', flatten: true }) private actionItems!: HTMLElement[];\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host @slotchange=${() => this.requestUpdate()}>\n        <slot name=\"icon\"><nve-icon part=\"icon\" role=\"img\" .name=${statusIcons[this.status as string] ?? statusIcons['']} aria-label=${(this.status ? (this.i18n as Record<string, string>)[this.status] : undefined) ?? this.i18n.information ?? 'information'}></nve-icon></slot>\n        <slot name=\"prefix\" ?hidden=${!this.prefixItems.length}></slot>\n        <slot></slot>\n        <slot name=\"actions\" ?hidden=${!this.actionItems.length}></slot>\n        ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${() => this.#typeClosableController.close()} container=\"flat\" icon-name=\"cancel\" size=\"sm\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n      </div>\n      <slot name=\"content\" part=\"_content\"></slot>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    appendRootNodeStyle(this, globalStyles);\n    this._internals.role = 'alert';\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAmDO,IAAA,IAAA,cAAoB,EAAW;;+BAiBI,cAEd,IAAI,EAAuB,IAAI,aAEjB,IAAI,EAAqB,IAAI,eAGlC,KAAKA,GAAgB;;;gBAvBxC,EAAU;GAAC;GAAQ;GAAmB;EAAkB,CAAC;;;kBAE9C;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B;IACzB,EAAK,SAAS,MAAM;IACpB,EAAW,SAAS,MAAM;EAC7B;;CAQA;CAEA;CAYA,SAAS;EACP,OAAO,CAAI,yCAC8B,KAAK,cAAc,EAAE,8DACC,EAAY,KAAK,WAAqB,EAAY,IAAI,iBAAe,KAAK,SAAU,KAAK,KAAgC,KAAK,UAAU,KAAA,MAAc,KAAK,KAAK,eAAe,cAAc,mDAC1N,CAAC,KAAK,YAAY,OAAO,sDAExB,CAAC,KAAK,YAAY,OAAO,WACtD,KAAK,WAAW,CAAI,yFAAwF,KAAKC,GAAwB,MAAM,EAAE,8DAA4D,KAAK,KAAK,MAAM,wBAAuB,GAAG;CAI/P;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,EAAoB,MAAM,CAAY,GACtC,KAAK,WAAW,OAAO;CACzB;AACF;GAtCG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAGxC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAO1B,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAEzB,EAAsB;CAAE,MAAM;CAAU,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,MAEvD,EAAsB;CAAE,MAAM;CAAW,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,UA7B1D,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"alert2.js","names":[],"sources":["../../src/alert/alert.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { SupportStatus, TaskStatus } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  I18nController,\n  statusIcons,\n  TypeClosableController,\n  useStyles,\n  statusStateStyles,\n  supportStateStyles,\n  appendRootNodeStyle,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport globalStyles from './alert.global.css?inline';\nimport styles from './alert.css?inline';\n\n/**\n * @element nve-alert\n * @description Alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.\n * @documentation https://nvidia.github.io/elements/docs/elements/alert/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/alert\n * @event close - Dispatched when the alert closes within an alert group.\n * @command --close - Use to set the alert closed/hidden state.\n * @slot icon - Icon slot renders on the left side of the alert. Icons typically represent the alert's status.\n * @slot prefix - Prefix slot renders between the icon and the content. Prefixes typically represent the alert's status.\n * @slot actions - Actions render on the right side of the alert. Actions are typically buttons, but can also be links. Use actions for steps the user can take to resolve the alert.\n * @slot content - Content for large overflow text.\n * @slot - Default content placed inside of the alert.\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --color\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --font-weight\n * @cssprop --justify-content\n * @cssprop --align-items\n * @cssprop --min-height\n * @cssprop --text-transform\n * @cssprop --height\n * @cssprop --width\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n */\n@scopedRegistry()\nexport class Alert extends LitElement {\n  static styles = useStyles([styles, statusStateStyles, supportStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-alert',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon,\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /** Defines visual treatment to represent a ongoing task or support status. */\n  @property({ type: String, reflect: true }) status?: SupportStatus | TaskStatus | 'muted';\n\n  /** When used in an `alert-group` the `closable` property enables dismissing alerts within the same group. */\n  @property({ type: Boolean }) closable = false;\n\n  #typeClosableController = new TypeClosableController(this);\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Enables updating internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  @queryAssignedElements({ slot: 'prefix', flatten: true }) private prefixItems!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'actions', flatten: true }) private actionItems!: HTMLElement[];\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host @slotchange=${() => this.requestUpdate()}>\n        <slot name=\"icon\"><nve-icon part=\"icon\" role=\"img\" .name=${statusIcons[this.status as string] ?? statusIcons['']} aria-label=${(this.status ? (this.i18n as Record<string, string>)[this.status] : undefined) ?? this.i18n.information ?? 'information'}></nve-icon></slot>\n        <slot name=\"prefix\" ?hidden=${!this.prefixItems.length}></slot>\n        <slot></slot>\n        <slot name=\"actions\" ?hidden=${!this.actionItems.length}></slot>\n        ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${() => this.#typeClosableController.close()} container=\"flat\" icon-name=\"cancel\" size=\"sm\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n      </div>\n      <slot name=\"content\" part=\"_content\"></slot>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    appendRootNodeStyle(this, globalStyles);\n    this._internals.role = 'alert';\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAmDO,IAAM,IAAN,cAAoB,EAAW;;EAwBD,aAPK,KAAA,WAAA,IAEd,KAAA,KAAA,IAAI,EAAuB,IAAI,GAEjB,KAAA,KAAA,IAAI,EAAqB,IAAI,GAGlC,KAAA,OAAA,KAAK,GAAgB;;;EAvBxC,KAAA,SAAA,EAAU;GAAC;GAAQ;GAAmB;EAAkB,CAAC;;;EAE9C,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA;IACzB,EAAK,SAAS,MAAM;IACpB,EAAW,SAAS,MAAM;EAC7B;;CAQA;CAEA;CAYA,SAAS;EACP,OAAO,CAAI,yCAC8B,KAAK,cAAc,EAAE,8DACC,EAAY,KAAK,WAAqB,EAAY,IAAI,iBAAe,KAAK,SAAU,KAAK,KAAgC,KAAK,UAAU,KAAA,MAAc,KAAK,KAAK,eAAe,cAAc,mDAC1N,CAAC,KAAK,YAAY,OAAO,sDAExB,CAAC,KAAK,YAAY,OAAO,WACtD,KAAK,WAAW,CAAI,yFAAwF,KAAK,GAAwB,MAAM,EAAE,8DAA4D,KAAK,KAAK,MAAM,wBAAuB,GAAG;CAI/P;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,EAAoB,MAAM,CAAY,GACtC,KAAK,WAAW,OAAO;CACzB;AACF;AAtCG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAO1B,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAEzB,EAAA,CAAA,EAAsB;CAAE,MAAM;CAAU,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GAEvD,EAAA,CAAA,EAAsB;CAAE,MAAM;CAAW,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GA7B1D,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}

package/dist/avatar/avatar-group2.js

@@ -10,7 +10,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-avatar-group",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	render() {

package/dist/avatar/avatar-group2.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-group2.js","names":[],"sources":["../../src/avatar/avatar-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html } from 'lit';\nimport { useStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport styles from './avatar-group.css?inline';\n\n/**\n * @element nve-avatar-group\n * @description An avatar group displays a collection of user avatars in a compact and organized layout, showcasing many participants or contributors in a space-efficient way.\n * @since 1.20.0\n * @entrypoint \\@nvidia-elements/core/avatar\n * @slot - `nve-avatar` elements that represent the group members.\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n *\n */\nexport class AvatarGroup extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-avatar-group',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n    <div internal-host>\n        <slot></slot>\n    </div>\n  `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n  }\n}\n"],"mappings":";;;;;AAgBA,IAAa,IAAb,cAAiC,EAAW;;gBAC1B,EAAU,CAAC,CAAM,CAAC;;;kBAEP;GACzB,KAAK;GACL,SAAS;EACX;;CAKA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF"}
+{"version":3,"file":"avatar-group2.js","names":[],"sources":["../../src/avatar/avatar-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html } from 'lit';\nimport { useStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport styles from './avatar-group.css?inline';\n\n/**\n * @element nve-avatar-group\n * @description An avatar group displays a collection of user avatars in a compact and organized layout, showcasing many participants or contributors in a space-efficient way.\n * @since 1.20.0\n * @entrypoint \\@nvidia-elements/core/avatar\n * @slot - `nve-avatar` elements that represent the group members.\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n *\n */\nexport class AvatarGroup extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-avatar-group',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n    <div internal-host>\n        <slot></slot>\n    </div>\n  `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n  }\n}\n"],"mappings":";;;;;AAgBA,IAAa,IAAb,cAAiC,EAAW;;EAC1B,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAKA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF"}

package/dist/avatar/avatar2.js

@@ -1,5 +1,5 @@
 import { colorStateStyles as e, useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import r from "./avatar.js";
 import { LitElement as i, html as a } from "lit";
 import { property as o } from "lit/decorators/property.js";
@@ -11,7 +11,7 @@ var s = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-avatar",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	render() {

package/dist/avatar/avatar2.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar2.js","names":[],"sources":["../../src/avatar/avatar.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Size, Color } from '@nvidia-elements/core/internal';\nimport { colorStateStyles } from '@nvidia-elements/core/internal';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport styles from './avatar.css?inline';\n\n/**\n * @element nve-avatar\n * @description Avatar represents a user/bot within a UI. Typically with text or image content.\n * @documentation https://nvidia.github.io/elements/docs/elements/avatar/\n * @since 1.20.0\n * @entrypoint \\@nvidia-elements/core/avatar\n * @slot - Initials, an image, or other content that identifies the represented user or bot.\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --height\n * @cssprop --width\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --border\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n *\n */\nexport class Avatar extends LitElement {\n  static styles = useStyles([styles, colorStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-avatar',\n    version: '0.0.0'\n  };\n\n  /** Sets size of the avatar component. Update size through the `width + height` css props as an alternative. */\n  @property({ type: String, reflect: true }) size?: Size | 'xs';\n\n  /** Sets the color of the avatar component. */\n  @property({ type: String, reflect: true }) color: Color;\n\n  render() {\n    return html`\n    <div internal-host>\n        <slot></slot>\n    </div>\n  `;\n  }\n}\n"],"mappings":";;;;;;AA4BA,IAAa,IAAb,cAA4B,EAAW;;gBACrB,EAAU,CAAC,GAAQ,CAAgB,CAAC;;;kBAEzB;GACzB,KAAK;GACL,SAAS;EACX;;CAQA,SAAS;EACP,OAAO,CAAI;CAKb;AACF;GAZG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAGxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA"}
+{"version":3,"file":"avatar2.js","names":[],"sources":["../../src/avatar/avatar.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { Size, Color } from '@nvidia-elements/core/internal';\nimport { colorStateStyles } from '@nvidia-elements/core/internal';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport styles from './avatar.css?inline';\n\n/**\n * @element nve-avatar\n * @description Avatar represents a user/bot within a UI. Typically with text or image content.\n * @documentation https://nvidia.github.io/elements/docs/elements/avatar/\n * @since 1.20.0\n * @entrypoint \\@nvidia-elements/core/avatar\n * @slot - Initials, an image, or other content that identifies the represented user or bot.\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --height\n * @cssprop --width\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --border\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n *\n */\nexport class Avatar extends LitElement {\n  static styles = useStyles([styles, colorStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-avatar',\n    version: '0.0.0'\n  };\n\n  /** Sets size of the avatar component. Update size through the `width + height` css props as an alternative. */\n  @property({ type: String, reflect: true }) size?: Size | 'xs';\n\n  /** Sets the color of the avatar component. */\n  @property({ type: String, reflect: true }) color: Color;\n\n  render() {\n    return html`\n    <div internal-host>\n        <slot></slot>\n    </div>\n  `;\n  }\n}\n"],"mappings":";;;;;;AA4BA,IAAa,IAAb,cAA4B,EAAW;;EACrB,KAAA,SAAA,EAAU,CAAC,GAAQ,CAAgB,CAAC;;;EAEzB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAQA,SAAS;EACP,OAAO,CAAI;CAKb;AACF;AAZG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA"}

package/dist/badge/badge.examples.json

@@ -99,7 +99,7 @@
     {
       "id": "badge-prominence",
       "name": "Prominence",
-      "template": "<div nve-layout=\"row gap:sm align:wrap\">\n  <nve-badge prominence=\"emphasis\" color=\"red-cardinal\"\n    ><nve-icon name=\"placeholder\"></nve-icon> red-cardinal</nve-badge\n  >\n  <nve-badge prominence=\"emphasis\" color=\"gray-slate\"><nve-icon name=\"placeholder\"></nve-icon> gray-slate</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"gray-denim\"><nve-icon name=\"placeholder\"></nve-icon> gray-denim</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"blue-indigo\"><nve-icon name=\"placeholder\"></nve-icon> blue-indigo</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"blue-cobalt\"><nve-icon name=\"placeholder\"></nve-icon> blue-cobalt</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"blue-sky\"><nve-icon name=\"placeholder\"></nve-icon> blue-sky</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"teal-cyan\"><nve-icon name=\"placeholder\"></nve-icon> teal-cyan</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"green-mint\"><nve-icon name=\"placeholder\"></nve-icon> green-mint</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"teal-seafoam\"\n    ><nve-icon name=\"placeholder\"></nve-icon> teal-seafoam</nve-badge\n  >\n  <nve-badge prominence=\"emphasis\" color=\"green-grass\"><nve-icon name=\"placeholder\"></nve-icon> green-grass</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"yellow-amber\"\n    ><nve-icon name=\"placeholder\"></nve-icon> yellow-amber</nve-badge\n  >\n  <nve-badge prominence=\"emphasis\" color=\"orange-pumpkin\"\n    ><nve-icon name=\"placeholder\"></nve-icon> orange-pumpkin</nve-badge\n  >\n  <nve-badge prominence=\"emphasis\" color=\"red-tomato\"><nve-icon name=\"placeholder\"></nve-icon> red-tomato</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"pink-magenta\"\n    ><nve-icon name=\"placeholder\"></nve-icon> pink-magenta</nve-badge\n  >\n  <nve-badge prominence=\"emphasis\" color=\"purple-plum\"><nve-icon name=\"placeholder\"></nve-icon> purple-plum</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"purple-violet\"\n    ><nve-icon name=\"placeholder\"></nve-icon> purple-violet</nve-badge\n  >\n  <nve-badge prominence=\"emphasis\" color=\"purple-lavender\"\n    ><nve-icon name=\"placeholder\"></nve-icon> purple-lavender</nve-badge\n  >\n  <nve-badge prominence=\"emphasis\" color=\"pink-rose\"><nve-icon name=\"placeholder\"></nve-icon> pink-rose</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"green-jade\"><nve-icon name=\"placeholder\"></nve-icon> green-jade</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"lime-pear\"><nve-icon name=\"placeholder\"></nve-icon> lime-pear</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"yellow-nova\"><nve-icon name=\"placeholder\"></nve-icon> yellow-nova</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"brand-green\"><nve-icon name=\"placeholder\"></nve-icon> brand-green</nve-badge>\n</div>\n",
+      "template": "<div nve-layout=\"row gap:sm align:wrap\">\n  <nve-badge prominence=\"emphasis\" color=\"red-cardinal\"><nve-icon name=\"placeholder\"></nve-icon> red-cardinal</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"gray-slate\"><nve-icon name=\"placeholder\"></nve-icon> gray-slate</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"gray-denim\"><nve-icon name=\"placeholder\"></nve-icon> gray-denim</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"blue-indigo\"><nve-icon name=\"placeholder\"></nve-icon> blue-indigo</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"blue-cobalt\"><nve-icon name=\"placeholder\"></nve-icon> blue-cobalt</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"blue-sky\"><nve-icon name=\"placeholder\"></nve-icon> blue-sky</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"teal-cyan\"><nve-icon name=\"placeholder\"></nve-icon> teal-cyan</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"green-mint\"><nve-icon name=\"placeholder\"></nve-icon> green-mint</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"teal-seafoam\"><nve-icon name=\"placeholder\"></nve-icon> teal-seafoam</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"green-grass\"><nve-icon name=\"placeholder\"></nve-icon> green-grass</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"yellow-amber\"><nve-icon name=\"placeholder\"></nve-icon> yellow-amber</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"orange-pumpkin\"><nve-icon name=\"placeholder\"></nve-icon> orange-pumpkin</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"red-tomato\"><nve-icon name=\"placeholder\"></nve-icon> red-tomato</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"pink-magenta\"><nve-icon name=\"placeholder\"></nve-icon> pink-magenta</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"purple-plum\"><nve-icon name=\"placeholder\"></nve-icon> purple-plum</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"purple-violet\"><nve-icon name=\"placeholder\"></nve-icon> purple-violet</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"purple-lavender\"><nve-icon name=\"placeholder\"></nve-icon> purple-lavender</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"pink-rose\"><nve-icon name=\"placeholder\"></nve-icon> pink-rose</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"green-jade\"><nve-icon name=\"placeholder\"></nve-icon> green-jade</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"lime-pear\"><nve-icon name=\"placeholder\"></nve-icon> lime-pear</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"yellow-nova\"><nve-icon name=\"placeholder\"></nve-icon> yellow-nova</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"brand-green\"><nve-icon name=\"placeholder\"></nve-icon> brand-green</nve-badge>\n</div>\n",
       "summary": "High emphasis badges with custom colors for important or highlighted content. Use for highlighting critical information.",
       "description": "",
       "composition": false,
@@ -108,7 +108,7 @@
     {
       "id": "badge-flat",
       "name": "Flat",
-      "template": "<div nve-layout=\"row gap:sm align:wrap\">\n  <nve-badge container=\"flat\" color=\"red-cardinal\"><nve-icon name=\"placeholder\"></nve-icon> red-cardinal</nve-badge>\n  <nve-badge container=\"flat\" color=\"gray-slate\"><nve-icon name=\"placeholder\"></nve-icon> gray-slate</nve-badge>\n  <nve-badge container=\"flat\" color=\"gray-denim\"><nve-icon name=\"placeholder\"></nve-icon> gray-denim</nve-badge>\n  <nve-badge container=\"flat\" color=\"blue-indigo\"><nve-icon name=\"placeholder\"></nve-icon> blue-indigo</nve-badge>\n  <nve-badge container=\"flat\" color=\"blue-cobalt\"><nve-icon name=\"placeholder\"></nve-icon> blue-cobalt</nve-badge>\n  <nve-badge container=\"flat\" color=\"blue-sky\"><nve-icon name=\"placeholder\"></nve-icon> blue-sky</nve-badge>\n  <nve-badge container=\"flat\" color=\"teal-cyan\"><nve-icon name=\"placeholder\"></nve-icon> teal-cyan</nve-badge>\n  <nve-badge container=\"flat\" color=\"green-mint\"><nve-icon name=\"placeholder\"></nve-icon> green-mint</nve-badge>\n  <nve-badge container=\"flat\" color=\"teal-seafoam\"><nve-icon name=\"placeholder\"></nve-icon> teal-seafoam</nve-badge>\n  <nve-badge container=\"flat\" color=\"green-grass\"><nve-icon name=\"placeholder\"></nve-icon> green-grass</nve-badge>\n  <nve-badge container=\"flat\" color=\"yellow-amber\"><nve-icon name=\"placeholder\"></nve-icon> yellow-amber</nve-badge>\n  <nve-badge container=\"flat\" color=\"orange-pumpkin\"><nve-icon name=\"placeholder\"></nve-icon> orange-pumpkin</nve-badge>\n  <nve-badge container=\"flat\" color=\"red-tomato\"><nve-icon name=\"placeholder\"></nve-icon> red-tomato</nve-badge>\n  <nve-badge container=\"flat\" color=\"pink-magenta\"><nve-icon name=\"placeholder\"></nve-icon> pink-magenta</nve-badge>\n  <nve-badge container=\"flat\" color=\"purple-plum\"><nve-icon name=\"placeholder\"></nve-icon> purple-plum</nve-badge>\n  <nve-badge container=\"flat\" color=\"purple-violet\"><nve-icon name=\"placeholder\"></nve-icon> purple-violet</nve-badge>\n  <nve-badge container=\"flat\" color=\"purple-lavender\"\n    ><nve-icon name=\"placeholder\"></nve-icon> purple-lavender</nve-badge\n  >\n  <nve-badge container=\"flat\" color=\"pink-rose\"><nve-icon name=\"placeholder\"></nve-icon> pink-rose</nve-badge>\n  <nve-badge container=\"flat\" color=\"green-jade\"><nve-icon name=\"placeholder\"></nve-icon> green-jade</nve-badge>\n  <nve-badge container=\"flat\" color=\"lime-pear\"><nve-icon name=\"placeholder\"></nve-icon> lime-pear</nve-badge>\n  <nve-badge container=\"flat\" color=\"yellow-nova\"><nve-icon name=\"placeholder\"></nve-icon> yellow-nova</nve-badge>\n  <nve-badge container=\"flat\" color=\"brand-green\"><nve-icon name=\"placeholder\"></nve-icon> brand-green</nve-badge>\n</div>\n",
+      "template": "<div nve-layout=\"row gap:sm align:wrap\">\n  <nve-badge container=\"flat\" color=\"red-cardinal\"><nve-icon name=\"placeholder\"></nve-icon> red-cardinal</nve-badge>\n  <nve-badge container=\"flat\" color=\"gray-slate\"><nve-icon name=\"placeholder\"></nve-icon> gray-slate</nve-badge>\n  <nve-badge container=\"flat\" color=\"gray-denim\"><nve-icon name=\"placeholder\"></nve-icon> gray-denim</nve-badge>\n  <nve-badge container=\"flat\" color=\"blue-indigo\"><nve-icon name=\"placeholder\"></nve-icon> blue-indigo</nve-badge>\n  <nve-badge container=\"flat\" color=\"blue-cobalt\"><nve-icon name=\"placeholder\"></nve-icon> blue-cobalt</nve-badge>\n  <nve-badge container=\"flat\" color=\"blue-sky\"><nve-icon name=\"placeholder\"></nve-icon> blue-sky</nve-badge>\n  <nve-badge container=\"flat\" color=\"teal-cyan\"><nve-icon name=\"placeholder\"></nve-icon> teal-cyan</nve-badge>\n  <nve-badge container=\"flat\" color=\"green-mint\"><nve-icon name=\"placeholder\"></nve-icon> green-mint</nve-badge>\n  <nve-badge container=\"flat\" color=\"teal-seafoam\"><nve-icon name=\"placeholder\"></nve-icon> teal-seafoam</nve-badge>\n  <nve-badge container=\"flat\" color=\"green-grass\"><nve-icon name=\"placeholder\"></nve-icon> green-grass</nve-badge>\n  <nve-badge container=\"flat\" color=\"yellow-amber\"><nve-icon name=\"placeholder\"></nve-icon> yellow-amber</nve-badge>\n  <nve-badge container=\"flat\" color=\"orange-pumpkin\"><nve-icon name=\"placeholder\"></nve-icon> orange-pumpkin</nve-badge>\n  <nve-badge container=\"flat\" color=\"red-tomato\"><nve-icon name=\"placeholder\"></nve-icon> red-tomato</nve-badge>\n  <nve-badge container=\"flat\" color=\"pink-magenta\"><nve-icon name=\"placeholder\"></nve-icon> pink-magenta</nve-badge>\n  <nve-badge container=\"flat\" color=\"purple-plum\"><nve-icon name=\"placeholder\"></nve-icon> purple-plum</nve-badge>\n  <nve-badge container=\"flat\" color=\"purple-violet\"><nve-icon name=\"placeholder\"></nve-icon> purple-violet</nve-badge>\n  <nve-badge container=\"flat\" color=\"purple-lavender\"><nve-icon name=\"placeholder\"></nve-icon> purple-lavender</nve-badge>\n  <nve-badge container=\"flat\" color=\"pink-rose\"><nve-icon name=\"placeholder\"></nve-icon> pink-rose</nve-badge>\n  <nve-badge container=\"flat\" color=\"green-jade\"><nve-icon name=\"placeholder\"></nve-icon> green-jade</nve-badge>\n  <nve-badge container=\"flat\" color=\"lime-pear\"><nve-icon name=\"placeholder\"></nve-icon> lime-pear</nve-badge>\n  <nve-badge container=\"flat\" color=\"yellow-nova\"><nve-icon name=\"placeholder\"></nve-icon> yellow-nova</nve-badge>\n  <nve-badge container=\"flat\" color=\"brand-green\"><nve-icon name=\"placeholder\"></nve-icon> brand-green</nve-badge>\n</div>\n",
       "summary": "Flat container badges with custom colors for a minimal, borderless appearance. Ideal for subtle categorization or when you want to reduce visual noise.",
       "description": "",
       "composition": false,

package/dist/badge/badge2.js

@@ -4,7 +4,7 @@ import { typeSSR as n } from "../internal/controllers/type-ssr.controller.js";
 import { scopedRegistry as r } from "../internal/decorators/scoped-registry.js";
 import { colorStateStyles as i, statusStateStyles as a, supportStateStyles as o, useStyles as s } from "../internal/styles/index.js";
 import { statusIcons as c } from "../internal/types/index.js";
-import l from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import l from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
 import { Icon as u } from "../icon/icon2.js";
 import d from "./badge.js";
 import { LitElement as f, html as p, nothing as m } from "lit";
@@ -25,7 +25,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-badge",
-			version: "2.7.3"
+			version: "2.8.1"
 		};
 	}
 	static {