@nvidia-elements/core 0.0.1 → 0.0.3

package/dist/grid/grid.global.js

@@ -0,0 +1,6 @@
+//#region src/grid/grid.global.css?inline
+var e = "nve-grid-row:has(nve-grid-cell:first-child [nve-control]>input:checked) nve-grid-cell{--background: var(--nve-sys-interaction-highlighted-muted-background);--interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected)}nve-grid:has(nve-grid-cell:first-child nve-radio),nve-grid:has(nve-grid-cell:first-child nve-checkbox){--grid-auto-columns: 36px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)}nve-grid[container=flat] nve-grid-header{--background: var(--nve-sys-layer-canvas-background)}nve-card,nve-panel,nve-dialog,nve-drawer,nve-accordion{nve-grid[container=flat]{nve-grid-header{--background: var(--nve-sys-layer-container-background)}}}nve-grid-cell:has(>nve-icon-button){--padding: 0 var(--nve-ref-size-100)}nve-grid-cell:has(>nve-checkbox),nve-grid-cell:has(>nve-radio){--padding: var(--nve-ref-size-200) var(--nve-ref-size-300)}nve-grid:has(nve-toolbar:not([hidden]))::part(_scrollbox){padding-block-end:var(--nve-ref-size-1000)}nve-grid:has(nve-toolbar:not([hidden])){contain:content}nve-grid-column>nve-sort-button+nve-icon-button{margin-inline-start:initial}nve-grid-cell:focus-within>a{box-shadow:0 0 0 2px Highlight}nve-grid{&:has([scroller]) nve-grid-header{--padding: 0 16px 0 0}[scroller]{scrollbar-color:var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);scrollbar-width:var(--nve-sys-scrollbar-width)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=grid.global.js.map

package/dist/grid/grid.global.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.global.js","names":[],"sources":["../../src/grid/grid.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-grid-row:has(nve-grid-cell:first-child [nve-control] > input:checked) nve-grid-cell,\nnve-grid-row:has(nve-grid-cell:first-child [nve-control] > input:checked) nve-grid-cell {\n  --background: var(--nve-sys-interaction-highlighted-muted-background);\n  --interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n}\n\nnve-grid:has(nve-grid-cell:first-child nve-radio),\nnve-grid:has(nve-grid-cell:first-child nve-checkbox),\nnve-grid:has(nve-grid-cell:first-child nve-radio),\nnve-grid:has(nve-grid-cell:first-child nve-checkbox) {\n  --grid-auto-columns: 36px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);\n}\n\nnve-grid[container='flat'] nve-grid-header,\nnve-grid[container='flat'] nve-grid-header {\n  --background: var(--nve-sys-layer-canvas-background);\n}\n\nnve-card,\nnve-panel,\nnve-dialog,\nnve-drawer,\nnve-accordion,\nnve-card,\nnve-panel,\nnve-dialog,\nnve-drawer,\nnve-accordion {\n  nve-grid[container='flat'],\n  nve-grid[container='flat'] {\n    nve-grid-header,\n    nve-grid-header {\n      --background: var(--nve-sys-layer-container-background);\n    }\n  }\n}\n\nnve-grid-cell:has(> nve-icon-button),\nnve-grid-cell:has(> nve-icon-button) {\n  --padding: 0 var(--nve-ref-size-100);\n}\n\nnve-grid-cell:has(> nve-checkbox),\nnve-grid-cell:has(> nve-radio),\nnve-grid-cell:has(> nve-checkbox),\nnve-grid-cell:has(> nve-radio) {\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-300);\n}\n\nnve-grid:has(nve-toolbar:not([hidden]))::part(_scrollbox),\nnve-grid:has(nve-toolbar:not([hidden]))::part(_scrollbox) {\n  padding-block-end: var(--nve-ref-size-1000);\n}\n\nnve-grid:has(nve-toolbar:not([hidden])),\nnve-grid:has(nve-toolbar:not([hidden])) {\n  contain: content;\n}\n\nnve-grid-column > nve-sort-button + nve-icon-button,\nnve-grid-column > nve-sort-button + nve-icon-button {\n  margin-inline-start: initial;\n}\n\nnve-grid-cell:focus-within > a,\nnve-grid-cell:focus-within > a {\n  box-shadow: 0 0 0 2px Highlight; /* programmatic focus does not trigger standard outline style */\n}\n\nnve-grid,\nnve-grid {\n  &:has([scroller]) nve-grid-header,\n  &:has([scroller]) nve-grid-header {\n    --padding: 0 16px 0 0;\n  }\n\n  & [scroller] {\n    scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n    scrollbar-width: var(--nve-sys-scrollbar-width);\n  }\n}\n"],"mappings":""}

package/dist/grid/grid.js

@@ -0,0 +1,6 @@
+//#region src/grid/grid.css?inline
+var e = ":host{--nve-sys-interaction-background: var(--nve-sys-interaction-background-200);--nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);--background: var(--nve-sys-layer-container-background);--color: var(--nve-sys-layer-canvas-color);--border-radius: var(--nve-ref-border-radius-lg);--box-shadow: var(--nve-ref-shadow-100);--font-size: var(--nve-ref-font-size-100);--row-height: var(--nve-ref-size-900);--scroll-height: initial;--grid-auto-columns: minmax(0, 1fr);--scroll-width: 0;--grid-template-column: initial;--grid-auto-flow: column;display:grid;contain:none;width:100%;width:stretch}[internal-host]{border-radius:var(--border-radius);box-shadow:var(--box-shadow);background:var(--background);color:var(--color);font-size:var(--font-size);display:flex;flex-direction:column;align-items:stretch;justify-content:start;overflow:hidden;color-scheme:inherit;position:relative;height:100%;width:100%}:host(:state(scrolling)){--scroll-shadow: 0 0 4px hsl(0 0% 0% / .4)}[name=columns]{min-width:fit-content;display:grid;position:sticky;top:0;z-index:100}[part=_scrollbox]{height:100%;width:100%;max-height:var(--scroll-height);min-height:var(--scroll-height);contain:layout;overflow:auto;position:relative;scrollbar-color:var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);scrollbar-width:var(--nve-sys-scrollbar-width)}:host([container*=\"full\"]){--border-radius: 0;--box-shadow: none}:host([container*=\"flat\"]){--border-radius: 0;--box-shadow: none;--background: inherit}:host([container*=\"flat\"]) ::slotted(nve-grid-header){--background: inherit}:host([stripe]) ::slotted(nve-grid-row:nth-child(odd)){--background: var(--nve-sys-layer-container-accent-background)}::slotted(nve-grid-row:last-child){--border-bottom: 0}::slotted(nve-toolbar){position:fixed;z-index:99;left:var(--nve-ref-size-300);bottom:var(--nve-ref-size-300);width:calc(100% - 24px)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=grid.js.map

