@nvidia-elements/core 0.0.0

package/dist/alert/alert.examples.json

@@ -0,0 +1,118 @@
+{
+  "element": "nve-alert",
+  "entrypoint": "@nvidia-elements/core/alert/alert.examples.json",
+  "items": [
+    {
+      "id": "core-alert_default",
+      "name": "Default",
+      "template": "<nve-alert>alert message</nve-alert>\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.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-alert_support-status",
+      "name": "SupportStatus",
+      "template": "<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",
+      "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": []
+    },
+    {
+      "id": "core-alert_status",
+      "name": "Status",
+      "template": "<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  <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",
+      "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": []
+    },
+    {
+      "id": "core-alert_group-default",
+      "name": "GroupDefault",
+      "template": "<nve-alert-group>\n  <nve-alert>alert message</nve-alert>\n</nve-alert-group>\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.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-alert_group-status",
+      "name": "GroupStatus",
+      "template": "<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  <nve-alert-group status=\"accent\">\n    <nve-alert>Accent</nve-alert>\n    <nve-alert>Accent</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group status=\"warning\">\n    <nve-alert>Warning</nve-alert>\n    <nve-alert>Warning</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group status=\"success\">\n    <nve-alert>Success</nve-alert>\n    <nve-alert>Success</nve-alert>\n  </nve-alert-group>\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",
+      "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.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-alert_invoker-command",
+      "name": "InvokerCommand",
+      "template": "<nve-alert-group>\n  <nve-alert id=\"alert-1\">\n    Alert Notification Message 1\n    <nve-icon-button\n      commandfor=\"alert-1\"\n      command=\"--close\"\n      slot=\"actions\"\n      container=\"flat\"\n      icon-name=\"cancel\"\n      size=\"sm\"\n      aria-label=\"close\"\n    ></nve-icon-button>\n  </nve-alert>\n  <nve-alert id=\"alert-2\">\n    Alert Notification Message 2\n    <nve-icon-button\n      commandfor=\"alert-2\"\n      command=\"--close\"\n      slot=\"actions\"\n      container=\"flat\"\n      icon-name=\"cancel\"\n      size=\"sm\"\n      aria-label=\"close\"\n    ></nve-icon-button>\n  </nve-alert>\n</nve-alert-group>\n",
+      "summary": "Dismissible alerts using the Invoker Command API for declarative close behavior. Use `commandfor` and `command=\"--close\"` on action buttons to dismiss individual alerts without custom JavaScript event handling.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-alert_closable",
+      "name": "Closable",
+      "template": "<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  <nve-alert-group status=\"accent\">\n    <nve-alert closable>Accent</nve-alert>\n    <nve-alert closable>Accent</nve-alert>\n  </nve-alert-group>\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  <nve-alert-group status=\"success\">\n    <nve-alert closable>Success</nve-alert>\n    <nve-alert closable>Success</nve-alert>\n  </nve-alert-group>\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",
+      "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.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-alert_actions",
+      "name": "Actions",
+      "template": "<div nve-layout=\"column gap:md\">\n  <nve-alert-group>\n    <nve-alert> Standard <nve-button slot=\"actions\" container=\"flat\">action</nve-button> </nve-alert>\n  </nve-alert-group>\n  <nve-alert-group status=\"accent\">\n    <nve-alert> Standard <nve-button slot=\"actions\" container=\"flat\">action</nve-button> </nve-alert>\n  </nve-alert-group>\n  <nve-alert-group status=\"warning\">\n    <nve-alert> Warning <nve-button slot=\"actions\" container=\"flat\">action</nve-button> </nve-alert>\n  </nve-alert-group>\n  <nve-alert-group status=\"success\">\n    <nve-alert> Success <nve-button slot=\"actions\" container=\"flat\">action</nve-button> </nve-alert>\n  </nve-alert-group>\n  <nve-alert-group status=\"danger\">\n    <nve-alert> Danger <nve-button slot=\"actions\" container=\"flat\">action</nve-button> </nve-alert>\n  </nve-alert-group>\n</div>\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.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-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",
+      "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,
+      "tags": []
+    },
+    {
+      "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",
+      "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,
+      "tags": []
+    },
+    {
+      "id": "core-alert_color",
+      "name": "Color",
+      "template": "<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  <nve-alert-group color=\"gray-slate\">\n    <nve-alert>gray-slate</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"gray-denim\">\n    <nve-alert>gray-denim</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\">\n    <nve-alert>blue-indigo</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-cobalt\">\n    <nve-alert>blue-cobalt</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-sky\">\n    <nve-alert>blue-sky</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"teal-cyan\">\n    <nve-alert>teal-cyan</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"green-mint\">\n    <nve-alert>green-mint</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"teal-seafoam\">\n    <nve-alert>teal-seafoam</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"green-grass\">\n    <nve-alert>green-grass</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"yellow-amber\">\n    <nve-alert>yellow-amber</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"orange-pumpkin\">\n    <nve-alert>orange-pumpkin</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"red-tomato\">\n    <nve-alert>red-tomato</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-magenta\">\n    <nve-alert>pink-magenta</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"purple-plum\">\n    <nve-alert>purple-plum</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"purple-violet\">\n    <nve-alert>purple-violet</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"purple-lavender\">\n    <nve-alert>purple-lavender</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\">\n    <nve-alert>pink-rose</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"green-jade\">\n    <nve-alert>green-jade</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"lime-pear\">\n    <nve-alert>lime-pear</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"yellow-nova\">\n    <nve-alert>yellow-nova</nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"brand-green\">\n    <nve-alert>brand-green</nve-alert>\n  </nve-alert-group>\n</div>\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.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-alert_custom-color-combinations",
+      "name": "CustomColorCombinations",
+      "template": "<div nve-layout=\"column gap:md\">\n  <nve-alert-group color=\"blue-indigo\">\n    <nve-alert closable\n      >Custom <code nve-text=\"code\">color</code> will theme the <code nve-text=\"code\">closable</code> icon.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"teal-seafoam\">\n    <nve-alert>\n      Custom <code nve-text=\"code\">color</code> is compatible with <code nve-text=\"code\">actions</code> button.\n      <nve-button slot=\"actions\" container=\"flat\">action</nve-button>\n    </nve-alert>\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"accent\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields\n      the status icon with custom alert color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"success\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields\n      the status icon with custom alert color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"warning\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields\n      the status icon with custom alert color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"pink-rose\" status=\"danger\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"pink-rose\"</code> with <code nve-text=\"code\">status</code> yields\n      the status icon with custom alert color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"accent\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and\n      <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom alert\n      color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"success\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and\n      <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom alert\n      color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"warning\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and\n      <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom alert\n      color.</nve-alert\n    >\n  </nve-alert-group>\n  <nve-alert-group color=\"blue-indigo\" status=\"danger\" prominence=\"emphasis\">\n    <nve-alert\n      >Combining custom <code nve-text=\"code\">color=\"blue-indigo\"</code> with <code nve-text=\"code\">status</code> and\n      <code nve-text=\"code\">prominence</code> yields the status icon with an <em>emphasized</em> custom alert\n      color.</nve-alert\n    >\n  </nve-alert-group>\n</div>\n",
+      "summary": "Custom color combinations with status icons and prominence for advanced theming. Custom colors interact with status icons and emphasis styling, useful for maintaining brand consistency while preserving semantic meaning through status indicators.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/alert/alert.global.js

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

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

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

package/dist/alert/alert.js

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

package/dist/alert/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","names":[],"sources":["../../src/alert/alert.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --gap: var(--nve-ref-space-xs);\n  --font-size: var(--nve-ref-font-size-100);\n  --color: var(--nve-sys-text-emphasis-color);\n  --icon-color: var(--status-color);\n  --icon-size: var(--nve-ref-size-400);\n  --font-weight: var(--nve-ref-font-weight-medium);\n  --justify-content: start;\n  --align-items: center;\n  --min-height: initial;\n  --text-transform: initial;\n  width: auto;\n}\n\n[internal-host] {\n  --_icon-cancel-color: var(--color);\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  gap: var(--gap);\n  color: var(--color);\n  justify-content: var(--justify-content);\n  align-items: var(--align-items);\n  text-transform: var(--text-transform);\n  display: flex;\n  line-height: 1em;\n  height: 100%;\n}\n\nslot[part='_content'] {\n  display: contents;\n  padding-inline-start: var(--nve-ref-size-600);\n  padding-block-end: var(--nve-ref-size-200);\n}\n\nslot {\n  display: flex;\n  align-items: center;\n  justify-content: var(--justify-content);\n  gap: var(--nve-ref-space-xxs);\n  min-height: var(--min-height);\n}\n\nslot:not([name='actions'], [name='prefix'], [name='icon']) {\n  flex-grow: 1;\n}\n\nslot[name='prefix'],\nslot[name='actions'] {\n  font-weight: var(--nve-ref-font-weight-semibold);\n}\n\n::slotted(nve-button[interaction='flat']),\n::slotted(nve-button[interaction='flat']) {\n  --color: inherit;\n}\n\nslot[name='actions'] {\n  margin-inline-start: auto;\n}\n\nslot[name='prefix'] {\n  margin-inline-end: var(--nve-ref-space-lg);\n}\n\nnve-icon {\n  --color: var(--icon-color);\n}\n\nnve-icon:not([size='sm']) {\n  --width: var(--icon-size);\n  --height: var(--icon-size);\n}\n\nnve-icon[size='sm'] {\n  padding: var(--nve-ref-size-50);\n}\n\nnve-icon-button {\n  --color: var(--icon-color);\n  margin-inline-start: auto;\n}\n\n::slotted([nve-text]),\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n:host([status='success']),\n:host([status='danger']) {\n  --color: var(--status-color);\n}\n\n:host([status='scheduled']),\n:host([status='queued']),\n:host([status='pending']),\n:host([status='starting']),\n:host([status='running']),\n:host([status='restarting']),\n:host([status='stopping']),\n:host([status='finished']),\n:host([status='failed']),\n:host([status='unknown']),\n:host([status='ignored']) {\n  --color: var(--status-color);\n}\n\n::slotted([slot='actions']) {\n  --color: var(--status-color) !important;\n}\n"],"mappings":""}

package/dist/alert/alert2.js

@@ -0,0 +1,62 @@
+import { appendRootNodeStyle as e } from "../internal/utils/dom.js";
+import { attachInternals as t } from "../internal/utils/a11y.js";
+import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { I18nController as r } from "../internal/controllers/i18n.controller.js";
+import { TypeClosableController as i } from "../internal/controllers/type-closable.controller.js";
+import { scopedRegistry as a } from "../internal/decorators/scoped-registry.js";
+import { statusStateStyles as o, supportStateStyles as s, useStyles as c } from "../internal/styles/index.js";
+import { statusIcons as l } from "../internal/types/index.js";
+import { Icon as u } from "../icon/icon2.js";
+import { IconButton as d } from "../icon-button/icon-button2.js";
+import f from "./alert.global.js";
+import p from "./alert.js";
+import { LitElement as m, html as h } from "lit";
+import { property as g } from "lit/decorators/property.js";
+import { queryAssignedElements as _ } from "lit/decorators/query-assigned-elements.js";
+//#region src/alert/alert.ts
+var v = class extends m {
+	constructor(...e) {
+		super(...e), this.closable = !1, this.i18n = this.#t.i18n;
+	}
+	static {
+		this.styles = c([
+			p,
+			o,
+			s
+		]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-alert",
+			version: "0.0.0"
+		};
+	}
+	static {
+		this.elementDefinitions = {
+			[u.metadata.tag]: u,
+			[d.metadata.tag]: d
+		};
+	}
+	#e = new i(this);
+	#t = new r(this);
+	render() {
+		return h`<div internal-host @slotchange="${() => this.requestUpdate()}"><slot name="icon"><nve-icon part="icon" role="img" .name="${l[this.status] ?? l[""]}" aria-label="${(this.status ? this.i18n[this.status] : void 0) ?? this.i18n.information ?? "information"}"></nve-icon></slot><slot name="prefix" ?hidden="${!this.prefixItems.length}"></slot><slot></slot><slot name="actions" ?hidden="${!this.actionItems.length}"></slot>${this.closable ? h`<nve-icon-button part="icon-button" exportparts="icon:icon-button-icon" @click="${() => this.#e.close()}" container="flat" icon-name="cancel" size="sm" .ariaLabel="${this.i18n.close}"></nve-icon-button>` : ""}</div><slot name="content" part="_content"></slot>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), t(this), e(this, f), this._internals.role = "alert";
+	}
+};
+n([g({
+	type: String,
+	reflect: !0
+})], v.prototype, "status", void 0), n([g({ type: Boolean })], v.prototype, "closable", void 0), n([g({ type: Object })], v.prototype, "i18n", void 0), n([_({
+	slot: "prefix",
+	flatten: !0
+})], v.prototype, "prefixItems", void 0), n([_({
+	slot: "actions",
+	flatten: !0
+})], v.prototype, "actionItems", void 0), v = n([a()], v);
+//#endregion
+export { v as Alert };
+
+//# sourceMappingURL=alert2.js.map

package/dist/alert/alert2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert2.js","names":["#i18nController","#typeClosableController"],"sources":["../../src/alert/alert.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { SupportStatus, TaskStatus } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  I18nController,\n  statusIcons,\n  TypeClosableController,\n  useStyles,\n  statusStateStyles,\n  supportStateStyles,\n  appendRootNodeStyle,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport globalStyles from './alert.global.css?inline';\nimport styles from './alert.css?inline';\n\n/**\n * @element nve-alert\n * @description Alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/alert\n * @event close - Dispatched when the alert closes within an alert group.\n * @command --close - Use to set the alert closed/hidden state.\n * @slot icon - Icon slot renders on the left side of the alert. Icons typically represent the alert's status.\n * @slot prefix - Prefix slot renders between the icon and the content. Prefixes typically represent the alert's status.\n * @slot actions - Actions render on the right side of the alert. Actions are typically buttons, but can also be links. Use actions for steps the user can take to resolve the alert.\n * @slot content - Content for large overflow text.\n * @slot - Default content placed inside of the alert.\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --color\n * @cssprop --icon-color\n * @cssprop --icon-size\n * @cssprop --font-weight\n * @cssprop --justify-content\n * @cssprop --align-items\n * @cssprop --min-height\n * @cssprop --text-transform\n * @cssprop --height\n * @cssprop --width\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n */\n@scopedRegistry()\nexport class Alert extends LitElement {\n  static styles = useStyles([styles, statusStateStyles, supportStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-alert',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon,\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /** Defines visual treatment to represent a ongoing task or support status. */\n  @property({ type: String, reflect: true }) status?: SupportStatus | TaskStatus | 'muted';\n\n  /** When used in an `alert-group` the `closable` property enables dismissing alerts within the same group. */\n  @property({ type: Boolean }) closable = false;\n\n  #typeClosableController = new TypeClosableController(this);\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /** Enables updating internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  @queryAssignedElements({ slot: 'prefix', flatten: true }) private prefixItems!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'actions', flatten: true }) private actionItems!: HTMLElement[];\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host @slotchange=${() => this.requestUpdate()}>\n        <slot name=\"icon\"><nve-icon part=\"icon\" role=\"img\" .name=${statusIcons[this.status as string] ?? statusIcons['']} aria-label=${(this.status ? (this.i18n as Record<string, string>)[this.status] : undefined) ?? this.i18n.information ?? 'information'}></nve-icon></slot>\n        <slot name=\"prefix\" ?hidden=${!this.prefixItems.length}></slot>\n        <slot></slot>\n        <slot name=\"actions\" ?hidden=${!this.actionItems.length}></slot>\n        ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${() => this.#typeClosableController.close()} container=\"flat\" icon-name=\"cancel\" size=\"sm\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n      </div>\n      <slot name=\"content\" part=\"_content\"></slot>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    appendRootNodeStyle(this, globalStyles);\n    this._internals.role = 'alert';\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAkDO,IAAA,IAAA,cAAoB,EAAW;;+BAiBI,gBAOL,MAAA,EAAqB;;;gBAvBxC,EAAU;GAAC;GAAQ;GAAmB;GAAmB,CAAC;;;kBAE/C;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B;IACzB,EAAK,SAAS,MAAM;IACpB,EAAW,SAAS,MAAM;GAC5B;;CAQD,KAA0B,IAAI,EAAuB,KAAK;CAE1D,KAAwC,IAAI,EAAqB,KAAK;CAYtE,SAAS;AACP,SAAO,CAAI,yCAC8B,KAAK,eAAe,CAAC,8DACC,EAAY,KAAK,WAAqB,EAAY,IAAI,iBAAe,KAAK,SAAU,KAAK,KAAgC,KAAK,UAAU,KAAA,MAAc,KAAK,KAAK,eAAe,cAAc,mDAC1N,CAAC,KAAK,YAAY,OAAO,sDAExB,CAAC,KAAK,YAAY,OAAO,WACtD,KAAK,WAAW,CAAI,yFAAwF,MAAA,EAA6B,OAAO,CAAC,8DAA4D,KAAK,KAAK,MAAM,wBAAuB,GAAG;;CAM/P,oBAAoB;AAIlB,EAHA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,EAAoB,MAAM,EAAa,EACvC,KAAK,WAAW,OAAO;;;GApCxB,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAGzC,EAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAO3B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAE1B,EAAsB;CAAE,MAAM;CAAU,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAExD,EAAsB;CAAE,MAAM;CAAW,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,SA7B3D,GAAgB,CAAA,EAAA,EAAA"}

package/dist/alert/define.d.ts

@@ -0,0 +1,7 @@
+import { Alert, AlertGroup } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-alert': Alert;
+        'nve-alert-group': AlertGroup;
+    }
+}

package/dist/alert/define.js

@@ -0,0 +1,8 @@
+import { define as e } from "../internal/utils/dom.js";
+import { Alert as t } from "./alert2.js";
+import { AlertGroup as n } from "./alert-group2.js";
+import { AlertBanner as r } from "./alert-banner2.js";
+e(t), e(n), e(r);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/alert/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/alert/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { Alert, AlertGroup, AlertBanner } from '@nvidia-elements/core/alert';\nimport { define } from '@nvidia-elements/core/internal';\n\ndefine(Alert);\ndefine(AlertGroup);\ndefine(AlertBanner);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-alert': Alert;\n    'nve-alert-group': AlertGroup;\n  }\n}\n"],"mappings":";;;;AAMA,EAAO,EAAM,EACb,EAAO,EAAW,EAClB,EAAO,EAAY"}

package/dist/alert/index.d.ts

@@ -0,0 +1,3 @@
+export * from './alert.js';
+export * from './alert-group.js';
+export * from './alert-banner.js';

package/dist/alert/index.js

@@ -0,0 +1,4 @@
+import { Alert as e } from "./alert2.js";
+import { AlertGroup as t } from "./alert-group2.js";
+import { AlertBanner as n } from "./alert-banner2.js";
+export { e as Alert, n as AlertBanner, t as AlertGroup };

package/dist/app-header/app-header.d.ts

@@ -0,0 +1,39 @@
+import { PropertyValues, LitElement } from 'lit';
+import { Logo } from '../logo';
+/**
+ * @deprecated use `nve-page-header` instead
+ * @element nve-app-header
+ * @description An element that appears across the top of all pages containing the application name and primary navigation.
+ * @since 0.11.0
+ * @slot - Use the default slot in `logo` to create an app logo badge within the app header. Include a `<span>` element inside `app-header` to change the default application title.
+ * @slot title
+ * @slot nav-items - For `button` and `icon-button` elements used for navigation behavior. Use the `active` attribute to show the current page.
+ * @slot nav-actions - For `icon-button` elements. Places them in the supplemental actions section of the app header.
+ * @cssprop --background
+ * @cssprop --padding
+ * @cssprop --border-bottom
+ * @cssprop --color
+ * @cssprop --font-weight
+ * @cssprop --text-decoration
+ * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav
+ * @responsive false
+ */
+export declare class AppHeader extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    static elementDefinitions: {
+        [Logo.metadata.tag]: typeof Logo;
+    };
+    private navItems;
+    private navActions;
+    private slottedElements;
+    render(): import('lit-html').TemplateResult<1>;
+    /** @private */
+    _internals: ElementInternals;
+    connectedCallback(): void;
+    updated(props: PropertyValues<this>): void;
+}

package/dist/app-header/app-header.js

@@ -0,0 +1,6 @@
+//#region src/app-header/app-header.css?inline
+var e = ":host{--background: var(--nve-sys-layer-shell-background);--padding: var(--nve-ref-space-xs) var(--nve-ref-space-lg);--border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);contain:initial;width:100%}[internal-host]{background:var(--background);padding:var(--padding);border-bottom:var(--border-bottom);display:flex;flex-direction:row;place-items:center flex-start;justify-content:space-between}[app-branding]{display:flex;flex-direction:row;place-items:center;justify-content:center;gap:var(--nve-ref-space-xs);margin:0;min-height:0}::slotted([slot=\"title\"]),slot[name=title] h2{font-family:var(--nve-ref-font-family)!important;font-size:var(--nve-ref-font-size-200)!important;font-weight:var(--nve-ref-font-weight-semibold)!important;color:var(--nve-sys-text-muted-color)!important;white-space:initial;margin:0}slot{display:flex;flex-direction:row;place-items:flex-start;margin:0;min-height:0}slot[name=nav-items]{margin:0 auto 0 var(--nve-ref-space-xxl);gap:var(--nve-ref-space-xxs)}slot[name=nav-actions]{align-items:center}::slotted(nve-button[slot=\"nav-items\"]){--color: var(--nve-sys-text-muted-color);--font-weight: var(--nve-ref-font-weight-medium)}::slotted(nve-button[slot=\"nav-items\"][selected]){--color: var(--nve-sys-text-emphasis-color);--text-decoration: none;--nve-sys-interaction-state-ratio-active: 0;--font-weight: var(--nve-ref-font-weight-semibold)}::slotted(nve-icon-button[slot=\"nav-items\"][selected]){--color: var(--nve-sys-text-emphasis-color)}::slotted(nve-button[slot=\"nav-items\"]:hover),::slotted(nve-button[slot=\"nav-items\"]:focus){--text-decoration: underline}::slotted(nve-icon-button[interaction=\"emphasis\"]),::slotted(nve-icon-button[interaction=\"emphasize\"]){margin-inline-start:var(--nve-ref-space-lg)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=app-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"app-header.js","names":[],"sources":["../../src/app-header/app-header.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background: var(--nve-sys-layer-shell-background);\n  --padding: var(--nve-ref-space-xs) var(--nve-ref-space-lg);\n  --border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  contain: initial;\n  width: 100%;\n}\n\n[internal-host] {\n  background: var(--background);\n  padding: var(--padding);\n  border-bottom: var(--border-bottom);\n  display: flex;\n  flex-direction: row;\n  place-items: center flex-start;\n  justify-content: space-between;\n}\n\n[app-branding] {\n  display: flex;\n  flex-direction: row;\n  place-items: center;\n  justify-content: center;\n  gap: var(--nve-ref-space-xs);\n  margin: 0;\n  min-height: 0;\n}\n\n::slotted([slot='title']),\nslot[name='title'] h2 {\n  font-family: var(--nve-ref-font-family) !important;\n  font-size: var(--nve-ref-font-size-200) !important;\n  font-weight: var(--nve-ref-font-weight-semibold) !important;\n  color: var(--nve-sys-text-muted-color) !important;\n  white-space: initial;\n  margin: 0;\n}\n\nslot {\n  display: flex;\n  flex-direction: row;\n  place-items: flex-start;\n  margin: 0;\n  min-height: 0;\n}\n\nslot[name='nav-items'] {\n  margin: 0 auto 0 var(--nve-ref-space-xxl);\n  gap: var(--nve-ref-space-xxs);\n}\n\nslot[name='nav-actions'] {\n  align-items: center;\n}\n\n::slotted(nve-button[slot='nav-items']),\n::slotted(nve-button[slot='nav-items']) {\n  --color: var(--nve-sys-text-muted-color);\n  --font-weight: var(--nve-ref-font-weight-medium);\n}\n\n::slotted(nve-button[slot='nav-items'][selected]),\n::slotted(nve-button[slot='nav-items'][selected]) {\n  --color: var(--nve-sys-text-emphasis-color);\n  --text-decoration: none;\n  --nve-sys-interaction-state-ratio-active: 0;\n  --font-weight: var(--nve-ref-font-weight-semibold);\n}\n\n::slotted(nve-icon-button[slot='nav-items'][selected]),\n::slotted(nve-icon-button[slot='nav-items'][selected]) {\n  --color: var(--nve-sys-text-emphasis-color);\n}\n\n::slotted(nve-button[slot='nav-items']:hover),\n::slotted(nve-button[slot='nav-items']:focus),\n::slotted(nve-button[slot='nav-items']:hover),\n::slotted(nve-button[slot='nav-items']:focus) {\n  --text-decoration: underline;\n}\n\n::slotted(nve-icon-button[interaction='emphasis']),\n::slotted(nve-icon-button[interaction='emphasize']), /* deprecated */\n::slotted(nve-icon-button[interaction='emphasis']) {\n  margin-inline-start: var(--nve-ref-space-lg);\n}\n"],"mappings":""}

package/dist/app-header/app-header2.js

@@ -0,0 +1,54 @@
+import { matchesElementName as e } from "../internal/utils/dom.js";
+import { attachInternals as t } from "../internal/utils/a11y.js";
+import { __decorate as n } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { scopedRegistry as r } from "../internal/decorators/scoped-registry.js";
+import { useStyles as i } from "../internal/styles/index.js";
+import { Logo as a } from "../logo/logo2.js";
+import o from "./app-header.js";
+import { LitElement as s, html as c } from "lit";
+import { queryAssignedElements as l } from "lit/decorators/query-assigned-elements.js";
+//#region src/app-header/app-header.ts
+var u = class extends s {
+	static {
+		this.styles = i([o]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-app-header",
+			version: "0.0.0"
+		};
+	}
+	static {
+		this.elementDefinitions = { [a.metadata.tag]: a };
+	}
+	get #e() {
+		return this.slottedElements.find((t) => e(t, a));
+	}
+	render() {
+		return c`<div internal-host><div app-branding><slot @slotchange="${this.#t}"><nve-logo part="logo" size="sm" aria-label="NVIDIA"></nve-logo></slot><slot name="title"><h2>NVIDIA</h2></slot></div><slot name="nav-items" @slotchange="${this.#n}"></slot><slot name="nav-actions" @slotchange="${this.#n}"></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), t(this), this._internals.role = "navigation";
+	}
+	updated(e) {
+		super.updated(e), this.#t(), this.#n();
+	}
+	#t() {
+		let e = this.#e;
+		e && !e.hasAttribute("size") && e.setAttribute("size", "sm");
+	}
+	#n() {
+		this.navActions?.filter((e) => e.getAttribute("interaction") === "emphasis")?.forEach((e) => e.size = "sm"), [...this.navItems, ...this.navActions].filter((e) => !e.hasAttribute("container") && !e.hasAttribute("interaction")).forEach((e) => e.container = "flat");
+	}
+};
+n([l({
+	slot: "nav-items",
+	flatten: !0
+})], u.prototype, "navItems", void 0), n([l({
+	slot: "nav-actions",
+	flatten: !0
+})], u.prototype, "navActions", void 0), n([l()], u.prototype, "slottedElements", void 0), u = n([r()], u);
+//#endregion
+export { u as AppHeader };
+
+//# sourceMappingURL=app-header2.js.map

