@nvidia-elements/core 0.0.1 → 0.0.3

package/dist/internal/utils/focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.js","names":[],"sources":["../../../src/internal/utils/focus.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport function isFocusable(element: Element) {\n  return (\n    element.matches(\n      [\n        'a[href]',\n        'area[href]',\n        'input',\n        'button',\n        'select',\n        'textarea',\n        'iframe',\n        'object',\n        'embed',\n        '*[tabindex]',\n        '*[contenteditable=true]',\n        '[role=button]'\n      ].join(',')\n    ) &&\n    element.matches(':not([disabled], [inert])') &&\n    !element.closest(`[inert]`) &&\n    !element.closest('[popover]')?.matches(':not(:popover-open)')\n  );\n}\n\n/** returns interactive elements that does not require advanced keyboard interactions like arrow/navigation */\nexport function isSimpleFocusable(element: Element) {\n  return element.matches(\n    [\n      'a[href]',\n      'button:not([disabled])',\n      'input[type=checkbox]',\n      'input[type=radio]',\n      'object',\n      'embed',\n      '*[tabindex]',\n      '[role=button]:not([disabled])'\n    ].join(',')\n  );\n}\n\nexport function getActiveElement(root: Document | ShadowRoot = globalThis.document): Element | null {\n  if (root.activeElement && root.activeElement.shadowRoot) {\n    return getActiveElement(root.activeElement.shadowRoot) ?? root.activeElement;\n  } else {\n    return root.activeElement;\n  }\n}\n\nexport function focusElement(element: HTMLElement) {\n  if (element && !isFocusable(element)) {\n    element.setAttribute('tabindex', '-1');\n    element.focus();\n    element.addEventListener('blur', () => element.removeAttribute('tabindex'), { once: true });\n  } else {\n    element?.focus();\n  }\n}\n\nexport function focusElementTimeout(element: HTMLElement) {\n  setTimeout(() => focusElement(element));\n}\n\nexport function setActiveKeyListItem(items: NodeListOf<HTMLElement> | HTMLElement[], item: HTMLElement) {\n  items.forEach(i => (i.tabIndex = -1));\n  item.tabIndex = 0;\n}\n\nexport function initializeKeyListItems(items: NodeListOf<HTMLElement> | HTMLElement[]) {\n  items.forEach(i => (i.tabIndex = -1));\n  items[0] && (items[0].tabIndex = 0);\n}\n\n/** determines if user interaction is a valid interaction for activating a listbox type */\nexport function onListboxActivate(\n  element: HTMLElement & { disabled?: boolean },\n  fn: (event: KeyboardEvent | PointerEvent) => void\n) {\n  const validKey = (e: KeyboardEvent) => e.code === 'Space' || e.code === 'ArrowUp' || e.code === 'ArrowDown';\n\n  element.addEventListener('pointerdown', (e: PointerEvent) => {\n    e.preventDefault();\n  });\n\n  element.addEventListener('pointerup', (e: PointerEvent) => {\n    e.preventDefault();\n\n    if (!element.disabled) {\n      fn(e);\n    }\n  });\n\n  element.addEventListener('keyup', (e: KeyboardEvent) => {\n    if (validKey(e) && !element.disabled) {\n      fn(e);\n    }\n  });\n\n  element.addEventListener('keydown', (e: KeyboardEvent) => {\n    if (validKey(e) && !element.disabled) {\n      e.preventDefault();\n    }\n  });\n}\n"],"mappings":";AAGA,SAAgB,EAAY,GAAkB;AAC5C,QACE,EAAQ,QACN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI,CACZ,IACD,EAAQ,QAAQ,4BAA4B,IAC5C,CAAC,EAAQ,QAAQ,UAAU,IAC3B,CAAC,EAAQ,QAAQ,YAAY,EAAE,QAAQ,sBAAsB;;AAKjE,SAAgB,EAAkB,GAAkB;AAClD,QAAO,EAAQ,QACb;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,KAAK,IAAI,CACZ;;AAGH,SAAgB,EAAiB,IAA8B,WAAW,UAA0B;AAIhG,QAHE,EAAK,iBAAiB,EAAK,cAAc,aACpC,EAAiB,EAAK,cAAc,WAAW,IAAI,EAAK,gBAExD,EAAK;;AAIhB,SAAgB,EAAa,GAAsB;AACjD,CAAI,KAAW,CAAC,EAAY,EAAQ,IAClC,EAAQ,aAAa,YAAY,KAAK,EACtC,EAAQ,OAAO,EACf,EAAQ,iBAAiB,cAAc,EAAQ,gBAAgB,WAAW,EAAE,EAAE,MAAM,IAAM,CAAC,IAE3F,GAAS,OAAO;;AAIpB,SAAgB,EAAoB,GAAsB;AACxD,kBAAiB,EAAa,EAAQ,CAAC;;AAGzC,SAAgB,EAAqB,GAAgD,GAAmB;AAEtG,CADA,EAAM,SAAQ,MAAM,EAAE,WAAW,GAAI,EACrC,EAAK,WAAW;;AAGlB,SAAgB,EAAuB,GAAgD;AAErF,CADA,EAAM,SAAQ,MAAM,EAAE,WAAW,GAAI,EACrC,EAAM,OAAO,EAAM,GAAG,WAAW;;AAInC,SAAgB,EACd,GACA,GACA;CACA,IAAM,KAAY,MAAqB,EAAE,SAAS,WAAW,EAAE,SAAS,aAAa,EAAE,SAAS;AAoBhG,CAlBA,EAAQ,iBAAiB,gBAAgB,MAAoB;AAC3D,IAAE,gBAAgB;GAClB,EAEF,EAAQ,iBAAiB,cAAc,MAAoB;AAGzD,EAFA,EAAE,gBAAgB,EAEb,EAAQ,YACX,EAAG,EAAE;GAEP,EAEF,EAAQ,iBAAiB,UAAU,MAAqB;AACtD,EAAI,EAAS,EAAE,IAAI,CAAC,EAAQ,YAC1B,EAAG,EAAE;GAEP,EAEF,EAAQ,iBAAiB,YAAY,MAAqB;AACxD,EAAI,EAAS,EAAE,IAAI,CAAC,EAAQ,YAC1B,EAAE,gBAAgB;GAEpB"}

package/dist/internal/utils/keynav.d.ts

@@ -0,0 +1,6 @@
+export declare function onKeys(events: string[], event: KeyboardEvent, fn: () => void): void;
+export declare function createLightDismiss(options: {
+    element: HTMLElement;
+    focusElement?: HTMLElement;
+    signal?: AbortSignal;
+}, fn: () => void): void;

package/dist/internal/utils/keynav.js

@@ -0,0 +1,18 @@
+import { focusElementTimeout as e } from "./focus.js";
+import { clickOutsideElementBounds as t } from "./dom.js";
+//#region src/internal/utils/keynav.ts
+function n(e, t, n) {
+	e.includes(t.code) && n();
+}
+function r(n, r) {
+	let i = n.signal ? { signal: n.signal } : void 0;
+	globalThis.document.addEventListener("pointerup", (e) => {
+		!n.element.hidden && t(e, n.element) && t(e, n.focusElement) && r();
+	}, i), n.element.addEventListener("keydown", (t) => {
+		!n.element.hidden && t.code === "Escape" && (t.preventDefault(), e(n.focusElement), r());
+	}, i);
+}
+//#endregion
+export { r as createLightDismiss, n as onKeys };
+
+//# sourceMappingURL=keynav.js.map