package/dist/grid/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","names":[],"sources":["../../src/grid/grid.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  --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n  --background: var(--nve-sys-layer-container-background);\n  --color: var(--nve-sys-layer-canvas-color);\n  --border-radius: var(--nve-ref-border-radius-lg);\n  --box-shadow: var(--nve-ref-shadow-100);\n  --font-size: var(--nve-ref-font-size-100);\n  --row-height: var(--nve-ref-size-900);\n  --scroll-height: initial;\n  --grid-auto-columns: minmax(0, 1fr);\n  --scroll-width: 0;\n  --grid-template-column: initial;\n  --grid-auto-flow: column;\n  display: grid;\n  contain: none;\n  width: 100%; /* fallback safari */\n  width: stretch;\n}\n\n[internal-host] {\n  border-radius: var(--border-radius);\n  box-shadow: var(--box-shadow);\n  background: var(--background);\n  color: var(--color);\n  font-size: var(--font-size);\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: start;\n  overflow: hidden;\n  color-scheme: inherit;\n  position: relative;\n  height: 100%;\n  width: 100%;\n}\n\n:host(:state(scrolling)) {\n  --scroll-shadow: 0 0 4px hsl(0 0% 0% / 0.4);\n}\n\n[name='columns'] {\n  min-width: fit-content;\n  display: grid;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n}\n\n[part='_scrollbox'] {\n  height: 100%;\n  width: 100%;\n  max-height: var(--scroll-height);\n  min-height: var(--scroll-height);\n  contain: layout;\n  overflow: auto;\n  position: relative;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n\n:host([container*='full']) {\n  --border-radius: 0;\n  --box-shadow: none;\n}\n\n:host([container*='flat']) {\n  --border-radius: 0;\n  --box-shadow: none;\n  --background: inherit;\n}\n\n:host([container*='flat']) ::slotted(nve-grid-header),\n:host([container*='flat']) ::slotted(nve-grid-header) {\n  --background: inherit;\n}\n\n:host([stripe]) ::slotted(nve-grid-row:nth-child(odd)),\n:host([stripe]) ::slotted(nve-grid-row:nth-child(odd)) {\n  --background: var(--nve-sys-layer-container-accent-background);\n}\n\n::slotted(nve-grid-row:last-child),\n::slotted(nve-grid-row:last-child) {\n  --border-bottom: 0;\n}\n\n::slotted(nve-toolbar),\n::slotted(nve-toolbar) {\n  position: fixed;\n  z-index: 99;\n  left: var(--nve-ref-size-300);\n  bottom: var(--nve-ref-size-300);\n  width: calc(100% - 24px);\n}\n"],"mappings":""}

package/dist/grid/grid2.js

@@ -0,0 +1,76 @@
+import { appendRootNodeStyle as e, generateId as t, tagSelector as n } from "../internal/utils/dom.js";
+import { attachInternals as r } from "../internal/utils/a11y.js";
+import { __decorate as i } from "../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { audit as a } from "../internal/controllers/audit.controller.js";
+import { keyNavigationGrid as o } from "../internal/controllers/keynav-grid.controller.js";
+import { useStyles as s } from "../internal/styles/index.js";
+import { GridPlaceholder as c } from "./placeholder/placeholder2.js";
+import { GridColumn as l } from "./column/column2.js";
+import { GridCell as u } from "./cell/cell2.js";
+import { GridRow as d } from "./row/row2.js";
+import { GridHeader as f } from "./header/header2.js";
+import { GridFooter as p } from "./footer/footer2.js";
+import m from "./grid.js";
+import h from "./grid.global.js";
+import { LitElement as g, html as _ } from "lit";
+import { property as v } from "lit/decorators/property.js";
+//#region src/grid/grid.ts
+var y = class extends g {
+	static {
+		this.styles = s([m]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-grid",
+			version: "0.0.3",
+			children: [
+				d.metadata.tag,
+				f.metadata.tag,
+				p.metadata.tag,
+				c.metadata.tag
+			]
+		};
+	}
+	static {
+		this.elementDefinitions = {};
+	}
+	get keynavGridConfig() {
+		return {
+			columns: this.#n,
+			rows: [this.#t, ...this.#e],
+			cells: [...this.#n, ...this.#r]
+		};
+	}
+	get #e() {
+		return Array.from(this.querySelectorAll(n(d.metadata.tag)));
+	}
+	get #t() {
+		return this.querySelector(n(f.metadata.tag));
+	}
+	get #n() {
+		return Array.from(this.querySelectorAll(n(l.metadata.tag)));
+	}
+	get #r() {
+		return Array.from(this.querySelectorAll(n(u.metadata.tag)));
+	}
+	render() {
+		return _`<div internal-host><div part="_scrollbox"><slot></slot></div><slot name="footer"></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), r(this), this._internals.role = "grid", this.id ||= t(), e(this, h);
+	}
+	async scrollTo(...e) {
+		await this.shadowRoot.querySelector("[part=\"_scrollbox\"]")?.scrollTo(...e);
+	}
+};
+i([v({
+	type: String,
+	reflect: !0
+})], y.prototype, "container", void 0), i([v({
+	type: Boolean,
+	reflect: !0
+})], y.prototype, "stripe", void 0), y = i([a(), o()], y);
+//#endregion
+export { y as Grid };
+
+//# sourceMappingURL=grid2.js.map

package/dist/grid/grid2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid2.js","names":["#columns","#header","#rows","#cells"],"sources":["../../src/grid/grid.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 { ContainerElement } from '@nvidia-elements/core/internal';\nimport {\n  keyNavigationGrid,\n  useStyles,\n  attachInternals,\n  appendRootNodeStyle,\n  generateId,\n  tagSelector,\n  audit\n} from '@nvidia-elements/core/internal';\nimport { GridPlaceholder } from './placeholder/placeholder.js';\nimport { GridHeader } from './header/header.js';\nimport { GridColumn } from './column/column.js';\nimport { GridFooter } from './footer/footer.js';\nimport { GridRow } from './row/row.js';\nimport { GridCell } from './cell/cell.js';\nimport styles from './grid.css?inline';\nimport globalStyles from './grid.global.css?inline';\n\n/**\n * @element nve-grid\n * @description A versatile table/datagrid component with built-in keyboard navigation for displaying and interacting with structured data. Use it for anything from simple read-only tables to fully interactive, spreadsheet experiences.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - default slot for content\n * @slot footer - slot for grid-footer or toolbar\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --box-shadow\n * @cssprop --font-size\n * @cssprop --row-height - fixed height of each row\n * @cssprop --scroll-height - height of the scrollable area\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\n@audit()\n@keyNavigationGrid<Grid>()\nexport class Grid extends LitElement implements ContainerElement {\n  /**\n   * Determines the container styles of component. Flat nests the grid within other containers. Full spans the full edge-to-edge viewport width.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'full';\n\n  /**\n   * Determine style variant stripe rows\n   */\n  @property({ type: Boolean, reflect: true }) stripe: boolean;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid',\n    version: '0.0.0',\n    children: [GridRow.metadata.tag, GridHeader.metadata.tag, GridFooter.metadata.tag, GridPlaceholder.metadata.tag]\n  };\n\n  static elementDefinitions = {};\n\n  get keynavGridConfig() {\n    return {\n      columns: this.#columns,\n      rows: [this.#header!, ...this.#rows],\n      cells: [...this.#columns, ...this.#cells]\n    };\n  }\n\n  get #rows() {\n    return Array.from(this.querySelectorAll<GridRow>(tagSelector(GridRow.metadata.tag)));\n  }\n\n  get #header() {\n    return this.querySelector<GridHeader>(tagSelector(GridHeader.metadata.tag));\n  }\n\n  get #columns() {\n    return Array.from(this.querySelectorAll<GridColumn>(tagSelector(GridColumn.metadata.tag)));\n  }\n\n  get #cells() {\n    return Array.from(this.querySelectorAll<GridCell>(tagSelector(GridCell.metadata.tag)));\n  }\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <div part=\"_scrollbox\">\n          <slot></slot>\n        </div>\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'grid';\n    this.id ||= generateId();\n    appendRootNodeStyle(this, globalStyles);\n  }\n\n  /**\n   * Scroll to a specific position in the grid.\n   */\n  scrollTo(options?: ScrollToOptions): Promise<void>;\n  scrollTo(x: number, y: number): Promise<void>;\n  async scrollTo(...args: [options?: ScrollToOptions] | [x: number, y: number]): Promise<void> {\n    await this.shadowRoot!.querySelector('[part=\"_scrollbox\"]')?.scrollTo(...(args as [ScrollToOptions]));\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA2CO,IAAA,IAAA,cAAmB,EAAuC;;gBAW/C,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC,EAAQ,SAAS;IAAK,EAAW,SAAS;IAAK,EAAW,SAAS;IAAK,EAAgB,SAAS;;GAC7G;;;4BAE2B,EAAE;;CAE9B,IAAI,mBAAmB;AACrB,SAAO;GACL,SAAS,MAAA;GACT,MAAM,CAAC,MAAA,GAAe,GAAG,MAAA,EAAW;GACpC,OAAO,CAAC,GAAG,MAAA,GAAe,GAAG,MAAA,EAAKG;GACnC;;CAGH,KAAA,IAAY;AACV,SAAO,MAAM,KAAK,KAAK,iBAA0B,EAAY,EAAQ,SAAS,IAAI,CAAC,CAAC;;CAGtF,KAAA,IAAc;AACZ,SAAO,KAAK,cAA0B,EAAY,EAAW,SAAS,IAAI,CAAC;;CAG7E,KAAA,IAAe;AACb,SAAO,MAAM,KAAK,KAAK,iBAA6B,EAAY,EAAW,SAAS,IAAI,CAAC,CAAC;;CAG5F,KAAA,IAAa;AACX,SAAO,MAAM,KAAK,KAAK,iBAA2B,EAAY,EAAS,SAAS,IAAI,CAAC,CAAC;;CAMxF,SAAS;AACP,SAAO,CAAI;;CAUb,oBAAoB;AAKlB,EAJA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO,QACvB,KAAK,OAAO,GAAY,EACxB,EAAoB,MAAM,EAAa;;CAQzC,MAAM,SAAS,GAAG,GAA2E;AAC3F,QAAM,KAAK,WAAY,cAAc,wBAAsB,EAAE,SAAS,GAAI,EAA2B;;;GArEtG,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,SAX5C,GAAO,EACP,GAAyB,CAAA,EAAA,EAAA"}

package/dist/grid/header/header.d.ts

@@ -0,0 +1,29 @@
+import { PropertyValues, LitElement } from 'lit';
+import { GridColumn } from '../column/column.js';
+/**
+ * @element nve-grid-header
+ * @description Contains the column headers of a grid, managing column widths and providing structural context for the data rows below.
+ * @since 0.11.0
+ * @entrypoint \@nvidia-elements/core/grid
+ * @slot - default slot for `nve-grid-column`
+ * @cssprop --background
+ * @cssprop --border-bottom
+ * @cssprop --padding
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+ */
+export declare class GridHeader extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        children: string[];
+    };
+    /** @private */
+    _internals: ElementInternals;
+    /** @private */
+    columns: GridColumn[];
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+    firstUpdated(props: PropertyValues<this>): Promise<void>;
+}

package/dist/grid/header/header.js

@@ -0,0 +1,6 @@
+//#region src/grid/header/header.css?inline
+var e = ":host{--background: var(--nve-sys-layer-container-accent-background);--border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--padding: 0 1px 0 0;position:sticky;z-index:100;top:0;width:100%}[internal-host]{grid-auto-columns:var(--grid-auto-columns);grid-auto-flow:var(--grid-auto-flow);grid-template-columns:var(--grid-template-column);border-bottom:var(--border-bottom);background:var(--background);padding:var(--padding);display:grid;min-width:fit-content}:host([hidden]){display:block!important;opacity:0!important;height:0!important;z-index:0!important}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=header.js.map

package/dist/grid/header/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","names":[],"sources":["../../../src/grid/header/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-container-accent-background);\n  --border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --padding: 0 1px 0 0;\n  position: sticky;\n  z-index: 100;\n  top: 0;\n  width: 100%;\n}\n\n[internal-host] {\n  grid-auto-columns: var(--grid-auto-columns);\n  grid-auto-flow: var(--grid-auto-flow);\n  grid-template-columns: var(--grid-template-column);\n  border-bottom: var(--border-bottom);\n  background: var(--background);\n  padding: var(--padding);\n  display: grid;\n  min-width: fit-content;\n}\n\n:host([hidden]) {\n  display: block !important;\n  opacity: 0 !important;\n  height: 0 !important;\n  z-index: 0 !important;\n}\n"],"mappings":""}

package/dist/grid/header/header2.js

@@ -0,0 +1,58 @@
+import { GlobalStateService as e } from "../../internal/services/global.service.js";
+import { tagSelector as t } from "../../internal/utils/dom.js";
+import { attachInternals as n } from "../../internal/utils/a11y.js";
+import { debounce as r } from "../../internal/utils/events.js";
+import { LogService as i } from "../../internal/services/log.service.js";
+import { __decorate as a } from "../../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { audit as o } from "../../internal/controllers/audit.controller.js";
+import { useStyles as s } from "../../internal/styles/index.js";
+import c from "./header.js";
+import { GridColumn as l } from "../column/column2.js";
+import { GridCell as u } from "../cell/cell2.js";
+import { GridRow as d } from "../row/row2.js";
+import { LitElement as f, html as p } from "lit";
+import { queryAssignedElements as m } from "lit/decorators/query-assigned-elements.js";
+//#region src/grid/header/header.ts
+var h = class extends f {
+	static {
+		this.styles = s([c]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-grid-header",
+			version: "0.0.3",
+			children: [l.metadata.tag]
+		};
+	}
+	get #e() {
+		return this.parentElement;
+	}
+	render() {
+		return p`<div internal-host><slot @slotchange="${() => this.#t()}"></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), n(this), this._internals.role = "row", this.addEventListener("nve-grid-column-resize", () => this.#t());
+	}
+	async firstUpdated(e) {
+		super.firstUpdated(e), await this.updateComplete;
+		let t = r(() => this.#t(), 100);
+		new ResizeObserver(t).observe(this), this.#n();
+	}
+	async #t() {
+		await this.updateComplete, this.columns.forEach((e, t) => e.ariaColIndex = `${t + 1}`), this.#e.style.setProperty("--grid-auto-flow", "initial"), this.#e.style.setProperty("--grid-template-column", this.columns.map((e, t) => `var(--c${t})`).join(" ")), this.columns.forEach((e, t) => this.#e.style.setProperty(`--c${t}`, e.width ? e.width : "1fr")), await this.updateComplete, this.columns.forEach((e, t) => this.#e.style.setProperty(`--c${t}`, e.width ? e.width : `minmax(auto, ${e.getBoundingClientRect().width}px)`));
+	}
+	#n() {
+		if (e.state.env !== "production") {
+			let e = this.#e.querySelector(t(d.metadata.tag))?.querySelectorAll(t(u.metadata.tag));
+			this.columns && e && this.columns.length !== e.length && i.error(`grid-column (${this.columns.length}) and grid-cell (${e.length}) count mismatch`);
+		}
+	}
+};
+a([m({
+	selector: `${l.metadata.tag}, ${l.metadata.tag.replace("nve-", "nve-")}`,
+	flatten: !0
+})], h.prototype, "columns", void 0), h = a([o()], h);
+//#endregion
+export { h as GridHeader };
+
+//# sourceMappingURL=header2.js.map