package/dist/app-header/app-header2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-header2.js","names":["#slottedLogo","#sizeLogo","#updateItems"],"sources":["../../src/app-header/app-header.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { useStyles, attachInternals, matchesElementName, scopedRegistry } from '@nvidia-elements/core/internal';\nimport { Logo } from '@nvidia-elements/core/logo';\nimport type { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { Button } from '@nvidia-elements/core/button';\nimport styles from './app-header.css?inline';\n\n/* eslint-disable @nvidia-elements/lint/no-unstyled-typography */\n\n/**\n * @deprecated use `nve-page-header` instead\n * @element nve-app-header\n * @description An element that appears across the top of all pages containing the application name and primary navigation.\n * @since 0.11.0\n * @slot - Use the default slot in `logo` to create an app logo badge within the app header. Include a `<span>` element inside `app-header` to change the default application title.\n * @slot title\n * @slot nav-items - For `button` and `icon-button` elements used for navigation behavior. Use the `active` attribute to show the current page.\n * @slot nav-actions - For `icon-button` elements. Places them in the supplemental actions section of the app header.\n * @cssprop --background\n * @cssprop --padding\n * @cssprop --border-bottom\n * @cssprop --color\n * @cssprop --font-weight\n * @cssprop --text-decoration\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav\n * @responsive false\n */\n@scopedRegistry()\nexport class AppHeader extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-app-header',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Logo.metadata.tag]: Logo\n  };\n\n  @queryAssignedElements({ slot: 'nav-items', flatten: true }) private navItems!: Button[];\n\n  @queryAssignedElements({ slot: 'nav-actions', flatten: true }) private navActions!: IconButton[];\n\n  @queryAssignedElements() private slottedElements!: HTMLElement[];\n\n  get #slottedLogo() {\n    return this.slottedElements.find(i => matchesElementName(i, Logo)) as Logo;\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <div app-branding>\n          <slot @slotchange=${this.#sizeLogo}><nve-logo part=\"logo\" size=\"sm\" aria-label=\"NVIDIA\"></nve-logo></slot>\n          <slot name=\"title\">\n            <h2>NVIDIA</h2>\n          </slot>\n        </div>\n        <slot name=\"nav-items\" @slotchange=${this.#updateItems}></slot>\n        <slot name=\"nav-actions\" @slotchange=${this.#updateItems}></slot>\n      </div>\n    `;\n  }\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'navigation';\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this.#sizeLogo();\n    this.#updateItems();\n  }\n\n  #sizeLogo() {\n    const logo = this.#slottedLogo;\n    if (logo && !logo.hasAttribute('size')) {\n      logo.setAttribute('size', 'sm');\n    }\n  }\n\n  #updateItems() {\n    this.navActions?.filter(i => i.getAttribute('interaction') === 'emphasis')?.forEach(item => (item.size = 'sm'));\n    [...this.navItems, ...this.navActions]\n      .filter(i => !i.hasAttribute('container') && !i.hasAttribute('interaction'))\n      .forEach(item => (item.container = 'flat'));\n  }\n}\n"],"mappings":";;;;;;;;;;AAiCO,IAAA,IAAA,cAAwB,EAAW;;gBACxB,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B,GACzB,EAAK,SAAS,MAAM,GACtB;;CAQD,KAAA,IAAmB;AACjB,SAAO,KAAK,gBAAgB,MAAK,MAAK,EAAmB,GAAG,EAAK,CAAC;;CAGpE,SAAS;AACP,SAAO,CAAI,2DAGe,MAAA,EAAe,6JAKA,MAAA,EAAkB,iDAChB,MAAA,EAAkB;;CAQ/D,oBAA0B;AAGxB,EAFA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO;;CAGzB,QAAQ,GAA6B;AAGnC,EAFA,MAAM,QAAQ,EAAM,EACpB,MAAA,GAAgB,EAChB,MAAA,GAAmB;;CAGrB,KAAY;EACV,IAAM,IAAO,MAAA;AACb,EAAI,KAAQ,CAAC,EAAK,aAAa,OAAO,IACpC,EAAK,aAAa,QAAQ,KAAK;;CAInC,KAAe;AAEb,EADA,KAAK,YAAY,QAAO,MAAK,EAAE,aAAa,cAAc,KAAK,WAAW,EAAE,SAAQ,MAAS,EAAK,OAAO,KAAM,EAC/G,CAAC,GAAG,KAAK,UAAU,GAAG,KAAK,WAAW,CACnC,QAAO,MAAK,CAAC,EAAE,aAAa,YAAY,IAAI,CAAC,EAAE,aAAa,cAAc,CAAC,CAC3E,SAAQ,MAAS,EAAK,YAAY,OAAQ;;;GAnD9C,EAAsB;CAAE,MAAM;CAAa,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAE3D,EAAsB;CAAE,MAAM;CAAe,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,KAE7D,GAAuB,CAAA,EAAA,EAAA,WAAA,mBAAA,KAAA,EAAA,SAjBzB,GAAgB,CAAA,EAAA,EAAA"}