package/dist/internal/utils/keynav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keynav.js","names":[],"sources":["../../../src/internal/utils/keynav.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { clickOutsideElementBounds } from './dom.js';\nimport { focusElementTimeout } from './focus.js';\n\nexport function onKeys(events: string[], event: KeyboardEvent, fn: () => void) {\n  if (events.includes(event.code)) {\n    fn();\n  }\n}\n\nexport function createLightDismiss(\n  options: { element: HTMLElement; focusElement?: HTMLElement; signal?: AbortSignal },\n  fn: () => void\n) {\n  const listenerOptions = options.signal ? { signal: options.signal } : undefined;\n\n  globalThis.document.addEventListener(\n    'pointerup',\n    (e: PointerEvent) => {\n      if (\n        !options.element.hidden &&\n        clickOutsideElementBounds(e, options.element) &&\n        clickOutsideElementBounds(e, options.focusElement!)\n      ) {\n        fn();\n      }\n    },\n    listenerOptions\n  );\n\n  options.element.addEventListener(\n    'keydown',\n    (e: KeyboardEvent) => {\n      if (!options.element.hidden && e.code === 'Escape') {\n        e.preventDefault();\n        focusElementTimeout(options.focusElement!);\n        fn();\n      }\n    },\n    listenerOptions\n  );\n}\n"],"mappings":";;;AAMA,SAAgB,EAAO,GAAkB,GAAsB,GAAgB;AAC7E,CAAI,EAAO,SAAS,EAAM,KAAK,IAC7B,GAAI;;AAIR,SAAgB,EACd,GACA,GACA;CACA,IAAM,IAAkB,EAAQ,SAAS,EAAE,QAAQ,EAAQ,QAAQ,GAAG,KAAA;AAgBtE,CAdA,WAAW,SAAS,iBAClB,cACC,MAAoB;AACnB,EACE,CAAC,EAAQ,QAAQ,UACjB,EAA0B,GAAG,EAAQ,QAAQ,IAC7C,EAA0B,GAAG,EAAQ,aAAc,IAEnD,GAAI;IAGR,EACD,EAED,EAAQ,QAAQ,iBACd,YACC,MAAqB;AACpB,EAAI,CAAC,EAAQ,QAAQ,UAAU,EAAE,SAAS,aACxC,EAAE,gBAAgB,EAClB,EAAoB,EAAQ,aAAc,EAC1C,GAAI;IAGR,EACD"}

package/dist/internal/utils/objects.d.ts

@@ -0,0 +1,10 @@
+export declare function isObject(item: unknown): item is Record<string, unknown>;
+export declare function isObjectLiteral(item: unknown): item is Record<string, unknown>;
+export declare function deepMerge(target: Record<string, unknown>, ...sources: Record<string, unknown>[]): Record<string, unknown>;
+export declare function parseVersion(version: string): {
+    major: number;
+    minor: number;
+    patch: number;
+};
+export declare function formatStandardNumber(number: number): string;
+export declare function getDifference(minuend: number, subtrahend: number): number;

package/dist/internal/utils/objects.js

@@ -0,0 +1,36 @@
+//#region src/internal/utils/objects.ts
+function e(e) {
+	return !!e && typeof e == "object" && !Array.isArray(e);
+}
+function t(e) {
+	if (!e || typeof e != "object" || Array.isArray(e)) return !1;
+	let t = Object.getPrototypeOf(e);
+	return t === null || t === Object.prototype;
+}
+function n(e, ...r) {
+	if (!r.length) return e;
+	let i = r.shift();
+	if (t(e) && t(i)) for (let r in i) t(i[r]) ? t(e[r]) ? n(e[r], i[r]) : e[r] = i[r] : Object.assign(e, { [r]: i[r] });
+	return n(e, ...r);
+}
+function r(e) {
+	let [t, n, r] = e.split(".").map((e) => {
+		let t = parseInt(e, 10);
+		return Number.isNaN(t) ? -1 : t;
+	});
+	return {
+		major: t ?? -1,
+		minor: n ?? -1,
+		patch: r ?? -1
+	};
+}
+function i(e) {
+	return new Intl.NumberFormat().format(e);
+}
+function a(e, t) {
+	return Math.sign(t - e) * Math.abs(e - t);
+}
+//#endregion
+export { n as deepMerge, i as formatStandardNumber, a as getDifference, e as isObject, t as isObjectLiteral, r as parseVersion };
+
+//# sourceMappingURL=objects.js.map

package/dist/internal/utils/objects.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"objects.js","names":[],"sources":["../../../src/internal/utils/objects.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport function isObject(item: unknown): item is Record<string, unknown> {\n  return !!item && typeof item === 'object' && !Array.isArray(item);\n}\n\nexport function isObjectLiteral(item: unknown): item is Record<string, unknown> {\n  if (!item || typeof item !== 'object' || Array.isArray(item)) {\n    return false;\n  }\n  const proto = Object.getPrototypeOf(item);\n  return proto === null || proto === Object.prototype;\n}\n\nexport function deepMerge(\n  target: Record<string, unknown>,\n  ...sources: Record<string, unknown>[]\n): Record<string, unknown> {\n  if (!sources.length) {\n    return target;\n  }\n\n  const source = sources.shift();\n\n  if (isObjectLiteral(target) && isObjectLiteral(source)) {\n    for (const key in source) {\n      if (isObjectLiteral(source[key])) {\n        if (isObjectLiteral(target[key])) {\n          deepMerge(target[key], source[key]);\n        } else {\n          target[key] = source[key];\n        }\n      } else {\n        Object.assign(target, { [key]: source[key] });\n      }\n    }\n  }\n\n  return deepMerge(target, ...sources);\n}\n\nexport function parseVersion(version: string) {\n  const [major, minor, patch] = version.split('.').map(v => {\n    const n = parseInt(v, 10);\n    return Number.isNaN(n) ? -1 : n;\n  });\n  return { major: major ?? -1, minor: minor ?? -1, patch: patch ?? -1 };\n}\n\nexport function formatStandardNumber(number: number) {\n  return new Intl.NumberFormat().format(number);\n}\n\nexport function getDifference(minuend: number, subtrahend: number) {\n  return Math.sign(subtrahend - minuend) * Math.abs(minuend - subtrahend);\n}\n"],"mappings":";AAGA,SAAgB,EAAS,GAAgD;AACvE,QAAO,CAAC,CAAC,KAAQ,OAAO,KAAS,YAAY,CAAC,MAAM,QAAQ,EAAK;;AAGnE,SAAgB,EAAgB,GAAgD;AAC9E,KAAI,CAAC,KAAQ,OAAO,KAAS,YAAY,MAAM,QAAQ,EAAK,CAC1D,QAAO;CAET,IAAM,IAAQ,OAAO,eAAe,EAAK;AACzC,QAAO,MAAU,QAAQ,MAAU,OAAO;;AAG5C,SAAgB,EACd,GACA,GAAG,GACsB;AACzB,KAAI,CAAC,EAAQ,OACX,QAAO;CAGT,IAAM,IAAS,EAAQ,OAAO;AAE9B,KAAI,EAAgB,EAAO,IAAI,EAAgB,EAAO,CACpD,MAAK,IAAM,KAAO,EAChB,CAAI,EAAgB,EAAO,GAAK,GAC1B,EAAgB,EAAO,GAAK,GAC9B,EAAU,EAAO,IAAM,EAAO,GAAK,GAEnC,EAAO,KAAO,EAAO,KAGvB,OAAO,OAAO,GAAQ,GAAG,IAAM,EAAO,IAAM,CAAC;AAKnD,QAAO,EAAU,GAAQ,GAAG,EAAQ;;AAGtC,SAAgB,EAAa,GAAiB;CAC5C,IAAM,CAAC,GAAO,GAAO,KAAS,EAAQ,MAAM,IAAI,CAAC,KAAI,MAAK;EACxD,IAAM,IAAI,SAAS,GAAG,GAAG;AACzB,SAAO,OAAO,MAAM,EAAE,GAAG,KAAK;GAC9B;AACF,QAAO;EAAE,OAAO,KAAS;EAAI,OAAO,KAAS;EAAI,OAAO,KAAS;EAAI;;AAGvE,SAAgB,EAAqB,GAAgB;AACnD,QAAO,IAAI,KAAK,cAAc,CAAC,OAAO,EAAO;;AAG/C,SAAgB,EAAc,GAAiB,GAAoB;AACjE,QAAO,KAAK,KAAK,IAAa,EAAQ,GAAG,KAAK,IAAI,IAAU,EAAW"}