package/dist/grid/header/header2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header2.js","names":["#grid","#computeColumnWidths","#validateColumns"],"sources":["../../../src/grid/header/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 {\n  useStyles,\n  attachInternals,\n  debounce,\n  LogService,\n  tagSelector,\n  audit,\n  GlobalStateService\n} from '@nvidia-elements/core/internal';\nimport styles from './header.css?inline';\nimport { GridColumn } from '../column/column.js';\nimport type { Grid } from '../grid.js';\nimport { GridRow } from '../row/row.js';\nimport { GridCell } from '../cell/cell.js';\n\n/**\n * @element nve-grid-header\n * @description Contains the column headers of a grid, managing column widths and providing structural context for the data rows below.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - default slot for `nve-grid-column`\n * @cssprop --background\n * @cssprop --border-bottom\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\n@audit()\nexport class GridHeader extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid-header',\n    version: '0.0.0',\n    children: [GridColumn.metadata.tag]\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /** @private */\n  @queryAssignedElements({\n    selector: `${GridColumn.metadata.tag}, ${GridColumn.metadata.tag.replace('nve-', 'nve-')}`,\n    flatten: true\n  })\n  columns!: GridColumn[];\n\n  get #grid() {\n    return this.parentElement as Grid;\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${() => this.#computeColumnWidths()}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'row';\n    this.addEventListener('nve-grid-column-resize', () => this.#computeColumnWidths());\n  }\n\n  async firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    await this.updateComplete;\n    const debounceFn = debounce(() => this.#computeColumnWidths(), 100);\n    new ResizeObserver(debounceFn).observe(this);\n    this.#validateColumns();\n  }\n\n  async #computeColumnWidths() {\n    await this.updateComplete;\n    this.columns.forEach((c, i) => (c.ariaColIndex = `${i + 1}`));\n    this.#grid.style.setProperty('--grid-auto-flow', 'initial');\n    this.#grid.style.setProperty('--grid-template-column', this.columns.map((_, i) => `var(--c${i})`).join(' '));\n\n    // compute initial column width\n    this.columns.forEach((c, i) => this.#grid.style.setProperty(`--c${i}`, c.width ? c.width : `1fr`));\n\n    // compute column width based on content\n    await this.updateComplete;\n    this.columns.forEach((c, i) =>\n      this.#grid.style.setProperty(`--c${i}`, c.width ? c.width : `minmax(auto, ${c.getBoundingClientRect().width}px)`)\n    );\n  }\n\n  #validateColumns() {\n    if (GlobalStateService.state.env !== 'production') {\n      const cells = this.#grid\n        .querySelector(tagSelector(GridRow.metadata.tag))\n        ?.querySelectorAll(tagSelector(GridCell.metadata.tag));\n      if (this.columns && cells && this.columns.length !== cells.length) {\n        LogService.error(`grid-column (${this.columns.length}) and grid-cell (${cells.length}) count mismatch`);\n      }\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiCO,IAAA,IAAA,cAAyB,EAAW;;gBACzB,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,EAAW,SAAS,IAAA;GAChC;;CAYD,KAAA,IAAY;AACV,SAAO,KAAK;;CAGd,SAAS;AACP,SAAO,CAAI,+CAEmB,MAAA,GAA2B,CAAC;;CAK5D,oBAAoB;AAIlB,EAHA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO,OACvB,KAAK,iBAAiB,gCAAgC,MAAA,GAA2B,CAAC;;CAGpF,MAAM,aAAa,GAA6B;AAE9C,EADA,MAAM,aAAa,EAAM,EACzB,MAAM,KAAK;EACX,IAAM,IAAa,QAAe,MAAA,GAA2B,EAAE,IAAI;AAEnE,EADA,IAAI,eAAe,EAAW,CAAC,QAAQ,KAAK,EAC5C,MAAA,GAAuB;;CAGzB,OAAA,IAA6B;AAW3B,EAVA,MAAM,KAAK,gBACX,KAAK,QAAQ,SAAS,GAAG,MAAO,EAAE,eAAe,GAAG,IAAI,IAAK,EAC7D,MAAA,EAAW,MAAM,YAAY,oBAAoB,UAAU,EAC3D,MAAA,EAAW,MAAM,YAAY,0BAA0B,KAAK,QAAQ,KAAK,GAAG,MAAM,UAAU,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC,EAG5G,KAAK,QAAQ,SAAS,GAAG,MAAM,MAAA,EAAW,MAAM,YAAY,MAAM,KAAK,EAAE,QAAQ,EAAE,QAAQ,MAAM,CAAC,EAGlG,MAAM,KAAK,gBACX,KAAK,QAAQ,SAAS,GAAG,MACvB,MAAA,EAAW,MAAM,YAAY,MAAM,KAAK,EAAE,QAAQ,EAAE,QAAQ,gBAAgB,EAAE,uBAAuB,CAAC,MAAM,KAAK,CAClH;;CAGH,KAAmB;AACjB,MAAI,EAAmB,MAAM,QAAQ,cAAc;GACjD,IAAM,IAAQ,MAAA,EACX,cAAc,EAAY,EAAQ,SAAS,IAAI,CAAC,EAC/C,iBAAiB,EAAY,EAAS,SAAS,IAAI,CAAC;AACxD,GAAI,KAAK,WAAW,KAAS,KAAK,QAAQ,WAAW,EAAM,UACzD,EAAW,MAAM,gBAAgB,KAAK,QAAQ,OAAO,mBAAmB,EAAM,OAAO,kBAAkB;;;;GAvD5G,EAAsB;CACrB,UAAU,GAAG,EAAW,SAAS,IAAI,IAAI,EAAW,SAAS,IAAI,QAAQ,QAAQ,OAAO;CACxF,SAAS;CACV,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,SAjBH,GAAO,CAAA,EAAA,EAAA"}