package/dist/app-header/define.d.ts

@@ -0,0 +1,6 @@
+import { AppHeader } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-app-header': AppHeader;
+    }
+}

package/dist/app-header/define.js

@@ -0,0 +1,7 @@
+import { define as e } from "../internal/utils/dom.js";
+import { AppHeader as t } from "./app-header2.js";
+//#region src/app-header/define.ts
+e(t);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/app-header/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/app-header/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/core/internal';\nimport { AppHeader } from '@nvidia-elements/core/app-header';\n\ndefine(AppHeader);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-app-header': AppHeader;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,EAAU"}

package/dist/app-header/index.d.ts

@@ -0,0 +1 @@
+export * from './app-header.js';

package/dist/app-header/index.js

@@ -0,0 +1,2 @@
+import { AppHeader as e } from "./app-header2.js";
+export { e as AppHeader };

package/dist/avatar/avatar-group.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * @element nve-avatar-group
+ * @description An avatar group displays a collection of user avatars in a compact and organized layout, showcasing many participants or contributors in a space-efficient way.
+ * @since 1.20.0
+ * @entrypoint \@nvidia-elements/core/avatar
+ * @slot - default slot for content
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+ *
+ */
+export declare class AvatarGroup extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    /** @private */
+    _internals: ElementInternals;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+}

