@nvidia-elements/core 2.2.2 → 2.3.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## 2.3.0 (2026-08-07)
+
+* fix(cli): update dependencies ([ff596a1](https://github.com/NVIDIA/elements/commit/ff596a1))
+* fix(forms): respect event default prevention ([5618862](https://github.com/NVIDIA/elements/commit/5618862))
+* chore(ci): lint rules and skill for component registration and testing ([6c7fea0](https://github.com/NVIDIA/elements/commit/6c7fea0))
+* chore(ci): update metadata ([b7120bf](https://github.com/NVIDIA/elements/commit/b7120bf))
+* chore(docs): add component preview to card list ([c7e16a5](https://github.com/NVIDIA/elements/commit/c7e16a5))
+* chore(release): @nvidia-elements/forms-v2.0.6 [skip ci] ([c977b1a](https://github.com/NVIDIA/elements/commit/c977b1a))
+* feat(core): format-bytes ([bfd2e5e](https://github.com/NVIDIA/elements/commit/bfd2e5e))
+* feat(media): init ([859c8f9](https://github.com/NVIDIA/elements/commit/859c8f9))
+
+## <small>2.2.3 (2026-08-05)</small>
+
+* fix(cli): workspace dependency ([5ecbd96](https://github.com/NVIDIA/elements/commit/5ecbd96))
+* fix(core): size height calculation ([204aa52](https://github.com/NVIDIA/elements/commit/204aa52))
+* fix(core): update fit-text input to native field sizing ([cadc33c](https://github.com/NVIDIA/elements/commit/cadc33c))
+* fix(styles): add width rule for row layout with space-between alignment ([61113ad](https://github.com/NVIDIA/elements/commit/61113ad))
+* chore(ci): add github dependabot skill ([4cb37a7](https://github.com/NVIDIA/elements/commit/4cb37a7))
+* chore(ci): enhance ci performance profiling and add new scripts ([ef0a912](https://github.com/NVIDIA/elements/commit/ef0a912))
+* chore(ci): update dependencies ([4601239](https://github.com/NVIDIA/elements/commit/4601239))
+* chore(ci): update metadata and test coverage report ([216a7a9](https://github.com/NVIDIA/elements/commit/216a7a9))
+* chore(docs): july update ([59d3f83](https://github.com/NVIDIA/elements/commit/59d3f83))
+* chore(release): @nvidia-elements/cli-v2.1.9 [skip ci] ([651abf3](https://github.com/NVIDIA/elements/commit/651abf3))
+* chore(release): @nvidia-elements/lint-v2.3.0 [skip ci] ([35bb729](https://github.com/NVIDIA/elements/commit/35bb729))
+* chore(release): @nvidia-elements/styles-v2.1.2 [skip ci] ([71fab6c](https://github.com/NVIDIA/elements/commit/71fab6c))
+* feat(lint): add rule to restrict container="full" usage ([a634e39](https://github.com/NVIDIA/elements/commit/a634e39))
+
 ## <small>2.2.2 (2026-07-30)</small>
 
 * fix(cli): update mcp sdk ([0640e11](https://github.com/NVIDIA/elements/commit/0640e11))

package/dist/accordion/accordion2.js

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

package/dist/alert/alert-group2.js

@@ -19,7 +19,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-alert-group",
-			version: "2.2.2",
+			version: "2.3.0",
 			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\">\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":[],"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"}

package/dist/alert/alert.examples.json

@@ -18,7 +18,9 @@
       "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.",
       "description": "",
       "composition": false,
-      "tags": []
+      "tags": [
+        "test-case"
+      ]
     },
     {
       "id": "alert-status",
@@ -27,7 +29,9 @@
       "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.",
       "description": "",
       "composition": false,
-      "tags": []
+      "tags": [
+        "test-case"
+      ]
     },
     {
       "id": "alert-group",
@@ -77,7 +81,7 @@
     {
       "id": "alert-prominence",
       "name": "Prominence",
-      "template": "<div nve-layout=\"column gap:md\">\n  <nve-alert-group prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Standard</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group status=\"accent\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Accent</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group status=\"warning\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Warning</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group status=\"success\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Success</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group status=\"danger\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Danger</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n</div>\n",
+      "template": "<nve-page document-scroll>\n  <nve-alert-group slot=\"header\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Standard</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"accent\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Accent</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"warning\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Warning</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"success\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Success</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group slot=\"header\" status=\"danger\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable\n      ><span slot=\"prefix\">Danger</span> banner message\n      <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a></nve-alert\n    >\n  </nve-alert-group>\n</nve-page>\n",
       "summary": "High-prominence alerts with emphasis styling for full-width banners. Use prominence=\"emphasis\" for system-wide announcements like maintenance windows, feature launches, or critical security updates that need max visibility and impact across the entire interface.",
       "description": "",
       "composition": false,

package/dist/alert/alert2.js

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

package/dist/avatar/avatar-group2.js

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

package/dist/avatar/avatar2.js

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

package/dist/badge/badge2.js

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

package/dist/breadcrumb/breadcrumb2.js

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

package/dist/bundle.d.ts

@@ -21,6 +21,7 @@ import '@nvidia-elements/core/dropdown/define.js';
 import '@nvidia-elements/core/dropdown-group/define.js';
 import '@nvidia-elements/core/dropzone/define.js';
 import '@nvidia-elements/core/file/define.js';
+import '@nvidia-elements/core/format-bytes/define.js';
 import '@nvidia-elements/core/format-datetime/define.js';
 import '@nvidia-elements/core/format-number/define.js';
 import '@nvidia-elements/core/format-relative-time/define.js';
@@ -89,6 +90,7 @@ export * from '@nvidia-elements/core/dropdown';
 export * from '@nvidia-elements/core/dropdown-group';
 export * from '@nvidia-elements/core/dropzone';
 export * from '@nvidia-elements/core/file';
+export * from '@nvidia-elements/core/format-bytes';
 export * from '@nvidia-elements/core/format-datetime';
 export * from '@nvidia-elements/core/format-number';
 export * from '@nvidia-elements/core/format-relative-time';

package/dist/bundles/index.d.ts

@@ -1898,12 +1898,12 @@ export declare class MenuItem extends MenuItem_base {
 }
 /**
  * @element nve-dropdown
- * @description Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @description Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls.
  * @documentation https://nvidia.github.io/elements/docs/elements/dropdown/
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/dropdown
- * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)
- * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)
+ * @event beforetoggle - Dispatched on a popover just before showing or hiding.
+ * @event toggle - Dispatched on a popover element just after showing or hiding.
  * @event open - Dispatched when the dropdown opens.
  * @event close - Dispatched when the dropdown closes.
  * @slot - default slot for dropdown content
@@ -2142,7 +2142,7 @@ export declare class Combobox extends Control implements ContainerElement {
 }
 /**
  * @element nve-toast
- * @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them.
  * @documentation https://nvidia.github.io/elements/docs/elements/toast/
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/toast
@@ -2234,7 +2234,7 @@ export declare class Toast extends LitElement {
 }
 /**
  * @element nve-tooltip
- * @description A contextual popup that displays a plaintext description. Tooltips are [triggered](https://w3c.github.io/aria/#tooltip) by hovering, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @description A contextual popup that displays a plaintext description. Trigger tooltips by hovering, focusing, or tapping an element and cannot have interactive elements within them.
  * @documentation https://nvidia.github.io/elements/docs/elements/tooltip/
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/tooltip
@@ -2439,7 +2439,7 @@ export declare class Datetime extends Control implements ContainerElement {
 }
 /**
  * @element nve-dialog
- * @description Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @description Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow.
  * @documentation https://nvidia.github.io/elements/docs/elements/dialog/
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/dialog
@@ -2635,7 +2635,7 @@ export declare class Dot extends LitElement {
 }
 /**
  * @element nve-drawer
- * @description Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings). Or use [Panel](./docs/elements/panel/) inline as its content couples with or closely relates to the content on the page (details, extra actions/options). [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @description A drawer displays content separate from the rest of the page, such as notifications, navigation, and settings.
  * @documentation https://nvidia.github.io/elements/docs/elements/drawer/
  * @since 0.16.0
  * @entrypoint \@nvidia-elements/core/drawer
@@ -2906,6 +2906,58 @@ declare class File$1 extends Control {
 	};
 	connectedCallback(): void;
 }
+export type FormatBytesDisplay = "decimal" | "binary";
+export type FormatBytesUnit = "b" | "kb" | "mb" | "gb" | "tb" | "pb";
+export type FormatBytesUnitDisplay = "short" | "long";
+/**
+ * @element nve-format-bytes
+ * @description Formats a byte count as localized, human-readable decimal or binary units.
+ * @documentation https://nvidia.github.io/elements/docs/elements/format-bytes/
+ * @since 0.0.0
+ * @entrypoint \@nvidia-elements/core/format-bytes
+ * @slot - Numeric byte count to format (such as 1048576). Serves as fallback before hydration.
+ * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data
+ */
+export declare class FormatBytes extends LitElement {
+	#private;
+	static styles: CSSResult[];
+	static readonly metadata: {
+		tag: string;
+		version: string;
+	};
+	/**
+	 * Optional byte count 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.
+	 */
+	value?: number;
+	/**
+	 * Unit system: 'decimal' uses powers of 1000 and 'binary' uses powers of 1024.
+	 */
+	display: FormatBytesDisplay;
+	/**
+	 * Optional unit magnitude. When omitted, the component selects a unit from the byte count.
+	 */
+	unit?: FormatBytesUnit;
+	/**
+	 * Unit label length: 'short' renders labels such as 'mb'; 'long' renders labels such as 'megabytes'.
+	 */
+	unitDisplay: FormatBytesUnitDisplay;
+	/**
+	 * Language tag (such as en-US or de-DE) used to format the number.
+	 * Defaults to document.documentElement.lang or the runtime default.
+	 */
+	locale?: string;
+	/**
+	 * Pad fraction output to at least this many digits.
+	 */
+	minimumFractionDigits?: number;
+	/**
+	 * Round fraction output to at most this many digits. Defaults to two effective digits after the decimal point.
+	 */
+	maximumFractionDigits?: number;
+	render(): TemplateResult<1>;
+}
 /**
  * @element nve-format-datetime
  * @description Formats a date/time value as localized text using the Intl.DateTimeFormat API. Renders inside a semantic time element.
@@ -3536,7 +3588,7 @@ export declare class Month extends Control implements ContainerElement {
 }
 /**
  * @element nve-notification
- * @description Displays real time updates without interrupting the user's workflow to communicate an important message or status. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @description Displays real time updates without interrupting the user's workflow to communicate an important message or status.
  * @documentation https://nvidia.github.io/elements/docs/elements/notification/
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/notification
@@ -3697,6 +3749,7 @@ export declare class NotificationGroup extends LitElement {
  * @cssprop --border-radius
  * @cssprop --box-shadow
  * @cssprop --min-height
+ * @cssprop --gap - Vertical gap spacing between main content items
  * @aria https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/
  * @responsive false
  *