@nvidia-elements/core 0.0.10 → 0.0.11

package/dist/grid/grid2.js

@@ -22,7 +22,7 @@ var v = class extends h {
 	static {
 		this.metadata = {
 			tag: "nve-grid",
-			version: "0.0.10",
+			version: "0.0.11",
 			children: [
 				u.metadata.tag,
 				d.metadata.tag,

package/dist/grid/header/header2.js

@@ -19,7 +19,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-grid-header",
-			version: "0.0.10",
+			version: "0.0.11",
 			children: [c.metadata.tag]
 		};
 	}
@@ -43,7 +43,7 @@ var m = class extends d {
 		super.firstUpdated(e), await this.updateComplete, this.#i();
 	}
 	async #r() {
-		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)`));
+		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.map((e) => e.width ? e.width : `minmax(auto, ${e.getBoundingClientRect().width}px)`).forEach((e, t) => this.#e.style.setProperty(`--c${t}`, e));
 	}
 	#i() {
 		if (e.state.env !== "production") {

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

@@ -1 +1 @@
-{"version":3,"file":"header2.js","names":["#grid","#computeColumnWidths","#onColumnResize","#resizeObserver","#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  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,\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.#onColumnResize);\n    this.#resizeObserver ??= new ResizeObserver(debounce(() => this.#computeColumnWidths(), 100));\n    this.#resizeObserver.observe(this);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('nve-grid-column-resize', this.#onColumnResize);\n    this.#resizeObserver?.disconnect();\n  }\n\n  #onColumnResize = () => {\n    void this.#computeColumnWidths();\n  };\n\n  #resizeObserver?: ResizeObserver;\n\n  async firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    await this.updateComplete;\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.querySelector(GridRow.metadata.tag)?.querySelectorAll(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":";;;;;;;;;;;;;;AAgCO,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;AAMlB,EALA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO,OACvB,KAAK,iBAAiB,0BAA0B,MAAA,EAAqB,EACrE,MAAA,MAAyB,IAAI,eAAe,QAAe,MAAA,GAA2B,EAAE,IAAI,CAAC,EAC7F,MAAA,EAAqB,QAAQ,KAAK;;CAGpC,uBAAuB;AAGrB,EAFA,MAAM,sBAAsB,EAC5B,KAAK,oBAAoB,0BAA0B,MAAA,EAAqB,EACxE,MAAA,GAAsB,YAAY;;CAGpC,WAAwB;AACjB,QAAA,GAA2B;;CAGlC;CAEA,MAAM,aAAa,GAA6B;AAG9C,EAFA,MAAM,aAAa,EAAM,EACzB,MAAM,KAAK,gBACX,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,EAAW,cAAc,EAAQ,SAAS,IAAI,EAAE,iBAAiB,EAAS,SAAS,IAAI;AACrG,GAAI,KAAK,WAAW,KAAS,KAAK,QAAQ,WAAW,EAAM,UACzD,EAAW,MAAM,gBAAgB,KAAK,QAAQ,OAAO,mBAAmB,EAAM,OAAO,kBAAkB;;;;GAjE5G,EAAsB;CACrB,UAAU,EAAW,SAAS;CAC9B,SAAS;CACV,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,SAjBH,GAAO,CAAA,EAAA,EAAA"}
+{"version":3,"file":"header2.js","names":["#grid","#computeColumnWidths","#onColumnResize","#resizeObserver","#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  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,\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.#onColumnResize);\n    this.#resizeObserver ??= new ResizeObserver(debounce(() => this.#computeColumnWidths(), 100));\n    this.#resizeObserver.observe(this);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('nve-grid-column-resize', this.#onColumnResize);\n    this.#resizeObserver?.disconnect();\n  }\n\n  #onColumnResize = () => {\n    void this.#computeColumnWidths();\n  };\n\n  #resizeObserver?: ResizeObserver;\n\n  async firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    await this.updateComplete;\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    const widths = this.columns.map(c => (c.width ? c.width : `minmax(auto, ${c.getBoundingClientRect().width}px)`));\n    widths.forEach((w, i) => this.#grid.style.setProperty(`--c${i}`, w));\n  }\n\n  #validateColumns() {\n    if (GlobalStateService.state.env !== 'production') {\n      const cells = this.#grid.querySelector(GridRow.metadata.tag)?.querySelectorAll(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":";;;;;;;;;;;;;;AAgCO,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;AAMlB,EALA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO,OACvB,KAAK,iBAAiB,0BAA0B,MAAA,EAAqB,EACrE,MAAA,MAAyB,IAAI,eAAe,QAAe,MAAA,GAA2B,EAAE,IAAI,CAAC,EAC7F,MAAA,EAAqB,QAAQ,KAAK;;CAGpC,uBAAuB;AAGrB,EAFA,MAAM,sBAAsB,EAC5B,KAAK,oBAAoB,0BAA0B,MAAA,EAAqB,EACxE,MAAA,GAAsB,YAAY;;CAGpC,WAAwB;AACjB,QAAA,GAA2B;;CAGlC;CAEA,MAAM,aAAa,GAA6B;AAG9C,EAFA,MAAM,aAAa,EAAM,EACzB,MAAM,KAAK,gBACX,MAAA,GAAuB;;CAGzB,OAAA,IAA6B;AAWZ,EAVf,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,gBACI,KAAK,QAAQ,KAAI,MAAM,EAAE,QAAQ,EAAE,QAAQ,gBAAgB,EAAE,uBAAuB,CAAC,MAAM,KAAM,CACzG,SAAS,GAAG,MAAM,MAAA,EAAW,MAAM,YAAY,MAAM,KAAK,EAAE,CAAC;;CAGtE,KAAmB;AACjB,MAAI,EAAmB,MAAM,QAAQ,cAAc;GACjD,IAAM,IAAQ,MAAA,EAAW,cAAc,EAAQ,SAAS,IAAI,EAAE,iBAAiB,EAAS,SAAS,IAAI;AACrG,GAAI,KAAK,WAAW,KAAS,KAAK,QAAQ,WAAW,EAAM,UACzD,EAAW,MAAM,gBAAgB,KAAK,QAAQ,OAAO,mBAAmB,EAAM,OAAO,kBAAkB;;;;GAhE5G,EAAsB;CACrB,UAAU,EAAW,SAAS;CAC9B,SAAS;CACV,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,SAjBH,GAAO,CAAA,EAAA,EAAA"}

package/dist/grid/placeholder/placeholder2.js

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

package/dist/grid/row/row2.js

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

package/dist/icon/icon.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/icon/icon.examples.json",
   "items": [
     {
-      "id": "core-icon_default",
+      "id": "icon",
       "name": "Default",
       "template": "<nve-icon name=\"person\"></nve-icon>\n",
       "summary": "Basic icon component with standard appearance and usage for visual communication and interface navigation.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-icon_statuses",
+      "id": "icon-statuses",
       "name": "Statuses",
       "template": "<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",
       "summary": "Semantic color variations to communicate different states, priorities, and contextual meanings in user interfaces.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-icon_size",
+      "id": "icon-size",
       "name": "Size",
       "template": "<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",
       "summary": "Icon size variants to accommodate layout densities, touch targets, and visual hierarchy requirements.",
@@ -30,7 +30,7 @@
       "tags": []
     },
     {
-      "id": "core-icon_direction",
+      "id": "icon-direction",
       "name": "Direction",
       "template": "<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",
       "summary": "Directional icons for navigation, movement, and spatial relationships, providing clear visual cues for user actions.",
@@ -39,7 +39,7 @@
       "tags": []
     },
     {
-      "id": "core-icon_themes",
+      "id": "icon-themes",
       "name": "Themes",
       "template": "<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",
       "summary": "Icon appearance across light and dark themes, ensuring proper contrast and visibility in different visual environments.",
@@ -50,7 +50,7 @@
       ]
     },
     {
-      "id": "core-icon_registration",
+      "id": "icon-registration",
       "name": "Registration",
       "template": "<nve-icon name=\"smile\" style=\"--width: 75px; --height: 75px\"></nve-icon>\n<script type=\"module\">\n  customElements.get(\"nve-icon\").add({\n    smile: {\n      svg: () =>\n        '<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",
       "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.",
@@ -61,7 +61,7 @@
       ]
     },
     {
-      "id": "core-icon_alias",
+      "id": "icon-alias",
       "name": "Alias",
       "template": "<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",
       "summary": "Alias icons to a different name. This supports context-specific names or migrations between icon sets.",
@@ -72,7 +72,7 @@
       ]
     },
     {
-      "id": "core-icon_source",
+      "id": "icon-source",
       "name": "Source",
       "template": "<nve-icon name=\"/static/images/test-image-1.svg\" style=\"--width: 75px; --height: 75px\"></nve-icon>\n",
       "summary": "Provide direct SVG paths for rendering.",

package/dist/icon/icon2.js

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

package/dist/icon-button/icon-button.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/icon-button/icon-button.examples.json",
   "items": [
     {
-      "id": "core-icon-button_default",
+      "id": "icon-button",
       "name": "Default",
       "template": "<nve-icon-button icon-name=\"menu\"></nve-icon-button>\n",
       "summary": "Basic icon button for compact actions and toolbar controls with minimal visual footprint.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-icon-button_interactions",
+      "id": "icon-button-interactions",
       "name": "Interactions",
       "template": "<nve-icon-button icon-name=\"menu\"></nve-icon-button>\n<nve-icon-button interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n<nve-icon-button interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n<nve-icon-button disabled icon-name=\"menu\"></nve-icon-button>\n",
       "summary": "Icon buttons with different interaction styles including default, emphasis, destructive, and disabled states.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-icon-button_size",
+      "id": "icon-button-size",
       "name": "Size",
       "template": "<nve-icon-button size=\"sm\" icon-name=\"menu\"></nve-icon-button>\n<nve-icon-button icon-name=\"menu\"></nve-icon-button>\n<nve-icon-button size=\"lg\" icon-name=\"menu\"></nve-icon-button>\n",
       "summary": "Icon buttons in different sizes (small, medium, large) for varying contexts and visual hierarchy.",
@@ -32,7 +32,7 @@
       ]
     },
     {
-      "id": "core-icon-button_flat-interactions",
+      "id": "icon-button-flat-interactions",
       "name": "FlatInteractions",
       "template": "<nve-icon-button container=\"flat\" icon-name=\"menu\"></nve-icon-button>\n<nve-icon-button container=\"flat\" interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n<nve-icon-button container=\"flat\" interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n<nve-icon-button container=\"flat\" icon-name=\"menu\" disabled></nve-icon-button>\n",
       "summary": "Flat container icon buttons with interaction styles for minimal visual weight in dense toolbars.",
@@ -43,7 +43,7 @@
       ]
     },
     {
-      "id": "core-icon-button_pressed",
+      "id": "icon-button-pressed",
       "name": "Pressed",
       "template": "<nve-icon-button pressed icon-name=\"filter-stroke\"></nve-icon-button>\n<nve-icon-button icon-name=\"filter\"></nve-icon-button>\n",
       "summary": "Icon buttons with pressed state for toggle functionality like filters or visibility controls.",
@@ -52,7 +52,7 @@
       "tags": []
     },
     {
-      "id": "core-icon-button_pressed-flat",
+      "id": "icon-button-pressed-flat",
       "name": "PressedFlat",
       "template": "<nve-icon-button pressed container=\"flat\" icon-name=\"eye-hidden\" aria-label=\"show\"></nve-icon-button>\n<nve-icon-button container=\"flat\" icon-name=\"eye\" aria-label=\"hide\"></nve-icon-button>\n",
       "summary": "Flat icon buttons with pressed state for low-emphasis toggles and compact toggle controls.",
@@ -63,7 +63,7 @@
       ]
     },
     {
-      "id": "core-icon-button_pressed-inline",
+      "id": "icon-button-pressed-inline",
       "name": "PressedInline",
       "template": "<nve-icon-button pressed container=\"inline\" icon-name=\"eye-hidden\" aria-label=\"show\"></nve-icon-button>\n<nve-icon-button container=\"inline\" icon-name=\"eye\" aria-label=\"hide\"></nve-icon-button>\n",
       "summary": "Inline icon buttons with pressed state for minimal toggle controls within text or content flows.",
@@ -74,7 +74,7 @@
       ]
     },
     {
-      "id": "core-icon-button_selected",
+      "id": "icon-button-selected",
       "name": "Selected",
       "template": "<nve-icon-button selected icon-name=\"split-vertical\" aria-label=\"split vertical\"></nve-icon-button>\n<nve-icon-button icon-name=\"split-horizontal\" aria-label=\"split horizontal\"></nve-icon-button>\n<nve-icon-button icon-name=\"split-none\" aria-label=\"preview\"></nve-icon-button>\n",
       "summary": "Icon buttons with selected state for mutually exclusive options like view modes or layout choices.",
@@ -83,7 +83,7 @@
       "tags": []
     },
     {
-      "id": "core-icon-button_selected-flat",
+      "id": "icon-button-selected-flat",
       "name": "SelectedFlat",
       "template": "<nve-icon-button selected container=\"flat\" icon-name=\"split-vertical\" aria-label=\"split vertical\"></nve-icon-button>\n<nve-icon-button container=\"flat\" icon-name=\"split-horizontal\" aria-label=\"split horizontal\"></nve-icon-button>\n<nve-icon-button container=\"flat\" icon-name=\"split-none\" aria-label=\"preview\"></nve-icon-button>\n",
       "summary": "Flat icon buttons with selected state for low-emphasis mode selection in compact toolbars.",
@@ -94,7 +94,7 @@
       ]
     },
     {
-      "id": "core-icon-button_selected-inline",
+      "id": "icon-button-selected-inline",
       "name": "SelectedInline",
       "template": "<nve-icon-button selected container=\"inline\" icon-name=\"split-vertical\" aria-label=\"split vertical\"></nve-icon-button>\n<nve-icon-button container=\"inline\" icon-name=\"split-horizontal\" aria-label=\"split horizontal\"></nve-icon-button>\n<nve-icon-button container=\"inline\" icon-name=\"split-none\" aria-label=\"preview\"></nve-icon-button>\n",
       "summary": "Inline icon buttons with selected state for minimal mode selection within content flows.",
@@ -105,7 +105,7 @@
       ]
     },
     {
-      "id": "core-icon-button_custom-icon",
+      "id": "icon-button-custom-icon",
       "name": "CustomIcon",
       "template": "<nve-icon-button interaction=\"emphasis\">ML</nve-icon-button>\n<nve-icon-button>🎉</nve-icon-button>\n<nve-icon-button> 🔗 <a href=\"#\" aria-label=\"custom icon button\"></a> </nve-icon-button>\n",
       "summary": "Icon buttons with custom content like text initials, emojis, or symbols for personalized actions.",
@@ -116,7 +116,7 @@
       ]
     },
     {
-      "id": "core-icon-button_link",
+      "id": "icon-button-link",
       "name": "Link",
       "template": "<nve-icon-button icon-name=\"menu\">\n  <a href=\"#\" aria-label=\"link to page\"></a>\n</nve-icon-button>\n",
       "summary": "Proper implementation of icon buttons with links, showing correct and incorrect anchor placement patterns.",
@@ -125,7 +125,7 @@
       "tags": []
     },
     {
-      "id": "core-icon-button_themes",
+      "id": "icon-button-themes",
       "name": "Themes",
       "template": "<div nve-theme=\"root light\">\n  <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n  <nve-icon-button interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n  <nve-icon-button interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"menu\"></nve-icon-button>\n  <nve-icon-button disabled icon-name=\"menu\"></nve-icon-button>\n</div>\n<div nve-theme=\"root dark\">\n  <nve-icon-button icon-name=\"menu\"></nve-icon-button>\n  <nve-icon-button interaction=\"emphasis\" icon-name=\"menu\"></nve-icon-button>\n  <nve-icon-button interaction=\"destructive\" icon-name=\"menu\"></nve-icon-button>\n  <nve-icon-button container=\"flat\" icon-name=\"menu\"></nve-icon-button>\n  <nve-icon-button disabled icon-name=\"menu\"></nve-icon-button>\n</div>\n",
       "summary": "Icon buttons styled for light and dark themes with all interaction states for theme consistency.",

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

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

package/dist/index.js

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

package/dist/input/input-group.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/input/input-group.examples.json",
   "items": [
     {
-      "id": "core-input-input-group_default",
+      "id": "input-input-group",
       "name": "Default",
       "template": "<nve-input-group>\n  <label>domain</label>\n  <nve-select style=\"width: 130px\">\n    <select aria-label=\"protocol\">\n      <option>https://</option>\n      <option>http://</option>\n    </select>\n  </nve-select>\n  <nve-input>\n    <input placeholder=\"example\" type=\"url\" aria-label=\"host\" />\n    <nve-button container=\"flat\" readonly>.com</nve-button>\n  </nve-input>\n  <nve-control-message>host: 123456</nve-control-message>\n</nve-input-group>\n",
       "summary": "Input group combining select, input, and button for composite controls like domain URL entry.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-input-input-group_filter-group-range",
+      "id": "input-input-group-filter-group-range",
       "name": "FilterGroupRange",
       "template": "<div nve-layout=\"row align:vertical-center\">\n  <nve-input-group>\n    <nve-select style=\"width: 150px\">\n      <select aria-label=\"date type\">\n        <option value=\"1\">recording date</option>\n        <option value=\"2\">process date</option>\n      </select>\n    </nve-select>\n    <nve-date style=\"width: 220px\">\n      <nve-button container=\"flat\" readonly>start</nve-button>\n      <input type=\"date\" value=\"2022-05-11\" aria-label=\"start date\" />\n    </nve-date>\n    <nve-date style=\"width: 220px\">\n      <nve-button container=\"flat\" readonly>end</nve-button>\n      <input type=\"date\" value=\"2022-12-07\" aria-label=\"end date\" />\n    </nve-date>\n    <nve-icon-button aria-label=\"remove filter\" icon-name=\"cancel\"></nve-icon-button>\n  </nve-input-group>\n</div>\n",
       "summary": "Input group with date range filters combining select and date inputs for filtering data by time periods.",

package/dist/input/input-group2.js

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

package/dist/input/input.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/input/input.examples.json",
   "items": [
     {
-      "id": "core-input_default",
+      "id": "input",
       "name": "Default",
       "template": "<nve-input>\n  <label>label</label>\n  <input type=\"text\" />\n  <nve-control-message>message</nve-control-message>\n</nve-input>\n",
       "summary": "Basic text input field with label and message for general text entry and form data collection.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-input_standard",
+      "id": "input-standard",
       "name": "Standard",
       "template": "<nve-input>\n  <label>label</label>\n  <input type=\"text\" />\n  <nve-control-message>message</nve-control-message>\n</nve-input>\n",
       "summary": "Text input with the standard input structure, label, and control message.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-input_vertical",
+      "id": "input-vertical",
       "name": "Vertical",
       "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-input>\n    <label>label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-input>\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-input>\n    <label>success</label>\n    <input />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-input>\n  <nve-input>\n    <label>error</label>\n    <input />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-input>\n</div>\n",
       "summary": "Text inputs with vertical layout including validation states for disabled, success, and error.",
@@ -32,7 +32,7 @@
       ]
     },
     {
-      "id": "core-input_horizontal",
+      "id": "input-horizontal",
       "name": "Horizontal",
       "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-input layout=\"horizontal\">\n    <label>label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-input layout=\"horizontal\">\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-input layout=\"horizontal\">\n    <label>success</label>\n    <input />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-input>\n  <nve-input layout=\"horizontal\">\n    <label>error</label>\n    <input />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-input>\n</div>\n",
       "summary": "Text inputs with horizontal layout showing validation states for inline forms and compact layouts.",
@@ -43,7 +43,7 @@
       ]
     },
     {
-      "id": "core-input_rounded",
+      "id": "input-rounded",
       "name": "Rounded",
       "template": "<nve-input rounded>\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-input>\n",
       "summary": "Text input with rounded corners for a softer visual appearance and modern aesthetic.",
@@ -52,7 +52,7 @@
       "tags": []
     },
     {
-      "id": "core-input_fit-text",
+      "id": "input-fit-text",
       "name": "FitText",
       "template": "<nve-input fit-text>\n  <label>label</label>\n  <input value=\"123456789012345678901234567890\" />\n  <nve-control-message>message</nve-control-message>\n</nve-input>\n",
       "summary": "Text input with fit-text styling that adjusts width to match the input value for compact displays.",
@@ -63,7 +63,7 @@
       ]
     },
     {
-      "id": "core-input_fit-content",
+      "id": "input-fit-content",
       "name": "FitContent",
       "template": "<nve-input fit-content>\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-input>\n",
       "summary": "Text input with fit-content sizing that automatically adjusts width based on available space.",
@@ -74,7 +74,7 @@
       ]
     },
     {
-      "id": "core-input_flat",
+      "id": "input-flat",
       "name": "Flat",
       "template": "<nve-input container=\"flat\">\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-input>\n",
       "summary": "Text input with flat container styling for minimal visual appearance and borderless design.",

package/dist/input/input2.js

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

package/dist/internal/controllers/i18n.controller.examples.json

@@ -2,7 +2,7 @@
   "entrypoint": "@nvidia-elements/core/internal/controllers/i18n.controller.examples.json",
   "items": [
     {
-      "id": "core-internal-controllers-i18n.controller_i18n-controller-demo",
+      "id": "internal-controllers-i18n.controller-i18n-controller-demo",
       "name": "I18nControllerDemo",
       "template": "<i18n-demo></i18n-demo>\n",
       "summary": "Internationalization controller with dynamic language switching between English and French.",

package/dist/internal/controllers/keynav-grid.controller.examples.json

@@ -2,7 +2,7 @@
   "entrypoint": "@nvidia-elements/core/internal/controllers/keynav-grid.controller.examples.json",
   "items": [
     {
-      "id": "core-internal-controllers-keynav-grid.controller_styles",
+      "id": "internal-controllers-keynav-grid.controller-styles",
       "name": "styles",
       "template": "section { display: grid; gap: 4px; grid-template-columns: repeat(10, 50px); } .vertical { grid-template-rows: repeat(10,\n1fr); grid-template-columns: 50px; } .row { display: contents; } button { width: 100%; height: 30px; min-width: 30px;\ndisplay: block; } button[selected] { background: green; color: white; }\n",
       "summary": "",
@@ -11,7 +11,7 @@
       "tags": []
     },
     {
-      "id": "core-internal-controllers-keynav-grid.controller_grid-demo",
+      "id": "internal-controllers-keynav-grid.controller-grid-demo",
       "name": "GridDemo",
       "template": "<demo-key-navigation-grid></demo-key-navigation-grid>\n",
       "summary": "Grid-based keyboard navigation controller with arrow key support across rows and columns.",

package/dist/internal/controllers/keynav-grid.controller.js

@@ -94,21 +94,29 @@ function _(e, t) {
 		dy: 4
 	} : null;
 }
-function v(e, t, n, r, i, a) {
+function v(e, t, n) {
+	let { x: r, y: i } = t, { columnCount: a, rowCount: s, ctrlKey: c } = n;
 	return e === o.End ? {
-		x: r,
-		y: a ? i : n
+		x: a,
+		y: c ? s : i
 	} : e === o.Home ? {
 		x: 0,
-		y: a ? 0 : n
+		y: c ? 0 : i
 	} : {
-		x: t,
-		y: n
+		x: r,
+		y: i
 	};
 }
 function y(e, t, n) {
 	let r = e.find((e) => e.tabIndex === 0), i = t.find((e) => s(e).find((e) => e === r)), a = Array.from(s(i)).filter((t) => !!e.find((e) => e === t)), o = t.length - 1, c = a.length - 1, l = a.indexOf(r), u = t.indexOf(i), d = _(n.code, n.dir);
-	return d ? (l = Math.max(0, Math.min(c, l + d.dx)), u = Math.max(0, Math.min(o, u + d.dy))) : {x: l, y: u} = v(n.code, l, u, c, o, n.ctrlKey), {
+	return d ? (l = Math.max(0, Math.min(c, l + d.dx)), u = Math.max(0, Math.min(o, u + d.dy))) : {x: l, y: u} = v(n.code, {
+		x: l,
+		y: u
+	}, {
+		columnCount: c,
+		rowCount: o,
+		ctrlKey: n.ctrlKey
+	}), {
 		x: l,
 		y: u
 	};

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

@@ -1 +1 @@
-{"version":3,"file":"keynav-grid.controller.js","names":["#config","#hostRows","#hostCells","#updateCellActivation","#keynavCell","#clickCell","#observers","#setActiveCell"],"sources":["../../../src/internal/controllers/keynav-grid.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 { onChildListMutation, throttle } from '../utils/events.js';\nimport { GlobalStateService } from '../services/global.service.js';\nimport { LogService } from '../services/log.service.js';\nimport {\n  validKeyNavigationCode,\n  isContextMenuClick,\n  getFlattenedDOMTree,\n  getFlattenedFocusableItems,\n  KeynavCode,\n  hasInvalidDOMGrid\n} from '../utils/dom.js';\nimport {\n  focusElement,\n  getActiveElement,\n  initializeKeyListItems,\n  setActiveKeyListItem,\n  isSimpleFocusable\n} from '../utils/focus.js';\n\nexport interface KeynavGridConfig {\n  grid?: HTMLElement;\n  columnRow?: HTMLElement;\n  columns?: NodeListOf<HTMLElement> | HTMLElement[];\n  rows: NodeListOf<HTMLElement> | HTMLElement[];\n  cells: NodeListOf<HTMLElement> | HTMLElement[];\n}\n\nexport interface KeynavGridElement {\n  keynavGridConfig: KeynavGridConfig;\n}\n\n/**\n * https://w3c.github.io/aria-practices/#gridNav_focus\n */\nexport function keyNavigationGrid<T extends ReactiveElement & KeynavGridElement>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new KeyNavigationGridController(instance));\n}\n\nexport class KeyNavigationGridController<T extends ReactiveElement & KeynavGridElement> implements ReactiveController {\n  #observers: MutationObserver[] = [];\n\n  get #config() {\n    return {\n      grid: this.host,\n      ...this.host.keynavGridConfig\n    };\n  }\n\n  get #hostRows() {\n    const rows = Array.from(this.#config.rows);\n\n    if (this.#config.columnRow) {\n      rows.unshift(this.#config.columnRow);\n    }\n\n    return rows;\n  }\n\n  get #hostCells() {\n    return [...Array.from(this.#config.columns ?? []), ...Array.from(this.#config.cells)];\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    initializeKeyListItems(this.#hostCells);\n    this.#config.grid.addEventListener('keyup', (e: KeyboardEvent) => this.#updateCellActivation(e));\n    this.#config.grid.addEventListener('keydown', (e: KeyboardEvent) => this.#keynavCell(e));\n    this.#config.grid.addEventListener('mouseup', (e: MouseEvent) => this.#clickCell(e));\n    this.#observers.push(\n      onChildListMutation(\n        this.host,\n        throttle(() => initializeKeyListItems(this.#hostCells), 500)\n      )\n    );\n  }\n\n  hostDisconnected() {\n    this.#observers.forEach(o => o?.disconnect());\n  }\n\n  #clickCell(e: MouseEvent) {\n    if (!isContextMenuClick(e)) {\n      const focusedElement = e.composedPath()[0] as HTMLElement;\n      const activeCell = this.#hostCells.find(i => i === focusedElement) ? focusedElement : null;\n      if (activeCell) {\n        this.#setActiveCell(e, activeCell as HTMLElement);\n      }\n    }\n  }\n\n  #keynavCell(e: KeyboardEvent) {\n    const rows = Array.from(this.#hostRows);\n    const cells = Array.from(this.#hostCells);\n\n    if (GlobalStateService.state.env !== 'production' && hasInvalidDOMGrid(rows)) {\n      LogService.warn('Invalid grid structure, all rows must have the same number of cells');\n      return;\n    }\n\n    if (validKeyNavigationCode(e) && isSimpleFocusable(getActiveElement() as Element)) {\n      const { x, y } = getNextKeyGridItem(cells, rows, {\n        code: e.code,\n        ctrlKey: e.ctrlKey,\n        dir: this.host.dir\n      });\n\n      const nextCell = Array.from(getFlattenedDOMTree(rows[y]!)).filter(c => !!cells.find(i => i === c))[\n        x\n      ] as HTMLElement;\n      this.#setActiveCell(e, nextCell);\n      e.preventDefault();\n    }\n  }\n\n  #setActiveCell(e: KeyboardEvent | MouseEvent, activeCell: HTMLElement) {\n    setActiveKeyListItem(this.#hostCells, activeCell);\n\n    const items = getFlattenedFocusableItems(activeCell);\n    const simpleItems = items.filter(i => isSimpleFocusable(i));\n\n    if (simpleItems.length === 1 && items.length === 1) {\n      focusElement(simpleItems[0]!);\n    } else {\n      focusElement(activeCell);\n    }\n\n    const detail = { code: e instanceof KeyboardEvent ? e.code : null, shiftKey: e.shiftKey, activeItem: activeCell };\n    activeCell.dispatchEvent(new CustomEvent('nve-key-change', { bubbles: true, composed: true, detail }));\n  }\n\n  #updateCellActivation(e: KeyboardEvent) {\n    const activeCell = Array.from(this.#hostCells).find(i => i.tabIndex === 0) as HTMLElement;\n    if (e.code === 'Escape') {\n      activeCell?.focus();\n    }\n\n    if (e.code === 'Enter' && activeCell === e.composedPath()[0]) {\n      getFlattenedFocusableItems(activeCell as HTMLElement)[0]?.focus();\n    }\n  }\n}\n\nfunction getGridDelta(code: KeynavCode | string, dir: string): { dx: number; dy: number } | null {\n  const start = dir === 'rtl' ? KeynavCode.ArrowRight : KeynavCode.ArrowLeft;\n  const end = dir === 'rtl' ? KeynavCode.ArrowLeft : KeynavCode.ArrowRight;\n\n  if (code === KeynavCode.ArrowUp) return { dx: 0, dy: -1 };\n  if (code === KeynavCode.ArrowDown) return { dx: 0, dy: 1 };\n  if (code === start) return { dx: -1, dy: 0 };\n  if (code === end) return { dx: 1, dy: 0 };\n  if (code === KeynavCode.PageUp) return { dx: 0, dy: -4 };\n  if (code === KeynavCode.PageDown) return { dx: 0, dy: 4 };\n  return null;\n}\n\nfunction applyGridHomeEnd(\n  code: KeynavCode | string,\n  x: number,\n  y: number,\n  columnCount: number,\n  rowCount: number,\n  ctrlKey: boolean\n) {\n  if (code === KeynavCode.End) {\n    return { x: columnCount, y: ctrlKey ? rowCount : y };\n  }\n\n  if (code === KeynavCode.Home) {\n    return { x: 0, y: ctrlKey ? 0 : y };\n  }\n\n  return { x, y };\n}\n\nexport function getNextKeyGridItem(\n  cells: HTMLElement[],\n  rows: HTMLElement[],\n  config: { code: KeynavCode | string; ctrlKey: boolean; dir: string }\n) {\n  const currentCell = cells.find(i => i.tabIndex === 0) as HTMLElement;\n  const currentRow = rows.find(r => getFlattenedDOMTree(r).find(c => c === currentCell)) as HTMLElement;\n  const currentRowCells = Array.from(getFlattenedDOMTree(currentRow)).filter(c => !!cells.find(i => i === c));\n  const rowCount = rows.length - 1;\n  const columnCount = currentRowCells.length - 1;\n\n  let x = currentRowCells.indexOf(currentCell);\n  let y = rows.indexOf(currentRow);\n\n  const delta = getGridDelta(config.code, config.dir);\n  if (delta) {\n    x = Math.max(0, Math.min(columnCount, x + delta.dx));\n    y = Math.max(0, Math.min(rowCount, y + delta.dy));\n  } else {\n    ({ x, y } = applyGridHomeEnd(config.code, x, y, columnCount, rowCount, config.ctrlKey));\n  }\n\n  return { x, y };\n}\n"],"mappings":"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"}
+{"version":3,"file":"keynav-grid.controller.js","names":["#config","#hostRows","#hostCells","#updateCellActivation","#keynavCell","#clickCell","#observers","#setActiveCell"],"sources":["../../../src/internal/controllers/keynav-grid.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 { onChildListMutation, throttle } from '../utils/events.js';\nimport { GlobalStateService } from '../services/global.service.js';\nimport { LogService } from '../services/log.service.js';\nimport {\n  validKeyNavigationCode,\n  isContextMenuClick,\n  getFlattenedDOMTree,\n  getFlattenedFocusableItems,\n  KeynavCode,\n  hasInvalidDOMGrid\n} from '../utils/dom.js';\nimport {\n  focusElement,\n  getActiveElement,\n  initializeKeyListItems,\n  setActiveKeyListItem,\n  isSimpleFocusable\n} from '../utils/focus.js';\n\nexport interface KeynavGridConfig {\n  grid?: HTMLElement;\n  columnRow?: HTMLElement;\n  columns?: NodeListOf<HTMLElement> | HTMLElement[];\n  rows: NodeListOf<HTMLElement> | HTMLElement[];\n  cells: NodeListOf<HTMLElement> | HTMLElement[];\n}\n\nexport interface KeynavGridElement {\n  keynavGridConfig: KeynavGridConfig;\n}\n\n/**\n * https://w3c.github.io/aria-practices/#gridNav_focus\n */\nexport function keyNavigationGrid<T extends ReactiveElement & KeynavGridElement>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new KeyNavigationGridController(instance));\n}\n\nexport class KeyNavigationGridController<T extends ReactiveElement & KeynavGridElement> implements ReactiveController {\n  #observers: MutationObserver[] = [];\n\n  get #config() {\n    return {\n      grid: this.host,\n      ...this.host.keynavGridConfig\n    };\n  }\n\n  get #hostRows() {\n    const rows = Array.from(this.#config.rows);\n\n    if (this.#config.columnRow) {\n      rows.unshift(this.#config.columnRow);\n    }\n\n    return rows;\n  }\n\n  get #hostCells() {\n    return [...Array.from(this.#config.columns ?? []), ...Array.from(this.#config.cells)];\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    initializeKeyListItems(this.#hostCells);\n    this.#config.grid.addEventListener('keyup', (e: KeyboardEvent) => this.#updateCellActivation(e));\n    this.#config.grid.addEventListener('keydown', (e: KeyboardEvent) => this.#keynavCell(e));\n    this.#config.grid.addEventListener('mouseup', (e: MouseEvent) => this.#clickCell(e));\n    this.#observers.push(\n      onChildListMutation(\n        this.host,\n        throttle(() => initializeKeyListItems(this.#hostCells), 500)\n      )\n    );\n  }\n\n  hostDisconnected() {\n    this.#observers.forEach(o => o?.disconnect());\n  }\n\n  #clickCell(e: MouseEvent) {\n    if (!isContextMenuClick(e)) {\n      const focusedElement = e.composedPath()[0] as HTMLElement;\n      const activeCell = this.#hostCells.find(i => i === focusedElement) ? focusedElement : null;\n      if (activeCell) {\n        this.#setActiveCell(e, activeCell as HTMLElement);\n      }\n    }\n  }\n\n  #keynavCell(e: KeyboardEvent) {\n    const rows = Array.from(this.#hostRows);\n    const cells = Array.from(this.#hostCells);\n\n    if (GlobalStateService.state.env !== 'production' && hasInvalidDOMGrid(rows)) {\n      LogService.warn('Invalid grid structure, all rows must have the same number of cells');\n      return;\n    }\n\n    if (validKeyNavigationCode(e) && isSimpleFocusable(getActiveElement() as Element)) {\n      const { x, y } = getNextKeyGridItem(cells, rows, {\n        code: e.code,\n        ctrlKey: e.ctrlKey,\n        dir: this.host.dir\n      });\n\n      const nextCell = Array.from(getFlattenedDOMTree(rows[y]!)).filter(c => !!cells.find(i => i === c))[\n        x\n      ] as HTMLElement;\n      this.#setActiveCell(e, nextCell);\n      e.preventDefault();\n    }\n  }\n\n  #setActiveCell(e: KeyboardEvent | MouseEvent, activeCell: HTMLElement) {\n    setActiveKeyListItem(this.#hostCells, activeCell);\n\n    const items = getFlattenedFocusableItems(activeCell);\n    const simpleItems = items.filter(i => isSimpleFocusable(i));\n\n    if (simpleItems.length === 1 && items.length === 1) {\n      focusElement(simpleItems[0]!);\n    } else {\n      focusElement(activeCell);\n    }\n\n    const detail = { code: e instanceof KeyboardEvent ? e.code : null, shiftKey: e.shiftKey, activeItem: activeCell };\n    activeCell.dispatchEvent(new CustomEvent('nve-key-change', { bubbles: true, composed: true, detail }));\n  }\n\n  #updateCellActivation(e: KeyboardEvent) {\n    const activeCell = Array.from(this.#hostCells).find(i => i.tabIndex === 0) as HTMLElement;\n    if (e.code === 'Escape') {\n      activeCell?.focus();\n    }\n\n    if (e.code === 'Enter' && activeCell === e.composedPath()[0]) {\n      getFlattenedFocusableItems(activeCell as HTMLElement)[0]?.focus();\n    }\n  }\n}\n\nfunction getGridDelta(code: KeynavCode | string, dir: string): { dx: number; dy: number } | null {\n  const start = dir === 'rtl' ? KeynavCode.ArrowRight : KeynavCode.ArrowLeft;\n  const end = dir === 'rtl' ? KeynavCode.ArrowLeft : KeynavCode.ArrowRight;\n\n  if (code === KeynavCode.ArrowUp) return { dx: 0, dy: -1 };\n  if (code === KeynavCode.ArrowDown) return { dx: 0, dy: 1 };\n  if (code === start) return { dx: -1, dy: 0 };\n  if (code === end) return { dx: 1, dy: 0 };\n  if (code === KeynavCode.PageUp) return { dx: 0, dy: -4 };\n  if (code === KeynavCode.PageDown) return { dx: 0, dy: 4 };\n  return null;\n}\n\nfunction applyGridHomeEnd(\n  code: KeynavCode | string,\n  position: { x: number; y: number },\n  bounds: { columnCount: number; rowCount: number; ctrlKey: boolean }\n) {\n  const { x, y } = position;\n  const { columnCount, rowCount, ctrlKey } = bounds;\n  if (code === KeynavCode.End) {\n    return { x: columnCount, y: ctrlKey ? rowCount : y };\n  }\n\n  if (code === KeynavCode.Home) {\n    return { x: 0, y: ctrlKey ? 0 : y };\n  }\n\n  return { x, y };\n}\n\nexport function getNextKeyGridItem(\n  cells: HTMLElement[],\n  rows: HTMLElement[],\n  config: { code: KeynavCode | string; ctrlKey: boolean; dir: string }\n) {\n  const currentCell = cells.find(i => i.tabIndex === 0) as HTMLElement;\n  const currentRow = rows.find(r => getFlattenedDOMTree(r).find(c => c === currentCell)) as HTMLElement;\n  const currentRowCells = Array.from(getFlattenedDOMTree(currentRow)).filter(c => !!cells.find(i => i === c));\n  const rowCount = rows.length - 1;\n  const columnCount = currentRowCells.length - 1;\n\n  let x = currentRowCells.indexOf(currentCell);\n  let y = rows.indexOf(currentRow);\n\n  const delta = getGridDelta(config.code, config.dir);\n  if (delta) {\n    x = Math.max(0, Math.min(columnCount, x + delta.dx));\n    y = Math.max(0, Math.min(rowCount, y + delta.dy));\n  } else {\n    ({ x, y } = applyGridHomeEnd(config.code, { x, y }, { columnCount, rowCount, ctrlKey: config.ctrlKey }));\n  }\n\n  return { x, y };\n}\n"],"mappings":"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"}

package/dist/internal/controllers/keynav-list.controller.examples.json

@@ -2,7 +2,7 @@
   "entrypoint": "@nvidia-elements/core/internal/controllers/keynav-list.controller.examples.json",
   "items": [
     {
-      "id": "core-internal-controllers-keynav-list.controller_styles",
+      "id": "internal-controllers-keynav-list.controller-styles",
       "name": "styles",
       "template": "section { display: grid; gap: 4px; grid-template-columns: repeat(10, 50px); } .vertical { grid-template-rows: repeat(10,\n1fr); grid-template-columns: 50px; } .row { display: contents; } button { width: 100%; height: 30px; min-width: 30px;\ndisplay: block; } button[selected] { background: green; color: white; }\n",
       "summary": "",
@@ -11,7 +11,7 @@
       "tags": []
     },
     {
-      "id": "core-internal-controllers-keynav-list.controller_list-demo",
+      "id": "internal-controllers-keynav-list.controller-list-demo",
       "name": "ListDemo",
       "template": "<demo-key-navigation-list></demo-key-navigation-list>\n",
       "summary": "Horizontal list keyboard navigation controller with arrow key support.",
@@ -22,7 +22,7 @@
       ]
     },
     {
-      "id": "core-internal-controllers-keynav-list.controller_vertical-demo",
+      "id": "internal-controllers-keynav-list.controller-vertical-demo",
       "name": "VerticalDemo",
       "template": "<demo-key-navigation-list-vertical></demo-key-navigation-list-vertical>\n",
       "summary": "Vertical list keyboard navigation controller with up and down arrow key support.",
@@ -33,7 +33,7 @@
       ]
     },
     {
-      "id": "core-internal-controllers-keynav-list.controller_loop-demo",
+      "id": "internal-controllers-keynav-list.controller-loop-demo",
       "name": "LoopDemo",
       "template": "<demo-key-navigation-list-loop></demo-key-navigation-list-loop>\n",
       "summary": "Vertical list keyboard navigation with looping enabled to wrap from last item to first.",

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

@@ -83,18 +83,24 @@ function s(e) {
 function c(e) {
 	return e === r.End ? "end" : e === r.Home ? "home" : e === r.PageUp ? "pageup" : e === r.PageDown ? "pagedown" : null;
 }
-function l(e, t, n, r) {
-	let i = e + n;
-	return i >= 0 && i <= t ? i : r ? n < 0 ? t : 0 : e;
+function l(e, t, n) {
+	let { limit: r, loop: i } = n, a = e + t;
+	return a >= 0 && a <= r ? a : i ? t < 0 ? r : 0 : e;
 }
 function u(e, t, n) {
 	let r = t.indexOf(e), i = r, a = t.length - 1;
 	switch (s(n) ?? c(n.code)) {
 		case "backward":
-			r = l(r, a, -1, n.loop);
+			r = l(r, -1, {
+				limit: a,
+				loop: n.loop
+			});
 			break;
 		case "forward":
-			r = l(r, a, 1, n.loop);
+			r = l(r, 1, {
+				limit: a,
+				loop: n.loop
+			});
 			break;
 		case "end":
 			r = a;