@nvidia-elements/core 0.0.1 → 0.0.2

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.2"
+		};
+	}
+	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.2"
+		};
+	}
+	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"}

package/dist/avatar/avatar.examples.json

@@ -0,0 +1,64 @@
+{
+  "element": "nve-avatar",
+  "entrypoint": "@nvidia-elements/core/avatar/avatar.examples.json",
+  "items": [
+    {
+      "id": "core-avatar_default",
+      "name": "Default",
+      "template": "<nve-avatar>AV</nve-avatar>\n",
+      "summary": "Basic avatar component with text initials, providing a simple way to represent users when profile images are unavailable.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-avatar_image",
+      "name": "Image",
+      "template": "<nve-avatar>\n  <img src=\"static/images/test-image-1.svg\" alt=\"User Avatar\" />\n</nve-avatar>\n",
+      "summary": "Avatar with profile image, offering personalized user representation and visual identity in interfaces.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-avatar_icon",
+      "name": "Icon",
+      "template": "<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",
+      "summary": "Avatar with icons for representing system users, bots, or special account types with clear visual indicators.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-avatar_size",
+      "name": "Size",
+      "template": "<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",
+      "summary": "Different avatar sizes to accommodate layout contexts from compact lists to prominent user profiles.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-avatar_group",
+      "name": "Group",
+      "template": "<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",
+      "summary": "Avatar group component for displaying many users with overflow indicator, ideal for team displays and collaboration interfaces.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-avatar_color",
+      "name": "Color",
+      "template": "<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",
+      "summary": "Comprehensive color palette for avatar backgrounds, enabling visual distinction and brand consistency across user representations.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/avatar/avatar.js

@@ -0,0 +1,6 @@
+//#region src/avatar/avatar.css?inline
+var e = ":host{--background: var(--state-color);--color: var(--nve-sys-contrast-mute-color);--border-radius: var(--nve-ref-border-radius-full);--height: var(--nve-ref-size-800);--width: var(--nve-ref-size-800);--font-size: calc(var(--width) / 2.5);--font-weight: var(--nve-ref-font-weight-medium);--state-color-base: var(--nve-ref-color-gray-slate-1100);--border: 0;display:block;overflow:hidden}[internal-host]{--_icon-color: var(--color);background:var(--background);color:var(--color);border-radius:var(--border-radius);width:var(--width);height:var(--height);font-size:var(--font-size);font-weight:var(--font-weight);border:var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden}::slotted(nve-icon){--color: var(--_icon-color)}::slotted(img){object-fit:cover;width:100%;height:100%}:host([size=\"sm\"]){--height: var(--nve-ref-size-700);--width: var(--nve-ref-size-700)}:host([size=\"lg\"]){--width: var(--nve-ref-size-1000);--height: var(--nve-ref-size-1000)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=avatar.js.map

package/dist/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","names":[],"sources":["../../src/avatar/avatar.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(--state-color);\n  --color: var(--nve-sys-contrast-mute-color);\n  --border-radius: var(--nve-ref-border-radius-full);\n  --height: var(--nve-ref-size-800);\n  --width: var(--nve-ref-size-800);\n  --font-size: calc(var(--width) / 2.5);\n  --font-weight: var(--nve-ref-font-weight-medium);\n  --state-color-base: var(--nve-ref-color-gray-slate-1100);\n  --border: 0;\n  display: block;\n  overflow: hidden;\n}\n\n[internal-host] {\n  --_icon-color: var(--color);\n  background: var(--background);\n  color: var(--color);\n  border-radius: var(--border-radius);\n  width: var(--width);\n  height: var(--height);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  border: var(--border);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n}\n\n::slotted(nve-icon) {\n  --color: var(--_icon-color);\n}\n\n::slotted(img) {\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n\n:host([size='sm']) {\n  --height: var(--nve-ref-size-700);\n  --width: var(--nve-ref-size-700);\n}\n\n:host([size='lg']) {\n  --width: var(--nve-ref-size-1000);\n  --height: var(--nve-ref-size-1000);\n}\n"],"mappings":""}

package/dist/avatar/avatar2.js

@@ -0,0 +1,31 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.115.0/helpers/decorate.js";
+import { colorStateStyles as t, useStyles as n } from "../internal/styles/index.js";
+import r from "./avatar.js";
+import { LitElement as i, html as a } from "lit";
+import { property as o } from "lit/decorators/property.js";
+//#region src/avatar/avatar.ts
+var s = class extends i {
+	static {
+		this.styles = n([r, t]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-avatar",
+			version: "0.0.2"
+		};
+	}
+	render() {
+		return a`<div internal-host><slot></slot></div>`;
+	}
+};
+e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "color", void 0);
+//#endregion
+export { s as Avatar };
+
+//# sourceMappingURL=avatar2.js.map

package/dist/avatar/avatar2.js.map

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

package/dist/avatar/define.d.ts

@@ -0,0 +1,7 @@
+import { Avatar, AvatarGroup } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-avatar': Avatar;
+        'nve-avatar-group': AvatarGroup;
+    }
+}