package/dist/grid/index.d.ts

@@ -0,0 +1,7 @@
+export * from './grid.js';
+export * from './column/column.js';
+export * from './cell/cell.js';
+export * from './footer/footer.js';
+export * from './header/header.js';
+export * from './placeholder/placeholder.js';
+export * from './row/row.js';

package/dist/grid/index.js

@@ -0,0 +1,8 @@
+import { GridPlaceholder as e } from "./placeholder/placeholder2.js";
+import { GridColumn as t } from "./column/column2.js";
+import { GridCell as n } from "./cell/cell2.js";
+import { GridRow as r } from "./row/row2.js";
+import { GridHeader as i } from "./header/header2.js";
+import { GridFooter as a } from "./footer/footer2.js";
+import { Grid as o } from "./grid2.js";
+export { o as Grid, n as GridCell, t as GridColumn, a as GridFooter, i as GridHeader, e as GridPlaceholder, r as GridRow };

package/dist/grid/placeholder/placeholder.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * @element nve-grid-placeholder
+ * @since 0.11.0
+ * @entrypoint \@nvidia-elements/core/grid
+ * @description Placeholder displays a message while data loads for the grid or shows empty states for datasets.
+ * @slot - default slot for content
+ * @cssprop --color
+ * @cssprop --padding
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+ */
+export declare class GridPlaceholder 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/grid/placeholder/placeholder.js

