@nvidia-elements/core 2.9.0 → 2.11.0

package/dist/format-datetime/format-datetime.d.ts

@@ -72,5 +72,5 @@ export declare class FormatDatetime extends LitElement {
      * IANA time zone identifier (such as 'America/New_York', 'UTC').
      */
     timeZone?: string;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/dist/format-datetime/format-datetime2.js

@@ -13,7 +13,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-format-datetime",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	get #e() {

package/dist/format-number/format-number.d.ts

@@ -85,5 +85,5 @@ export declare class FormatNumber extends LitElement {
      * Pad integer output to at least this many digits (1-21).
      */
     minimumIntegerDigits?: number;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/dist/format-number/format-number2.js

@@ -29,7 +29,7 @@ var c = [
 	static {
 		this.metadata = {
 			tag: "nve-format-number",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	get #e() {

package/dist/format-relative-time/format-relative-time.d.ts

@@ -45,5 +45,5 @@ export declare class FormatRelativeTime extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/dist/format-relative-time/format-relative-time2.js

@@ -53,7 +53,7 @@ var c = {
 	static {
 		this.metadata = {
 			tag: "nve-format-relative-time",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	#e;

package/dist/format-truncate/format-truncate2.js

@@ -19,7 +19,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-format-truncate",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	#e;

package/dist/forms/control/control2.js

@@ -48,7 +48,7 @@ var C = class extends v {
 	static {
 		this.metadata = {
 			tag: "nve-control",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	render() {

package/dist/forms/control-group/control-group.d.ts

@@ -21,7 +21,9 @@ export declare class ControlGroup extends LitElement {
     layout: 'vertical' | 'vertical-inline' | 'horizontal' | 'horizontal-inline';
     /** Set the visual prominence of the control group */
     prominence: 'muted';
+    /** Returns the label associated with the control group. */
     get label(): HTMLLabelElement | null;
+    /** Returns the input elements associated with the control group. */
     get inputs(): HTMLInputElement[];
     static styles: import("lit").CSSResult[];
     static readonly metadata: {
@@ -30,7 +32,7 @@ export declare class ControlGroup extends LitElement {
     };
     /** @private */
     _internals: ElementInternals;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     firstUpdated(props: PropertyValues<this>): void;
     disconnectedCallback(): void;

package/dist/forms/control-group/control-group2.js

@@ -24,7 +24,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-control-group",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	render() {

package/dist/forms/control-group/control-group2.js.map

@@ -1 +1 @@
-{"version":3,"file":"control-group2.js","names":[],"sources":["../../../src/forms/control-group/control-group.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 { property } from 'lit/decorators/property.js';\nimport {\n  attachInternals,\n  useStyles,\n  associateAriaLabel,\n  associateAriaDescribedBy,\n  associateControlGroup\n} from '@nvidia-elements/core/internal';\nimport type { ControlMessage } from '../control-message/control-message.js';\nimport {\n  setupControlStatusStates,\n  setupControlGroupStates,\n  inputQuery,\n  type ControlStateCleanup\n} from '../utils/states.js';\nimport { setupControlLayoutStates } from '../utils/layout.js';\nimport styles from './control-group.css?inline';\n\n/**\n * @element nve-control-group\n * @description Groups many related form controls under a shared label and validation context for semantically linked inputs.\n * @documentation https://nvidia.github.io/elements/docs/elements/control/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - Control input elements\n * @cssprop --color\n * @cssprop --label-color\n * @cssprop --label-text-transform\n * @cssprop --label-font-weight\n * @cssprop --label-font-size\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\nexport class ControlGroup extends LitElement {\n  /** Set each slotted control + label + control message layout */\n  @property({ type: String, reflect: true }) layout:\n    | 'vertical'\n    | 'vertical-inline'\n    | 'horizontal'\n    | 'horizontal-inline';\n\n  /** Set the visual prominence of the control group */\n  @property({ type: String, reflect: true }) prominence: 'muted';\n\n  get label() {\n    return this.querySelector?.<HTMLLabelElement>('label');\n  }\n\n  get inputs() {\n    return this.querySelectorAll ? Array.from(this.querySelectorAll<HTMLInputElement>(inputQuery)) : [];\n  }\n\n  get #messages() {\n    return this.querySelectorAll ? Array.from(this.querySelectorAll<ControlMessage>('nve-control-message')) : [];\n  }\n\n  #observers: (MutationObserver | ResizeObserver | ControlStateCleanup)[] = [];\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-control-group',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host class=\"${this.#messages.length ? '' : 'no-messages'} ${this.label ? '' : 'no-label'}\">\n        <slot name=\"label\"></slot>\n        <slot class=\"input-slot\"></slot>\n        <slot name=\"messages\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n  }\n\n  firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    this.#observers = [\n      setupControlGroupStates(this),\n      setupControlLayoutStates(this),\n      ...setupControlStatusStates(this, this.#messages)\n    ];\n    this.#updateAssociations();\n    this.shadowRoot!.addEventListener('slotchange', () => this.#updateAssociations());\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#observers.forEach(observer => observer.disconnect());\n  }\n\n  #updateAssociations() {\n    this.#assignLabel();\n    associateAriaLabel(this.label as HTMLElement, this);\n    associateAriaDescribedBy(Array.from(this.querySelectorAll<ControlMessage>('nve-control-message')), this);\n    associateControlGroup(Array.from(this.inputs));\n  }\n\n  #assignLabel() {\n    if (this.label) {\n      this.label.slot = 'label';\n    }\n  }\n}\n"],"mappings":";;;;;;;;;AAsCA,IAAa,IAAb,cAAkC,EAAW;CAW3C,IAAI,QAAQ;EACV,OAAO,KAAK,gBAAkC,OAAO;CACvD;CAEA,IAAI,SAAS;EACX,OAAO,KAAK,mBAAmB,MAAM,KAAK,KAAK,iBAAmC,CAAU,CAAC,IAAI,CAAC;CACpG;CAEA,IAAI,KAAY;EACd,OAAO,KAAK,mBAAmB,MAAM,KAAK,KAAK,iBAAiC,qBAAqB,CAAC,IAAI,CAAC;CAC7G;CAEA,KAA0E,CAAC;;EAE3D,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAKA,SAAS;EACP,OAAO,CAAI,6BACmB,KAAK,GAAU,SAAS,KAAK,cAAc,GAAG,KAAK,QAAQ,KAAK,WAAW;CAM3G;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,aAAa,GAA6B;EAQxC,AAPA,MAAM,aAAa,CAAK,GACxB,KAAK,KAAa;GAChB,EAAwB,IAAI;GAC5B,EAAyB,IAAI;GAC7B,GAAG,EAAyB,MAAM,KAAK,EAAS;EAClD,GACA,KAAK,GAAoB,GACzB,KAAK,WAAY,iBAAiB,oBAAoB,KAAK,GAAoB,CAAC;CAClF;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,GAAW,SAAQ,MAAY,EAAS,WAAW,CAAC;CAC3D;CAEA,KAAsB;EAIpB,AAHA,KAAK,GAAa,GAClB,EAAmB,KAAK,OAAsB,IAAI,GAClD,EAAyB,MAAM,KAAK,KAAK,iBAAiC,qBAAqB,CAAC,GAAG,IAAI,GACvG,EAAsB,MAAM,KAAK,KAAK,MAAM,CAAC;CAC/C;CAEA,KAAe;EACb,AAAI,KAAK,UACP,KAAK,MAAM,OAAO;CAEtB;AACF;AA7EG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAOxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA"}
+{"version":3,"file":"control-group2.js","names":[],"sources":["../../../src/forms/control-group/control-group.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 { property } from 'lit/decorators/property.js';\nimport {\n  attachInternals,\n  useStyles,\n  associateAriaLabel,\n  associateAriaDescribedBy,\n  associateControlGroup\n} from '@nvidia-elements/core/internal';\nimport type { ControlMessage } from '../control-message/control-message.js';\nimport {\n  setupControlStatusStates,\n  setupControlGroupStates,\n  inputQuery,\n  type ControlStateCleanup\n} from '../utils/states.js';\nimport { setupControlLayoutStates } from '../utils/layout.js';\nimport styles from './control-group.css?inline';\n\n/**\n * @element nve-control-group\n * @description Groups many related form controls under a shared label and validation context for semantically linked inputs.\n * @documentation https://nvidia.github.io/elements/docs/elements/control/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/forms\n * @slot - Control input elements\n * @cssprop --color\n * @cssprop --label-color\n * @cssprop --label-text-transform\n * @cssprop --label-font-weight\n * @cssprop --label-font-size\n * @aria https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals\n * @package true\n */\nexport class ControlGroup extends LitElement {\n  /** Set each slotted control + label + control message layout */\n  @property({ type: String, reflect: true }) layout:\n    | 'vertical'\n    | 'vertical-inline'\n    | 'horizontal'\n    | 'horizontal-inline';\n\n  /** Set the visual prominence of the control group */\n  @property({ type: String, reflect: true }) prominence: 'muted';\n\n  /** Returns the label associated with the control group. */\n  get label() {\n    return this.querySelector?.<HTMLLabelElement>('label');\n  }\n\n  /** Returns the input elements associated with the control group. */\n  get inputs() {\n    return this.querySelectorAll ? Array.from(this.querySelectorAll<HTMLInputElement>(inputQuery)) : [];\n  }\n\n  get #messages() {\n    return this.querySelectorAll ? Array.from(this.querySelectorAll<ControlMessage>('nve-control-message')) : [];\n  }\n\n  #observers: (MutationObserver | ResizeObserver | ControlStateCleanup)[] = [];\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-control-group',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host class=\"${this.#messages.length ? '' : 'no-messages'} ${this.label ? '' : 'no-label'}\">\n        <slot name=\"label\"></slot>\n        <slot class=\"input-slot\"></slot>\n        <slot name=\"messages\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n  }\n\n  firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    this.#observers = [\n      setupControlGroupStates(this),\n      setupControlLayoutStates(this),\n      ...setupControlStatusStates(this, this.#messages)\n    ];\n    this.#updateAssociations();\n    this.shadowRoot!.addEventListener('slotchange', () => this.#updateAssociations());\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#observers.forEach(observer => observer.disconnect());\n  }\n\n  #updateAssociations() {\n    this.#assignLabel();\n    associateAriaLabel(this.label as HTMLElement, this);\n    associateAriaDescribedBy(Array.from(this.querySelectorAll<ControlMessage>('nve-control-message')), this);\n    associateControlGroup(Array.from(this.inputs));\n  }\n\n  #assignLabel() {\n    if (this.label) {\n      this.label.slot = 'label';\n    }\n  }\n}\n"],"mappings":";;;;;;;;;AAsCA,IAAa,IAAb,cAAkC,EAAW;CAY3C,IAAI,QAAQ;EACV,OAAO,KAAK,gBAAkC,OAAO;CACvD;CAGA,IAAI,SAAS;EACX,OAAO,KAAK,mBAAmB,MAAM,KAAK,KAAK,iBAAmC,CAAU,CAAC,IAAI,CAAC;CACpG;CAEA,IAAI,KAAY;EACd,OAAO,KAAK,mBAAmB,MAAM,KAAK,KAAK,iBAAiC,qBAAqB,CAAC,IAAI,CAAC;CAC7G;CAEA,KAA0E,CAAC;;EAE3D,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAKA,SAAS;EACP,OAAO,CAAI,6BACmB,KAAK,GAAU,SAAS,KAAK,cAAc,GAAG,KAAK,QAAQ,KAAK,WAAW;CAM3G;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,aAAa,GAA6B;EAQxC,AAPA,MAAM,aAAa,CAAK,GACxB,KAAK,KAAa;GAChB,EAAwB,IAAI;GAC5B,EAAyB,IAAI;GAC7B,GAAG,EAAyB,MAAM,KAAK,EAAS;EAClD,GACA,KAAK,GAAoB,GACzB,KAAK,WAAY,iBAAiB,oBAAoB,KAAK,GAAoB,CAAC;CAClF;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,GAAW,SAAQ,MAAY,EAAS,WAAW,CAAC;CAC3D;CAEA,KAAsB;EAIpB,AAHA,KAAK,GAAa,GAClB,EAAmB,KAAK,OAAsB,IAAI,GAClD,EAAyB,MAAM,KAAK,KAAK,iBAAiC,qBAAqB,CAAC,GAAG,IAAI,GACvG,EAAsB,MAAM,KAAK,KAAK,MAAM,CAAC;CAC/C;CAEA,KAAe;EACb,AAAI,KAAK,UACP,KAAK,MAAM,OAAO;CAEtB;AACF;AA/EG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAOxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA"}

package/dist/forms/control-message/control-message.d.ts

@@ -36,5 +36,5 @@ export declare class ControlMessage extends LitElement {
     };
     /** @private */
     slot: string;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/dist/forms/control-message/control-message2.js

@@ -23,7 +23,7 @@ var l = {
 	static {
 		this.metadata = {
 			tag: "nve-control-message",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	static {

package/dist/gauge/gauge.d.ts

@@ -47,7 +47,7 @@ export declare class Gauge extends LitElement {
     i18n: Partial<import("@nvidia-elements/core/internal").I18nStrings & {
         __set: boolean;
     }>;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
     willUpdate(props: PropertyValues<this>): void;

package/dist/gauge/gauge2.js

@@ -40,7 +40,7 @@ var l = {
 	static {
 		this.metadata = {
 			tag: "nve-gauge",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	#e;

package/dist/grid/cell/cell.d.ts

@@ -27,6 +27,6 @@ export declare class GridCell extends LitElement {
     };
     /** @private */
     _internals: ElementInternals;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
 }

package/dist/grid/cell/cell2.js

@@ -10,7 +10,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-grid-cell",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	render() {

package/dist/grid/column/column.d.ts

@@ -48,7 +48,7 @@ export declare class GridColumn extends LitElement {
     };
     /** @private */
     _internals: ElementInternals;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
     willUpdate(props: PropertyValues<this>): void;

package/dist/grid/column/column2.js

@@ -13,7 +13,7 @@ var c = class r extends a {
 	static {
 		this.metadata = {
 			tag: "nve-grid-column",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	get #e() {

package/dist/grid/footer/footer.d.ts

@@ -22,6 +22,6 @@ export declare class GridFooter extends LitElement {
     _internals: ElementInternals;
     /** @private */
     slot: string;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
 }

package/dist/grid/footer/footer2.js

@@ -15,7 +15,7 @@ var s = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-grid-footer",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	static {

package/dist/grid/grid.d.ts

@@ -40,15 +40,17 @@ export declare class Grid extends LitElement implements ContainerElement {
         children: string[];
     };
     static elementDefinitions: {};
+    /** @private */
     get keynavGridConfig(): {
         columns: GridColumn[];
         rows: (GridHeader | GridRow)[];
         cells: (GridCell | GridColumn)[];
     };
+    /** @private */
     get stateScrollConfig(): StateScrollConfig;
     /** @private */
     _internals: ElementInternals;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     /**
      * Scroll to a specific position in the grid.

package/dist/grid/grid2.js

@@ -23,7 +23,7 @@ var y = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-grid",
-			version: "2.9.0",
+			version: "2.11.0",
 			children: [
 				d.metadata.tag,
 				f.metadata.tag,

package/dist/grid/grid2.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid2.js","names":[],"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  stateScroll,\n  type StateScrollConfig,\n  useStyles,\n  attachInternals,\n  appendRootNodeStyle,\n  generateId,\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 * @documentation https://nvidia.github.io/elements/docs/elements/data-grid/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - `nve-grid-header`, `nve-grid-row`, and `nve-grid-placeholder` elements.\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@stateScroll<Grid>()\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 stateScrollConfig(): StateScrollConfig {\n    return {\n      target: this.shadowRoot?.querySelector<HTMLElement>('[part=\"_scrollbox\"]') ?? undefined\n    };\n  }\n\n  get #rows() {\n    return Array.from(this.querySelectorAll<GridRow>(GridRow.metadata.tag));\n  }\n\n  get #header() {\n    return this.querySelector<GridHeader>(GridHeader.metadata.tag);\n  }\n\n  get #columns() {\n    return Array.from(this.querySelectorAll<GridColumn>(GridColumn.metadata.tag));\n  }\n\n  get #cells() {\n    return Array.from(this.querySelectorAll<GridCell>(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":";;;;;;;;;;;;;;;;;;AA8CO,IAAM,IAAN,cAAmB,EAAuC;;EAW/C,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC,EAAQ,SAAS;IAAK,EAAW,SAAS;IAAK,EAAW,SAAS;IAAK,EAAgB,SAAS;GAAG;EACjH;;;EAE4B,KAAA,qBAAA,CAAC;;CAE7B,IAAI,mBAAmB;EACrB,OAAO;GACL,SAAS,KAAK;GACd,MAAM,CAAC,KAAK,IAAU,GAAG,KAAK,EAAK;GACnC,OAAO,CAAC,GAAG,KAAK,IAAU,GAAG,KAAK,EAAM;EAC1C;CACF;CAEA,IAAI,oBAAuC;EACzC,OAAO,EACL,QAAQ,KAAK,YAAY,cAA2B,uBAAqB,KAAK,KAAA,EAChF;CACF;CAEA,IAAI,KAAQ;EACV,OAAO,MAAM,KAAK,KAAK,iBAA0B,EAAQ,SAAS,GAAG,CAAC;CACxE;CAEA,IAAI,KAAU;EACZ,OAAO,KAAK,cAA0B,EAAW,SAAS,GAAG;CAC/D;CAEA,IAAI,KAAW;EACb,OAAO,MAAM,KAAK,KAAK,iBAA6B,EAAW,SAAS,GAAG,CAAC;CAC9E;CAEA,IAAI,KAAS;EACX,OAAO,MAAM,KAAK,KAAK,iBAA2B,EAAS,SAAS,GAAG,CAAC;CAC1E;CAKA,SAAS;EACP,OAAO,CAAI;CAQb;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,QACvB,KAAK,OAAO,EAAW,GACvB,EAAoB,MAAM,CAAY;CACxC;CAOA,MAAM,SAAS,GAAG,GAA2E;EAC3F,MAAM,KAAK,WAAY,cAAc,uBAAqB,CAAC,EAAE,SAAS,GAAI,CAA0B;CACtG;AACF;AA7EG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA;CAZ3C,EAAM;CACN,EAAkB;CAClB,EAAwB"}
+{"version":3,"file":"grid2.js","names":[],"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  stateScroll,\n  type StateScrollConfig,\n  useStyles,\n  attachInternals,\n  appendRootNodeStyle,\n  generateId,\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 * @documentation https://nvidia.github.io/elements/docs/elements/data-grid/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - `nve-grid-header`, `nve-grid-row`, and `nve-grid-placeholder` elements.\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@stateScroll<Grid>()\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  /** @private */\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  /** @private */\n  get stateScrollConfig(): StateScrollConfig {\n    return {\n      target: this.shadowRoot?.querySelector<HTMLElement>('[part=\"_scrollbox\"]') ?? undefined\n    };\n  }\n\n  get #rows() {\n    return Array.from(this.querySelectorAll<GridRow>(GridRow.metadata.tag));\n  }\n\n  get #header() {\n    return this.querySelector<GridHeader>(GridHeader.metadata.tag);\n  }\n\n  get #columns() {\n    return Array.from(this.querySelectorAll<GridColumn>(GridColumn.metadata.tag));\n  }\n\n  get #cells() {\n    return Array.from(this.querySelectorAll<GridCell>(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":";;;;;;;;;;;;;;;;;;AA8CO,IAAM,IAAN,cAAmB,EAAuC;;EAW/C,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC,EAAQ,SAAS;IAAK,EAAW,SAAS;IAAK,EAAW,SAAS;IAAK,EAAgB,SAAS;GAAG;EACjH;;;EAE4B,KAAA,qBAAA,CAAC;;CAG7B,IAAI,mBAAmB;EACrB,OAAO;GACL,SAAS,KAAK;GACd,MAAM,CAAC,KAAK,IAAU,GAAG,KAAK,EAAK;GACnC,OAAO,CAAC,GAAG,KAAK,IAAU,GAAG,KAAK,EAAM;EAC1C;CACF;CAGA,IAAI,oBAAuC;EACzC,OAAO,EACL,QAAQ,KAAK,YAAY,cAA2B,uBAAqB,KAAK,KAAA,EAChF;CACF;CAEA,IAAI,KAAQ;EACV,OAAO,MAAM,KAAK,KAAK,iBAA0B,EAAQ,SAAS,GAAG,CAAC;CACxE;CAEA,IAAI,KAAU;EACZ,OAAO,KAAK,cAA0B,EAAW,SAAS,GAAG;CAC/D;CAEA,IAAI,KAAW;EACb,OAAO,MAAM,KAAK,KAAK,iBAA6B,EAAW,SAAS,GAAG,CAAC;CAC9E;CAEA,IAAI,KAAS;EACX,OAAO,MAAM,KAAK,KAAK,iBAA2B,EAAS,SAAS,GAAG,CAAC;CAC1E;CAKA,SAAS;EACP,OAAO,CAAI;CAQb;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,QACvB,KAAK,OAAO,EAAW,GACvB,EAAoB,MAAM,CAAY;CACxC;CAOA,MAAM,SAAS,GAAG,GAA2E;EAC3F,MAAM,KAAK,WAAY,cAAc,uBAAqB,CAAC,EAAE,SAAS,GAAI,CAA0B;CACtG;AACF;AA/EG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA;CAZ3C,EAAM;CACN,EAAkB;CAClB,EAAwB"}

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

@@ -25,7 +25,7 @@ export declare class GridHeader extends LitElement {
     _internals: ElementInternals;
     /** @private */
     columns: GridColumn[];
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(props: PropertyValues<this>): Promise<void>;

package/dist/grid/header/header2.js

@@ -19,7 +19,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-grid-header",
-			version: "2.9.0",
+			version: "2.11.0",
 			children: [c.metadata.tag]
 		};
 	}

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

@@ -17,6 +17,6 @@ export declare class GridPlaceholder extends LitElement {
     };
     /** @private */
     _internals: ElementInternals;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
 }

package/dist/grid/placeholder/placeholder2.js

@@ -10,7 +10,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-grid-placeholder",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	render() {

package/dist/grid/row/row.d.ts

@@ -23,6 +23,6 @@ export declare class GridRow extends LitElement {
     };
     /** @private */
     _internals: ElementInternals;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
 }

package/dist/grid/row/row2.js

@@ -15,7 +15,7 @@ var u = class extends s {
 	static {
 		this.metadata = {
 			tag: "nve-grid-row",
-			version: "2.9.0",
+			version: "2.11.0",
 			children: [a.metadata.tag]
 		};
 	}

package/dist/icon/icon.d.ts

@@ -55,7 +55,7 @@ export declare class Icon extends LitElement {
     private static get registeredIcon();
     /** @private */
     _internals: ElementInternals;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
     static add(icons: {

package/dist/icon/icon2.js

@@ -16,7 +16,7 @@ var f = class e extends o {
 	static {
 		this.metadata = {
 			tag: "nve-icon",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	static {
@@ -103,7 +103,7 @@ a([l({
 })], f.prototype, "name", void 0), a([d()], f.prototype, "svg", void 0);
 function p(t) {
 	if (typeof globalThis.customElements?.get == "function") {
-		let n = e(t.metadata.version), i = e("2.9.0");
+		let n = e(t.metadata.version), i = e("2.11.0");
 		n.minor <= i.minor && n.major <= i.major && (t._icons = {
 			...t._icons,
 			...r

package/dist/icon-button/icon-button.d.ts

@@ -43,5 +43,5 @@ export declare class IconButton extends Button {
     static elementDefinitions: {
         [Icon.metadata.tag]: typeof Icon;
     };
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/dist/icon-button/icon-button2.js

@@ -15,7 +15,7 @@ var l = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-icon-button",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	static {

package/dist/index.js

@@ -2,7 +2,7 @@ import { I18nService as e } from "./internal/services/i18n.service.js";
 import { getThemeTokens as t } from "./internal/utils/dom.js";
 import { statusIcons as n } from "./internal/types/index.js";
 //#region src/index.ts
-var r = "2.9.0", i = "@nvidia-elements";
+var r = "2.11.0", i = "@nvidia-elements";
 //#endregion
 export { e as I18nService, i as SCOPE, r as VERSION, t as getThemeTokens, n as statusIcons };
 

package/dist/input/input-group2.js

@@ -11,7 +11,7 @@ var a = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-input-group",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 	async connectedCallback() {

package/dist/input/input2.js

@@ -14,7 +14,7 @@ var a = r, o = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-input",
-			version: "2.9.0"
+			version: "2.11.0"
 		};
 	}
 };

package/dist/internal/controllers/keynav-list.controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"keynav-list.controller.js","names":[],"sources":["../../../src/internal/controllers/keynav-list.controller.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport type { LegacyDecoratorTarget } from '../types/index.js';\nimport { focusElement, initializeKeyListItems, isFocusable, setActiveKeyListItem } from '../utils/focus.js';\nimport { KeynavCode, validKeyNavigationCode } from '../utils/dom.js';\n\nexport interface KeynavListConfig {\n  items: NodeListOf<HTMLElement> | HTMLElement[];\n  initialItem?: HTMLElement;\n  layout?: 'both' | 'horizontal' | 'vertical';\n  manageFocus?: boolean;\n  manageTabindex?: boolean;\n  loop?: boolean;\n  dir?: string | null;\n}\n\nexport interface KeynavListElement {\n  keynavListConfig: KeynavListConfig;\n}\n\n/** https://webaim.org/techniques/keyboard/ */\nexport function keyNavigationList<T extends ReactiveElement & KeynavListElement>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new KeyNavigationListController(instance));\n}\n\nexport class KeyNavigationListController<T extends ReactiveElement & KeynavListElement> implements ReactiveController {\n  get #config(): KeynavListConfig & { items: HTMLElement[] } {\n    return {\n      layout: 'horizontal',\n      manageFocus: true,\n      manageTabindex: true,\n      loop: false,\n      dir: this.host.getAttribute('rtl'),\n      ...this.host.keynavListConfig,\n      items: Array.from(this.host.keynavListConfig.items).filter(\n        (i: HTMLElement & { disabled?: boolean }) => !i.disabled\n      )\n    };\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  /** @private attr nve-keynav-disabled is an internal API for advanced use cases only */\n  get #keynavDisabled() {\n    return this.host.hasAttribute('nve-keynav-disabled');\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    if (!this.host.isConnected) return;\n    this.#initializeTabIndex();\n    this.host.addEventListener('pointerup', this.#onPointerUp);\n    this.host.addEventListener('keydown', this.#onKeyDown);\n  }\n\n  hostDisconnected() {\n    this.host.removeEventListener('pointerup', this.#onPointerUp);\n    this.host.removeEventListener('keydown', this.#onKeyDown);\n  }\n\n  #initializeTabIndex() {\n    const { manageFocus, manageTabindex, items, initialItem } = this.#config;\n    if (manageFocus && manageTabindex && !this.#keynavDisabled) {\n      initializeKeyListItems(items);\n      if (initialItem && items.includes(initialItem)) {\n        setActiveKeyListItem(items, initialItem);\n      }\n    }\n  }\n\n  #clickItem(e: PointerEvent) {\n    const item = this.#getPointerActiveItem(e, this.#config.items);\n    if (item) {\n      this.#setActiveItem(e, item);\n    }\n  }\n\n  #focusItem(e: KeyboardEvent) {\n    if (validKeyNavigationCode(e) && !this.#keynavDisabled) {\n      const { loop, layout, dir, items } = this.#config;\n      const activeItem = this.#getKeyboardActiveItem(e, items);\n      if (activeItem) {\n        const { next, previous } = getNextKeyListItem(activeItem, Array.from(items), {\n          loop,\n          layout,\n          dir,\n          code: e.code as KeynavCode\n        });\n\n        if (next !== previous) {\n          this.#setActiveItem(e, items[next]!, items[previous]);\n        }\n      }\n    }\n  }\n\n  #getKeyboardActiveItem(e: KeyboardEvent, items: HTMLElement[]) {\n    const target = e.composedPath()[0];\n    return target instanceof HTMLElement && items.includes(target) ? target : null;\n  }\n\n  #getPointerActiveItem(e: PointerEvent, items: HTMLElement[]) {\n    const path = e.composedPath();\n    const itemIndex = path.findIndex(item => item instanceof HTMLElement && items.includes(item));\n    const item = path[itemIndex];\n\n    if (!(item instanceof HTMLElement)) return null;\n\n    const hasFocusableDescendant = path\n      .slice(0, itemIndex)\n      .some(descendant => descendant instanceof Element && isFocusable(descendant));\n    return hasFocusableDescendant ? null : item;\n  }\n\n  #setActiveItem(e: KeyboardEvent | PointerEvent, activeItem: HTMLElement, previousItem?: HTMLElement) {\n    const { manageFocus, manageTabindex, items } = this.#config;\n    if (manageFocus) {\n      if (manageTabindex) {\n        setActiveKeyListItem(items, activeItem);\n      }\n\n      focusElement(activeItem);\n      e.preventDefault();\n    }\n\n    const detail = {\n      activeItem,\n      previousItem,\n      code: e instanceof KeyboardEvent ? e.code : null,\n      metaKey: e.ctrlKey || e.metaKey,\n      items\n    };\n    activeItem.dispatchEvent(new CustomEvent('nve-key-change', { bubbles: true, composed: true, detail }));\n  }\n\n  #onPointerUp = (e: PointerEvent) => this.#clickItem(e);\n\n  #onKeyDown = (e: KeyboardEvent) => this.#focusItem(e);\n}\n\ninterface KeyListConfig {\n  code: KeynavCode;\n  loop?: boolean;\n  layout?: 'horizontal' | 'vertical' | 'both';\n  dir: string | null | undefined;\n}\n\nfunction resolveArrowDirection(config: KeyListConfig): 'backward' | 'forward' | null {\n  const { code, layout, dir } = config;\n  const start = dir === 'rtl' ? KeynavCode.ArrowRight : KeynavCode.ArrowLeft;\n  const end = dir === 'rtl' ? KeynavCode.ArrowLeft : KeynavCode.ArrowRight;\n\n  if (layout !== 'horizontal') {\n    if (code === KeynavCode.ArrowUp) return 'backward';\n    if (code === KeynavCode.ArrowDown) return 'forward';\n  }\n\n  if (layout !== 'vertical') {\n    if (code === start) return 'backward';\n    if (code === end) return 'forward';\n  }\n\n  return null;\n}\n\nfunction resolveSpecialKey(code: KeynavCode): 'home' | 'end' | 'pageup' | 'pagedown' | null {\n  if (code === KeynavCode.End) return 'end';\n  if (code === KeynavCode.Home) return 'home';\n  if (code === KeynavCode.PageUp) return 'pageup';\n  if (code === KeynavCode.PageDown) return 'pagedown';\n  return null;\n}\n\nfunction navigateWithLoop(current: number, step: number, options: { limit: number; loop: boolean | undefined }) {\n  const { limit, loop } = options;\n  const next = current + step;\n  if (next >= 0 && next <= limit) return next;\n  return loop ? (step < 0 ? limit : 0) : current;\n}\n\nexport function getNextKeyListItem(item: HTMLElement, items: HTMLElement[], config: KeyListConfig) {\n  let next = items.indexOf(item);\n  const previous = next;\n  const itemCount = items.length - 1;\n  const direction = resolveArrowDirection(config);\n\n  switch (direction ?? resolveSpecialKey(config.code)) {\n    case 'backward':\n      next = navigateWithLoop(next, -1, { limit: itemCount, loop: config.loop });\n      break;\n    case 'forward':\n      next = navigateWithLoop(next, 1, { limit: itemCount, loop: config.loop });\n      break;\n    case 'end':\n      next = itemCount;\n      break;\n    case 'home':\n      next = 0;\n      break;\n    case 'pageup':\n      next = Math.max(0, next - 4);\n      break;\n    case 'pagedown':\n      next = Math.min(itemCount, next + 4);\n      break;\n    case null:\n      break;\n  }\n\n  return { next, previous };\n}\n"],"mappings":"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"}
+{"version":3,"file":"keynav-list.controller.js","names":[],"sources":["../../../src/internal/controllers/keynav-list.controller.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport type { LegacyDecoratorTarget } from '../types/index.js';\nimport { focusElement, initializeKeyListItems, isFocusable, setActiveKeyListItem } from '../utils/focus.js';\nimport { KeynavCode, validKeyNavigationCode } from '../utils/dom.js';\n\nexport interface KeynavListConfig {\n  items: NodeListOf<HTMLElement> | HTMLElement[];\n  initialItem?: HTMLElement;\n  layout?: 'both' | 'horizontal' | 'vertical';\n  manageFocus?: boolean;\n  manageTabindex?: boolean;\n  loop?: boolean;\n  dir?: string | null;\n}\n\nexport interface KeynavListElement {\n  keynavListConfig: KeynavListConfig;\n}\n\n/** https://webaim.org/techniques/keyboard/ */\nexport function keyNavigationList<T extends ReactiveElement & KeynavListElement>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new KeyNavigationListController(instance));\n}\n\nexport class KeyNavigationListController<T extends ReactiveElement & KeynavListElement> implements ReactiveController {\n  get #config(): KeynavListConfig & { items: HTMLElement[] } {\n    return {\n      layout: 'horizontal',\n      manageFocus: true,\n      manageTabindex: true,\n      loop: false,\n      dir: this.host.getAttribute('rtl'),\n      ...this.host.keynavListConfig,\n      items: Array.from(this.host.keynavListConfig.items).filter(\n        (i: HTMLElement & { disabled?: boolean }) => !i.disabled\n      )\n    };\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  /** @private attr nve-keynav-disabled is an internal API for advanced use cases only */\n  get #keynavDisabled() {\n    return this.host.hasAttribute('nve-keynav-disabled');\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    if (!this.host.isConnected) return;\n    this.#initializeTabIndex();\n    this.host.addEventListener('pointerup', this.#onPointerUp);\n    this.host.addEventListener('keydown', this.#onKeyDown);\n  }\n\n  hostDisconnected() {\n    this.host.removeEventListener('pointerup', this.#onPointerUp);\n    this.host.removeEventListener('keydown', this.#onKeyDown);\n  }\n\n  #initializeTabIndex() {\n    const { manageFocus, manageTabindex, items, initialItem } = this.#config;\n    if (manageFocus && manageTabindex && !this.#keynavDisabled) {\n      initializeKeyListItems(items);\n      if (initialItem && items.includes(initialItem)) {\n        setActiveKeyListItem(items, initialItem);\n      }\n    }\n  }\n\n  #clickItem(e: PointerEvent) {\n    const item = this.#getPointerActiveItem(e, this.#config.items);\n    if (item) {\n      this.#setActiveItem(e, item);\n    }\n  }\n\n  #focusItem(e: KeyboardEvent) {\n    if (validKeyNavigationCode(e) && !this.#keynavDisabled) {\n      const { loop, layout, dir, items } = this.#config;\n      const activeItem = this.#getKeyboardActiveItem(e, items);\n      if (activeItem) {\n        const { next, previous } = getNextKeyListItem(activeItem, Array.from(items), {\n          loop,\n          layout,\n          dir,\n          code: e.code\n        });\n\n        if (next !== previous) {\n          this.#setActiveItem(e, items[next]!, items[previous]);\n        }\n      }\n    }\n  }\n\n  #getKeyboardActiveItem(e: KeyboardEvent, items: HTMLElement[]) {\n    const target = e.composedPath()[0];\n    return target instanceof HTMLElement && items.includes(target) ? target : null;\n  }\n\n  #getPointerActiveItem(e: PointerEvent, items: HTMLElement[]) {\n    const path = e.composedPath();\n    const itemIndex = path.findIndex(item => item instanceof HTMLElement && items.includes(item));\n    const item = path[itemIndex];\n\n    if (!(item instanceof HTMLElement)) return null;\n\n    const hasFocusableDescendant = path\n      .slice(0, itemIndex)\n      .some(descendant => descendant instanceof Element && isFocusable(descendant));\n    return hasFocusableDescendant ? null : item;\n  }\n\n  #setActiveItem(e: KeyboardEvent | PointerEvent, activeItem: HTMLElement, previousItem?: HTMLElement) {\n    const { manageFocus, manageTabindex, items } = this.#config;\n    if (manageFocus) {\n      if (manageTabindex) {\n        setActiveKeyListItem(items, activeItem);\n      }\n\n      focusElement(activeItem);\n      e.preventDefault();\n    }\n\n    const detail = {\n      activeItem,\n      previousItem,\n      code: e instanceof KeyboardEvent ? e.code : null,\n      metaKey: e.ctrlKey || e.metaKey,\n      items\n    };\n    activeItem.dispatchEvent(new CustomEvent('nve-key-change', { bubbles: true, composed: true, detail }));\n  }\n\n  #onPointerUp = (e: PointerEvent) => this.#clickItem(e);\n\n  #onKeyDown = (e: KeyboardEvent) => this.#focusItem(e);\n}\n\ninterface KeyListConfig {\n  code: KeynavCode;\n  loop?: boolean;\n  layout?: 'horizontal' | 'vertical' | 'both';\n  dir: string | null | undefined;\n}\n\nfunction resolveArrowDirection(config: KeyListConfig): 'backward' | 'forward' | null {\n  const { code, layout, dir } = config;\n  const start = dir === 'rtl' ? KeynavCode.ArrowRight : KeynavCode.ArrowLeft;\n  const end = dir === 'rtl' ? KeynavCode.ArrowLeft : KeynavCode.ArrowRight;\n\n  if (layout !== 'horizontal') {\n    if (code === KeynavCode.ArrowUp) return 'backward';\n    if (code === KeynavCode.ArrowDown) return 'forward';\n  }\n\n  if (layout !== 'vertical') {\n    if (code === start) return 'backward';\n    if (code === end) return 'forward';\n  }\n\n  return null;\n}\n\nfunction resolveSpecialKey(code: KeynavCode): 'home' | 'end' | 'pageup' | 'pagedown' | null {\n  if (code === KeynavCode.End) return 'end';\n  if (code === KeynavCode.Home) return 'home';\n  if (code === KeynavCode.PageUp) return 'pageup';\n  if (code === KeynavCode.PageDown) return 'pagedown';\n  return null;\n}\n\nfunction navigateWithLoop(current: number, step: number, options: { limit: number; loop: boolean | undefined }) {\n  const { limit, loop } = options;\n  const next = current + step;\n  if (next >= 0 && next <= limit) return next;\n  return loop ? (step < 0 ? limit : 0) : current;\n}\n\nexport function getNextKeyListItem(item: HTMLElement, items: HTMLElement[], config: KeyListConfig) {\n  let next = items.indexOf(item);\n  const previous = next;\n  const itemCount = items.length - 1;\n  const direction = resolveArrowDirection(config);\n\n  switch (direction ?? resolveSpecialKey(config.code)) {\n    case 'backward':\n      next = navigateWithLoop(next, -1, { limit: itemCount, loop: config.loop });\n      break;\n    case 'forward':\n      next = navigateWithLoop(next, 1, { limit: itemCount, loop: config.loop });\n      break;\n    case 'end':\n      next = itemCount;\n      break;\n    case 'home':\n      next = 0;\n      break;\n    case 'pageup':\n      next = Math.max(0, next - 4);\n      break;\n    case 'pagedown':\n      next = Math.min(itemCount, next + 4);\n      break;\n    case null:\n      break;\n  }\n\n  return { next, previous };\n}\n"],"mappings":"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"}

package/dist/internal/services/global.service.js

@@ -19,7 +19,7 @@ var a = class {
 				i18nRegistry: {},
 				audit: {}
 			}
-		}, globalThis.NVE_ELEMENTS.state.versions = Array.from(/* @__PURE__ */ new Set([...globalThis.NVE_ELEMENTS.state.versions, "2.9.0"])), globalThis.NVE_ELEMENTS.state.scopedRegistry ??= {}, globalThis.NVE_ELEMENTS.state.scopedRegistry["2.9.0"] = i(), globalThis.NVE_ELEMENTS.state.versions.length > 1 && globalThis.NVE_ELEMENTS.state.env !== "production" && console.warn(e(), `\n\n${JSON.stringify(globalThis.NVE_ELEMENTS.state.versions, null, 2)}`);
+		}, globalThis.NVE_ELEMENTS.state.versions = Array.from(/* @__PURE__ */ new Set([...globalThis.NVE_ELEMENTS.state.versions, "2.11.0"])), globalThis.NVE_ELEMENTS.state.scopedRegistry ??= {}, globalThis.NVE_ELEMENTS.state.scopedRegistry["2.11.0"] = i(), globalThis.NVE_ELEMENTS.state.versions.length > 1 && globalThis.NVE_ELEMENTS.state.env !== "production" && console.warn(e(), `\n\n${JSON.stringify(globalThis.NVE_ELEMENTS.state.versions, null, 2)}`);
 	}
 	get state() {
 		return globalThis.NVE_ELEMENTS.state;

package/dist/internal/types/index.d.ts

@@ -27,9 +27,13 @@ export type Prominence = 'emphasis' | 'muted';
  * - `inline` Element container reduces to fit within inline content such as a block of text.
  * - `inset` Element container optimizes for embedding or inset placement inside another containing element.
  * - `full` Element container optimizes for filling its container bounds.
- * - `condensed` Element container optimizes for small, summarized or contained spaces.
  */
-export type Container = 'inline' | 'flat' | 'inset' | 'full' | 'condensed';
+export type Container = 'inline' | 'flat' | 'inset' | 'full';
+/** Controls the visual density of an element to match its context and available space.
+ * - `compact` - Reduces visual weight and spacing for dense layouts or secondary elements with less visual prominence.
+ * - `default` - Standard size that works well in most contexts and provides balanced visibility.
+ */
+export type Density = 'compact' | 'default';
 /** Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions.
  * - `accent` - Highlights important actions or draws attention to primary interactive elements.
  * - `warning` - Indicates cautionary actions that require careful consideration before proceeding.