@nvidia-elements/core 0.0.9 → 0.0.11

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.9"
+			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.9", 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.9"
+			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.9"
+			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":";;;;;;AAuCA,SAAgB,IAAmF;AACjG,SAAQ,MACN,EAAO,gBAAiB,MAAgB,IAAI,EAA4B,EAAS,CAAC;;AAGtF,IAAa,IAAb,MAAsH;CACpH,KAAiC,EAAE;CAEnC,KAAA,IAAc;AACZ,SAAO;GACL,MAAM,KAAK;GACX,GAAG,KAAK,KAAK;GACd;;CAGH,KAAA,IAAgB;EACd,IAAM,IAAO,MAAM,KAAK,MAAA,EAAa,KAAK;AAM1C,SAJI,MAAA,EAAa,aACf,EAAK,QAAQ,MAAA,EAAa,UAAU,EAG/B;;CAGT,KAAA,IAAiB;AACf,SAAO,CAAC,GAAG,MAAM,KAAK,MAAA,EAAa,WAAW,EAAE,CAAC,EAAE,GAAG,MAAM,KAAK,MAAA,EAAa,MAAM,CAAC;;CAGvF,YAAY,GAAiB;AAC3B,EADkB,KAAA,OAAA,GAClB,KAAK,KAAK,cAAc,KAAK;;CAG/B,MAAM,gBAAgB;AAMpB,EALA,MAAM,KAAK,KAAK,gBAChB,EAAuB,MAAA,EAAgB,EACvC,MAAA,EAAa,KAAK,iBAAiB,UAAU,MAAqB,MAAA,EAA2B,EAAE,CAAC,EAChG,MAAA,EAAa,KAAK,iBAAiB,YAAY,MAAqB,MAAA,EAAiB,EAAE,CAAC,EACxF,MAAA,EAAa,KAAK,iBAAiB,YAAY,MAAkB,MAAA,EAAgB,EAAE,CAAC,EACpF,MAAA,EAAgB,KACd,EACE,KAAK,MACL,QAAe,EAAuB,MAAA,EAAgB,EAAE,IAAI,CAC7D,CACF;;CAGH,mBAAmB;AACjB,QAAA,EAAgB,SAAQ,MAAK,GAAG,YAAY,CAAC;;CAG/C,GAAW,GAAe;AACxB,MAAI,CAAC,EAAmB,EAAE,EAAE;GAC1B,IAAM,IAAiB,EAAE,cAAc,CAAC,IAClC,IAAa,MAAA,EAAgB,MAAK,MAAK,MAAM,EAAe,GAAG,IAAiB;AACtF,GAAI,KACF,MAAA,EAAoB,GAAG,EAA0B;;;CAKvD,GAAY,GAAkB;EAC5B,IAAM,IAAO,MAAM,KAAK,MAAA,EAAe,EACjC,IAAQ,MAAM,KAAK,MAAA,EAAgB;AAEzC,MAAI,EAAmB,MAAM,QAAQ,gBAAgB,EAAkB,EAAK,EAAE;AAC5E,KAAW,KAAK,sEAAsE;AACtF;;AAGF,MAAI,EAAuB,EAAE,IAAI,EAAkB,GAAkB,CAAY,EAAE;GACjF,IAAM,EAAE,MAAG,SAAM,EAAmB,GAAO,GAAM;IAC/C,MAAM,EAAE;IACR,SAAS,EAAE;IACX,KAAK,KAAK,KAAK;IAChB,CAAC,EAEI,IAAW,MAAM,KAAK,EAAoB,EAAK,GAAI,CAAC,CAAC,QAAO,MAAK,CAAC,CAAC,EAAM,MAAK,MAAK,MAAM,EAAE,CAAC,CAChG;AAGF,GADA,MAAA,EAAoB,GAAG,EAAS,EAChC,EAAE,gBAAgB;;;CAItB,GAAe,GAA+B,GAAyB;AACrE,IAAqB,MAAA,GAAiB,EAAW;EAEjD,IAAM,IAAQ,EAA2B,EAAW,EAC9C,IAAc,EAAM,QAAO,MAAK,EAAkB,EAAE,CAAC;AAE3D,EAAI,EAAY,WAAW,KAAK,EAAM,WAAW,IAC/C,EAAa,EAAY,GAAI,GAE7B,EAAa,EAAW;EAG1B,IAAM,IAAS;GAAE,MAAM,aAAa,gBAAgB,EAAE,OAAO;GAAM,UAAU,EAAE;GAAU,YAAY;GAAY;AACjH,IAAW,cAAc,IAAI,YAAY,kBAAkB;GAAE,SAAS;GAAM,UAAU;GAAM;GAAQ,CAAC,CAAC;;CAGxG,GAAsB,GAAkB;EACtC,IAAM,IAAa,MAAM,KAAK,MAAA,EAAgB,CAAC,MAAK,MAAK,EAAE,aAAa,EAAE;AAK1E,EAJI,EAAE,SAAS,YACb,GAAY,OAAO,EAGjB,EAAE,SAAS,WAAW,MAAe,EAAE,cAAc,CAAC,MACxD,EAA2B,EAA0B,CAAC,IAAI,OAAO;;;AAKvE,SAAS,EAAa,GAA2B,GAAgD;CAC/F,IAAM,IAAQ,MAAQ,QAAQ,EAAW,aAAa,EAAW,WAC3D,IAAM,MAAQ,QAAQ,EAAW,YAAY,EAAW;AAQ9D,QANI,MAAS,EAAW,UAAgB;EAAE,IAAI;EAAG,IAAI;EAAI,GACrD,MAAS,EAAW,YAAkB;EAAE,IAAI;EAAG,IAAI;EAAG,GACtD,MAAS,IAAc;EAAE,IAAI;EAAI,IAAI;EAAG,GACxC,MAAS,IAAY;EAAE,IAAI;EAAG,IAAI;EAAG,GACrC,MAAS,EAAW,SAAe;EAAE,IAAI;EAAG,IAAI;EAAI,GACpD,MAAS,EAAW,WAAiB;EAAE,IAAI;EAAG,IAAI;EAAG,GAClD;;AAGT,SAAS,EACP,GACA,GACA,GACA,GACA,GACA,GACA;AASA,QARI,MAAS,EAAW,MACf;EAAE,GAAG;EAAa,GAAG,IAAU,IAAW;EAAG,GAGlD,MAAS,EAAW,OACf;EAAE,GAAG;EAAG,GAAG,IAAU,IAAI;EAAG,GAG9B;EAAE;EAAG;EAAG;;AAGjB,SAAgB,EACd,GACA,GACA,GACA;CACA,IAAM,IAAc,EAAM,MAAK,MAAK,EAAE,aAAa,EAAE,EAC/C,IAAa,EAAK,MAAK,MAAK,EAAoB,EAAE,CAAC,MAAK,MAAK,MAAM,EAAY,CAAC,EAChF,IAAkB,MAAM,KAAK,EAAoB,EAAW,CAAC,CAAC,QAAO,MAAK,CAAC,CAAC,EAAM,MAAK,MAAK,MAAM,EAAE,CAAC,EACrG,IAAW,EAAK,SAAS,GACzB,IAAc,EAAgB,SAAS,GAEzC,IAAI,EAAgB,QAAQ,EAAY,EACxC,IAAI,EAAK,QAAQ,EAAW,EAE1B,IAAQ,EAAa,EAAO,MAAM,EAAO,IAAI;AAQnD,QAPI,KACF,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAa,IAAI,EAAM,GAAG,CAAC,EACpD,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAU,IAAI,EAAM,GAAG,CAAC,IAEhD,eAAW,EAAiB,EAAO,MAAM,GAAG,GAAG,GAAa,GAAU,EAAO,QAAQ,EAGjF;EAAE;EAAG;EAAG"}
+{"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;

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

@@ -1 +1 @@
-{"version":3,"file":"keynav-list.controller.js","names":["#config","#keynavDisabled","#initializeTabIndex","#clickItem","#focusItem","#getActiveItem","#setActiveItem"],"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, setActiveKeyListItem } from '../utils/focus.js';\nimport { KeynavCode, validKeyNavigationCode } from '../utils/dom.js';\n\nexport interface KeynavListConfig {\n  items: NodeListOf<HTMLElement> | 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    this.#initializeTabIndex();\n    this.host.addEventListener('pointerup', (e: PointerEvent) => this.#clickItem(e));\n    this.host.addEventListener('keydown', (e: KeyboardEvent) => this.#focusItem(e));\n  }\n\n  #initializeTabIndex() {\n    const { manageFocus, manageTabindex, items } = this.#config;\n    if (manageFocus && manageTabindex && !this.#keynavDisabled) {\n      initializeKeyListItems(items);\n    }\n  }\n\n  #clickItem(e: PointerEvent) {\n    const item = this.#getActiveItem(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.#getActiveItem(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  #getActiveItem(e: Event, items: HTMLElement[]) {\n    const focusedElement = e.composedPath()[0] as HTMLElement;\n    return items.find(i => i === focusedElement) ? focusedElement : null;\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\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, limit: number, step: number, loop: boolean | undefined) {\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, itemCount, -1, config.loop);\n      break;\n    case 'forward':\n      next = navigateWithLoop(next, itemCount, 1, 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":["#config","#keynavDisabled","#initializeTabIndex","#clickItem","#focusItem","#getActiveItem","#setActiveItem"],"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, setActiveKeyListItem } from '../utils/focus.js';\nimport { KeynavCode, validKeyNavigationCode } from '../utils/dom.js';\n\nexport interface KeynavListConfig {\n  items: NodeListOf<HTMLElement> | 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    this.#initializeTabIndex();\n    this.host.addEventListener('pointerup', (e: PointerEvent) => this.#clickItem(e));\n    this.host.addEventListener('keydown', (e: KeyboardEvent) => this.#focusItem(e));\n  }\n\n  #initializeTabIndex() {\n    const { manageFocus, manageTabindex, items } = this.#config;\n    if (manageFocus && manageTabindex && !this.#keynavDisabled) {\n      initializeKeyListItems(items);\n    }\n  }\n\n  #clickItem(e: PointerEvent) {\n    const item = this.#getActiveItem(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.#getActiveItem(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  #getActiveItem(e: Event, items: HTMLElement[]) {\n    const focusedElement = e.composedPath()[0] as HTMLElement;\n    return items.find(i => i === focusedElement) ? focusedElement : null;\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\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/controllers/popover.examples.json

@@ -2,7 +2,7 @@
   "entrypoint": "@nvidia-elements/core/internal/controllers/popover.examples.json",
   "items": [
     {
-      "id": "core-internal-controllers-popover_anchor",
+      "id": "internal-controllers-popover-anchor",
       "name": "Anchor",
       "template": "<nve-tooltip id=\"popover-1\" anchor=\"btn-2\">tooltip 1</nve-tooltip>\n<nve-tooltip id=\"popover-2\" anchor=\"btn-1\">tooltip 2</nve-tooltip>\n<div nve-layout=\"row gap:xs align:center\">\n  <nve-button id=\"btn-1\" popovertarget=\"popover-1\">button 1</nve-button>\n  <nve-button id=\"btn-2\" popovertarget=\"popover-2\">button 2</nve-button>\n</div>\n",
       "summary": "Anchor-based positioning where popovers anchor to specific elements rather than their triggers.",
@@ -13,7 +13,7 @@
       ]
     },
     {
-      "id": "core-internal-controllers-popover_nested",
+      "id": "internal-controllers-popover-nested",
       "name": "Nested",
       "template": "<style>\n  #root-inner {\n    height: 2000px;\n  }\n</style>\n<nve-dialog closable modal>\n  <h3 nve-text=\"heading\">Dialog</h3>\n  <p nve-text=\"body\" style=\"margin-bottom: 48px\">hello there</p>\n  <nve-button id=\"dropdown-btn\">search</nve-button>\n  <nve-dropdown anchor=\"dropdown-btn\" closable position=\"bottom\" alignment=\"start\">\n    <nve-search rounded>\n      <label>search dataset</label>\n      <nve-icon-button\n        id=\"tooltip-btn\"\n        icon-name=\"information-circle-stroke\"\n        container=\"flat\"\n        aria-label=\"more details\"\n        slot=\"label\"\n      ></nve-icon-button>\n      <input type=\"search\" placeholder=\"search\" />\n    </nve-search>\n    <nve-tooltip anchor=\"tooltip-btn\" position=\"top\">hello there</nve-tooltip>\n  </nve-dropdown>\n</nve-dialog>\n<nve-notification closable position=\"bottom\" alignment=\"end\">\n  <h3 nve-text=\"label\">notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n",
       "summary": "Nested popovers within dialogs and notifications, with proper layering and stacking order.",
@@ -24,7 +24,7 @@
       ]
     },
     {
-      "id": "core-internal-controllers-popover_programmatic-trigger",
+      "id": "internal-controllers-popover-programmatic-trigger",
       "name": "ProgrammaticTrigger",
       "template": "<nve-toast hidden close-timeout=\"3000\">hello there</nve-toast>\n<nve-button>open after 2s</nve-button>\n<script type=\"module\">\n  const toast = document.querySelector(\"nve-toast\");\n  const button = document.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", async () => {\n    await new Promise((r) => setTimeout(r, 2000)); // do an async task then open the popover\n    toast.showPopover();\n  });\n</script>\n",
       "summary": "Programmatic popover control with async operations before showing the popover.",
@@ -35,7 +35,7 @@
       ]
     },
     {
-      "id": "core-internal-controllers-popover_interactive",
+      "id": "internal-controllers-popover-interactive",
       "name": "Interactive",
       "template": "<div nve-layout=\"row align:center gap:xl\" style=\"height: 300px\">\n  <nve-tooltip id=\"tooltip\">hello there</nve-tooltip>\n  <nve-button popovertarget=\"tooltip\">tooltip</nve-button>\n  <nve-toast id=\"toast\" close-timeout=\"1500\">copied!</nve-toast>\n  <nve-button popovertarget=\"toast\">toast</nve-button>\n  <nve-drawer id=\"drawer\" closable modal>\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Title</h3>\n    </nve-drawer-header>\n    <p nve-text=\"body\">some text content in a drawer</p>\n  </nve-drawer>\n  <nve-button popovertarget=\"drawer\">drawer</nve-button>\n  <nve-dropdown id=\"dropdown\" closable>\n    <h3 nve-text=\"heading\">Title</h3>\n    <p nve-text=\"body\">some text content in a dropdown</p>\n  </nve-dropdown>\n  <nve-button popovertarget=\"dropdown\">dropdown</nve-button>\n  <nve-dialog id=\"dialog\" closable modal>\n    <h3 nve-text=\"heading\">Title</h3>\n    <p nve-text=\"body\">some text content in a closable dialog</p>\n  </nve-dialog>\n  <nve-button popovertarget=\"dialog\">dialog</nve-button>\n  <nve-notification id=\"notification\" closable position=\"bottom\" alignment=\"end\" close-timeout=\"2000\">\n    <h3 nve-text=\"label\">notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-button popovertarget=\"notification\">notification snackbar</nve-button>\n</div>\n",
       "summary": "Interactive showcase of all popover types (tooltip, toast, drawer, dropdown, dialog, notification) using modern popovertarget API.",
@@ -44,7 +44,7 @@
       "tags": []
     },
     {
-      "id": "core-internal-controllers-popover_legacy-interactive",
+      "id": "internal-controllers-popover-legacy-interactive",
       "name": "LegacyInteractive",
       "template": "<div nve-layout=\"row align:center gap:xl\" style=\"height: 300px\">\n  <nve-tooltip trigger=\"tooltip-btn\" behavior-trigger position=\"top\" hidden>hello there</nve-tooltip>\n  <nve-button id=\"tooltip-btn\">tooltip</nve-button>\n  <nve-button id=\"toast-btn\">toast</nve-button>\n  <nve-toast trigger=\"toast-btn\" behavior-trigger position=\"top\" close-timeout=\"1500\" hidden>copied!</nve-toast>\n  <nve-button id=\"drawer-btn\" size=\"sm\">drawer</nve-button>\n  <nve-drawer trigger=\"drawer-btn\" behavior-trigger hidden closable modal>\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Title</h3>\n    </nve-drawer-header>\n    <p nve-text=\"body\">some text content in a drawer</p>\n  </nve-drawer>\n  <nve-button id=\"dropdown-btn\">dropdown</nve-button>\n  <nve-dropdown trigger=\"dropdown-btn\" behavior-trigger closable hidden>\n    <h3 nve-text=\"heading\">Title</h3>\n    <p nve-text=\"body\">some text content in a dropdown</p>\n  </nve-dropdown>\n  <nve-button id=\"dialog-btn\">dialog</nve-button>\n  <nve-dialog trigger=\"dialog-btn\" behavior-trigger closable modal hidden>\n    <h3 nve-text=\"heading\">Title</h3>\n    <p nve-text=\"body\">some text content in a closable dialog</p>\n  </nve-dialog>\n  <nve-button id=\"notification-btn\">notification snackbar</nve-button>\n  <nve-notification\n    trigger=\"notification-btn\"\n    behavior-trigger\n    hidden\n    closable\n    position=\"bottom\"\n    alignment=\"end\"\n    close-timeout=\"2000\"\n  >\n    <h3 nve-text=\"label\">notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</div>\n",
       "summary": "Legacy implementation showing all popover types using the older trigger/behavior-trigger API for backward compatibility.",
@@ -56,7 +56,7 @@
       ]
     },
     {
-      "id": "core-internal-controllers-popover_closable",
+      "id": "internal-controllers-popover-closable",
       "name": "Closable",
       "template": "<nve-button popovertarget=\"popover\">open dialog</nve-button>\n<nve-dialog id=\"popover\" modal>\n  <p nve-text=\"body\">Press \"escape\" key to close.</p>\n</nve-dialog>\n",
       "summary": "Simple modal dialog with keyboard accessibility, including escape key to close functionality.",
@@ -67,7 +67,7 @@
       ]
     },
     {
-      "id": "core-internal-controllers-popover_invoker-command",
+      "id": "internal-controllers-popover-invoker-command",
       "name": "InvokerCommand",
       "template": "<nve-button commandfor=\"popover\" command=\"toggle-popover\">toggle-popover</nve-button>\n<nve-button commandfor=\"popover\" command=\"show-popover\">show-popover</nve-button>\n<nve-toggletip id=\"popover\">\n  toggletip\n  <nve-button commandfor=\"popover\" command=\"hide-popover\">hide-popover</nve-button>\n</nve-toggletip>\n",
       "summary": "example of declarative popovers using the Invoker Commands API",
@@ -76,7 +76,7 @@
       "tags": []
     },
     {
-      "id": "core-internal-controllers-popover_event-bubbling",
+      "id": "internal-controllers-popover-event-bubbling",
       "name": "EventBubbling",
       "template": "<div style=\"width: 100vw; height: 100vh\">\n  <p nve-text=\"body\" id=\"event-example\">event:</p>\n  <nve-button popovertarget=\"event-example-dialog\">open</nve-button>\n  <nve-dialog id=\"event-example-dialog\" closable modal (close)=\"close($event)\" (open)=\"open($event)\">\n    <nve-dialog-header>Header</nve-dialog-header>\n    <div>\n      <nve-button popovertarget=\"event-example-dropdown\">show dropdown</nve-button>\n    </div>\n    <nve-dropdown id=\"event-example-dropdown\"> dropdown content </nve-dropdown>\n  </nve-dialog>\n</div>\n<script type=\"module\">\n  const dialog = document.querySelector(\"#event-example-dialog\");\n  const eventLabel = document.querySelector(\"#event-example\");\n  // Custom events like many standard DOM events bubble. By listening to\n  // larger DOM trees check which element dispatched the source event\n  dialog.addEventListener(\"open\", (e) => {\n    eventLabel.innerText = \"open: \" + e.target.localName;\n  });\n  dialog.addEventListener(\"close\", (e) => {\n    eventLabel.innerText = \"close: \" + e.target.localName;\n  });\n</script>\n",
       "summary": "Custom events like many standard DOM events bubble. When listening to larger DOM trees, check which element dispatched the source event.",

package/dist/internal/controllers/type-button.controller.examples.json

@@ -2,7 +2,7 @@
   "entrypoint": "@nvidia-elements/core/internal/controllers/type-button.controller.examples.json",
   "items": [
     {
-      "id": "core-internal-controllers-type-button.controller_type-button-demo",
+      "id": "internal-controllers-type-button.controller-type-button-demo",
       "name": "TypeButtonDemo",
       "template": "<ui-button>button</ui-button>\n<ui-button pressed>pressed</ui-button>\n<ui-button expanded>expanded</ui-button>\n<ui-button selected>selected</ui-button>\n<ui-button disabled>disabled</ui-button>\n<ui-button><a href=\"#\">link</a></ui-button>\n<form id=\"type-button-demo-form\" style=\"display: inline-flex\">\n  <ui-button type=\"submit\">submit</ui-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#type-button-demo-form\");\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    alert(\"submit!\");\n  });\n</script>\n",
       "summary": "Custom button element using BaseButton with pressed, expanded, disabled, and link states.",

package/dist/internal/controllers/type-popover.controller.examples.json

@@ -2,7 +2,7 @@
   "entrypoint": "@nvidia-elements/core/internal/controllers/type-popover.controller.examples.json",
   "items": [
     {
-      "id": "core-internal-controllers-type-popover.controller_default",
+      "id": "internal-controllers-type-popover.controller",
       "name": "Default",
       "template": "<style>\n  #root-inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    width: 100%;\n    height: 100vh;\n  }\n</style>\n<ui-popover id=\"type-popover\">popover</ui-popover>\n<nve-button popovertarget=\"type-popover\">toggle</nve-button>\n",
       "summary": "Basic popover toggled by a button using the native popovertarget API.",
@@ -13,7 +13,7 @@
       ]
     },
     {
-      "id": "core-internal-controllers-type-popover.controller_alignment",
+      "id": "internal-controllers-type-popover.controller-alignment",
       "name": "Alignment",
       "template": "<nve-card id=\"card\" style=\"width: 450px; height: 300px\"></nve-card>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"top\" alignment=\"start\">top start</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"top\">top center</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"top\" alignment=\"end\">top end</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"right\" alignment=\"start\">right start</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"right\">right center</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"right\" alignment=\"end\">right end</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"bottom\" alignment=\"start\">bottom start</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"bottom\">bottom center</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"bottom\" alignment=\"end\">bottom end</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"left\" alignment=\"start\">left start</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"left\">left center</ui-popover>\n<ui-popover anchor=\"card\" popover-type=\"manual\" position=\"left\" alignment=\"end\">left end</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"center\">center</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"top\" alignment=\"start\">top start</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"top\">top center</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"top\" alignment=\"end\">top end</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"right\" alignment=\"start\">right start</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"right\">right center</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"right\" alignment=\"end\">right end</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"bottom\" alignment=\"start\">bottom start</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"bottom\">bottom center</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"bottom\" alignment=\"end\">bottom end</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"left\" alignment=\"start\">left start</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"left\">left center</ui-popover>\n<ui-popover popover-type=\"manual\" position=\"left\" alignment=\"end\">left end</ui-popover>\n",
       "summary": "Popover positioning and alignment options across all anchor and viewport placements.",