package/dist/internal/utils/strings.d.ts

@@ -0,0 +1,5 @@
+/** formats a file size in bytes to a human readable string */
+export declare function formatFileSize(size: number): string;
+/** removes leading white space for a multiline string */
+export declare function shiftLeft(value: string): string;
+export declare let DOCS_URL: string;

package/dist/internal/utils/strings.js

@@ -0,0 +1,22 @@
+//#region src/internal/utils/strings.ts
+function e(e) {
+	let t = new Map([
+		[1024 ** 4, "TB"],
+		[1024 ** 3, "GB"],
+		[1024 ** 2, "MB"],
+		[1024 ** 1, "KB"],
+		[1, "B"]
+	]);
+	for (let [n, r] of t.entries()) if (e >= n) return `${(e / n).toFixed(2)} ${r}`;
+	return "0";
+}
+function t(e) {
+	let t = e.replace(/^\n|\n$/g, "").search(/\S|$/);
+	return e.trim().split("\n").map((e) => e.split("").filter((e, n) => n >= t || e !== " ").join("")).join("\n");
+}
+var n = "";
+n = "https://nvidia.github.io/elements";
+//#endregion
+export { n as DOCS_URL, e as formatFileSize, t as shiftLeft };
+
+//# sourceMappingURL=strings.js.map

package/dist/internal/utils/strings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"strings.js","names":[],"sources":["../../../src/internal/utils/strings.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/** formats a file size in bytes to a human readable string */\nexport function formatFileSize(size: number): string {\n  const thresholds = new Map<number, string>([\n    [1024 ** 4, 'TB'],\n    [1024 ** 3, 'GB'],\n    [1024 ** 2, 'MB'],\n    [1024 ** 1, 'KB'],\n    [1, 'B']\n  ]);\n  for (const [threshold, unit] of thresholds.entries()) {\n    if (size >= threshold) {\n      return `${(size / threshold).toFixed(2)} ${unit}`;\n    }\n  }\n  return `0`;\n}\n\n/** removes leading white space for a multiline string */\nexport function shiftLeft(value: string) {\n  const shift = value.replace(/^\\n|\\n$/g, '').search(/\\S|$/);\n  return value\n    .trim()\n    .split('\\n')\n    .map(line => {\n      return line\n        .split('')\n        .filter((c, i) => i >= shift || c !== ' ')\n        .join('');\n    })\n    .join('\\n');\n}\n\nexport let DOCS_URL = '';\n/* @ts-expect-error -- VITE_BUNDLE_CONFIG is only defined at build time */\nif (!import.meta.env.VITE_BUNDLE_CONFIG) {\n  DOCS_URL = 'https://nvidia.github.io/elements';\n}\n"],"mappings":";AAIA,SAAgB,EAAe,GAAsB;CACnD,IAAM,IAAa,IAAI,IAAoB;EACzC,CAAC,QAAQ,GAAG,KAAK;EACjB,CAAC,QAAQ,GAAG,KAAK;EACjB,CAAC,QAAQ,GAAG,KAAK;EACjB,CAAC,QAAQ,GAAG,KAAK;EACjB,CAAC,GAAG,IAAI;EACT,CAAC;AACF,MAAK,IAAM,CAAC,GAAW,MAAS,EAAW,SAAS,CAClD,KAAI,KAAQ,EACV,QAAO,IAAI,IAAO,GAAW,QAAQ,EAAE,CAAC,GAAG;AAG/C,QAAO;;AAIT,SAAgB,EAAU,GAAe;CACvC,IAAM,IAAQ,EAAM,QAAQ,YAAY,GAAG,CAAC,OAAO,OAAO;AAC1D,QAAO,EACJ,MAAM,CACN,MAAM,KAAK,CACX,KAAI,MACI,EACJ,MAAM,GAAG,CACT,QAAQ,GAAG,MAAM,KAAK,KAAS,MAAM,IAAI,CACzC,KAAK,GAAG,CACX,CACD,KAAK,KAAK;;AAGf,IAAW,IAAW;AAGpB,IAAW"}

package/dist/internal/utils/supports.d.ts

@@ -0,0 +1,3 @@
+export declare function supportsNativeCSSAnchorPosition(): boolean;
+export declare function supportsCSSPositionArea(): boolean;
+export declare function supportsCSSLegacyInsetArea(): boolean;

package/dist/internal/utils/supports.js

@@ -0,0 +1,14 @@
+//#region src/internal/utils/supports.ts
+function e() {
+	return globalThis.CSS?.supports?.("position-area", "top") || globalThis.CSS?.supports?.("inset-area", "top");
+}
+function t() {
+	return globalThis.CSS?.supports?.("position-area", "top");
+}
+function n() {
+	return globalThis.CSS?.supports?.("inset-area", "top");
+}
+//#endregion
+export { n as supportsCSSLegacyInsetArea, t as supportsCSSPositionArea, e as supportsNativeCSSAnchorPosition };
+
+//# sourceMappingURL=supports.js.map

package/dist/internal/utils/supports.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"supports.js","names":[],"sources":["../../../src/internal/utils/supports.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport function supportsNativeCSSAnchorPosition() {\n  return globalThis.CSS?.supports?.('position-area', 'top') || globalThis.CSS?.supports?.('inset-area', 'top');\n}\n\nexport function supportsCSSPositionArea() {\n  return globalThis.CSS?.supports?.('position-area', 'top');\n}\n\nexport function supportsCSSLegacyInsetArea() {\n  return globalThis.CSS?.supports?.('inset-area', 'top');\n}\n"],"mappings":";AAGA,SAAgB,IAAkC;AAChD,QAAO,WAAW,KAAK,WAAW,iBAAiB,MAAM,IAAI,WAAW,KAAK,WAAW,cAAc,MAAM;;AAG9G,SAAgB,IAA0B;AACxC,QAAO,WAAW,KAAK,WAAW,iBAAiB,MAAM;;AAG3D,SAAgB,IAA6B;AAC3C,QAAO,WAAW,KAAK,WAAW,cAAc,MAAM"}

package/dist/logo/define.d.ts

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

package/dist/logo/define.js

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

package/dist/logo/define.js.map

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