@@ -0,0 +1,6 @@
+//#region src/grid/placeholder/placeholder.css?inline
+var e = ":host{--color: var(--nve-sys-layer-canvas-color);--padding: var(--nve-ref-size-200) var(--nve-ref-size-300);position:absolute;inset:var(--nve-ref-size-700) 0 0}[internal-host]{background:color-mix(in oklab,var(--background, var(--nve-sys-layer-canvas-background)) 100%,var(--nve-sys-interaction-state-mix) var(--interaction-state-ratio, .01%));color:var(--color);padding:var(--padding);font-size:var(--font-size);display:flex;place-items:center;place-content:center;height:100%}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=placeholder.js.map

package/dist/grid/placeholder/placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"placeholder.js","names":[],"sources":["../../../src/grid/placeholder/placeholder.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  --color: var(--nve-sys-layer-canvas-color);\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-300);\n  position: absolute;\n  inset: var(--nve-ref-size-700) 0 0;\n}\n\n[internal-host] {\n  background: color-mix(\n    in oklab,\n    var(--background, var(--nve-sys-layer-canvas-background)) 100%,\n    var(--nve-sys-interaction-state-mix) var(--interaction-state-ratio, 0.01%)\n  );\n  color: var(--color);\n  padding: var(--padding);\n  font-size: var(--font-size);\n  display: flex;\n  place-items: center;\n  place-content: center;\n  height: 100%;\n}\n"],"mappings":""}

