@nvidia-elements/core 0.0.3 → 0.0.4

package/CHANGELOG.md

@@ -1,18 +1,21 @@
-## <small>0.0.3 (2026-04-10)</small>
+## <small>0.0.4 (2026-04-16)</small>
 
-* chore(ci): add dependency audit report ([929273e](https://github.com/NVIDIA/elements/commit/929273e))
-* chore(ci): add spdx license headers ([b2a36eb](https://github.com/NVIDIA/elements/commit/b2a36eb))
-* chore(ci): regenerate lockfile after migration ([419d2ac](https://github.com/NVIDIA/elements/commit/419d2ac))
-* chore(release): @nvidia-elements/forms-v0.0.3 [skip ci] ([348d79b](https://github.com/NVIDIA/elements/commit/348d79b))
-* chore(release): @nvidia-elements/styles-v0.0.3 [skip ci] ([53b1a3e](https://github.com/NVIDIA/elements/commit/53b1a3e))
-* chore(release): @nvidia-elements/themes-v0.0.4 [skip ci] ([41ac159](https://github.com/NVIDIA/elements/commit/41ac159))
-* fix(cli): reset versions ([a5a9e48](https://github.com/NVIDIA/elements/commit/a5a9e48))
-* fix(code): reset versions ([98d8455](https://github.com/NVIDIA/elements/commit/98d8455))
-* fix(core): reset versions ([46aeae0](https://github.com/NVIDIA/elements/commit/46aeae0))
-* fix(create): reset versions ([e5101cf](https://github.com/NVIDIA/elements/commit/e5101cf))
-* fix(forms): reset versions ([8494307](https://github.com/NVIDIA/elements/commit/8494307))
-* fix(lint): reset versions ([07cbacb](https://github.com/NVIDIA/elements/commit/07cbacb))
-* fix(markdown): reset versions ([e02bebc](https://github.com/NVIDIA/elements/commit/e02bebc))
-* fix(monaco): reset versions ([262dcdd](https://github.com/NVIDIA/elements/commit/262dcdd))
-* fix(styles): reset versions ([ab1a40b](https://github.com/NVIDIA/elements/commit/ab1a40b))
-* fix(themes): reset versions ([0dbe57b](https://github.com/NVIDIA/elements/commit/0dbe57b))
+* chore(ci): add spdx license headers ([d5583b0](https://github.com/NVIDIA/elements/commit/d5583b0))
+* chore(ci): regenerate lockfile after migration ([2502e6f](https://github.com/NVIDIA/elements/commit/2502e6f))
+* chore(release): @nvidia-elements/forms-v0.0.4 [skip ci] ([3a60045](https://github.com/NVIDIA/elements/commit/3a60045))
+* chore(release): @nvidia-elements/styles-v0.0.4 [skip ci] ([7df6a83](https://github.com/NVIDIA/elements/commit/7df6a83))
+* chore(release): @nvidia-elements/themes-v0.0.5 [skip ci] ([11f7e1e](https://github.com/NVIDIA/elements/commit/11f7e1e))
+* fix(cli): reset versions ([8a81268](https://github.com/NVIDIA/elements/commit/8a81268))
+* fix(code): reset versions ([1c08cc7](https://github.com/NVIDIA/elements/commit/1c08cc7))
+* fix(core): reset versions ([553ae54](https://github.com/NVIDIA/elements/commit/553ae54))
+* fix(create): reset versions ([a69d52b](https://github.com/NVIDIA/elements/commit/a69d52b))
+* fix(forms): reset versions ([c17d18f](https://github.com/NVIDIA/elements/commit/c17d18f))
+* fix(lint): reset versions ([d9e5ee5](https://github.com/NVIDIA/elements/commit/d9e5ee5))
+* fix(markdown): reset versions ([ccabfbd](https://github.com/NVIDIA/elements/commit/ccabfbd))
+* fix(monaco): reset versions ([5abcaf1](https://github.com/NVIDIA/elements/commit/5abcaf1))
+* fix(styles): reset versions ([eb768c0](https://github.com/NVIDIA/elements/commit/eb768c0))
+* fix(themes): reset versions ([71d28f6](https://github.com/NVIDIA/elements/commit/71d28f6))
+
+## 0.0.0
+
+Initial release.

package/NOTICE.md

@@ -0,0 +1,119 @@
+NOTICE
+
+Elements - NVIDIA Elements Design System
+Copyright 2024-2026 NVIDIA Corporation
+
+This project includes the following bundled third-party software:
+
+- lit v3.3.2 [BSD-3-Clause]
+  Copyright: Google LLC
+
+- lit-html v3.3.2 [BSD-3-Clause]
+  Copyright: Google LLC
+
+This product includes SVG icons derived from the following third-party icon libraries:
+
+- Fluent UI System Icons [MIT] (https://github.com/microsoft/fluentui-system-icons)
+  Copyright: Microsoft Corporation
+
+- Heroicons [MIT] (https://github.com/tailwindlabs/heroicons)
+  Copyright: Tailwind Labs, Inc.
+
+- Lucide [ISC] (https://github.com/lucide-icons/lucide)
+  Copyright: Lucide Contributors
+
+- Material Symbols [Apache-2.0] (https://github.com/google/material-design-icons)
+  Copyright: Google LLC
+
+==============================================================================
+Apache-2.0
+==============================================================================
+
+The following bundled components are provided under the Apache-2.0 license:
+
+Material Symbols - Copyright Google LLC
+
+See https://opensource.org/licenses/Apache-2.0 for the full license text.
+
+==============================================================================
+MIT
+==============================================================================
+
+The following bundled components are provided under the MIT license:
+
+Fluent UI System Icons - Copyright Microsoft Corporation
+Heroicons - Copyright Tailwind Labs, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+==============================================================================
+ISC
+==============================================================================
+
+The following bundled components are provided under the ISC license:
+
+Lucide - Copyright Lucide Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+
+==============================================================================
+BSD-3-Clause
+==============================================================================
+
+The following bundled components are provided under the BSD-3-Clause license:
+
+lit v3.3.2 - Copyright Google LLC
+lit-html v3.3.2 - Copyright Google LLC
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+For license details, see: MIT: https://opensource.org/licenses/MIT, ISC: https://opensource.org/licenses/ISC, BSD-3-Clause: https://opensource.org/licenses/BSD-3-Clause, Apache-2.0: https://opensource.org/licenses/Apache-2.0

package/dist/accordion/accordion2.js

@@ -28,7 +28,7 @@ var b = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-accordion-header",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	render() {
@@ -46,7 +46,7 @@ var x = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-accordion-content",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	render() {
@@ -62,7 +62,7 @@ var x = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-accordion",
-			version: "0.0.3",
+			version: "0.0.4",
 			children: [
 				b.metadata.tag,
 				x.metadata.tag,
@@ -121,7 +121,7 @@ var C = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-accordion-group",
-			version: "0.0.3",
+			version: "0.0.4",
 			children: [S.metadata.tag]
 		};
 	}

package/dist/alert/alert-banner2.js

@@ -9,7 +9,7 @@ var r = class extends t {
 	static {
 		this.metadata = {
 			tag: "nve-alert-banner",
-			version: "0.0.3",
+			version: "0.0.4",
 			children: []
 		};
 	}

package/dist/alert/alert-group2.js

@@ -19,7 +19,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-alert-group",
-			version: "0.0.3",
+			version: "0.0.4",
 			children: [o.metadata.tag]
 		};
 	}

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';\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 */\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 */\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    <div nve-layout=\"column gap:md\">\n      <nve-alert-group 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 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 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 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 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    </div>\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\" style=\"background: transparent !important; margin: 0;\">\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}"],"mappings":";AAGA,IAAA,IAAS"}
+{"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';\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 */\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 */\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    <div nve-layout=\"column gap:md\">\n      <nve-alert-group 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 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 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 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 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    </div>\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"}

package/dist/alert/alert.examples.json

@@ -86,7 +86,7 @@
     {
       "id": "core-alert_content",
       "name": "Content",
-      "template": "<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\" style=\"background: transparent !important; margin: 0\">\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      >\n    </div>\n    <nve-button slot=\"actions\" container=\"flat\">Collapse Details</nve-button>\n  </nve-alert>\n</nve-alert-group>\n",
+      "template": "<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      >\n    </div>\n    <nve-button slot=\"actions\" container=\"flat\">Collapse Details</nve-button>\n  </nve-alert>\n</nve-alert-group>\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.",
       "description": "",
       "composition": false,

package/dist/alert/alert2.js

@@ -28,7 +28,7 @@ var v = class extends m {
 	static {
 		this.metadata = {
 			tag: "nve-alert",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	static {

package/dist/avatar/avatar-group2.js

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

package/dist/avatar/avatar2.js

@@ -11,7 +11,7 @@ var s = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-avatar",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	render() {

package/dist/badge/badge2.js

@@ -25,7 +25,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-badge",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	static {

package/dist/breadcrumb/breadcrumb2.js

@@ -24,7 +24,7 @@ var m = class extends u {
 	static {
 		this.metadata = {
 			tag: "nve-breadcrumb",
-			version: "0.0.3"
+			version: "0.0.4"
 		};
 	}
 	static {

package/dist/bundle.d.ts

@@ -7,6 +7,8 @@ export * from './drawer';
 export * from './dropdown';
 export * from './dropzone';
 export * from './file';
+export * from './format-datetime';
+export * from './format-relative-time';
 export * from './forms';
 export * from './grid';
 export * from './icon';

package/dist/bundles/index.d.ts

@@ -218,6 +218,7 @@ export interface I18nStrings {
 	dragAndDrop: string;
 	browseFiles: string;
 	maxFileSize: string;
+	create: string;
 }
 export interface IconSVG {
 	svg: () => Promise<string> | string;
@@ -2272,6 +2273,125 @@ declare class File$1 extends Control {
 	};
 	connectedCallback(): void;
 }
+/**
+ * @element nve-format-datetime
+ * @description Formats a date/time value as localized text using the Intl.DateTimeFormat API. Renders inside a semantic time element.
+ * Granular options (weekday, year, month, day, hour, minute, second) mirror the Intl.DateTimeFormat API. 'numeric' omits zero-padding, '2-digit' zero-pads.
+ * @since 0.0.0
+ * @entrypoint \@nvidia-elements/core/format-datetime
+ * @slot - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.
+ */
+export declare class FormatDatetime extends LitElement {
+	#private;
+	static styles: CSSResult[];
+	static readonly metadata: {
+		tag: string;
+		version: string;
+	};
+	/**
+	 * Optional date string for values supplied by JavaScript or bound data.
+	 * By default, the component formats the element's text content, which also serves as the SSR fallback.
+	 * When both are present, this property takes precedence.
+	 */
+	date?: string;
+	/**
+	 * Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.
+	 */
+	locale?: string;
+	/**
+	 * Weekday representation: 'long' | 'short' | 'narrow'.
+	 */
+	weekday?: "long" | "short" | "narrow";
+	/**
+	 * Year representation: 'numeric' | '2-digit'.
+	 */
+	year?: "numeric" | "2-digit";
+	/**
+	 * Month representation: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow'.
+	 */
+	month?: "numeric" | "2-digit" | "long" | "short" | "narrow";
+	/**
+	 * Day representation: 'numeric' | '2-digit'.
+	 */
+	day?: "numeric" | "2-digit";
+	/**
+	 * Hour representation: 'numeric' | '2-digit'.
+	 */
+	hour?: "numeric" | "2-digit";
+	/**
+	 * Minute representation: 'numeric' | '2-digit'.
+	 */
+	minute?: "numeric" | "2-digit";
+	/**
+	 * Second representation: 'numeric' | '2-digit'.
+	 */
+	second?: "numeric" | "2-digit";
+	/**
+	 * Preset date formatting style: 'full' | 'long' | 'medium' | 'short'.
+	 * Preset styles take precedence over granular date and time part options.
+	 */
+	dateStyle?: "full" | "long" | "medium" | "short";
+	/**
+	 * Preset time formatting style: 'full' | 'long' | 'medium' | 'short'.
+	 * Preset styles take precedence over granular date and time part options.
+	 */
+	timeStyle?: "full" | "long" | "medium" | "short";
+	/**
+	 * Time zone name display: 'long' | 'short'. Use it with granular options only; preset styles ignore it.
+	 */
+	timeZoneName?: "long" | "short";
+	/**
+	 * IANA time zone identifier (such as 'America/New_York', 'UTC').
+	 */
+	timeZone?: string;
+	render(): TemplateResult<1>;
+}
+/**
+ * @element nve-format-relative-time
+ * @description Formats a date/time value as localized relative text using the Intl.RelativeTimeFormat API. Renders inside a semantic time element.
+ * Options mirror the Intl.RelativeTimeFormat API. When unit is 'auto', the component selects the best unit based on the time difference.
+ * @since 0.0.0
+ * @entrypoint \@nvidia-elements/core/format-relative-time
+ * @slot - Date string to format (such as 2023-07-28T04:20:17.434Z). Serves as fallback before hydration.
+ */
+export declare class FormatRelativeTime extends LitElement {
+	#private;
+	static styles: CSSResult[];
+	static readonly metadata: {
+		tag: string;
+		version: string;
+	};
+	/**
+	 * Optional date string for values supplied by JavaScript or bound data.
+	 * By default, the component formats the element's text content, which also serves as the SSR fallback.
+	 * When both are present, this property takes precedence.
+	 */
+	date?: string;
+	/**
+	 * Language tag (such as en-US, de-DE). Defaults to document.documentElement.lang or browser default.
+	 */
+	locale?: string;
+	/**
+	 * Numeric formatting: 'always' | 'auto'. When 'auto', enables natural language forms such as 'yesterday' instead of '1 day ago'.
+	 */
+	numeric: "always" | "auto";
+	/**
+	 * Formatting length: 'long' | 'short' | 'narrow'. Controls verbosity (such as '3 days ago' vs '3d ago'). Maps to Intl.RelativeTimeFormat style option.
+	 */
+	formatStyle: "long" | "short" | "narrow";
+	/**
+	 * Time unit: 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year' | 'auto'. Use 'auto' to let the component select the most appropriate unit based on the time difference.
+	 */
+	unit: "second" | "minute" | "hour" | "day" | "week" | "month" | "year" | "auto";
+	/**
+	 * When present, auto-updates the displayed relative time at appropriate intervals.
+	 */
+	sync: boolean;
+	connectedCallback(): void;
+	disconnectedCallback(): void;
+	updated(changed: Map<string, unknown>): void;
+	render(): TemplateResult<1>;
+}
 /**
  * @element nve-grid-column
  * @description Defines a column header within a grid, specifying the column's label, width, and alignment for all cells beneath it.
@@ -5234,6 +5354,61 @@ export declare class Tabs extends LitElement {
 	connectedCallback(): void;
 	updated(props: PropertyValues<this>): void;
 }
+/** Arranges the tab strip and slot-matched panels: stacked column (`top`), or sidebar row with tabs at inline-start (`start`) or inline-end (`end`). */
+export type TabsGroupAlignment = "top" | "start" | "end";
+/**
+ * @element nve-tabs-group
+ * @description Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.
+ * @since 1.67.0
+ * @entrypoint \@nvidia-elements/core/tabs
+ * @command --toggle - Select the matching tab and reveal the panel whose slot matches the invoker value.
+ * @event select - Dispatched when the selected tab value changes after an invoker `--toggle` updates selection
+ * @slot - Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group.
+ * @slot {value} - Named panel content where the slot name matches a nve-tabs-item value.
+ * @cssprop --padding
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+ * @responsive false
+ */
+export declare class TabsGroup extends LitElement {
+	#private;
+	static styles: CSSResult[];
+	static readonly metadata: {
+		tag: string;
+		version: string;
+		children: string[];
+	};
+	/** Options for observing the slotted `nve-tabs` subtree (tab list / item attribute changes). */
+	protected static readonly subtreeObserverInit: {
+		readonly childList: true;
+		readonly subtree: true;
+		readonly attributes: true;
+		readonly attributeFilter: [
+			"disabled",
+			"id",
+			"selected",
+			"value"
+		];
+	};
+	private defaultSlotElements;
+	/**
+	 * Arranges the tab strip relative to slot-matched panels: stacked column (`top`), or sidebar row with tabs at
+	 * inline-start (`start`) or inline-end (`end`) beside the panel region.
+	 */
+	alignment: TabsGroupAlignment;
+	private panelValues;
+	private selectedValue;
+	/** @private */
+	_internals: ElementInternals;
+	/**
+	 * Renders the default slot (single `nve-tabs`) plus one named `<slot name={value}>` per distinct selectable
+	 * `nve-tabs-item` value. `#syncPanelSlot` applies panel visibility and ARIA from `selectedValue`.
+	 */
+	render(): TemplateResult<1>;
+	connectedCallback(): void;
+	firstUpdated(): void;
+	disconnectedCallback(): void;
+	updated(changedProperties: PropertyValues<this>): void;
+}
 /**
  * @element nve-textarea
  * @description A textarea is a control that enables users to enter and edit text.
@@ -5486,7 +5661,7 @@ export declare class Toolbar extends LitElement implements ContainerElement {
  * @command --close - use to close the node
  * @command --toggle - use to toggle open / closed state of the node
  * @slot - Use default slot for basic text content or nested <nve-tree-node> elements.
- * @slot content - Use for extended long form content containing interactive elements or form inputs.
+ * @slot content - Use only for extended long form content containing interactive elements or form inputs.
  * @cssprop --color
  * @cssprop --border-radius
  * @cssprop --font-size