package/dist/logo/index.d.ts

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

package/dist/logo/index.js

@@ -0,0 +1,2 @@
+import { Logo as e } from "./logo2.js";
+export { e as Logo };

package/dist/logo/logo.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+import { Color, Size } from '../internal';
+/**
+ * @element nve-logo
+ * @description A visual indicator for a brand or application.
+ * @since 0.10.0
+ * @entrypoint \@nvidia-elements/core/logo
+ * @slot - default slot for content
+ * @cssprop --background
+ * @cssprop --gap
+ * @cssprop --color
+ * @cssprop --height
+ * @cssprop --width
+ * @cssprop --font-size
+ * @cssprop --border-radius
+ * @cssprop --font-weight
+ * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
+ */
+export declare class Logo extends LitElement {
+    /**
+     * Visual treatment to represent unique color of an application
+     */
+    color: Color;
+    /**
+     * Determines size of logo
+     */
+    size?: Size;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    _internals: ElementInternals;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+}

package/dist/logo/logo.examples.js

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

package/dist/logo/logo.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.examples.js","names":[],"sources":["../../src/logo/logo.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/logo/define.js';\n\nexport default {\n  title: 'Elements/Logo',\n  component: 'nve-logo',\n};\n\n/**\n * @summary Default NVIDIA logo with aria-label for accessibility. Use for brand identification in headers, footers, and loading states.\n */\nexport const Default = {\n  render: () => html`\n  <nve-logo aria-label=\"NVIDIA\"></nve-logo>\n  `\n};\n\n/**\n * @summary Logo size variants (sm, md, lg) for different contexts. Use smaller sizes for dense layouts like toolbars, larger sizes for prominent brand placement.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n<div nve-layout=\"row gap:xs\">\n  <nve-logo size=\"sm\" color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n</div>\n  `\n};\n\n/**\n * @summary Custom icons slotted into the logo container. Ideal for product icons, team badges, or custom brand marks within the standard logo shape.\n * @tags test-case\n */\nexport const SlottedIcons = {\n  render: () => html`\n<div nve-layout=\"row gap:xs\">\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose large\" size=\"lg\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose medium\" size=\"md\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose small\" size=\"sm\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"green-grass\" aria-label=\"green grass\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n</div>\n  `\n};\n\n/**\n * @summary All available logo color options. Use colors to differentiate products, teams, or categories within NVIDIA applications.\n */\nexport const Color = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-logo aria-label=\"NVIDIA\"></nve-logo>\n  <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">Rc</nve-logo>\n  <nve-logo color=\"gray-slate\" aria-label=\"gray slate\">Gs</nve-logo>\n  <nve-logo color=\"gray-denim\" aria-label=\"gray denim\">Gd</nve-logo>\n  <nve-logo color=\"blue-indigo\" aria-label=\"blue indigo\">Bi</nve-logo>\n  <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">Bc</nve-logo>\n  <nve-logo color=\"blue-sky\" aria-label=\"blue sky\">Bs</nve-logo>\n  <nve-logo color=\"teal-cyan\" aria-label=\"teal cyan\">Tc</nve-logo>\n  <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo color=\"teal-seafoam\" aria-label=\"teal seafoam\">Ts</nve-logo>\n  <nve-logo color=\"green-grass\" aria-label=\"green grass\">Gg</nve-logo>\n  <nve-logo color=\"yellow-amber\" aria-label=\"yellow amber\">Ya</nve-logo>\n  <nve-logo color=\"orange-pumpkin\" aria-label=\"orange pumpkin\">Op</nve-logo>\n  <nve-logo color=\"red-tomato\" aria-label=\"red tomato\">Rt</nve-logo>\n  <nve-logo color=\"pink-magenta\" aria-label=\"pink magenta\">Pm</nve-logo>\n  <nve-logo color=\"purple-plum\" aria-label=\"purple plum\">Pp</nve-logo>\n  <nve-logo color=\"purple-violet\" aria-label=\"purple violet\">Pv</nve-logo>\n  <nve-logo color=\"purple-lavender\" aria-label=\"purple lavender\">Pl</nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose\">Pr</nve-logo>\n  <nve-logo color=\"green-jade\" aria-label=\"green jade\">Gj</nve-logo>\n  <nve-logo color=\"lime-pear\" aria-label=\"lime pear\">Lp</nve-logo>\n  <nve-logo color=\"yellow-nova\" aria-label=\"yellow nova\">Yn</nve-logo>\n  <nve-logo color=\"brand-green\" aria-label=\"brand green\">Bg</nve-logo>\n</div>\n  `\n};\n\n/**\n * @summary Logo colors optimized for light theme backgrounds. Ensures proper contrast and visibility when used in light mode interfaces.\n * @tags test-case\n */\nexport const LightTheme = {\n  render: () => html`\n<div nve-theme=\"root light\" nve-layout=\"row gap:xs align:wrap pad:sm\" style=\"background: var(--nve-sys-layer-container-background) !important;\">\n  <nve-logo aria-label=\"NVIDIA\"></nve-logo>\n  <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">Rc</nve-logo>\n  <nve-logo color=\"gray-slate\" aria-label=\"gray slate\">Gs</nve-logo>\n  <nve-logo color=\"gray-denim\" aria-label=\"gray denim\">Gd</nve-logo>\n  <nve-logo color=\"blue-indigo\" aria-label=\"blue indigo\">Bi</nve-logo>\n  <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">Bc</nve-logo>\n  <nve-logo color=\"blue-sky\" aria-label=\"blue sky\">Bs</nve-logo>\n  <nve-logo color=\"teal-cyan\" aria-label=\"teal cyan\">Tc</nve-logo>\n  <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo color=\"teal-seafoam\" aria-label=\"teal seafoam\">Ts</nve-logo>\n  <nve-logo color=\"green-grass\" aria-label=\"green grass\">Gg</nve-logo>\n  <nve-logo color=\"yellow-amber\" aria-label=\"yellow amber\">Ya</nve-logo>\n  <nve-logo color=\"orange-pumpkin\" aria-label=\"orange pumpkin\">Op</nve-logo>\n  <nve-logo color=\"red-tomato\" aria-label=\"red tomato\">Rt</nve-logo>\n  <nve-logo color=\"pink-magenta\" aria-label=\"pink magenta\">Pm</nve-logo>\n  <nve-logo color=\"purple-plum\" aria-label=\"purple plum\">Pp</nve-logo>\n  <nve-logo color=\"purple-violet\" aria-label=\"purple violet\">Pv</nve-logo>\n  <nve-logo color=\"purple-lavender\" aria-label=\"purple lavender\">Pl</nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose\">Pr</nve-logo>\n  <nve-logo color=\"green-jade\" aria-label=\"green jade\">Gj</nve-logo>\n  <nve-logo color=\"lime-pear\" aria-label=\"lime pear\">Lp</nve-logo>\n  <nve-logo color=\"yellow-nova\" aria-label=\"yellow nova\">Yn</nve-logo>\n  <nve-logo color=\"brand-green\" aria-label=\"brand green\">Bg</nve-logo>\n</div>\n  `\n}\n\n/**\n * @summary Logo colors optimized for dark theme backgrounds. Ensures proper contrast and visibility when used in dark mode interfaces.\n * @tags test-case\n */\nexport const DarkTheme = {\n  render: () => html`\n<div nve-theme=\"root dark\" nve-layout=\"row gap:xs align:wrap pad:sm\">\n  <nve-logo aria-label=\"NVIDIA\"></nve-logo>\n  <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">Rc</nve-logo>\n  <nve-logo color=\"gray-slate\" aria-label=\"gray slate\">Gs</nve-logo>\n  <nve-logo color=\"gray-denim\" aria-label=\"gray denim\">Gd</nve-logo>\n  <nve-logo color=\"blue-indigo\" aria-label=\"blue indigo\">Bi</nve-logo>\n  <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">Bc</nve-logo>\n  <nve-logo color=\"blue-sky\" aria-label=\"blue sky\">Bs</nve-logo>\n  <nve-logo color=\"teal-cyan\" aria-label=\"teal cyan\">Tc</nve-logo>\n  <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo color=\"teal-seafoam\" aria-label=\"teal seafoam\">Ts</nve-logo>\n  <nve-logo color=\"green-grass\" aria-label=\"green grass\">Gg</nve-logo>\n  <nve-logo color=\"yellow-amber\" aria-label=\"yellow amber\">Ya</nve-logo>\n  <nve-logo color=\"orange-pumpkin\" aria-label=\"orange pumpkin\">Op</nve-logo>\n  <nve-logo color=\"red-tomato\" aria-label=\"red tomato\">Rt</nve-logo>\n  <nve-logo color=\"pink-magenta\" aria-label=\"pink magenta\">Pm</nve-logo>\n  <nve-logo color=\"purple-plum\" aria-label=\"purple plum\">Pp</nve-logo>\n  <nve-logo color=\"purple-violet\" aria-label=\"purple violet\">Pv</nve-logo>\n  <nve-logo color=\"purple-lavender\" aria-label=\"purple lavender\">Pl</nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose\">Pr</nve-logo>\n  <nve-logo color=\"green-jade\" aria-label=\"green jade\">Gj</nve-logo>\n  <nve-logo color=\"lime-pear\" aria-label=\"lime pear\">Lp</nve-logo>\n  <nve-logo color=\"yellow-nova\" aria-label=\"yellow nova\">Yn</nve-logo>\n  <nve-logo color=\"brand-green\" aria-label=\"brand green\">Bg</nve-logo>\n</div>\n  `\n}"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/logo/logo.examples.json