package/dist/grid/placeholder/placeholder2.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 "./placeholder.js";
+import { LitElement as r, html as i } from "lit";
+//#region src/grid/placeholder/placeholder.ts
+var a = class extends r {
+	static {
+		this.styles = t([n]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-grid-placeholder",
+			version: "0.0.3"
+		};
+	}
+	render() {
+		return i`<div internal-host focusable="active" role="gridcell"><slot></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), e(this), this._internals.role = "row";
+	}
+};
+//#endregion
+export { a as GridPlaceholder };
+
+//# sourceMappingURL=placeholder2.js.map

package/dist/grid/placeholder/placeholder2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"placeholder2.js","names":[],"sources":["../../../src/grid/placeholder/placeholder.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 { useStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport styles from './placeholder.css?inline';\n\n/**\n * @element nve-grid-placeholder\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @description Placeholder displays a message while data loads for the grid or shows empty states for datasets.\n * @slot - default slot for content\n * @cssprop --color\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\nexport class GridPlaceholder extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid-placeholder',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host focusable=\"active\" role=\"gridcell\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'row';\n  }\n}\n"],"mappings":";;;;;AAiBA,IAAa,IAAb,cAAqC,EAAW;;gBAC9B,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/grid/row/row.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+/**
+ * @element nve-grid-row
+ * @description Represents a horizontal row of data cells within a grid, supporting selection and interactive states.
+ * @since 0.11.0
+ * @entrypoint \@nvidia-elements/core/grid
+ * @slot - default slot for `nve-grid-cell`
+ * @cssprop --background
+ * @cssprop --border-bottom
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+ */
+export declare class GridRow extends LitElement {
+    /**
+     * Setting the `selected` property or attribute to `true` shows the row in a selected state.
+     */
+    selected: boolean;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        children: string[];
+    };
+    /** @private */
+    _internals: ElementInternals;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+}

package/dist/grid/row/row.js

@@ -0,0 +1,6 @@
+//#region src/grid/row/row.css?inline
+var e = ":host{--border-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);contain:layout;display:block;min-width:max-content;content-visibility:auto;contain-intrinsic-size:auto var(--row-height, var(--nve-ref-size-900))}[internal-host]{grid-auto-columns:var(--grid-auto-columns);border-bottom:var(--border-bottom);display:grid;grid-auto-flow:var(--grid-auto-flow);grid-template-columns:var(--grid-template-column)}:host(:hover) ::slotted(nve-grid-cell){--interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}:host(:state(selected)) ::slotted(nve-grid-cell){--background: var(--nve-sys-interaction-highlighted-muted-background);--interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected)}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=row.js.map

package/dist/grid/row/row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.js","names":[],"sources":["../../../src/grid/row/row.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-bottom: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  contain: layout;\n  display: block;\n  min-width: max-content;\n  content-visibility: auto;\n  contain-intrinsic-size: auto var(--row-height, var(--nve-ref-size-900));\n}\n\n[internal-host] {\n  grid-auto-columns: var(--grid-auto-columns);\n  border-bottom: var(--border-bottom);\n  display: grid;\n  grid-auto-flow: var(--grid-auto-flow);\n  grid-template-columns: var(--grid-template-column);\n}\n\n:host(:hover) ::slotted(nve-grid-cell),\n:host(:hover) ::slotted(nve-grid-cell) {\n  --interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n:host(:state(selected)) ::slotted(nve-grid-cell),\n:host(:state(selected)) ::slotted(nve-grid-cell) {\n  --background: var(--nve-sys-interaction-highlighted-muted-background);\n  --interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n}\n"],"mappings":""}

package/dist/grid/row/row2.js

@@ -0,0 +1,33 @@
+import { attachInternals as e } from "../../internal/utils/a11y.js";
+import { stateSelected as t } from "../../internal/controllers/state-selected.controller.js";
+import { __decorate as n } from "../../_virtual/_@oxc-project_runtime@0.123.0/helpers/decorate.js";
+import { audit as r } from "../../internal/controllers/audit.controller.js";
+import { useStyles as i } from "../../internal/styles/index.js";
+import { GridCell as a } from "../cell/cell2.js";
+import o from "./row.js";
+import { LitElement as s, html as c } from "lit";
+import { property as l } from "lit/decorators/property.js";
+//#region src/grid/row/row.ts
+var u = class extends s {
+	static {
+		this.styles = i([o]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-grid-row",
+			version: "0.0.3",
+			children: [a.metadata.tag]
+		};
+	}
+	render() {
+		return c`<div internal-host><slot></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), e(this), this._internals.role = "row";
+	}
+};
+n([l({ type: Boolean })], u.prototype, "selected", void 0), u = n([t(), r()], u);
+//#endregion
+export { u as GridRow };
+
+//# sourceMappingURL=row2.js.map

package/dist/grid/row/row2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row2.js","names":[],"sources":["../../../src/grid/row/row.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 { useStyles, attachInternals, stateSelected, audit } from '@nvidia-elements/core/internal';\nimport { GridCell } from '../cell/cell.js';\nimport styles from './row.css?inline';\n\n/**\n * @element nve-grid-row\n * @description Represents a horizontal row of data cells within a grid, supporting selection and interactive states.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - default slot for `nve-grid-cell`\n * @cssprop --background\n * @cssprop --border-bottom\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\n@stateSelected()\n@audit()\nexport class GridRow extends LitElement {\n  /**\n   * Setting the `selected` property or attribute to `true` shows the row in a selected state.\n   */\n  @property({ type: Boolean }) selected: boolean;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid-row',\n    version: '0.0.0',\n    children: [GridCell.metadata.tag]\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 = 'row';\n  }\n}\n"],"mappings":";;;;;;;;;;AAqBO,IAAA,IAAA,cAAsB,EAAW;;gBAMtB,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,EAAS,SAAS,IAAA;GAC9B;;CAKD,SAAS;AACP,SAAO,CAAI;;CAOb,oBAAoB;AAGlB,EAFA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO;;;GAxBxB,EAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,SAN7B,GAAe,EACf,GAAO,CAAA,EAAA,EAAA"}