package/dist/avatar/avatar-group.js

@@ -0,0 +1,6 @@
+//#region src/avatar/avatar-group.css?inline
+var e = ":host{display:block}[internal-host]{display:flex;overflow:visible}::slotted(nve-avatar){margin-inline-start:calc(-1 * var(--nve-ref-size-150));--border: 1px solid var(--nve-sys-contrast-mute-color)}::slotted(:first-child){margin-inline-start:0}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=avatar-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.js","names":[],"sources":["../../src/avatar/avatar-group.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  display: block;\n}\n\n[internal-host] {\n  display: flex;\n  overflow: visible;\n}\n\n::slotted(nve-avatar) {\n  margin-inline-start: calc(-1 * var(--nve-ref-size-150));\n  --border: 1px solid var(--nve-sys-contrast-mute-color);\n}\n\n::slotted(:first-child) {\n  margin-inline-start: 0; /* Remove the negative margin for the first slotted nve-avatar */\n}\n"],"mappings":""}

package/dist/avatar/avatar-group2.js

@@ -0,0 +1,26 @@
+import { attachInternals as e } from "../internal/utils/a11y.js";
+import { useStyles as t } from "../internal/styles/index.js";
+import n from "./avatar-group.js";
+import { LitElement as r, html as i } from "lit";
+//#region src/avatar/avatar-group.ts
+var a = class extends r {
+	static {
+		this.styles = t([n]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-avatar-group",
+			version: "0.0.0"
+		};
+	}
+	render() {
+		return i`<div internal-host><slot></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), e(this), this._internals.role = "group";
+	}
+};
+//#endregion
+export { a as AvatarGroup };
+
+//# sourceMappingURL=avatar-group2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group2.js","names":[],"sources":["../../src/avatar/avatar-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html } from 'lit';\nimport { useStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport styles from './avatar-group.css?inline';\n\n/**\n * @element nve-avatar-group\n * @description An avatar group displays a collection of user avatars in a compact and organized layout, showcasing many participants or contributors in a space-efficient way.\n * @since 1.20.0\n * @entrypoint \\@nvidia-elements/core/avatar\n * @slot - default slot for content\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n *\n */\nexport class AvatarGroup extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-avatar-group',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n    <div internal-host>\n        <slot></slot>\n    </div>\n  `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n  }\n}\n"],"mappings":";;;;;AAgBA,IAAa,IAAb,cAAiC,EAAW;;gBAC1B,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;CAKD,SAAS;AACP,SAAO,CAAI;;CAOb,oBAAoB;AAGlB,EAFA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO"}