package/dist/avatar/define.js

@@ -0,0 +1,7 @@
+import { define as e } from "../internal/utils/dom.js";
+import { Avatar as t } from "./avatar2.js";
+import { AvatarGroup as n } from "./avatar-group2.js";
+e(t), e(n);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/avatar/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/avatar/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 { Avatar, AvatarGroup } from '@nvidia-elements/core/avatar';\n\ndefine(Avatar);\ndefine(AvatarGroup);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-avatar': Avatar;\n    'nve-avatar-group': AvatarGroup;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,EAAO,EACd,EAAO,EAAY"}

package/dist/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './avatar.js';
+export * from './avatar-group.js';

package/dist/avatar/index.js

@@ -0,0 +1,3 @@
+import { Avatar as e } from "./avatar2.js";
+import { AvatarGroup as t } from "./avatar-group2.js";
+export { e as Avatar, t as AvatarGroup };

package/dist/badge/badge.d.ts

@@ -0,0 +1,61 @@
+import { PropertyValues, LitElement } from 'lit';
+import { Icon } from '../icon';
+import { TaskStatus, SupportStatus, TrendStatus, Color, Prominence } from '../internal';
+/**
+ * @element nve-badge
+ * @description A visual indicator that communicates a status description of an associated component. Status badges use short text, color, built in icons for quick recognition and render near the relevant content.
+ * @since 0.11.0
+ * @entrypoint \@nvidia-elements/core/badge
+ * @slot - default slot for content
+ * @slot prefix-icon - slot for prefix icon
+ * @slot suffix-icon - slot for suffix icon
+ * @cssprop --background
+ * @cssprop --color
+ * @cssprop --gap
+ * @cssprop --font-size
+ * @cssprop --icon-color
+ * @cssprop --padding
+ * @cssprop --border
+ * @cssprop --border-radius
+ * @cssprop --font-weight
+ * @cssprop --text-transform
+ * @cssprop --width
+ * @cssprop --height
+ * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
+ */
+export declare class Badge extends LitElement {
+    #private;
+    /**
+     * Visual treatment to represent a ongoing task, support status.
+     */
+    status: TaskStatus | SupportStatus | TrendStatus;
+    /**
+     * Highlights content to draw attention and convey simple messages.
+     */
+    color: Color;
+    /**
+     * Determines the container styles of component. Flat suits nesting within other containers.
+     */
+    container?: 'flat';
+    /** Determines the visual prominence or weight */
+    prominence?: Extract<Prominence, 'emphasis'>;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    static elementDefinitions: {
+        [Icon.metadata.tag]: typeof Icon;
+    };
+    /** @private */
+    _internals: ElementInternals;
+    /**
+     * Enables updating internal string values for internationalization.
+     */
+    i18n: Partial<import('../internal').I18nStrings & {
+        __set: boolean;
+    }>;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+    updated(props: PropertyValues<this>): void;
+}

package/dist/badge/badge.examples.js

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