package/dist/icon/define.d.ts

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

package/dist/icon/define.js

@@ -0,0 +1,38 @@
+import { define as e } from "../internal/utils/dom.js";
+import { Icon as t, mergeIcons as n } from "./icon2.js";
+e(t), customElements.get(t.metadata.tag) && n(customElements.get(t.metadata.tag)), t.alias({
+	"chevron-right": "chevron",
+	"chevron-down": "chevron",
+	"chevron-left": "chevron",
+	"additional-actions": "more-actions",
+	analytics: "pie-chart",
+	annotation: "transparent-box",
+	"app-switcher": "switch-apps",
+	assist: "chat-bubble",
+	checkmark: "check",
+	date: "calendar",
+	docs: "book",
+	"expand-full-screen": "maximize",
+	"expand-panel": "arrow-stop",
+	"collapse-panel": "arrow-stop",
+	failed: "x-circle",
+	"favorite-filled": "star",
+	"favorite-outline": "star-stroke",
+	information: "information-circle-stroke",
+	maintenance: "wrench",
+	"navigate-to": "arrow",
+	"open-external-link": "arrow-angle",
+	location: "map-pin",
+	"pinned-1": "pin",
+	project: "folder",
+	settings: "gear",
+	user: "person",
+	"video-pause": "pause",
+	"video-play": "play",
+	"video-stop": "stop",
+	visible: "eye",
+	warning: "exclamation-triangle"
+});
+//#endregion
+
+//# sourceMappingURL=define.js.map

package/dist/icon/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","names":[],"sources":["../../src/icon/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 { Icon, mergeIcons } from '@nvidia-elements/core/icon';\n\ndefine(Icon);\nif (customElements.get(Icon.metadata.tag)) {\n  mergeIcons(customElements.get(Icon.metadata.tag) as typeof Icon);\n}\n\n/** @deprecated aliases */\nIcon.alias({\n  'chevron-right': 'chevron',\n  'chevron-down': 'chevron',\n  'chevron-left': 'chevron',\n  'additional-actions': 'more-actions',\n  analytics: 'pie-chart',\n  annotation: 'transparent-box',\n  'app-switcher': 'switch-apps',\n  assist: 'chat-bubble',\n  checkmark: 'check',\n  date: 'calendar',\n  docs: 'book',\n  'expand-full-screen': 'maximize',\n  'expand-panel': 'arrow-stop',\n  'collapse-panel': 'arrow-stop',\n  failed: 'x-circle',\n  'favorite-filled': 'star',\n  'favorite-outline': 'star-stroke',\n  information: 'information-circle-stroke',\n  maintenance: 'wrench',\n  'navigate-to': 'arrow',\n  'open-external-link': 'arrow-angle',\n  location: 'map-pin',\n  'pinned-1': 'pin',\n  project: 'folder',\n  settings: 'gear',\n  user: 'person',\n  'video-pause': 'pause',\n  'video-play': 'play',\n  'video-stop': 'stop',\n  visible: 'eye',\n  warning: 'exclamation-triangle'\n});\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-icon': Icon;\n  }\n}\n"],"mappings":";;AAMA,EAAO,EAAK,EACR,eAAe,IAAI,EAAK,SAAS,IAAI,IACvC,EAAW,eAAe,IAAI,EAAK,SAAS,IAAI,CAAgB,EAIlE,EAAK,MAAM;CACT,iBAAiB;CACjB,gBAAgB;CAChB,gBAAgB;CAChB,sBAAsB;CACtB,WAAW;CACX,YAAY;CACZ,gBAAgB;CAChB,QAAQ;CACR,WAAW;CACX,MAAM;CACN,MAAM;CACN,sBAAsB;CACtB,gBAAgB;CAChB,kBAAkB;CAClB,QAAQ;CACR,mBAAmB;CACnB,oBAAoB;CACpB,aAAa;CACb,aAAa;CACb,eAAe;CACf,sBAAsB;CACtB,UAAU;CACV,YAAY;CACZ,SAAS;CACT,UAAU;CACV,MAAM;CACN,eAAe;CACf,cAAc;CACd,cAAc;CACd,SAAS;CACT,SAAS;CACV,CAAC"}

package/dist/icon/icon.d.ts

@@ -0,0 +1,62 @@
+import { PropertyValues, LitElement } from 'lit';
+import { Size } from '../internal';
+import { IconName, IconSVG } from './icons.js';
+export type { IconName, IconNames, IconSVG } from './icons.js';
+declare global {
+    var _NVE_SSR_ICON_REGISTRY: Record<string, string> | undefined;
+}
+/**
+ * @element nve-icon
+ * @since 0.1.3
+ * @entrypoint \@nvidia-elements/core/icon
+ * @description An icon is a graphic symbol designed to visually show the purpose of an interface element.
+ * @cssprop --color
+ * @cssprop --width
+ * @cssprop --height
+ * @slot - Custom SVG content to override the named icon
+ * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
+ */
+export declare class Icon extends LitElement {
+    #private;
+    /**
+     * Visual treatment to represent current support status.
+     */
+    status?: 'warning' | 'danger' | 'success' | 'accent';
+    /**
+     * Controls the bounding box size of the icon given a t-shirt style value.
+     */
+    size?: Size | 'xs' | 'xl';
+    /**
+     * Sets the direction of the icon. Only supported by expand-panel/collapse-panel (horizontal axis) and arrow/caret/chevron icons (4-directions)
+     */
+    direction?: 'up' | 'down' | 'left' | 'right';
+    /**
+     * The name of the icon SVG sprite to render.
+     */
+    name?: IconName;
+    private svg;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    static _icons: {
+        [key: string]: IconSVG;
+    };
+    private static get _iconsRegistry();
+    private static set _iconsRegistry(value);
+    private static get registeredIcon();
+    /** @private */
+    _internals: ElementInternals;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static add(icons: {
+        [key: string]: IconSVG;
+    }): Promise<void>;
+    static alias(aliases: {
+        [key: string]: IconName | string;
+    }): void;
+    updated(props: PropertyValues<this>): Promise<void>;
+}
+export declare function mergeIcons(RegisteredIcon: typeof Icon): void;