package/dist/avatar/avatar.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+import { Size, Color } from '../internal';
+/**
+ * @element nve-avatar
+ * @description Avatar represents a user/bot within a UI. Typically with text or image content.
+ * @since 1.20.0
+ * @entrypoint \@nvidia-elements/core/avatar
+ * @slot - default slot for content
+ * @cssprop --background
+ * @cssprop --color
+ * @cssprop --border-radius
+ * @cssprop --height
+ * @cssprop --width
+ * @cssprop --font-size
+ * @cssprop --font-weight
+ * @cssprop --border
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+ *
+ */
+export declare class Avatar extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    /** Sets size of the avatar component. Update size through the `width + height` css props as an alternative. */
+    size?: Size | 'xs';
+    /** Sets the color of the avatar component. */
+    color: Color;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/avatar/avatar.examples.js

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

package/dist/avatar/avatar.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.examples.js","names":[],"sources":["../../src/avatar/avatar.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/avatar/define.js';\nimport '@nvidia-elements/core/icon/define.js';\n\nexport default {\n  title: 'Elements/Avatar',\n  component: 'nve-avatar',\n};\n\n/**\n * @summary Basic avatar component with text initials, providing a simple way to represent users when profile images are unavailable.\n */\nexport const Default = {\n  render: () => html`\n    <nve-avatar>AV</nve-avatar>\n`};\n\n/**\n * @summary Avatar with profile image, offering personalized user representation and visual identity in interfaces.\n */\nexport const Image = {\n  render: () => html`\n    <nve-avatar>\n      <img src=\"static/images/test-image-1.svg\" alt=\"User Avatar\" />\n    </nve-avatar>\n`};\n\n/**\n * @summary Avatar with icons for representing system users, bots, or special account types with clear visual indicators.\n */\nexport const Icon = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm align:wrap\">\n      <nve-avatar>\n        <nve-icon name=\"star\"></nve-icon>\n      </nve-avatar>\n        <nve-avatar>\n        <nve-icon name=\"person\"></nve-icon>\n      </nve-avatar>\n    </div>\n`};\n\n/**\n * @summary Different avatar sizes to accommodate layout contexts from compact lists to prominent user profiles.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm align:wrap\">\n      <nve-avatar size=\"sm\">AV</nve-avatar>\n      <nve-avatar>AV</nve-avatar>\n      <nve-avatar size=\"lg\">AV</nve-avatar>\n    </div>\n`};\n\n/**\n * @summary Avatar group component for displaying many users with overflow indicator, ideal for team displays and collaboration interfaces.\n */\nexport const Group = {\n  render: () => html`\n    <nve-avatar-group>\n      <nve-avatar color=\"red-cardinal\">AV</nve-avatar>\n      <nve-avatar color=\"blue-cobalt\">AV</nve-avatar>\n      <nve-avatar color=\"green-grass\">AV</nve-avatar>\n      <nve-avatar>+3</nve-avatar>\n    </nve-avatar-group>\n`};\n\n/**\n * @summary Comprehensive color palette for avatar backgrounds, enabling visual distinction and brand consistency across user representations.\n * @tags test-case\n */\nexport const Color = {\n  render: () => html`\n  <div nve-layout=\"row gap:sm align:wrap\">\n    <nve-avatar color=\"red-cardinal\">AV</nve-avatar>\n    <nve-avatar color=\"gray-slate\">AV</nve-avatar>\n    <nve-avatar color=\"gray-denim\">AV</nve-avatar>\n    <nve-avatar color=\"blue-indigo\">AV</nve-avatar>\n    <nve-avatar color=\"blue-cobalt\">AV</nve-avatar>\n    <nve-avatar color=\"blue-sky\">AV</nve-avatar>\n    <nve-avatar color=\"teal-cyan\">AV</nve-avatar>\n    <nve-avatar color=\"green-mint\">AV</nve-avatar>\n    <nve-avatar color=\"teal-seafoam\">AV</nve-avatar>\n    <nve-avatar color=\"green-grass\">AV</nve-avatar>\n    <nve-avatar color=\"yellow-amber\">AV</nve-avatar>\n    <nve-avatar color=\"orange-pumpkin\">AV</nve-avatar>\n    <nve-avatar color=\"red-tomato\">AV</nve-avatar>\n    <nve-avatar color=\"pink-magenta\">AV</nve-avatar>\n    <nve-avatar color=\"purple-plum\">AV</nve-avatar>\n    <nve-avatar color=\"purple-violet\">AV</nve-avatar>\n    <nve-avatar color=\"purple-lavender\">AV</nve-avatar>\n    <nve-avatar color=\"pink-rose\">AV</nve-avatar>\n    <nve-avatar color=\"green-jade\">AV</nve-avatar>\n    <nve-avatar color=\"lime-pear\">AV</nve-avatar>\n    <nve-avatar color=\"yellow-nova\">AV</nve-avatar>\n    <nve-avatar color=\"brand-green\">AV</nve-avatar>\n   </div>\n  `\n}"],"mappings":";AAGA,IAAA,IAAS"}