package/dist/badge/badge.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.examples.js","names":[],"sources":["../../src/badge/badge.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/badge/define.js';\nimport '@nvidia-elements/core/alert/define.js';\n\nexport default {\n  title: 'Elements/Badge',\n  component: 'nve-badge',\n};\n\n/**\n * @summary Basic badge component with default styling. Use for simple non-interactive labels or status indicators.\n */\nexport const Default = {\n  render: () => html`\n  <nve-badge>badge</nve-badge>\n  `\n};\n\n/**\n * @summary Badges with predefined status colors for different states. Ideal for showing job status, task progress, or system states.\n * @tags test-case\n */\nexport const Status = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-badge status=\"scheduled\">scheduled</nve-badge>\n  <nve-badge status=\"queued\">queued</nve-badge>\n  <nve-badge status=\"pending\">pending</nve-badge>\n  <nve-badge status=\"starting\">starting</nve-badge>\n  <nve-badge status=\"running\">running</nve-badge>\n  <nve-badge status=\"restarting\">restarting</nve-badge>\n  <nve-badge status=\"stopping\">stopping</nve-badge>\n  <nve-badge status=\"finished\">finished</nve-badge>\n  <nve-badge status=\"failed\">failed</nve-badge>\n  <nve-badge status=\"unknown\">unknown</nve-badge>\n  <nve-badge status=\"ignored\">ignored</nve-badge>\n</div>\n  `\n}\n\n/**\n * @summary Flat container badges with status colors for a more subtle appearance. Perfect for dense layouts or when you want less visual weight.\n * @tags test-case\n */\nexport const StatusFlat = {\n  render: () => html`\n<div nve-layout=\"row gap:md align:wrap\">\n  <nve-badge container=\"flat\" status=\"scheduled\">scheduled</nve-badge>\n  <nve-badge container=\"flat\" status=\"queued\">queued</nve-badge>\n  <nve-badge container=\"flat\" status=\"pending\">pending</nve-badge>\n  <nve-badge container=\"flat\" status=\"starting\">starting</nve-badge>\n  <nve-badge container=\"flat\" status=\"running\">running</nve-badge>\n  <nve-badge container=\"flat\" status=\"restarting\">restarting</nve-badge>\n  <nve-badge container=\"flat\" status=\"stopping\">stopping</nve-badge>\n  <nve-badge container=\"flat\" status=\"finished\">finished</nve-badge>\n  <nve-badge container=\"flat\" status=\"failed\">failed</nve-badge>\n  <nve-badge container=\"flat\" status=\"unknown\">unknown</nve-badge>\n  <nve-badge container=\"flat\" status=\"ignored\">ignored</nve-badge>\n</div>\n  `\n}\n\n/**\n * @summary Status badges with icons only, using aria-label for accessibility. Useful for compact status indicators in toolbars or data tables.\n */\nexport const StatusIcon = {\n  render: () => html`\n<div nve-layout=\"row gap:md align:wrap\">\n  <nve-badge container=\"flat\" status=\"scheduled\" aria-label=\"scheduled\"></nve-badge>\n  <nve-badge container=\"flat\" status=\"queued\" aria-label=\"queued\"></nve-badge>\n  <nve-badge container=\"flat\" status=\"pending\" aria-label=\"pending\"></nve-badge>\n  <nve-badge container=\"flat\" status=\"starting\" aria-label=\"starting\"></nve-badge>\n  <nve-badge container=\"flat\" status=\"running\" aria-label=\"running\"></nve-badge>\n  <nve-badge container=\"flat\" status=\"restarting\" aria-label=\"restarting\"></nve-badge>\n  <nve-badge container=\"flat\" status=\"stopping\" aria-label=\"stopping\"></nve-badge>\n  <nve-badge container=\"flat\" status=\"finished\" aria-label=\"finished\"></nve-badge>\n  <nve-badge container=\"flat\" status=\"failed\" aria-label=\"failed\"></nve-badge>\n  <nve-badge container=\"flat\" status=\"unknown\" aria-label=\"unknown\"></nve-badge>\n  <nve-badge container=\"flat\" status=\"ignored\" aria-label=\"ignored\"></nve-badge>\n</div>\n  `\n}\n\n/**\n * @summary Support status badges for general feedback states. Use for success, warning, error, or informational messages.\n */\nexport const Support = {\n  render: () => html`\n<div nve-layout=\"row gap:md\">\n  <nve-badge status=\"accent\">accent</nve-badge>\n  <nve-badge status=\"warning\">warning</nve-badge>\n  <nve-badge status=\"success\">success</nve-badge>\n  <nve-badge status=\"danger\">danger</nve-badge>\n</div>\n  `\n}\n\n/**\n * @summary Status badges in light theme for better visibility on light backgrounds. Use when your application primarily uses light mode.\n * @tags test-case\n */\nexport const StatusLightTheme = {\n  render: () => html`\n<div nve-theme=\"root light\" nve-layout=\"row gap:md pad:md align:wrap\">\n  <nve-badge status=\"scheduled\">scheduled</nve-badge>\n  <nve-badge status=\"queued\">queued</nve-badge>\n  <nve-badge status=\"pending\">pending</nve-badge>\n  <nve-badge status=\"starting\">starting</nve-badge>\n  <nve-badge status=\"running\">running</nve-badge>\n  <nve-badge status=\"restarting\">restarting</nve-badge>\n  <nve-badge status=\"stopping\">stopping</nve-badge>\n  <nve-badge status=\"finished\">finished</nve-badge>\n  <nve-badge status=\"failed\">failed</nve-badge>\n  <nve-badge status=\"unknown\">unknown</nve-badge>\n  <nve-badge status=\"ignored\">ignored</nve-badge>\n</div>\n  `\n}\n\n/**\n * @summary Status badges in dark theme for better visibility on dark backgrounds. Use when your application primarily uses dark mode.\n * @tags test-case\n */\nexport const StatusDarkTheme = {\n  render: () => html`\n<div nve-theme=\"root dark\" nve-layout=\"row gap:md pad:md align:wrap\">\n  <nve-badge status=\"scheduled\">scheduled</nve-badge>\n  <nve-badge status=\"queued\">queued</nve-badge>\n  <nve-badge status=\"pending\">pending</nve-badge>\n  <nve-badge status=\"starting\">starting</nve-badge>\n  <nve-badge status=\"running\">running</nve-badge>\n  <nve-badge status=\"restarting\">restarting</nve-badge>\n  <nve-badge status=\"stopping\">stopping</nve-badge>\n  <nve-badge status=\"finished\">finished</nve-badge>\n  <nve-badge status=\"failed\">failed</nve-badge>\n  <nve-badge status=\"unknown\">unknown</nve-badge>\n  <nve-badge status=\"ignored\">ignored</nve-badge>\n</div>\n  `\n}\n\n/**\n * @summary Trend badges for displaying data changes and metrics. Perfect for dashboards, analytics, or financial data showing positive, negative, or neutral trends.\n * @tags pattern test-case\n */\nexport const Trend = {\n  render: () => html`\n<div nve-layout=\"row gap:md\">\n  <nve-badge>0%</nve-badge>\n  <nve-badge status=\"success\"><nve-icon name=\"trend-down\"></nve-icon> -15%</nve-badge>\n  <nve-badge status=\"danger\"><nve-icon name=\"trend-up\"></nve-icon> +15%</nve-badge>\n</div>\n  `\n}\n\n/**\n * @summary Badges with color variants for categorization and theming. Use for organizing content by color-coded categories.\n * @tags test-case\n */\nexport const Color = {\n  render: () => html`\n<div nve-layout=\"row gap:sm align:wrap\">\n  <nve-badge color=\"red-cardinal\"><nve-icon name=\"placeholder\"></nve-icon> red-cardinal</nve-badge>\n  <nve-badge color=\"gray-slate\"><nve-icon name=\"placeholder\"></nve-icon> gray-slate</nve-badge>\n  <nve-badge color=\"gray-denim\"><nve-icon name=\"placeholder\"></nve-icon> gray-denim</nve-badge>\n  <nve-badge color=\"blue-indigo\"><nve-icon name=\"placeholder\"></nve-icon> blue-indigo</nve-badge>\n  <nve-badge color=\"blue-cobalt\"><nve-icon name=\"placeholder\"></nve-icon> blue-cobalt</nve-badge>\n  <nve-badge color=\"blue-sky\"><nve-icon name=\"placeholder\"></nve-icon> blue-sky</nve-badge>\n  <nve-badge color=\"teal-cyan\"><nve-icon name=\"placeholder\"></nve-icon> teal-cyan</nve-badge>\n  <nve-badge color=\"green-mint\"><nve-icon name=\"placeholder\"></nve-icon> green-mint</nve-badge>\n  <nve-badge color=\"teal-seafoam\"><nve-icon name=\"placeholder\"></nve-icon> teal-seafoam</nve-badge>\n  <nve-badge color=\"green-grass\"><nve-icon name=\"placeholder\"></nve-icon> green-grass</nve-badge>\n  <nve-badge color=\"yellow-amber\"><nve-icon name=\"placeholder\"></nve-icon> yellow-amber</nve-badge>\n  <nve-badge color=\"orange-pumpkin\"><nve-icon name=\"placeholder\"></nve-icon> orange-pumpkin</nve-badge>\n  <nve-badge color=\"red-tomato\"><nve-icon name=\"placeholder\"></nve-icon> red-tomato</nve-badge>\n  <nve-badge color=\"pink-magenta\"><nve-icon name=\"placeholder\"></nve-icon> pink-magenta</nve-badge>\n  <nve-badge color=\"purple-plum\"><nve-icon name=\"placeholder\"></nve-icon> purple-plum</nve-badge>\n  <nve-badge color=\"purple-violet\"><nve-icon name=\"placeholder\"></nve-icon> purple-violet</nve-badge>\n  <nve-badge color=\"purple-lavender\"><nve-icon name=\"placeholder\"></nve-icon> purple-lavender</nve-badge>\n  <nve-badge color=\"pink-rose\"><nve-icon name=\"placeholder\"></nve-icon> pink-rose</nve-badge>\n  <nve-badge color=\"green-jade\"><nve-icon name=\"placeholder\"></nve-icon> green-jade</nve-badge>\n  <nve-badge color=\"lime-pear\"><nve-icon name=\"placeholder\"></nve-icon> lime-pear</nve-badge>\n  <nve-badge color=\"yellow-nova\"><nve-icon name=\"placeholder\"></nve-icon> yellow-nova</nve-badge>\n  <nve-badge color=\"brand-green\"><nve-icon name=\"placeholder\"></nve-icon> brand-green</nve-badge>\n</div>\n  `\n};\n\n/**\n * @summary High emphasis badges with custom colors for important or highlighted content. Use for highlighting critical information.\n */\nexport const Prominence = {\n  render: () => html`\n<div nve-layout=\"row gap:sm align:wrap\">\n  <nve-badge prominence=\"emphasis\" color=\"red-cardinal\"><nve-icon name=\"placeholder\"></nve-icon> red-cardinal</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"gray-slate\"><nve-icon name=\"placeholder\"></nve-icon> gray-slate</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"gray-denim\"><nve-icon name=\"placeholder\"></nve-icon> gray-denim</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"blue-indigo\"><nve-icon name=\"placeholder\"></nve-icon> blue-indigo</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"blue-cobalt\"><nve-icon name=\"placeholder\"></nve-icon> blue-cobalt</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"blue-sky\"><nve-icon name=\"placeholder\"></nve-icon> blue-sky</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"teal-cyan\"><nve-icon name=\"placeholder\"></nve-icon> teal-cyan</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"green-mint\"><nve-icon name=\"placeholder\"></nve-icon> green-mint</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"teal-seafoam\"><nve-icon name=\"placeholder\"></nve-icon> teal-seafoam</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"green-grass\"><nve-icon name=\"placeholder\"></nve-icon> green-grass</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"yellow-amber\"><nve-icon name=\"placeholder\"></nve-icon> yellow-amber</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"orange-pumpkin\"><nve-icon name=\"placeholder\"></nve-icon> orange-pumpkin</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"red-tomato\"><nve-icon name=\"placeholder\"></nve-icon> red-tomato</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"pink-magenta\"><nve-icon name=\"placeholder\"></nve-icon> pink-magenta</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"purple-plum\"><nve-icon name=\"placeholder\"></nve-icon> purple-plum</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"purple-violet\"><nve-icon name=\"placeholder\"></nve-icon> purple-violet</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"purple-lavender\"><nve-icon name=\"placeholder\"></nve-icon> purple-lavender</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"pink-rose\"><nve-icon name=\"placeholder\"></nve-icon> pink-rose</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"green-jade\"><nve-icon name=\"placeholder\"></nve-icon> green-jade</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"lime-pear\"><nve-icon name=\"placeholder\"></nve-icon> lime-pear</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"yellow-nova\"><nve-icon name=\"placeholder\"></nve-icon> yellow-nova</nve-badge>\n  <nve-badge prominence=\"emphasis\" color=\"brand-green\"><nve-icon name=\"placeholder\"></nve-icon> brand-green</nve-badge>\n</div>\n  `\n};\n\n/**\n * @summary Flat container badges with custom colors for a minimal, borderless appearance. Ideal for subtle categorization or when you want to reduce visual noise.\n */\nexport const Flat = {\n  render: () => html`\n<div nve-layout=\"row gap:sm align:wrap\">\n  <nve-badge container=\"flat\" color=\"red-cardinal\"><nve-icon name=\"placeholder\"></nve-icon> red-cardinal</nve-badge>\n  <nve-badge container=\"flat\" color=\"gray-slate\"><nve-icon name=\"placeholder\"></nve-icon> gray-slate</nve-badge>\n  <nve-badge container=\"flat\" color=\"gray-denim\"><nve-icon name=\"placeholder\"></nve-icon> gray-denim</nve-badge>\n  <nve-badge container=\"flat\" color=\"blue-indigo\"><nve-icon name=\"placeholder\"></nve-icon> blue-indigo</nve-badge>\n  <nve-badge container=\"flat\" color=\"blue-cobalt\"><nve-icon name=\"placeholder\"></nve-icon> blue-cobalt</nve-badge>\n  <nve-badge container=\"flat\" color=\"blue-sky\"><nve-icon name=\"placeholder\"></nve-icon> blue-sky</nve-badge>\n  <nve-badge container=\"flat\" color=\"teal-cyan\"><nve-icon name=\"placeholder\"></nve-icon> teal-cyan</nve-badge>\n  <nve-badge container=\"flat\" color=\"green-mint\"><nve-icon name=\"placeholder\"></nve-icon> green-mint</nve-badge>\n  <nve-badge container=\"flat\" color=\"teal-seafoam\"><nve-icon name=\"placeholder\"></nve-icon> teal-seafoam</nve-badge>\n  <nve-badge container=\"flat\" color=\"green-grass\"><nve-icon name=\"placeholder\"></nve-icon> green-grass</nve-badge>\n  <nve-badge container=\"flat\" color=\"yellow-amber\"><nve-icon name=\"placeholder\"></nve-icon> yellow-amber</nve-badge>\n  <nve-badge container=\"flat\" color=\"orange-pumpkin\"><nve-icon name=\"placeholder\"></nve-icon> orange-pumpkin</nve-badge>\n  <nve-badge container=\"flat\" color=\"red-tomato\"><nve-icon name=\"placeholder\"></nve-icon> red-tomato</nve-badge>\n  <nve-badge container=\"flat\" color=\"pink-magenta\"><nve-icon name=\"placeholder\"></nve-icon> pink-magenta</nve-badge>\n  <nve-badge container=\"flat\" color=\"purple-plum\"><nve-icon name=\"placeholder\"></nve-icon> purple-plum</nve-badge>\n  <nve-badge container=\"flat\" color=\"purple-violet\"><nve-icon name=\"placeholder\"></nve-icon> purple-violet</nve-badge>\n  <nve-badge container=\"flat\" color=\"purple-lavender\"><nve-icon name=\"placeholder\"></nve-icon> purple-lavender</nve-badge>\n  <nve-badge container=\"flat\" color=\"pink-rose\"><nve-icon name=\"placeholder\"></nve-icon> pink-rose</nve-badge>\n  <nve-badge container=\"flat\" color=\"green-jade\"><nve-icon name=\"placeholder\"></nve-icon> green-jade</nve-badge>\n  <nve-badge container=\"flat\" color=\"lime-pear\"><nve-icon name=\"placeholder\"></nve-icon> lime-pear</nve-badge>\n  <nve-badge container=\"flat\" color=\"yellow-nova\"><nve-icon name=\"placeholder\"></nve-icon> yellow-nova</nve-badge>\n  <nve-badge container=\"flat\" color=\"brand-green\"><nve-icon name=\"placeholder\"></nve-icon> brand-green</nve-badge>\n</div>\n  `\n};\n\n/**\n * @summary Badge with constrained width to show text overflow behavior. Use when you need to control badge width in constrained layouts or responsive designs.\n * @tags test-case\n */\nexport const Overflow = {\n  render: () => html`\n  <nve-badge status=\"pending\" style=\"--width: 150px\">some really long content</nve-badge>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}