@nvidia-elements/core 2.20.1 → 2.20.3

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [2.20.3](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v2.20.2...@nvidia-elements/core-v2.20.3) (2026-11-03)
+
+### Bug Fixes
+
+* **core:** refresh menu tab order when items change ([024ff58](https://github.com/NVIDIA/elements/commit/024ff582b0d01ec8f63c629922bbf77d8e72c989))
+
+## [2.20.2](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v2.20.1...@nvidia-elements/core-v2.20.2) (2026-11-02)
+
+### Bug Fixes
+
+* **cli:** update notice ([21a6510](https://github.com/NVIDIA/elements/commit/21a6510164469615358937cdf833edc05bfa9cb8))
+* **core:** correct gesture termination handling ([0aab542](https://github.com/NVIDIA/elements/commit/0aab542b206b25933d921416a62f8a70c44b2723))
+* **core:** iframe separate theme script and resize handling ([9391e0b](https://github.com/NVIDIA/elements/commit/9391e0beffe1751d80c2cb8da981e20906fb48a9))
+* **markdown:** update notice ([1315538](https://github.com/NVIDIA/elements/commit/1315538849bc452a321c3043411fd5e555025e75))
+* **pi:** update notice ([561c535](https://github.com/NVIDIA/elements/commit/561c535744d599f26fb2692f00b089ed8eac74ef))
+
 ## [2.20.1](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v2.20.0...@nvidia-elements/core-v2.20.1) (2026-11-02)
 
 ### Bug Fixes

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

@@ -1,9 +1,8 @@
-//#region \0@oxc-project+runtime@0.147.0/helpers/esm/decorate.js
+// \0@oxc-project+runtime@0.155.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);
 	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
 	return i > 3 && a && Object.defineProperty(t, n, a), a;
 }
-//#endregion
 export { e as default };

package/dist/_virtual/_rolldown/runtime.js

@@ -1,4 +1,4 @@
-//#region \0rolldown/runtime.js
+// \0rolldown/runtime.js
 var e = Object.defineProperty, t = Object.getOwnPropertyDescriptor, n = Object.getOwnPropertyNames, r = Object.prototype.hasOwnProperty, i = (t, n) => {
 	let r = {};
 	for (var i in t) e(r, i, {
@@ -13,5 +13,4 @@ var e = Object.defineProperty, t = Object.getOwnPropertyDescriptor, n = Object.g
 	});
 	return i;
 }, o = (e, t, n) => (a(e, t, "default"), n && a(n, t, "default"));
-//#endregion
 export { i as __exportAll, o as __reExport };

package/dist/accordion/accordion-content.js

@@ -1,6 +1,5 @@
-//#region src/accordion/accordion-content.css?inline
+// src/accordion/accordion-content.css?inline
 var e = ":host{--padding: var(--nve-ref-size-300) var(--nve-ref-size-400);padding:var(--padding);color:var(--color);font-weight:var(--nve-ref-font-weight-regular);font-size:var(--nve-ref-font-size-200);flex-grow:1;contain:none}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=accordion-content.js.map

package/dist/accordion/accordion-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-content.js","names":[],"sources":["../../src/accordion/accordion-content.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: var(--nve-ref-size-300) var(--nve-ref-size-400);\n  padding: var(--padding);\n  color: var(--color);\n  font-weight: var(--nve-ref-font-weight-regular);\n  font-size: var(--nve-ref-font-size-200);\n  flex-grow: 1;\n  contain: none;\n}\n"],"mappings":""}
+{"version":3,"file":"accordion-content.js","names":["accordion_content_default"],"sources":["../../src/accordion/accordion-content.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: var(--nve-ref-size-300) var(--nve-ref-size-400);\n  padding: var(--padding);\n  color: var(--color);\n  font-weight: var(--nve-ref-font-weight-regular);\n  font-size: var(--nve-ref-font-size-200);\n  flex-grow: 1;\n  contain: none;\n}\n"],"mappings":""}

package/dist/accordion/accordion-group.js

@@ -1,6 +1,5 @@
-//#region src/accordion/accordion-group.css?inline
+// src/accordion/accordion-group.css?inline
 var e = ":host{--padding: var(--nve-ref-size-400) var(--nve-ref-size-500) var(--nve-ref-size-500);width:100%;width:stretch}[internal-host]{display:flex;flex-direction:column}:host([container=\"flat\"]) [internal-host]{gap:var(--nve-ref-space-xxxs)}:host([container=\"inset\"]) [internal-host]{gap:var(--nve-ref-space-md)}:host(:not([container])) ::slotted(nve-accordion:not(:last-child)){border-bottom:var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted)}:host([container=\"full\"]) ::slotted(nve-accordion:not(:last-child)){border-bottom:var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=accordion-group.js.map

package/dist/accordion/accordion-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-group.js","names":[],"sources":["../../src/accordion/accordion-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: var(--nve-ref-size-400) var(--nve-ref-size-500) var(--nve-ref-size-500);\n  width: 100%; /* fallback safari */\n  width: stretch;\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: column;\n}\n\n:host([container='flat']) [internal-host] {\n  gap: var(--nve-ref-space-xxxs);\n}\n\n:host([container='inset']) [internal-host] {\n  gap: var(--nve-ref-space-md);\n}\n\n:host(:not([container])) ::slotted(nve-accordion:not(:last-child)) {\n  border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n}\n\n:host([container='full']) ::slotted(nve-accordion:not(:last-child)) {\n  border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n}\n"],"mappings":""}
+{"version":3,"file":"accordion-group.js","names":["accordion_group_default"],"sources":["../../src/accordion/accordion-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: var(--nve-ref-size-400) var(--nve-ref-size-500) var(--nve-ref-size-500);\n  width: 100%; /* fallback safari */\n  width: stretch;\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: column;\n}\n\n:host([container='flat']) [internal-host] {\n  gap: var(--nve-ref-space-xxxs);\n}\n\n:host([container='inset']) [internal-host] {\n  gap: var(--nve-ref-space-md);\n}\n\n:host(:not([container])) ::slotted(nve-accordion:not(:last-child)) {\n  border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n}\n\n:host([container='full']) ::slotted(nve-accordion:not(:last-child)) {\n  border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n}\n"],"mappings":""}

package/dist/accordion/accordion-header.js

@@ -1,6 +1,5 @@
-//#region src/accordion/accordion-header.css?inline
+// src/accordion/accordion-header.css?inline
 var e = ":host{width:100%;--cursor: pointer}[internal-host]{cursor:var(--cursor);color:var(--color);display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:var(--nve-ref-space-xs)}slot:not([name]){display:block;flex:1}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=accordion-header.js.map

package/dist/accordion/accordion-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-header.js","names":[],"sources":["../../src/accordion/accordion-header.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  width: 100%;\n  --cursor: pointer;\n}\n\n[internal-host] {\n  cursor: var(--cursor);\n  color: var(--color);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--nve-ref-space-xs);\n}\n\nslot:not([name]) {\n  display: block;\n  flex: 1;\n}\n"],"mappings":""}
+{"version":3,"file":"accordion-header.js","names":["accordion_header_default"],"sources":["../../src/accordion/accordion-header.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  width: 100%;\n  --cursor: pointer;\n}\n\n[internal-host] {\n  cursor: var(--cursor);\n  color: var(--color);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--nve-ref-space-xs);\n}\n\nslot:not([name]) {\n  display: block;\n  flex: 1;\n}\n"],"mappings":""}

package/dist/accordion/accordion.examples.js

@@ -1,6 +1,5 @@
-//#region src/accordion/accordion.examples.ts
+// src/accordion/accordion.examples.ts
 var e = "";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=accordion.examples.js.map

package/dist/accordion/accordion.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.examples.js","names":[],"sources":["../../src/accordion/accordion.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/accordion/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\nimport '@nvidia-elements/core/button/define.js';\n\nexport default {\n  title: 'Elements/Accordion',\n  component: 'nve-accordion',\n};\n\n/**\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.\n */\nexport const Default = {\n  render: () => html`\n<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  `\n};\n\n/**\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.\n */\nexport const Disabled = {\n  render: () => html`\n<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  `\n};\n\n\n/**\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.\n */\nexport const Container = {\n  render: () => html`\n<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  `\n};\n\n/**\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.\n * @tags test-case\n */\nexport const Animated = {\n  render: () => html`\n    <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  `\n};\n\n/**\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.\n */\nexport const BehaviorExpandSingle = {\n  render: () => html`\n<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  `\n};\n\n/**\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).\n * @tags test-case\n */\nexport const CustomIconButton = {\n  render: () => html`\n<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\n  function toggle() {\n    accordion.expanded = !accordion.expanded;\n    iconButton.iconName = accordion.expanded ? 'minus' : 'add';\n  }\n</script>\n  `\n};\n\n/**\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.\n */\nexport const WithActions = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Accordion with nested interactive elements like tooltips and popovers. Ensures proper event handling when accordion content contains interactive components, preventing unintended state changes and maintaining smooth user interactions.\n * @tags test-case\n */\nexport const NestedOpenEvent = {\n  render: () => html`\n    <nve-accordion-group behavior-expand-single>\n      <nve-accordion>\n        <nve-accordion-header>Details</nve-accordion-header>\n        <nve-accordion-content>\n          <nve-tooltip id=\"tooltip\">tooltip</nve-tooltip>\n          <nve-button popovertarget=\"tooltip\">button</nve-button>\n        </nve-accordion-content>\n      </nve-accordion>\n    </nve-accordion-group>\n  `\n};\n\n/**\n * @summary Basic accordion component for collapsible content sections with expand/collapse functionality.\n * @tags test-case\n */\nexport const Single = {\n  render: () => html`\n<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  `\n};\n\n/**\n * @summary Brings together many accordion components for embedded multi-section content organization.\n * @tags test-case\n */\nexport const Multiple = {\n  render: () => html`\n<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  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"accordion.examples.js","names":["accordion_examples_default"],"sources":["../../src/accordion/accordion.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/accordion/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\nimport '@nvidia-elements/core/button/define.js';\n\nexport default {\n  title: 'Elements/Accordion',\n  component: 'nve-accordion',\n};\n\n/**\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.\n */\nexport const Default = {\n  render: () => html`\n<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  `\n};\n\n/**\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.\n */\nexport const Disabled = {\n  render: () => html`\n<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  `\n};\n\n\n/**\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.\n */\nexport const Container = {\n  render: () => html`\n<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  `\n};\n\n/**\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.\n * @tags test-case\n */\nexport const Animated = {\n  render: () => html`\n    <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  `\n};\n\n/**\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.\n */\nexport const BehaviorExpandSingle = {\n  render: () => html`\n<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  `\n};\n\n/**\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).\n * @tags test-case\n */\nexport const CustomIconButton = {\n  render: () => html`\n<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\n  function toggle() {\n    accordion.expanded = !accordion.expanded;\n    iconButton.iconName = accordion.expanded ? 'minus' : 'add';\n  }\n</script>\n  `\n};\n\n/**\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.\n */\nexport const WithActions = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Accordion with nested interactive elements like tooltips and popovers. Ensures proper event handling when accordion content contains interactive components, preventing unintended state changes and maintaining smooth user interactions.\n * @tags test-case\n */\nexport const NestedOpenEvent = {\n  render: () => html`\n    <nve-accordion-group behavior-expand-single>\n      <nve-accordion>\n        <nve-accordion-header>Details</nve-accordion-header>\n        <nve-accordion-content>\n          <nve-tooltip id=\"tooltip\">tooltip</nve-tooltip>\n          <nve-button popovertarget=\"tooltip\">button</nve-button>\n        </nve-accordion-content>\n      </nve-accordion>\n    </nve-accordion-group>\n  `\n};\n\n/**\n * @summary Basic accordion component for collapsible content sections with expand/collapse functionality.\n * @tags test-case\n */\nexport const Single = {\n  render: () => html`\n<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  `\n};\n\n/**\n * @summary Brings together many accordion components for embedded multi-section content organization.\n * @tags test-case\n */\nexport const Multiple = {\n  render: () => html`\n<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  `\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/accordion/accordion.js

@@ -1,6 +1,5 @@
-//#region src/accordion/accordion.css?inline
+// src/accordion/accordion.css?inline
 var e = ":host{--nve-sys-interaction-background: var(--nve-sys-interaction-background-200);--nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);--background: var(--nve-sys-layer-container-background);--color: var(--nve-sys-layer-canvas-color);--border-radius: 0;--header-padding: var(--nve-ref-size-300) var(--nve-ref-size-400);--cursor: pointer;--transition: height var(--nve-ref-animation-duration-200) ease-in-out;width:100%;width:stretch;contain:none}[internal-host]{border-radius:var(--border-radius);background:var(--background);color:var(--color);overflow:hidden;display:flex;flex-direction:column;align-items:stretch;justify-content:start;height:100%}#header{cursor:var(--cursor);display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:var(--header-padding)}#content{display:block;height:0;transition:var(--transition)}:host(:state(expanded)) #content{height:auto;height:calc-size(max-content,size)}:host([container=\"inset\"]){--border-radius: var(--nve-ref-border-radius-md)}:host([container=\"flat\"]){--background: inherit;--header-padding: var(--nve-ref-size-200) var(--nve-ref-size-400)}:host([container=\"flat\"]) ::slotted(nve-accordion-content){--padding: var(--nve-ref-size-50) var(--nve-ref-size-400) var(--nve-ref-size-300) var(--nve-ref-size-400)}:host([disabled]){--cursor: not-allowed}:host([disabled]) ::slotted(nve-accordion-header){--cursor: not-allowed}:host(:not([disabled])) #header:hover nve-icon-button{--color: var(--nve-sys-text-emphasis-color)}nve-icon-button::part(icon){transition:transform var(--nve-ref-animation-duration-200) cubic-bezier(.4,0,.2,1)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=accordion.js.map

package/dist/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":[],"sources":["../../src/accordion/accordion.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n  --background: var(--nve-sys-layer-container-background);\n  --color: var(--nve-sys-layer-canvas-color);\n  --border-radius: 0;\n  --header-padding: var(--nve-ref-size-300) var(--nve-ref-size-400);\n  --cursor: pointer;\n  --transition: height var(--nve-ref-animation-duration-200) ease-in-out;\n  width: 100%; /* fallback safari */\n  width: stretch;\n  contain: none;\n}\n\n[internal-host] {\n  border-radius: var(--border-radius);\n  background: var(--background);\n  color: var(--color);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: start;\n  height: 100%;\n}\n\n#header {\n  cursor: var(--cursor);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--header-padding);\n}\n\n#content {\n  display: block;\n  height: 0;\n  transition: var(--transition);\n}\n\n:host(:state(expanded)) #content {\n  /* fallback for browsers that do not support intrinsic sizing keywords with calc-size() */\n  height: auto;\n\n  /* https://developer.chrome.com/docs/css-ui/animate-to-height-auto#animate_to_and_from_intrinsic_sizing_keywords_with_calc-size */\n  height: calc-size(max-content, size);\n}\n\n:host([container='inset']) {\n  --border-radius: var(--nve-ref-border-radius-md);\n}\n\n:host([container='flat']) {\n  --background: inherit;\n  --header-padding: var(--nve-ref-size-200) var(--nve-ref-size-400);\n}\n\n:host([container='flat']) ::slotted(nve-accordion-content) {\n  --padding: var(--nve-ref-size-50) var(--nve-ref-size-400) var(--nve-ref-size-300) var(--nve-ref-size-400);\n}\n\n:host([disabled]) {\n  --cursor: not-allowed;\n}\n\n:host([disabled]) ::slotted(nve-accordion-header) {\n  --cursor: not-allowed;\n}\n\n:host(:not([disabled])) #header:hover nve-icon-button {\n  --color: var(--nve-sys-text-emphasis-color);\n}\n\nnve-icon-button::part(icon) {\n  transition: transform var(--nve-ref-animation-duration-200) cubic-bezier(0.4, 0, 0.2, 1);\n}\n"],"mappings":""}
+{"version":3,"file":"accordion.js","names":["accordion_default"],"sources":["../../src/accordion/accordion.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n  --background: var(--nve-sys-layer-container-background);\n  --color: var(--nve-sys-layer-canvas-color);\n  --border-radius: 0;\n  --header-padding: var(--nve-ref-size-300) var(--nve-ref-size-400);\n  --cursor: pointer;\n  --transition: height var(--nve-ref-animation-duration-200) ease-in-out;\n  width: 100%; /* fallback safari */\n  width: stretch;\n  contain: none;\n}\n\n[internal-host] {\n  border-radius: var(--border-radius);\n  background: var(--background);\n  color: var(--color);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: start;\n  height: 100%;\n}\n\n#header {\n  cursor: var(--cursor);\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--header-padding);\n}\n\n#content {\n  display: block;\n  height: 0;\n  transition: var(--transition);\n}\n\n:host(:state(expanded)) #content {\n  /* fallback for browsers that do not support intrinsic sizing keywords with calc-size() */\n  height: auto;\n\n  /* https://developer.chrome.com/docs/css-ui/animate-to-height-auto#animate_to_and_from_intrinsic_sizing_keywords_with_calc-size */\n  height: calc-size(max-content, size);\n}\n\n:host([container='inset']) {\n  --border-radius: var(--nve-ref-border-radius-md);\n}\n\n:host([container='flat']) {\n  --background: inherit;\n  --header-padding: var(--nve-ref-size-200) var(--nve-ref-size-400);\n}\n\n:host([container='flat']) ::slotted(nve-accordion-content) {\n  --padding: var(--nve-ref-size-50) var(--nve-ref-size-400) var(--nve-ref-size-300) var(--nve-ref-size-400);\n}\n\n:host([disabled]) {\n  --cursor: not-allowed;\n}\n\n:host([disabled]) ::slotted(nve-accordion-header) {\n  --cursor: not-allowed;\n}\n\n:host(:not([disabled])) #header:hover nve-icon-button {\n  --color: var(--nve-sys-text-emphasis-color);\n}\n\nnve-icon-button::part(icon) {\n  transition: transform var(--nve-ref-animation-duration-200) cubic-bezier(0.4, 0, 0.2, 1);\n}\n"],"mappings":""}

package/dist/accordion/accordion2.js

@@ -7,7 +7,7 @@ import { TypeExpandableController as a } from "../internal/controllers/type-expa
 import { hostAttr as o } from "../internal/decorators/host-attr.js";
 import { scopedRegistry as s } from "../internal/decorators/scoped-registry.js";
 import { useStyles as c } from "../internal/styles/index.js";
-import l from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import l from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { IconButton as u } from "../icon-button/icon-button2.js";
 import d from "./accordion.js";
 import f from "./accordion-header.js";
@@ -17,7 +17,7 @@ import { LitElement as h, html as g } from "lit";
 import { property as _ } from "lit/decorators/property.js";
 import { I18nController as v } from "@nvidia-elements/foundations/internal/i18n";
 import { queryAssignedElements as y } from "lit/decorators/query-assigned-elements.js";
-//#region src/accordion/accordion.ts
+// src/accordion/accordion.ts
 var b = {
 	close: "close",
 	expand: "expand"
@@ -31,7 +31,7 @@ var b = {
 	static {
 		this.metadata = {
 			tag: "nve-accordion-header",
-			version: "2.20.1"
+			version: "2.20.3"
 		};
 	}
 	render() {
@@ -49,7 +49,7 @@ var S = class extends h {
 	static {
 		this.metadata = {
 			tag: "nve-accordion-content",
-			version: "2.20.1"
+			version: "2.20.3"
 		};
 	}
 	render() {
@@ -65,7 +65,7 @@ var S = class extends h {
 	static {
 		this.metadata = {
 			tag: "nve-accordion",
-			version: "2.20.1",
+			version: "2.20.3",
 			children: [
 				x.metadata.tag,
 				S.metadata.tag,
@@ -82,7 +82,7 @@ var S = class extends h {
 		return this.shadowRoot?.querySelector("slot[name=header]")?.assignedElements()[0];
 	}
 	#r(e) {
-		!this.disabled && (!t(e) || e.id === "internal-trigger") && this.#t.toggle();
+		this.disabled || t(e) && e.id !== "internal-trigger" || this.#t.toggle();
 	}
 	render() {
 		return g`<div internal-host><div id="header" @click="${(e) => this.#r(e.target)}" .ariaLabel="${this.expanded ? this.i18n.close : this.i18n.expand}" .ariaControls="${"content"}"><slot name="header"></slot><slot name="icon-button"><nve-icon-button part="icon-button" exportparts="icon:icon-button-icon" id="internal-trigger" container="inline" icon-name="caret" direction="${this.expanded ? "up" : "down"}" ?disabled="${this.disabled}" ?pressed="${this.expanded}" .expanded="${this.expanded}" .ariaLabel="${this.expanded ? this.i18n.close : this.i18n.expand}"></nve-icon-button></slot></div><div id="content" .ariaHidden="${!this.expanded}"><slot></slot></div></div>`;
@@ -123,7 +123,7 @@ var w = class extends h {
 	static {
 		this.metadata = {
 			tag: "nve-accordion-group",
-			version: "2.20.1",
+			version: "2.20.3",
 			children: [C.metadata.tag]
 		};
 	}
@@ -154,7 +154,6 @@ l([_({
 	type: String,
 	reflect: !0
 })], w.prototype, "container", void 0), l([y()], w.prototype, "accordions", void 0), w = l([e()], w);
-//#endregion
 export { C as Accordion, S as AccordionContent, w as AccordionGroup, x as AccordionHeader };
 
 //# sourceMappingURL=accordion2.js.map

package/dist/accordion/accordion2.js.map

@@ -1 +1 @@
-{"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  TypeExpandableController,\n  useStyles,\n  attachInternals,\n  generateId,\n  isFocusable,\n  hostAttr,\n  audit,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\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\nconst i18nDefaults = {\n  close: 'close',\n  expand: 'expand'\n} satisfies I18nDefaults;\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, i18nDefaults);\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":["accordionHeaderStyleSheet","_decorate","accordionContentStyleSheet","accordionStyleSheet","accordionGroupStyleSheet","__decorate","accordion_default","accordion_header_default","accordion_content_default","accordion_group_default","i18nDefaults","AccordionHeader","LitElement","_args","useStyles","attachInternals","hostAttr","AccordionContent","Accordion","_args2","#i18nController","I18nController","#typeExpandableController","TypeExpandableController","IconButton","#header","isFocusable","element","#toggle","props","generateId","property","audit","scopedRegistry","stateExpanded","AccordionGroup","_args3","#onOpen","accordion","#updateChildAttributes","queryAssignedElements"],"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  TypeExpandableController,\n  useStyles,\n  attachInternals,\n  generateId,\n  isFocusable,\n  hostAttr,\n  audit,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\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\nconst i18nDefaults = {\n  close: 'close',\n  expand: 'expand'\n} satisfies I18nDefaults;\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, i18nDefaults);\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/accordion/define.js

@@ -1,6 +1,5 @@
 import { Accordion as e, AccordionContent as t, AccordionGroup as n, AccordionHeader as r } from "./accordion2.js";
 import { define as i } from "@nvidia-elements/foundations/internal/define";
 i(e), i(r), i(t), i(n);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/accordion/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/accordion/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { Accordion, AccordionHeader, AccordionContent, AccordionGroup } from '@nvidia-elements/core/accordion';\n\ndefine(Accordion);\ndefine(AccordionHeader);\ndefine(AccordionContent);\ndefine(AccordionGroup);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-accordion': Accordion;\n    'nve-accordion-header': AccordionHeader;\n    'nve-accordion-content': AccordionContent;\n    'nve-accordion-group': AccordionGroup;\n  }\n}\n"],"mappings":";;AAMA,EAAO,CAAS,GAChB,EAAO,CAAe,GACtB,EAAO,CAAgB,GACvB,EAAO,CAAc"}
+{"version":3,"file":"define.js","names":["define","Accordion","AccordionHeader","AccordionContent","AccordionGroup"],"sources":["../../src/accordion/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { Accordion, AccordionHeader, AccordionContent, AccordionGroup } from '@nvidia-elements/core/accordion';\n\ndefine(Accordion);\ndefine(AccordionHeader);\ndefine(AccordionContent);\ndefine(AccordionGroup);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-accordion': Accordion;\n    'nve-accordion-header': AccordionHeader;\n    'nve-accordion-content': AccordionContent;\n    'nve-accordion-group': AccordionGroup;\n  }\n}\n"],"mappings":";;AAMAA,EAAOC,CAAS,GAChBD,EAAOE,CAAe,GACtBF,EAAOG,CAAgB,GACvBH,EAAOI,CAAc"}

package/dist/accordion/index.js

@@ -1,2 +1 @@
-import { Accordion as e, AccordionContent as t, AccordionGroup as n, AccordionHeader as r } from "./accordion2.js";
-export { e as Accordion, t as AccordionContent, n as AccordionGroup, r as AccordionHeader };
+export { Accordion, AccordionContent, AccordionGroup, AccordionHeader } from "./accordion2.js";

package/dist/alert/alert-group.js

@@ -1,6 +1,5 @@
-//#region src/alert/alert-group.css?inline
+// src/alert/alert-group.css?inline
 var e = ":host{--gap: var(--nve-ref-space-xs);--font-size: var(--nve-ref-font-size-200);--padding: var(--nve-ref-size-200) var(--nve-ref-size-300);--border: 0;--border-radius: var(--nve-ref-border-radius-md);--icon-size: var(--nve-ref-size-600);--icon-color: var(--color);--color: var(--nve-sys-text-emphasis-color);--background: var(--state-color-background);width:100%}[internal-host]{background:var(--background);font-size:var(--font-size);gap:var(--gap);color:var(--color);padding:var(--padding);border:var(--border);border-radius:var(--border-radius);display:flex;flex-direction:column;--_alert-color: var(--color);--_icon-color: var(--icon-color)}::slotted(nve-alert){--color: var(--_alert-color);--icon-color: var(--_icon-color);--icon-size: var(--nve-ref-size-400);--min-height: var(--nve-ref-size-800);width:100%;height:100%}:host([container=\"full\"]){--border-radius: 0}:host([prominence=\"emphasis\"]:not([color])){--background: var(--nve-sys-support-color);--color: var(--nve-sys-text-white-color);--icon-color: var(--color)}:host([prominence=\"emphasis\"][status=\"accent\"]:not([color])){--background: var(--nve-sys-support-accent-color)}:host([prominence=\"emphasis\"][status=\"success\"]:not([color])){--background: var(--nve-sys-support-success-color)}:host([prominence=\"emphasis\"][status=\"warning\"]:not([color])){--background: var(--nve-sys-support-warning-color);--color: var(--nve-sys-text-black-color)}:host([prominence=\"emphasis\"][status=\"danger\"]:not([color])){--background: var(--nve-sys-support-danger-color)}:host([prominence=\"emphasis\"]) ::slotted(nve-alert){--font-weight: var(--nve-ref-font-weight-regular)}:host(:not([prominence=\"emphasis\"])) ::slotted(nve-alert){--icon-color: var(--status-color) !important}:host([status]){--state-color-base: var(--status-color)}:host([color]) ::slotted(nve-alert){--status-color: var(--state-color-base) !important}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=alert-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"alert-group.js","names":[],"sources":["../../src/alert/alert-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --gap: var(--nve-ref-space-xs);\n  --font-size: var(--nve-ref-font-size-200);\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-300);\n  --border: 0;\n  --border-radius: var(--nve-ref-border-radius-md);\n  --icon-size: var(--nve-ref-size-600);\n  --icon-color: var(--color);\n  --color: var(--nve-sys-text-emphasis-color);\n  --background: var(--state-color-background);\n  width: 100%;\n}\n\n[internal-host] {\n  background: var(--background);\n  font-size: var(--font-size);\n  gap: var(--gap);\n  color: var(--color);\n  padding: var(--padding);\n  border: var(--border);\n  border-radius: var(--border-radius);\n  display: flex;\n  flex-direction: column;\n  --_alert-color: var(--color);\n  --_icon-color: var(--icon-color);\n}\n\n::slotted(nve-alert) {\n  --color: var(--_alert-color);\n  --icon-color: var(--_icon-color);\n  --icon-size: var(--nve-ref-size-400);\n  --min-height: var(--nve-ref-size-800);\n  width: 100%;\n  height: 100%;\n}\n\n:host([container='full']) {\n  --border-radius: 0;\n}\n\n:host([prominence='emphasis']:not([color])) {\n  --background: var(--nve-sys-support-color);\n  --color: var(--nve-sys-text-white-color);\n  --icon-color: var(--color);\n}\n\n:host([prominence='emphasis'][status='accent']:not([color])) {\n  --background: var(--nve-sys-support-accent-color);\n}\n\n:host([prominence='emphasis'][status='success']:not([color])) {\n  --background: var(--nve-sys-support-success-color);\n}\n\n:host([prominence='emphasis'][status='warning']:not([color])) {\n  --background: var(--nve-sys-support-warning-color);\n  --color: var(--nve-sys-text-black-color);\n}\n\n:host([prominence='emphasis'][status='danger']:not([color])) {\n  --background: var(--nve-sys-support-danger-color);\n}\n\n:host([prominence='emphasis']) ::slotted(nve-alert) {\n  --font-weight: var(--nve-ref-font-weight-regular);\n}\n\n:host(:not([prominence='emphasis'])) ::slotted(nve-alert) {\n  --icon-color: var(--status-color) !important;\n}\n\n:host([status]) {\n  --state-color-base: var(--status-color);\n}\n\n:host([color]) ::slotted(nve-alert) {\n  --status-color: var(--state-color-base) !important;\n}\n"],"mappings":""}
+{"version":3,"file":"alert-group.js","names":["alert_group_default"],"sources":["../../src/alert/alert-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --gap: var(--nve-ref-space-xs);\n  --font-size: var(--nve-ref-font-size-200);\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-300);\n  --border: 0;\n  --border-radius: var(--nve-ref-border-radius-md);\n  --icon-size: var(--nve-ref-size-600);\n  --icon-color: var(--color);\n  --color: var(--nve-sys-text-emphasis-color);\n  --background: var(--state-color-background);\n  width: 100%;\n}\n\n[internal-host] {\n  background: var(--background);\n  font-size: var(--font-size);\n  gap: var(--gap);\n  color: var(--color);\n  padding: var(--padding);\n  border: var(--border);\n  border-radius: var(--border-radius);\n  display: flex;\n  flex-direction: column;\n  --_alert-color: var(--color);\n  --_icon-color: var(--icon-color);\n}\n\n::slotted(nve-alert) {\n  --color: var(--_alert-color);\n  --icon-color: var(--_icon-color);\n  --icon-size: var(--nve-ref-size-400);\n  --min-height: var(--nve-ref-size-800);\n  width: 100%;\n  height: 100%;\n}\n\n:host([container='full']) {\n  --border-radius: 0;\n}\n\n:host([prominence='emphasis']:not([color])) {\n  --background: var(--nve-sys-support-color);\n  --color: var(--nve-sys-text-white-color);\n  --icon-color: var(--color);\n}\n\n:host([prominence='emphasis'][status='accent']:not([color])) {\n  --background: var(--nve-sys-support-accent-color);\n}\n\n:host([prominence='emphasis'][status='success']:not([color])) {\n  --background: var(--nve-sys-support-success-color);\n}\n\n:host([prominence='emphasis'][status='warning']:not([color])) {\n  --background: var(--nve-sys-support-warning-color);\n  --color: var(--nve-sys-text-black-color);\n}\n\n:host([prominence='emphasis'][status='danger']:not([color])) {\n  --background: var(--nve-sys-support-danger-color);\n}\n\n:host([prominence='emphasis']) ::slotted(nve-alert) {\n  --font-weight: var(--nve-ref-font-weight-regular);\n}\n\n:host(:not([prominence='emphasis'])) ::slotted(nve-alert) {\n  --icon-color: var(--status-color) !important;\n}\n\n:host([status]) {\n  --state-color-base: var(--status-color);\n}\n\n:host([color]) ::slotted(nve-alert) {\n  --status-color: var(--state-color-base) !important;\n}\n"],"mappings":""}

package/dist/alert/alert-group2.js

@@ -1,13 +1,13 @@
 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.147.0/helpers/esm/decorate.js";
+import a from "../_virtual/_@oxc-project_runtime@0.155.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";
 import { property as u } from "lit/decorators/property.js";
 import { queryAssignedElements as d } from "lit/decorators/query-assigned-elements.js";
-//#region src/alert/alert-group.ts
+// src/alert/alert-group.ts
 var f = class extends c {
 	static {
 		this.styles = i([
@@ -19,7 +19,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-alert-group",
-			version: "2.20.1",
+			version: "2.20.3",
 			children: [o.metadata.tag]
 		};
 	}
@@ -49,7 +49,6 @@ a([u({
 	type: String,
 	reflect: !0
 })], f.prototype, "container", void 0), a([d()], f.prototype, "alerts", void 0), f = a([e()], f);
-//#endregion
 export { f as AlertGroup };
 
 //# sourceMappingURL=alert-group2.js.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"alert-group2.js","names":["styles","_decorate","__decorate","alert_group_default","AlertGroup","LitElement","useStyles","supportStateStyles","colorStateStyles","Alert","#updateStatus","attachInternals","props","property","queryAssignedElements","audit"],"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,IAAMI,IAAN,cAAyBC,EAAW;;EACzB,KAAA,SAAAC,EAAU;GAACN;GAAQO;GAAoBC;EAAgB,CAAC;;;EAE7C,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAACC,EAAM,SAAS,GAAG;EAC/B;;CAmBA,SAAS;EACP,OAAO,CAAI,+CAEmB,KAAKC,GAAc,EAAE;CAGrD;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxBC,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQC,CAAK,GACnB,KAAKF,GAAc;CACrB;CAEA,KAAgB;EACd,KAAK,OAAO,SAAQ,MAAU,EAAM,SAAS,KAAK,MAAO;CAC3D;AACF;AAtCGT,EAAA,CAAAY,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAT,EAAA,WAAA,UAAA,KAAA,CAAA,GAGxCH,EAAA,CAAAY,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAT,EAAA,WAAA,cAAA,KAAA,CAAA,GAGxCH,EAAA,CAAAY,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAT,EAAA,WAAA,SAAA,KAAA,CAAA,GAGxCH,EAAA,CAAAY,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAT,EAAA,WAAA,aAAA,KAAA,CAAA,GAKxCH,EAAA,CAAAa,EAAsB,CAAA,GAAAV,EAAA,WAAA,UAAA,KAAA,CAAA,GAzBxB,IAAAH,EAAA,CAAAc,EAAM,CAAA,GAAAX,CAAA"}

package/dist/alert/alert.examples.js

@@ -1,6 +1,5 @@
-//#region src/alert/alert.examples.ts
+// src/alert/alert.examples.ts
 var e = "";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=alert.examples.js.map

package/dist/alert/alert.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.examples.js","names":[],"sources":["../../src/alert/alert.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/alert/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/divider/define.js';\nimport '@nvidia-elements/core/page/define.js';\n\nexport default {\n  title: 'Elements/Alert',\n  component: 'nve-alert'\n};\n\n/**\n * @summary Basic alert for inline informational messages. Use alerts for persistent feedback that doesn't auto-dismiss, ideal for system status updates, or contextual information that users may need to reference while completing tasks.\n */\nexport const Default = {\n  render: () => html`<nve-alert>alert message</nve-alert>`\n};\n\n/**\n * @summary Alert status variants for semantic messaging. Use accent for informational updates, warning for cautionary messages requiring attention, success for confirmations, and danger for errors or critical issues that may block user progress.\n * @tags test-case\n */\nexport const SupportStatus = {\n  render: () => html`\n<div nve-layout=\"column gap:md\">\n  <nve-alert>Standard</nve-alert>\n  <nve-alert status=\"accent\">Accent</nve-alert>\n  <nve-alert status=\"warning\">Warning</nve-alert>\n  <nve-alert status=\"success\">Success</nve-alert>\n  <nve-alert status=\"danger\">Danger</nve-alert>\n</div>\n  `\n}\n\n/**\n * @summary Extended status variants for workflow and process state communication. Use these specialized states (scheduled, queued, running, failed, etc.) in dashboards, build pipelines, or task management interfaces where users need detailed visibility into process lifecycle stages.\n * @tags test-case\n */\nexport const Status = {\n  render: () => html`\n<div nve-layout=\"column gap:md\">\n  <nve-alert>Standard</nve-alert>\n  <nve-alert status=\"accent\">Accent</nve-alert>\n  <nve-alert status=\"warning\">Warning</nve-alert>\n  <nve-alert status=\"success\">Success</nve-alert>\n  <nve-alert status=\"danger\">Danger</nve-alert>\n\n  <nve-alert status=\"scheduled\">Scheduled</nve-alert>\n  <nve-alert status=\"queued\">Queued</nve-alert>\n  <nve-alert status=\"finished\">Finished</nve-alert>\n  <nve-alert status=\"failed\">Failed</nve-alert>\n  <nve-alert status=\"unknown\">Unknown</nve-alert>\n  <nve-alert status=\"pending\">Pending</nve-alert>\n  <nve-alert status=\"starting\">Starting</nve-alert>\n  <nve-alert status=\"running\">Running</nve-alert>\n  <nve-alert status=\"restarting\">Restarting</nve-alert>\n  <nve-alert status=\"stopping\">Stopping</nve-alert>\n  <nve-alert status=\"ignored\">Ignored</nve-alert>\n</div>\n  `\n}\n\n/**\n * @summary Alert group for visually organizing related messages with shared styling. Use alert groups to present many related messages as a cohesive unit, improving scannability and visual hierarchy.\n */\nexport const GroupDefault = {\n  render: () => html`\n  <nve-alert-group>\n    <nve-alert>alert message</nve-alert>\n  </nve-alert-group>\n  `\n};\n\n/**\n * @summary Alert groups with inherited status styling for all children. Applying status at the group level ensures visual consistency across related messages, perfect for form validation where many fields share the same error context.\n */\nexport const GroupStatus = {\n  render: () => html`\n  <div nve-layout=\"column gap:md\">\n    <nve-alert-group>\n      <nve-alert>Standard</nve-alert>\n      <nve-alert>Standard</nve-alert>\n    </nve-alert-group>\n\n    <nve-alert-group status=\"accent\">\n      <nve-alert>Accent</nve-alert>\n      <nve-alert>Accent</nve-alert>\n    </nve-alert-group>\n\n    <nve-alert-group status=\"warning\">\n      <nve-alert>Warning</nve-alert>\n      <nve-alert>Warning</nve-alert>\n    </nve-alert-group>\n\n    <nve-alert-group status=\"success\">\n      <nve-alert>Success</nve-alert>\n      <nve-alert>Success</nve-alert>\n    </nve-alert-group>\n\n    <nve-alert-group status=\"danger\">\n      <nve-alert>Danger</nve-alert>\n      <nve-alert>Danger</nve-alert>\n    </nve-alert-group>\n  </div>\n  `\n}\n\n/**\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.\n */\nexport const InvokerCommand = {\n  render: () => html`\n<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};\n\n/**\n * @summary Closable alerts that users can dismiss. Use closable alerts for messages that become irrelevant after reading (like onboarding tips, one-time announcements, or acknowledged warnings), but avoid for critical errors that need to remain visible until resolved.\n */\nexport const Closable = {\n  render: () => html`\n    <div nve-layout=\"column gap:md\">\n      <nve-alert-group>\n        <nve-alert closable>Standard</nve-alert>\n        <nve-alert closable>Standard</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group status=\"accent\">\n        <nve-alert closable>Accent</nve-alert>\n        <nve-alert closable>Accent</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group status=\"warning\">\n        <nve-alert closable>Warning</nve-alert>\n        <nve-alert closable>Warning</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group status=\"success\">\n        <nve-alert closable>Success</nve-alert>\n        <nve-alert closable>Success</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group status=\"danger\">\n        <nve-alert closable>Danger</nve-alert>\n        <nve-alert closable>Danger</nve-alert>\n      </nve-alert-group>\n    </div>\n  `\n}\n\n/**\n * @summary Alerts with action buttons for immediate user response. Include actions when the alert requires user decision-making (like \"Retry\", \"View Details\", or \"Undo\"), making the next step clear and reducing friction in error recovery or task completion flows.\n */\nexport const Actions = {\n  render: () => html`\n  <div nve-layout=\"column gap:md\">\n    <nve-alert-group>\n      <nve-alert>\n        Standard <nve-button slot=\"actions\" container=\"flat\">action</nve-button>\n      </nve-alert>\n    </nve-alert-group>\n    <nve-alert-group status=\"accent\">\n      <nve-alert>\n        Standard <nve-button slot=\"actions\" container=\"flat\">action</nve-button>\n      </nve-alert>\n    </nve-alert-group>\n    <nve-alert-group status=\"warning\">\n      <nve-alert>\n        Warning <nve-button slot=\"actions\" container=\"flat\">action</nve-button>\n      </nve-alert>\n    </nve-alert-group>\n    <nve-alert-group status=\"success\">\n      <nve-alert>\n        Success <nve-button slot=\"actions\" container=\"flat\">action</nve-button>\n      </nve-alert>\n    </nve-alert-group>\n    <nve-alert-group status=\"danger\">\n      <nve-alert>\n        Danger <nve-button slot=\"actions\" container=\"flat\">action</nve-button>\n      </nve-alert>\n    </nve-alert-group>\n  </div>\n  `\n}\n\n/**\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.\n */\nexport const Prominence = {\n  render: () => html`\n    <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\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\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\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\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  `\n}\n\n/**\n * @summary Alert with complex structured content including expandable details. Use the content slot for rich information like stack traces, validation summaries, or detailed error logs where users need both the high-level message and access to technical details for debugging or reporting.\n */\nexport const Content = {\n  render: () => html`\n    <nve-alert-group status=\"danger\">\n      <nve-alert>\n        Session Paused:\n        <div slot=\"content\" nve-layout=\"column gap:sm align:stretch\">\n          <p nve-text=\"body sm emphasis\">Failed to verify drives.</p>\n          <pre nve-text=\"sm emphasis\">\n10:06:01 AM [verify] update /virtual:/verify/\n10:06:11 AM [build] update /virtual:/build/\n10:06:22 AM [error] update /virtual:/error/ - failed to connect to remote</pre>\n        </div>\n        <nve-button slot=\"actions\" container=\"flat\">Collapse Details</nve-button>\n      </nve-alert>\n    </nve-alert-group>\n  `\n}\n\n/**\n * @summary Custom color variants for brand-specific styling or extra visual differentiation beyond standard status colors. Use custom colors when standard semantic colors don't match your use case, such as category labels, team assignments, or brand-specific messaging.\n * @tags test-case\n */\nexport const Color = {\n  render: () => html`\n    <div nve-layout=\"column gap:md\">\n      <nve-alert-group color=\"red-cardinal\">\n        <nve-alert>red-cardinal</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"gray-slate\">\n        <nve-alert>gray-slate</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"gray-denim\">\n        <nve-alert>gray-denim</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"blue-indigo\">\n        <nve-alert>blue-indigo</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"blue-cobalt\">\n        <nve-alert>blue-cobalt</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"blue-sky\">\n        <nve-alert>blue-sky</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"teal-cyan\">\n        <nve-alert>teal-cyan</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"green-mint\">\n        <nve-alert>green-mint</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"teal-seafoam\">\n        <nve-alert>teal-seafoam</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"green-grass\">\n        <nve-alert>green-grass</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"yellow-amber\">\n        <nve-alert>yellow-amber</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"orange-pumpkin\">\n        <nve-alert>orange-pumpkin</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"red-tomato\">\n        <nve-alert>red-tomato</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"pink-magenta\">\n        <nve-alert>pink-magenta</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"purple-plum\">\n        <nve-alert>purple-plum</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"purple-violet\">\n        <nve-alert>purple-violet</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"purple-lavender\">\n        <nve-alert>purple-lavender</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"pink-rose\">\n        <nve-alert>pink-rose</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"green-jade\">\n        <nve-alert>green-jade</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"lime-pear\">\n        <nve-alert>lime-pear</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"yellow-nova\">\n        <nve-alert>yellow-nova</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"brand-green\">\n        <nve-alert>brand-green</nve-alert>\n      </nve-alert-group>\n    </div>\n  `\n}\n\n/**\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.\n * @tags test-case\n */\nexport const CustomColorCombinations = {\n  render: () => html`\n    <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\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\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\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\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\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\n      <nve-alert-group color=\"blue-indigo\" status=\"accent\" prominence=\"emphasis\">\n        <nve-alert>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 alert color.</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"blue-indigo\" status=\"success\" prominence=\"emphasis\">\n        <nve-alert>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 alert color.</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"blue-indigo\" status=\"warning\" prominence=\"emphasis\">\n        <nve-alert>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 alert color.</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"blue-indigo\" status=\"danger\" prominence=\"emphasis\">\n        <nve-alert>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 alert color.</nve-alert>\n      </nve-alert-group>\n    </div>\n  `\n}\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"alert.examples.js","names":["alert_examples_default"],"sources":["../../src/alert/alert.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/alert/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/divider/define.js';\nimport '@nvidia-elements/core/page/define.js';\n\nexport default {\n  title: 'Elements/Alert',\n  component: 'nve-alert'\n};\n\n/**\n * @summary Basic alert for inline informational messages. Use alerts for persistent feedback that doesn't auto-dismiss, ideal for system status updates, or contextual information that users may need to reference while completing tasks.\n */\nexport const Default = {\n  render: () => html`<nve-alert>alert message</nve-alert>`\n};\n\n/**\n * @summary Alert status variants for semantic messaging. Use accent for informational updates, warning for cautionary messages requiring attention, success for confirmations, and danger for errors or critical issues that may block user progress.\n * @tags test-case\n */\nexport const SupportStatus = {\n  render: () => html`\n<div nve-layout=\"column gap:md\">\n  <nve-alert>Standard</nve-alert>\n  <nve-alert status=\"accent\">Accent</nve-alert>\n  <nve-alert status=\"warning\">Warning</nve-alert>\n  <nve-alert status=\"success\">Success</nve-alert>\n  <nve-alert status=\"danger\">Danger</nve-alert>\n</div>\n  `\n}\n\n/**\n * @summary Extended status variants for workflow and process state communication. Use these specialized states (scheduled, queued, running, failed, etc.) in dashboards, build pipelines, or task management interfaces where users need detailed visibility into process lifecycle stages.\n * @tags test-case\n */\nexport const Status = {\n  render: () => html`\n<div nve-layout=\"column gap:md\">\n  <nve-alert>Standard</nve-alert>\n  <nve-alert status=\"accent\">Accent</nve-alert>\n  <nve-alert status=\"warning\">Warning</nve-alert>\n  <nve-alert status=\"success\">Success</nve-alert>\n  <nve-alert status=\"danger\">Danger</nve-alert>\n\n  <nve-alert status=\"scheduled\">Scheduled</nve-alert>\n  <nve-alert status=\"queued\">Queued</nve-alert>\n  <nve-alert status=\"finished\">Finished</nve-alert>\n  <nve-alert status=\"failed\">Failed</nve-alert>\n  <nve-alert status=\"unknown\">Unknown</nve-alert>\n  <nve-alert status=\"pending\">Pending</nve-alert>\n  <nve-alert status=\"starting\">Starting</nve-alert>\n  <nve-alert status=\"running\">Running</nve-alert>\n  <nve-alert status=\"restarting\">Restarting</nve-alert>\n  <nve-alert status=\"stopping\">Stopping</nve-alert>\n  <nve-alert status=\"ignored\">Ignored</nve-alert>\n</div>\n  `\n}\n\n/**\n * @summary Alert group for visually organizing related messages with shared styling. Use alert groups to present many related messages as a cohesive unit, improving scannability and visual hierarchy.\n */\nexport const GroupDefault = {\n  render: () => html`\n  <nve-alert-group>\n    <nve-alert>alert message</nve-alert>\n  </nve-alert-group>\n  `\n};\n\n/**\n * @summary Alert groups with inherited status styling for all children. Applying status at the group level ensures visual consistency across related messages, perfect for form validation where many fields share the same error context.\n */\nexport const GroupStatus = {\n  render: () => html`\n  <div nve-layout=\"column gap:md\">\n    <nve-alert-group>\n      <nve-alert>Standard</nve-alert>\n      <nve-alert>Standard</nve-alert>\n    </nve-alert-group>\n\n    <nve-alert-group status=\"accent\">\n      <nve-alert>Accent</nve-alert>\n      <nve-alert>Accent</nve-alert>\n    </nve-alert-group>\n\n    <nve-alert-group status=\"warning\">\n      <nve-alert>Warning</nve-alert>\n      <nve-alert>Warning</nve-alert>\n    </nve-alert-group>\n\n    <nve-alert-group status=\"success\">\n      <nve-alert>Success</nve-alert>\n      <nve-alert>Success</nve-alert>\n    </nve-alert-group>\n\n    <nve-alert-group status=\"danger\">\n      <nve-alert>Danger</nve-alert>\n      <nve-alert>Danger</nve-alert>\n    </nve-alert-group>\n  </div>\n  `\n}\n\n/**\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.\n */\nexport const InvokerCommand = {\n  render: () => html`\n<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};\n\n/**\n * @summary Closable alerts that users can dismiss. Use closable alerts for messages that become irrelevant after reading (like onboarding tips, one-time announcements, or acknowledged warnings), but avoid for critical errors that need to remain visible until resolved.\n */\nexport const Closable = {\n  render: () => html`\n    <div nve-layout=\"column gap:md\">\n      <nve-alert-group>\n        <nve-alert closable>Standard</nve-alert>\n        <nve-alert closable>Standard</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group status=\"accent\">\n        <nve-alert closable>Accent</nve-alert>\n        <nve-alert closable>Accent</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group status=\"warning\">\n        <nve-alert closable>Warning</nve-alert>\n        <nve-alert closable>Warning</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group status=\"success\">\n        <nve-alert closable>Success</nve-alert>\n        <nve-alert closable>Success</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group status=\"danger\">\n        <nve-alert closable>Danger</nve-alert>\n        <nve-alert closable>Danger</nve-alert>\n      </nve-alert-group>\n    </div>\n  `\n}\n\n/**\n * @summary Alerts with action buttons for immediate user response. Include actions when the alert requires user decision-making (like \"Retry\", \"View Details\", or \"Undo\"), making the next step clear and reducing friction in error recovery or task completion flows.\n */\nexport const Actions = {\n  render: () => html`\n  <div nve-layout=\"column gap:md\">\n    <nve-alert-group>\n      <nve-alert>\n        Standard <nve-button slot=\"actions\" container=\"flat\">action</nve-button>\n      </nve-alert>\n    </nve-alert-group>\n    <nve-alert-group status=\"accent\">\n      <nve-alert>\n        Standard <nve-button slot=\"actions\" container=\"flat\">action</nve-button>\n      </nve-alert>\n    </nve-alert-group>\n    <nve-alert-group status=\"warning\">\n      <nve-alert>\n        Warning <nve-button slot=\"actions\" container=\"flat\">action</nve-button>\n      </nve-alert>\n    </nve-alert-group>\n    <nve-alert-group status=\"success\">\n      <nve-alert>\n        Success <nve-button slot=\"actions\" container=\"flat\">action</nve-button>\n      </nve-alert>\n    </nve-alert-group>\n    <nve-alert-group status=\"danger\">\n      <nve-alert>\n        Danger <nve-button slot=\"actions\" container=\"flat\">action</nve-button>\n      </nve-alert>\n    </nve-alert-group>\n  </div>\n  `\n}\n\n/**\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.\n */\nexport const Prominence = {\n  render: () => html`\n    <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\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\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\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\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  `\n}\n\n/**\n * @summary Alert with complex structured content including expandable details. Use the content slot for rich information like stack traces, validation summaries, or detailed error logs where users need both the high-level message and access to technical details for debugging or reporting.\n */\nexport const Content = {\n  render: () => html`\n    <nve-alert-group status=\"danger\">\n      <nve-alert>\n        Session Paused:\n        <div slot=\"content\" nve-layout=\"column gap:sm align:stretch\">\n          <p nve-text=\"body sm emphasis\">Failed to verify drives.</p>\n          <pre nve-text=\"sm emphasis\">\n10:06:01 AM [verify] update /virtual:/verify/\n10:06:11 AM [build] update /virtual:/build/\n10:06:22 AM [error] update /virtual:/error/ - failed to connect to remote</pre>\n        </div>\n        <nve-button slot=\"actions\" container=\"flat\">Collapse Details</nve-button>\n      </nve-alert>\n    </nve-alert-group>\n  `\n}\n\n/**\n * @summary Custom color variants for brand-specific styling or extra visual differentiation beyond standard status colors. Use custom colors when standard semantic colors don't match your use case, such as category labels, team assignments, or brand-specific messaging.\n * @tags test-case\n */\nexport const Color = {\n  render: () => html`\n    <div nve-layout=\"column gap:md\">\n      <nve-alert-group color=\"red-cardinal\">\n        <nve-alert>red-cardinal</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"gray-slate\">\n        <nve-alert>gray-slate</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"gray-denim\">\n        <nve-alert>gray-denim</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"blue-indigo\">\n        <nve-alert>blue-indigo</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"blue-cobalt\">\n        <nve-alert>blue-cobalt</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"blue-sky\">\n        <nve-alert>blue-sky</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"teal-cyan\">\n        <nve-alert>teal-cyan</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"green-mint\">\n        <nve-alert>green-mint</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"teal-seafoam\">\n        <nve-alert>teal-seafoam</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"green-grass\">\n        <nve-alert>green-grass</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"yellow-amber\">\n        <nve-alert>yellow-amber</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"orange-pumpkin\">\n        <nve-alert>orange-pumpkin</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"red-tomato\">\n        <nve-alert>red-tomato</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"pink-magenta\">\n        <nve-alert>pink-magenta</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"purple-plum\">\n        <nve-alert>purple-plum</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"purple-violet\">\n        <nve-alert>purple-violet</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"purple-lavender\">\n        <nve-alert>purple-lavender</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"pink-rose\">\n        <nve-alert>pink-rose</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"green-jade\">\n        <nve-alert>green-jade</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"lime-pear\">\n        <nve-alert>lime-pear</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"yellow-nova\">\n        <nve-alert>yellow-nova</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"brand-green\">\n        <nve-alert>brand-green</nve-alert>\n      </nve-alert-group>\n    </div>\n  `\n}\n\n/**\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.\n * @tags test-case\n */\nexport const CustomColorCombinations = {\n  render: () => html`\n    <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\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\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\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\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\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\n      <nve-alert-group color=\"blue-indigo\" status=\"accent\" prominence=\"emphasis\">\n        <nve-alert>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 alert color.</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"blue-indigo\" status=\"success\" prominence=\"emphasis\">\n        <nve-alert>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 alert color.</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"blue-indigo\" status=\"warning\" prominence=\"emphasis\">\n        <nve-alert>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 alert color.</nve-alert>\n      </nve-alert-group>\n\n      <nve-alert-group color=\"blue-indigo\" status=\"danger\" prominence=\"emphasis\">\n        <nve-alert>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 alert color.</nve-alert>\n      </nve-alert-group>\n    </div>\n  `\n}\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/alert/alert.global.js

@@ -1,6 +1,5 @@
-//#region src/alert/alert.global.css?inline
+// src/alert/alert.global.css?inline
 var e = "nve-alert:has([slot=content])::part(_content){display:block}nve-alert-group:not(:has(nve-alert)),nve-alert-group:not(:has(nve-alert:not([hidden]))){display:none}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=alert.global.js.map

package/dist/alert/alert.global.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.global.js","names":[],"sources":["../../src/alert/alert.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-alert:has([slot='content'])::part(_content) {\n  display: block;\n}\n\nnve-alert-group:not(:has(nve-alert)),\nnve-alert-group:not(:has(nve-alert:not([hidden]))) {\n  display: none;\n}\n"],"mappings":""}
+{"version":3,"file":"alert.global.js","names":["alert_global_default"],"sources":["../../src/alert/alert.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-alert:has([slot='content'])::part(_content) {\n  display: block;\n}\n\nnve-alert-group:not(:has(nve-alert)),\nnve-alert-group:not(:has(nve-alert:not([hidden]))) {\n  display: none;\n}\n"],"mappings":""}

package/dist/alert/alert.js

@@ -1,6 +1,5 @@
-//#region src/alert/alert.css?inline
+// src/alert/alert.css?inline
 var e = ":host{--gap: var(--nve-ref-space-xs);--font-size: var(--nve-ref-font-size-100);--color: var(--nve-sys-text-emphasis-color);--icon-color: var(--status-color);--icon-size: var(--nve-ref-size-400);--font-weight: var(--nve-ref-font-weight-medium);--justify-content: start;--align-items: center;--min-height: initial;--text-transform: initial;width:auto}[internal-host]{--_icon-cancel-color: var(--color);font-weight:var(--font-weight);font-size:var(--font-size);gap:var(--gap);color:var(--color);justify-content:var(--justify-content);align-items:var(--align-items);text-transform:var(--text-transform);display:flex;line-height:1em;height:100%}slot[part=_content]{display:contents;padding-inline-start:var(--nve-ref-size-600);padding-block-end:var(--nve-ref-size-200)}slot{display:flex;align-items:center;justify-content:var(--justify-content);gap:var(--nve-ref-space-xxs);min-height:var(--min-height)}slot:not([name=actions],[name=prefix],[name=icon]){flex-grow:1}slot[name=prefix],slot[name=actions]{font-weight:var(--nve-ref-font-weight-semibold)}::slotted(nve-button[container=\"flat\"]){--color: inherit}slot[name=actions]{margin-inline-start:auto}slot[name=prefix]{margin-inline-end:var(--nve-ref-space-lg)}nve-icon{--color: var(--icon-color)}nve-icon:not([size=sm]){--width: var(--icon-size);--height: var(--icon-size)}nve-icon[size=sm]{padding:var(--nve-ref-size-50)}nve-icon-button{--color: var(--icon-color);margin-inline-start:auto}::slotted([nve-text]){color:inherit!important}:host([status=\"success\"]),:host([status=\"danger\"]){--color: var(--status-color)}:host([status=\"scheduled\"]),:host([status=\"queued\"]),:host([status=\"pending\"]),:host([status=\"starting\"]),:host([status=\"running\"]),:host([status=\"restarting\"]),:host([status=\"stopping\"]),:host([status=\"finished\"]),:host([status=\"failed\"]),:host([status=\"unknown\"]),:host([status=\"ignored\"]){--color: var(--status-color)}::slotted([slot=\"actions\"]){--color: var(--status-color) !important}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=alert.js.map