@@ -0,0 +1,68 @@
+{
+  "element": "nve-logo",
+  "entrypoint": "@nvidia-elements/core/logo/logo.examples.json",
+  "items": [
+    {
+      "id": "core-logo_default",
+      "name": "Default",
+      "template": "<nve-logo aria-label=\"NVIDIA\"></nve-logo>\n",
+      "summary": "Default NVIDIA logo with aria-label for accessibility. Use for brand identification in headers, footers, and loading states.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-logo_size",
+      "name": "Size",
+      "template": "<div nve-layout=\"row gap:xs\">\n  <nve-logo size=\"sm\" color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo size=\"lg\" color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n</div>\n",
+      "summary": "Logo size variants (sm, md, lg) for different contexts. Use smaller sizes for dense layouts like toolbars, larger sizes for prominent brand placement.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-logo_slotted-icons",
+      "name": "SlottedIcons",
+      "template": "<div nve-layout=\"row gap:xs\">\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose large\" size=\"lg\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose medium\" size=\"md\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose small\" size=\"sm\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"green-grass\" aria-label=\"green grass\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n  <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">\n    <nve-icon name=\"star\"></nve-icon>\n  </nve-logo>\n</div>\n",
+      "summary": "Custom icons slotted into the logo container. Ideal for product icons, team badges, or custom brand marks within the standard logo shape.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-logo_color",
+      "name": "Color",
+      "template": "<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-logo aria-label=\"NVIDIA\"></nve-logo>\n  <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">Rc</nve-logo>\n  <nve-logo color=\"gray-slate\" aria-label=\"gray slate\">Gs</nve-logo>\n  <nve-logo color=\"gray-denim\" aria-label=\"gray denim\">Gd</nve-logo>\n  <nve-logo color=\"blue-indigo\" aria-label=\"blue indigo\">Bi</nve-logo>\n  <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">Bc</nve-logo>\n  <nve-logo color=\"blue-sky\" aria-label=\"blue sky\">Bs</nve-logo>\n  <nve-logo color=\"teal-cyan\" aria-label=\"teal cyan\">Tc</nve-logo>\n  <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo color=\"teal-seafoam\" aria-label=\"teal seafoam\">Ts</nve-logo>\n  <nve-logo color=\"green-grass\" aria-label=\"green grass\">Gg</nve-logo>\n  <nve-logo color=\"yellow-amber\" aria-label=\"yellow amber\">Ya</nve-logo>\n  <nve-logo color=\"orange-pumpkin\" aria-label=\"orange pumpkin\">Op</nve-logo>\n  <nve-logo color=\"red-tomato\" aria-label=\"red tomato\">Rt</nve-logo>\n  <nve-logo color=\"pink-magenta\" aria-label=\"pink magenta\">Pm</nve-logo>\n  <nve-logo color=\"purple-plum\" aria-label=\"purple plum\">Pp</nve-logo>\n  <nve-logo color=\"purple-violet\" aria-label=\"purple violet\">Pv</nve-logo>\n  <nve-logo color=\"purple-lavender\" aria-label=\"purple lavender\">Pl</nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose\">Pr</nve-logo>\n  <nve-logo color=\"green-jade\" aria-label=\"green jade\">Gj</nve-logo>\n  <nve-logo color=\"lime-pear\" aria-label=\"lime pear\">Lp</nve-logo>\n  <nve-logo color=\"yellow-nova\" aria-label=\"yellow nova\">Yn</nve-logo>\n  <nve-logo color=\"brand-green\" aria-label=\"brand green\">Bg</nve-logo>\n</div>\n",
+      "summary": "All available logo color options. Use colors to differentiate products, teams, or categories within NVIDIA applications.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-logo_light-theme",
+      "name": "LightTheme",
+      "template": "<div\n  nve-theme=\"root light\"\n  nve-layout=\"row gap:xs align:wrap pad:sm\"\n  style=\"background: var(--nve-sys-layer-container-background) !important\"\n>\n  <nve-logo aria-label=\"NVIDIA\"></nve-logo>\n  <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">Rc</nve-logo>\n  <nve-logo color=\"gray-slate\" aria-label=\"gray slate\">Gs</nve-logo>\n  <nve-logo color=\"gray-denim\" aria-label=\"gray denim\">Gd</nve-logo>\n  <nve-logo color=\"blue-indigo\" aria-label=\"blue indigo\">Bi</nve-logo>\n  <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">Bc</nve-logo>\n  <nve-logo color=\"blue-sky\" aria-label=\"blue sky\">Bs</nve-logo>\n  <nve-logo color=\"teal-cyan\" aria-label=\"teal cyan\">Tc</nve-logo>\n  <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo color=\"teal-seafoam\" aria-label=\"teal seafoam\">Ts</nve-logo>\n  <nve-logo color=\"green-grass\" aria-label=\"green grass\">Gg</nve-logo>\n  <nve-logo color=\"yellow-amber\" aria-label=\"yellow amber\">Ya</nve-logo>\n  <nve-logo color=\"orange-pumpkin\" aria-label=\"orange pumpkin\">Op</nve-logo>\n  <nve-logo color=\"red-tomato\" aria-label=\"red tomato\">Rt</nve-logo>\n  <nve-logo color=\"pink-magenta\" aria-label=\"pink magenta\">Pm</nve-logo>\n  <nve-logo color=\"purple-plum\" aria-label=\"purple plum\">Pp</nve-logo>\n  <nve-logo color=\"purple-violet\" aria-label=\"purple violet\">Pv</nve-logo>\n  <nve-logo color=\"purple-lavender\" aria-label=\"purple lavender\">Pl</nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose\">Pr</nve-logo>\n  <nve-logo color=\"green-jade\" aria-label=\"green jade\">Gj</nve-logo>\n  <nve-logo color=\"lime-pear\" aria-label=\"lime pear\">Lp</nve-logo>\n  <nve-logo color=\"yellow-nova\" aria-label=\"yellow nova\">Yn</nve-logo>\n  <nve-logo color=\"brand-green\" aria-label=\"brand green\">Bg</nve-logo>\n</div>\n",
+      "summary": "Logo colors optimized for light theme backgrounds. Ensures proper contrast and visibility when used in light mode interfaces.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-logo_dark-theme",
+      "name": "DarkTheme",
+      "template": "<div nve-theme=\"root dark\" nve-layout=\"row gap:xs align:wrap pad:sm\">\n  <nve-logo aria-label=\"NVIDIA\"></nve-logo>\n  <nve-logo color=\"red-cardinal\" aria-label=\"red cardinal\">Rc</nve-logo>\n  <nve-logo color=\"gray-slate\" aria-label=\"gray slate\">Gs</nve-logo>\n  <nve-logo color=\"gray-denim\" aria-label=\"gray denim\">Gd</nve-logo>\n  <nve-logo color=\"blue-indigo\" aria-label=\"blue indigo\">Bi</nve-logo>\n  <nve-logo color=\"blue-cobalt\" aria-label=\"blue cobalt\">Bc</nve-logo>\n  <nve-logo color=\"blue-sky\" aria-label=\"blue sky\">Bs</nve-logo>\n  <nve-logo color=\"teal-cyan\" aria-label=\"teal cyan\">Tc</nve-logo>\n  <nve-logo color=\"green-mint\" aria-label=\"green mint\">Gm</nve-logo>\n  <nve-logo color=\"teal-seafoam\" aria-label=\"teal seafoam\">Ts</nve-logo>\n  <nve-logo color=\"green-grass\" aria-label=\"green grass\">Gg</nve-logo>\n  <nve-logo color=\"yellow-amber\" aria-label=\"yellow amber\">Ya</nve-logo>\n  <nve-logo color=\"orange-pumpkin\" aria-label=\"orange pumpkin\">Op</nve-logo>\n  <nve-logo color=\"red-tomato\" aria-label=\"red tomato\">Rt</nve-logo>\n  <nve-logo color=\"pink-magenta\" aria-label=\"pink magenta\">Pm</nve-logo>\n  <nve-logo color=\"purple-plum\" aria-label=\"purple plum\">Pp</nve-logo>\n  <nve-logo color=\"purple-violet\" aria-label=\"purple violet\">Pv</nve-logo>\n  <nve-logo color=\"purple-lavender\" aria-label=\"purple lavender\">Pl</nve-logo>\n  <nve-logo color=\"pink-rose\" aria-label=\"pink rose\">Pr</nve-logo>\n  <nve-logo color=\"green-jade\" aria-label=\"green jade\">Gj</nve-logo>\n  <nve-logo color=\"lime-pear\" aria-label=\"lime pear\">Lp</nve-logo>\n  <nve-logo color=\"yellow-nova\" aria-label=\"yellow nova\">Yn</nve-logo>\n  <nve-logo color=\"brand-green\" aria-label=\"brand green\">Bg</nve-logo>\n</div>\n",
+      "summary": "Logo colors optimized for dark theme backgrounds. Ensures proper contrast and visibility when used in dark mode interfaces.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/logo/logo.js

@@ -0,0 +1,6 @@
+//#region src/logo/logo.css?inline
+var e = ":host{--background: var(--state-color-background);--color: var(--state-color);--gap: var(--nve-ref-space-xs);--height: var(--nve-ref-size-800);--width: var(--nve-ref-size-800);--font-size: calc(var(--width) / 2);--border-radius: calc(var(--height) * .2);--font-weight: var(--nve-ref-font-weight-bold);width:var(--width);height:var(--height);display:inline-block}@supports not (background: color-mix(in oklab,#000 0%,#fff)){:host([color]) [internal-host]{--background: var(--color);border:1px solid transparent;background-image:linear-gradient(#000c 0 0)!important}}[internal-host]{font-weight:var(--font-weight);font-size:var(--font-size);gap:var(--gap);color:var(--color);width:var(--width);height:var(--height);border-radius:var(--border-radius);display:inline-flex;place-items:center;place-content:center;line-height:0}::slotted([nve-text]){color:inherit!important}::slotted(nve-icon){--color: var(--state-color);--width: var(--font-size);--height: var(--font-size)}:host([size=\"sm\"]){--width: var(--nve-ref-size-600);--height: var(--nve-ref-size-600)}:host([size=\"lg\"]){--width: calc(var(--nve-ref-size-1000) * 1.55);--height: calc(var(--nve-ref-size-1000) * 1.55)}:host([color]) [internal-host]{background:var(--background)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=logo.js.map

package/dist/logo/logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.js","names":[],"sources":["../../src/logo/logo.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-background);\n  --color: var(--state-color);\n  --gap: var(--nve-ref-space-xs);\n  --height: var(--nve-ref-size-800);\n  --width: var(--nve-ref-size-800);\n  --font-size: calc(var(--width) / 2);\n  --border-radius: calc(var(--height) * 0.2);\n  --font-weight: var(--nve-ref-font-weight-bold);\n  width: var(--width);\n  height: var(--height);\n  display: inline-block;\n}\n\n@supports not (background: color-mix(in oklab, #000 0%, #fff)) {\n  :host([color]) [internal-host] {\n    --background: var(--color);\n    border: 1px solid transparent;\n    background-image: linear-gradient(hsl(0 0% 0% / 0.8) 0 0) !important;\n  }\n}\n\n[internal-host] {\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  gap: var(--gap);\n  color: var(--color);\n  width: var(--width);\n  height: var(--height);\n  border-radius: var(--border-radius);\n  display: inline-flex;\n  place-items: center;\n  place-content: center;\n  line-height: 0;\n}\n\n::slotted([nve-text]),\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n::slotted(nve-icon) {\n  --color: var(--state-color);\n  --width: var(--font-size);\n  --height: var(--font-size);\n}\n\n:host([size='sm']) {\n  --width: var(--nve-ref-size-600);\n  --height: var(--nve-ref-size-600);\n}\n\n:host([size='lg']) {\n  --width: calc(var(--nve-ref-size-1000) * 1.55);\n  --height: calc(var(--nve-ref-size-1000) * 1.55);\n}\n\n:host([color]) [internal-host] {\n  background: var(--background);\n}\n"],"mappings":""}

package/dist/logo/logo2.js

@@ -0,0 +1,35 @@
+import { attachInternals as e } from "../internal/utils/a11y.js";
+import { __decorate as t } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { colorStateStyles as n, useStyles as r } from "../internal/styles/index.js";
+import i from "./logo.js";
+import { LitElement as a, html as o } from "lit";
+import { property as s } from "lit/decorators/property.js";
+//#region src/logo/logo.ts
+var c = class extends a {
+	static {
+		this.styles = r([i, n]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-logo",
+			version: "0.0.3"
+		};
+	}
+	render() {
+		return o`<div internal-host><slot></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), e(this), this._internals.role = "img";
+	}
+};
+t([s({
+	type: String,
+	reflect: !0
+})], c.prototype, "color", void 0), t([s({
+	type: String,
+	reflect: !0
+})], c.prototype, "size", void 0);
+//#endregion
+export { c as Logo };
+
+//# sourceMappingURL=logo2.js.map

package/dist/logo/logo2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo2.js","names":[],"sources":["../../src/logo/logo.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 type { Color, Size } from '@nvidia-elements/core/internal';\nimport { useStyles, colorStateStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport styles from './logo.css?inline';\n\n/**\n * @element nve-logo\n * @description A visual indicator for a brand or application.\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/logo\n * @slot - default slot for content\n * @cssprop --background\n * @cssprop --gap\n * @cssprop --color\n * @cssprop --height\n * @cssprop --width\n * @cssprop --font-size\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n */\nexport class Logo extends LitElement {\n  /**\n   * Visual treatment to represent unique color of an application\n   */\n  @property({ type: String, reflect: true }) color: Color;\n\n  /**\n   * Determines size of logo\n   */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  static styles = useStyles([styles, colorStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-logo',\n    version: '0.0.0'\n  };\n\n  _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 = 'img';\n  }\n}\n"],"mappings":";;;;;;;AAyBA,IAAa,IAAb,cAA0B,EAAW;;gBAWnB,EAAU,CAAC,GAAQ,EAAiB,CAAC;;;kBAE1B;GACzB,KAAK;GACL,SAAS;GACV;;CAID,SAAS;AACP,SAAO,CAAI;;CAOb,oBAAoB;AAGlB,EAFA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO;;;GA3BxB,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,SAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA"}

package/dist/menu/define.d.ts

@@ -0,0 +1,7 @@
+import { Menu, MenuItem } from '.';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-menu': Menu;
+        'nve-menu-item': MenuItem;
+    }
+}

package/dist/menu/define.js

@@ -0,0 +1,7 @@
+import { define as e } from "../internal/utils/dom.js";
+import { Menu as t } from "./menu2.js";
+import { MenuItem as n } from "./menu-item2.js";
+e(t), e(n);
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/menu/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/menu/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 { Menu, MenuItem } from '@nvidia-elements/core/menu';\n\ndefine(Menu);\ndefine(MenuItem);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-menu': Menu;\n    'nve-menu-item': MenuItem;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,EAAK,EACZ,EAAO,EAAS"}

package/dist/menu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './menu.js';
+export * from './menu-item.js';

package/dist/menu/index.js

@@ -0,0 +1,3 @@
+import { Menu as e } from "./menu2.js";
+import { MenuItem as t } from "./menu-item2.js";
+export { e as Menu, t as MenuItem };

package/dist/menu/menu-item.d.ts

@@ -0,0 +1,38 @@
+import { BaseButton } from '../internal';
+/**
+ * @element nve-menu-item
+ * @description Represents a selectable option within a menu, providing an interactive button for navigation or actions.
+ * @since 0.11.0
+ * @entrypoint \@nvidia-elements/core/menu
+ * @slot - default slot for content
+ * @slot suffix - slot for suffix icon
+ * @cssprop --background
+ * @cssprop --border-radius
+ * @cssprop --border-background
+ * @cssprop --font-size
+ * @cssprop --font-weight
+ * @cssprop --color
+ * @cssprop --padding
+ * @cssprop --gap
+ * @cssprop --width
+ * @cssprop --min-height
+ * @cssprop --line-height
+ * @cssprop --cursor
+ * @cssprop --opacity
+ * @cssprop --text-transform
+
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
+ */
+export declare class MenuItem extends BaseButton {
+    static styles: import('lit').CSSResult[];
+    status: 'danger';
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        parents: string[];
+    };
+    static elementDefinitions: {};
+    render(): import('lit-html').TemplateResult<1>;
+    constructor();
+    connectedCallback(): void;
+}

package/dist/menu/menu-item.js

@@ -0,0 +1,6 @@
+//#region src/menu/menu-item.css?inline
+var e = ":host{--border-radius: var(--nve-ref-border-radius-xs);--border-background: var(--nve-sys-accent-secondary-background);--font-size: var(--nve-ref-font-size-100);--font-weight: var(--nve-ref-font-weight-medium);--color: var(--nve-sys-interaction-color);--padding: var(--nve-ref-size-200);--gap: var(--nve-ref-space-sm);--width: 100%;--min-height: var(--nve-ref-size-800);--line-height: 0;--cursor: pointer;--text-transform: capitalize;--opacity: 1;contain:layout;content-visibility:auto;contain-intrinsic-size:auto var(--min-height, initial)}[internal-host]{--_icon-color: var(--color);padding:var(--padding);color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);border-radius:var(--border-radius);gap:var(--gap);width:var(--width);min-width:var(--min-width);min-height:var(--min-height);cursor:var(--cursor);text-transform:var(--text-transform);outline-offset:calc(-1 * var(--nve-ref-size-50));opacity:var(--opacity);position:relative;display:flex;align-items:center;white-space:nowrap;border:0;text-align:left}::slotted(nve-icon){--color: var(--_icon-color)}:host(:hover),:host(:state(selected)){--color: var(--nve-sys-interaction-selected-color)}:host(:state(disabled)) [interaction-state]{--nve-sys-interaction-state-ratio: 0}:host(:state(disabled)){--opacity: var(--nve-ref-opacity-500);--cursor: not-allowed}:host(:state(current)){contain:none;content-visibility:initial;--color: var(--nve-sys-interaction-selected-color)}:host(:state(current)) [internal-host]{contain:none}:host([status=\"danger\"]){--nve-sys-interaction-state-base: var(--nve-sys-support-danger-muted-color);--nve-sys-interaction-selected-color: var(--nve-sys-support-danger-emphasis-color);--border-background: var(--nve-sys-support-danger-emphasis-color);--color: var(--nve-sys-support-danger-emphasis-color)}:host([status=\"danger\"]:hover) ::slotted(nve-icon){--color: var(--nve-sys-support-danger-emphasis-color) !important}:host(:state(current)) [internal-host]:after{width:var(--nve-ref-border-width-xl);border-radius:var(--border-radius);background:var(--border-background);content:\"\";display:block;position:absolute;top:var(--nve-ref-size-50);bottom:var(--nve-ref-size-50);left:calc(var(--nve-ref-size-200) * -1)}::slotted(nve-icon){--color: inherit !important}::slotted(a){text-decoration:var(--text-decoration)!important;color:var(--color)!important;gap:var(--gap)!important;display:flex!important;align-items:center!important;outline:0}::slotted(a):after{display:block;content:\" \";inset:0;position:absolute}::slotted(*:not(a,nve-icon)){pointer-events:none}::slotted(nve-divider){margin:0 calc(-1 * var(--padding))}::slotted([slot=\"suffix\"]){margin-inline-start:auto}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=menu-item.js.map

package/dist/menu/menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.js","names":[],"sources":["../../src/menu/menu-item.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  --border-radius: var(--nve-ref-border-radius-xs);\n  --border-background: var(--nve-sys-accent-secondary-background);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-medium);\n  --color: var(--nve-sys-interaction-color);\n  --padding: var(--nve-ref-size-200);\n  --gap: var(--nve-ref-space-sm);\n  --width: 100%;\n  --min-height: var(--nve-ref-size-800);\n  --line-height: 0;\n  --cursor: pointer;\n  --text-transform: capitalize;\n  --opacity: 1;\n  contain: layout;\n  content-visibility: auto;\n  contain-intrinsic-size: auto var(--min-height, initial);\n}\n\n[internal-host] {\n  --_icon-color: var(--color);\n  padding: var(--padding);\n  color: var(--color);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  border-radius: var(--border-radius);\n  gap: var(--gap);\n  width: var(--width);\n  min-width: var(--min-width);\n  min-height: var(--min-height);\n  cursor: var(--cursor);\n  text-transform: var(--text-transform);\n  outline-offset: calc(-1 * var(--nve-ref-size-50));\n  opacity: var(--opacity);\n  position: relative;\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  border: 0;\n  text-align: left;\n}\n\n::slotted(nve-icon),\n::slotted(nve-icon) {\n  --color: var(--_icon-color);\n}\n\n:host(:hover),\n:host(:state(selected)) {\n  --color: var(--nve-sys-interaction-selected-color);\n}\n\n:host(:state(disabled)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: 0;\n}\n\n:host(:state(disabled)) {\n  --opacity: var(--nve-ref-opacity-500);\n  --cursor: not-allowed;\n}\n\n:host(:state(current)) {\n  contain: none;\n  content-visibility: initial;\n  --color: var(--nve-sys-interaction-selected-color);\n}\n\n:host(:state(current)) [internal-host] {\n  contain: none;\n}\n\n:host([status='danger']) {\n  --nve-sys-interaction-state-base: var(--nve-sys-support-danger-muted-color);\n  --nve-sys-interaction-selected-color: var(--nve-sys-support-danger-emphasis-color);\n  --border-background: var(--nve-sys-support-danger-emphasis-color);\n  --color: var(--nve-sys-support-danger-emphasis-color);\n}\n\n:host([status='danger']:hover) ::slotted(nve-icon) {\n  --color: var(--nve-sys-support-danger-emphasis-color) !important;\n}\n\n:host(:state(current)) [internal-host]::after {\n  width: var(--nve-ref-border-width-xl);\n  border-radius: var(--border-radius);\n  background: var(--border-background);\n  content: '';\n  display: block;\n  position: absolute;\n  top: var(--nve-ref-size-50);\n  bottom: var(--nve-ref-size-50);\n  left: calc(var(--nve-ref-size-200) * -1);\n}\n\n::slotted(nve-icon) {\n  --color: inherit !important;\n}\n\n::slotted(a) {\n  text-decoration: var(--text-decoration) !important;\n  color: var(--color) !important;\n  gap: var(--gap) !important;\n  display: flex !important;\n  align-items: center !important;\n  outline: 0;\n}\n\n::slotted(a)::after {\n  display: block;\n  content: ' ';\n  inset: 0;\n  position: absolute;\n}\n\n::slotted(*:not(a, nve-icon)),\n::slotted(*:not(a, nve-icon)) {\n  pointer-events: none;\n}\n\n::slotted(nve-divider),\n::slotted(nve-divider) {\n  margin: 0 calc(-1 * var(--padding));\n}\n\n::slotted([slot='suffix']) {\n  margin-inline-start: auto;\n}\n"],"mappings":""}

package/dist/menu/menu-item2.js

@@ -0,0 +1,40 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { BaseButton as t } from "../internal/base/button.js";
+import { audit as n } from "../internal/controllers/audit.controller.js";
+import { useStyles as r } from "../internal/styles/index.js";
+import i from "./menu-item.js";
+import { html as a } from "lit";
+import { property as o } from "lit/decorators/property.js";
+//#region src/menu/menu-item.ts
+var s = class extends t {
+	static {
+		this.styles = r([i]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-menu-item",
+			version: "0.0.3",
+			parents: ["nve-menu"]
+		};
+	}
+	static {
+		this.elementDefinitions = {};
+	}
+	render() {
+		return a`<div internal-host interaction-state focus-within part="_internal"><slot></slot><slot name="suffix"></slot></div>`;
+	}
+	constructor() {
+		super(), this.type = "button";
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._internals.role = "menuitem";
+	}
+};
+e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "status", void 0), s = e([n()], s);
+//#endregion
+export { s as MenuItem };
+
+//# sourceMappingURL=menu-item2.js.map

package/dist/menu/menu-item2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item2.js","names":[],"sources":["../../src/menu/menu-item.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 { property } from 'lit/decorators/property.js';\nimport { useStyles, BaseButton, audit } from '@nvidia-elements/core/internal';\nimport styles from './menu-item.css?inline';\n\n/**\n * @element nve-menu-item\n * @description Represents a selectable option within a menu, providing an interactive button for navigation or actions.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/menu\n * @slot - default slot for content\n * @slot suffix - slot for suffix icon\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border-background\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --gap\n * @cssprop --width\n * @cssprop --min-height\n * @cssprop --line-height\n * @cssprop --cursor\n * @cssprop --opacity\n * @cssprop --text-transform\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit()\nexport class MenuItem extends BaseButton {\n  static styles = useStyles([styles]);\n\n  @property({ type: String, reflect: true }) status: 'danger';\n\n  static readonly metadata = {\n    tag: 'nve-menu-item',\n    version: '0.0.0',\n    parents: ['nve-menu']\n  };\n\n  static elementDefinitions = {};\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within part=\"_internal\">\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'menuitem';\n  }\n}\n"],"mappings":";;;;;;;;AAiCO,IAAA,IAAA,cAAuB,EAAW;;gBACvB,EAAU,CAAC,EAAO,CAAC;;;kBAIR;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,WAAA;GACX;;;4BAE2B,EAAE;;CAE9B,SAAS;AACP,SAAO,CAAI;;CAQb,cAAc;AAEZ,EADA,OAAO,EACP,KAAK,OAAO;;CAGd,oBAAoB;AAElB,EADA,MAAM,mBAAmB,EACzB,KAAK,WAAW,OAAO;;;GA1BxB,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,SAJ3C,GAAO,CAAA,EAAA,EAAA"}

package/dist/menu/menu.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+import { KeynavListConfig } from '../internal';
+import { MenuItem } from './menu-item.js';
+/**
+ * @element nve-menu
+ * @description A menu offers a list of choices to the user, such as a set of actions or functions. Choosing an item in a menu typically opens a sub menu, or invokes a command.
+ * @since 0.11.0
+ * @entrypoint \@nvidia-elements/core/menu
+ * @slot - default slot for `nve-menu-item`
+ * @cssprop --padding
+ * @cssprop --gap
+ * @cssprop --width
+ * @cssprop --max-width
+ * @cssprop --min-width
+ * @cssprop --max-height
+ * @event scroll - Fires when the user scrolls the menu list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`.
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
+ */
+export declare class Menu extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        children: string[];
+    };
+    static elementDefinitions: {};
+    /** @private */
+    get keynavListConfig(): KeynavListConfig;
+    /** @private */
+    _internals: ElementInternals;
+    items: MenuItem[];
+    render(): import('lit-html').TemplateResult<1>;
+    firstUpdated(): Promise<void>;
+    connectedCallback(): void;
+}

package/dist/menu/menu.examples.js

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