package/dist/icon/icon.examples.js

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

package/dist/icon/icon.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.examples.js","names":[],"sources":["../../src/icon/icon.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';\n\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/select/define.js';\nimport '@nvidia-elements/core/checkbox/define.js';\nimport '@nvidia-elements/core/divider/define.js';\nimport '@nvidia-elements/core/notification/define.js';\n\nexport default {\n  title: 'Elements/Icon',\n  component: 'nve-icon'\n};\n\n/* eslint-disable @nvidia-elements/lint/no-unexpected-attribute-value */\n\n/**\n * @summary Basic icon component with standard appearance and usage for visual communication and interface navigation.\n */\nexport const Default = {\n  render: () => html`<nve-icon name=\"person\"></nve-icon>`\n};\n\n/**\n * @summary Semantic color variations to communicate different states, priorities, and contextual meanings in user interfaces.\n */\nexport const Statuses = {\n  render: () => html`\n    <nve-icon name=\"person\"></nve-icon>\n    <nve-icon name=\"person\" status=\"accent\"></nve-icon>\n    <nve-icon name=\"person\" status=\"success\"></nve-icon>\n    <nve-icon name=\"person\" status=\"warning\"></nve-icon>\n    <nve-icon name=\"person\" status=\"danger\"></nve-icon>\n  `\n}\n\n/**\n * @summary Icon size variants to accommodate layout densities, touch targets, and visual hierarchy requirements.\n */\nexport const Size = {\n  render: () => html`\n    <nve-icon name=\"person\" size=\"sm\"></nve-icon>\n    <nve-icon name=\"person\"></nve-icon>\n    <nve-icon name=\"person\" size=\"lg\"></nve-icon>\n  `\n}\n\n/**\n * @summary Directional icons for navigation, movement, and spatial relationships, providing clear visual cues for user actions.\n */\nexport const Direction = {\n  render: () => html`\n    <nve-icon name=\"arrow-stop\" direction=\"left\"></nve-icon>\n    <nve-icon name=\"arrow-stop\" direction=\"right\"></nve-icon>\n    <nve-icon name=\"arrow\" direction=\"up\"></nve-icon>\n    <nve-icon name=\"arrow\" direction=\"down\"></nve-icon>\n    <nve-icon name=\"arrow\" direction=\"left\"></nve-icon>\n    <nve-icon name=\"arrow\" direction=\"right\"></nve-icon>\n    <nve-icon name=\"caret\" direction=\"up\"></nve-icon>\n    <nve-icon name=\"caret\" direction=\"down\"></nve-icon>\n    <nve-icon name=\"caret\" direction=\"left\"></nve-icon>\n    <nve-icon name=\"caret\" direction=\"right\"></nve-icon>\n    <nve-icon name=\"chevron\" direction=\"up\"></nve-icon>\n    <nve-icon name=\"chevron\" direction=\"down\"></nve-icon>\n    <nve-icon name=\"chevron\" direction=\"left\"></nve-icon>\n    <nve-icon name=\"chevron\" direction=\"right\"></nve-icon>\n  `\n}\n\n/**\n * @summary Icon appearance across light and dark themes, ensuring proper contrast and visibility in different visual environments.\n * @tags test-case\n */\nexport const Themes = {\n  render: () => html`\n    <div nve-theme=\"root light\">\n      <nve-icon name=\"person\"></nve-icon>\n      <nve-icon name=\"person\" status=\"accent\"></nve-icon>\n      <nve-icon name=\"person\" status=\"success\"></nve-icon>\n      <nve-icon name=\"person\" status=\"warning\"></nve-icon>\n      <nve-icon name=\"person\" status=\"danger\"></nve-icon>\n    </div>\n    <div nve-theme=\"root dark\">\n      <nve-icon name=\"person\"></nve-icon>\n      <nve-icon name=\"person\" status=\"accent\"></nve-icon>\n      <nve-icon name=\"person\" status=\"success\"></nve-icon>\n      <nve-icon name=\"person\" status=\"warning\"></nve-icon>\n      <nve-icon name=\"person\" status=\"danger\"></nve-icon>\n    </div>\n  `\n}\n\n/**\n * @summary Register SVG paths and make them accessible to the `<nve-icon>` element. Define icons via a string or async function returning the resulting string.\n * @tags test-case\n */\nexport const Registration = {\n  render: () => html`\n    <nve-icon name=\"smile\" style=\"--width: 75px; --height: 75px;\"></nve-icon>\n\n    <script type=\"module\">\n      customElements.get('nve-icon').add({\n        'smile': {\n          svg: () => '<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 48 48\"><circle cx=\"24\" cy=\"24\" r=\"16\" stroke=\"currentColor\" stroke-width=\"3\"/><circle cx=\"18\" cy=\"20\" r=\"2\" fill=\"currentColor\"/><circle cx=\"30\" cy=\"20\" r=\"2\" fill=\"currentColor\"/><path d=\"M17 29c1.5 2.5 4.2 4 7 4s5.5-1.5 7-4\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"/></svg>'\n        }\n      });\n    </script>\n  `\n}\n\n/**\n * @summary Alias icons to a different name. This supports context-specific names or migrations between icon sets.\n * @tags test-case\n */\nexport const Alias = {\n  render: () => html`\n    <script type=\"module\">\n      await customElements.whenDefined('nve-icon');\n      customElements.get('nve-icon').alias({\n        attached: 'paper-clip'\n      });\n    </script>\n    <nve-icon name=\"paper-clip\"></nve-icon>\n    <nve-icon name=\"attached\"></nve-icon>\n  `\n}\n\n/**\n * @summary Provide direct SVG paths for rendering.\n * @tags test-case\n */\nexport const Source = {\n  render: () => html`\n    <nve-icon name=\"/static/images/test-image-1.svg\" style=\"--width: 75px; --height: 75px;\"></nve-icon>\n  `\n}\n"],"mappings":";AAGA,IAAA,IAAS"}