@nvidia-elements/core 2.20.1 → 2.20.3

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

@@ -1 +1 @@
-{"version":3,"file":"keynav-grid.controller.js","names":[],"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 { throttle } from '../utils/events.js';\nimport { GlobalStateService } from '@nvidia-elements/foundations/internal/state';\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 { focusElement, getActiveElement, setActiveKeyListItem, isSimpleFocusable } 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  #observer?: MutationObserver;\n  #grid?: HTMLElement;\n  #activeCell?: HTMLElement;\n  #cells = new WeakSet<HTMLElement>();\n  #updateCells = throttle(() => this.#initializeCells(), 500, { trailing: true });\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    const { columns, cells } = this.#config;\n    return [...Array.from(columns ?? []), ...Array.from(cells)];\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    if (!this.host.isConnected) return;\n\n    this.#grid = this.#config.grid;\n    this.#initializeCells();\n    this.#grid.addEventListener('keyup', this.#onKeyUp);\n    this.#grid.addEventListener('keydown', this.#onKeyDown);\n    this.#grid.addEventListener('mouseup', this.#onMouseUp);\n    this.#observer?.disconnect();\n    this.#observer = new MutationObserver(this.#onMutations);\n    this.#observer.observe(this.#grid, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['tabindex']\n    });\n  }\n\n  hostDisconnected() {\n    this.#observer?.disconnect();\n    this.#observer = undefined;\n    this.#updateCells.cancel();\n    this.#grid?.removeEventListener('keyup', this.#onKeyUp);\n    this.#grid?.removeEventListener('keydown', this.#onKeyDown);\n    this.#grid?.removeEventListener('mouseup', this.#onMouseUp);\n    this.#grid = undefined;\n    this.#activeCell = undefined;\n  }\n\n  #initializeCells() {\n    const cells = this.#hostCells;\n    const activeCell =\n      cells.find(cell => cell.tabIndex === 0) ??\n      (this.#activeCell && cells.includes(this.#activeCell) ? this.#activeCell : cells[0]);\n    this.#activeCell = activeCell;\n    this.#cells = new WeakSet(cells);\n    for (const cell of cells) {\n      const tabIndex = cell === activeCell ? '0' : '-1';\n      // Avoid observing our own unchanged writes after a DOM morph or key change.\n      if (cell.getAttribute('tabindex') !== tabIndex) {\n        cell.setAttribute('tabindex', tabIndex);\n      }\n    }\n  }\n\n  #onMutations = (mutations: MutationRecord[]) => {\n    const changed = mutations.some(mutation => {\n      if (mutation.type === 'attributes') {\n        const cell = mutation.target;\n        // Ignore nested controls and our own tabindex writes.\n        return (\n          cell instanceof HTMLElement &&\n          this.#cells.has(cell) &&\n          cell.getAttribute('tabindex') !== (cell === this.#activeCell ? '0' : '-1')\n        );\n      }\n      return [...mutation.addedNodes, ...mutation.removedNodes].some(node => node.nodeType === Node.ELEMENT_NODE);\n    });\n    if (changed) this.#updateCells();\n  };\n\n  #flushCellUpdates() {\n    // A key event can arrive before the observer delivers a synchronous DOM update.\n    this.#onMutations(this.#observer?.takeRecords() ?? []);\n    this.#updateCells.flush();\n  }\n\n  #onMouseUp = (e: MouseEvent) => {\n    if (!isContextMenuClick(e)) {\n      this.#flushCellUpdates();\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);\n      }\n    }\n  };\n\n  #onKeyDown = (e: KeyboardEvent) => {\n    if (!validKeyNavigationCode(e)) return;\n    this.#flushCellUpdates();\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 (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    this.#activeCell = activeCell;\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  #onKeyUp = (e: KeyboardEvent) => {\n    if (e.code !== 'Enter' && e.code !== 'Escape') return;\n    this.#flushCellUpdates();\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)[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":";;;;;;AAiCA,SAAgB,IAAmF;CACjG,QAAQ,MACN,EAAO,gBAAiB,MAAgB,IAAI,EAA4B,CAAQ,CAAC;AACrF;AAEA,IAAa,IAAb,MAAsH;CACpH;CACA;CACA;CACA,qBAAS,IAAI,QAAqB;CAClC,KAAe,QAAe,KAAK,GAAiB,GAAG,KAAK,EAAE,UAAU,GAAK,CAAC;CAE9E,IAAI,KAAU;EACZ,OAAO;GACL,MAAM,KAAK;GACX,GAAG,KAAK,KAAK;EACf;CACF;CAEA,IAAI,KAAY;EACd,IAAM,IAAO,MAAM,KAAK,KAAK,GAAQ,IAAI;EAMzC,OAJI,KAAK,GAAQ,aACf,EAAK,QAAQ,KAAK,GAAQ,SAAS,GAG9B;CACT;CAEA,IAAI,KAAa;EACf,IAAM,EAAE,YAAS,aAAU,KAAK;EAChC,OAAO,CAAC,GAAG,MAAM,KAAK,KAAW,CAAC,CAAC,GAAG,GAAG,MAAM,KAAK,CAAK,CAAC;CAC5D;CAEA,YAAY,GAAiB;EAC3B,AADkB,KAAA,OAAA,GAClB,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,MAAM,gBAAgB;EACpB,MAAM,KAAK,KAAK,gBACX,KAAK,KAAK,gBAEf,KAAK,KAAQ,KAAK,GAAQ,MAC1B,KAAK,GAAiB,GACtB,KAAK,GAAM,iBAAiB,SAAS,KAAK,EAAQ,GAClD,KAAK,GAAM,iBAAiB,WAAW,KAAK,EAAU,GACtD,KAAK,GAAM,iBAAiB,WAAW,KAAK,EAAU,GACtD,KAAK,IAAW,WAAW,GAC3B,KAAK,KAAY,IAAI,iBAAiB,KAAK,EAAY,GACvD,KAAK,GAAU,QAAQ,KAAK,IAAO;GACjC,WAAW;GACX,SAAS;GACT,YAAY;GACZ,iBAAiB,CAAC,UAAU;EAC9B,CAAC;CACH;CAEA,mBAAmB;EAQjB,AAPA,KAAK,IAAW,WAAW,GAC3B,KAAK,KAAY,KAAA,GACjB,KAAK,GAAa,OAAO,GACzB,KAAK,IAAO,oBAAoB,SAAS,KAAK,EAAQ,GACtD,KAAK,IAAO,oBAAoB,WAAW,KAAK,EAAU,GAC1D,KAAK,IAAO,oBAAoB,WAAW,KAAK,EAAU,GAC1D,KAAK,KAAQ,KAAA,GACb,KAAK,KAAc,KAAA;CACrB;CAEA,KAAmB;EACjB,IAAM,IAAQ,KAAK,IACb,IACJ,EAAM,MAAK,MAAQ,EAAK,aAAa,CAAC,MACrC,KAAK,MAAe,EAAM,SAAS,KAAK,EAAW,IAAI,KAAK,KAAc,EAAM;EAEnF,AADA,KAAK,KAAc,GACnB,KAAK,KAAS,IAAI,QAAQ,CAAK;EAC/B,KAAK,IAAM,KAAQ,GAAO;GACxB,IAAM,IAAW,MAAS,IAAa,MAAM;GAE7C,AAAI,EAAK,aAAa,UAAU,MAAM,KACpC,EAAK,aAAa,YAAY,CAAQ;EAE1C;CACF;CAEA,MAAgB,MAAgC;EAa9C,AAZgB,EAAU,MAAK,MAAY;GACzC,IAAI,EAAS,SAAS,cAAc;IAClC,IAAM,IAAO,EAAS;IAEtB,OACE,aAAgB,eAChB,KAAK,GAAO,IAAI,CAAI,KACpB,EAAK,aAAa,UAAU,OAAO,MAAS,KAAK,KAAc,MAAM;GAEzE;GACA,OAAO,CAAC,GAAG,EAAS,YAAY,GAAG,EAAS,YAAY,CAAC,CAAC,MAAK,MAAQ,EAAK,aAAa,KAAK,YAAY;EAC5G,CACI,KAAS,KAAK,GAAa;CACjC;CAEA,KAAoB;EAGlB,AADA,KAAK,GAAa,KAAK,IAAW,YAAY,KAAK,CAAC,CAAC,GACrD,KAAK,GAAa,MAAM;CAC1B;CAEA,MAAc,MAAkB;EAC9B,IAAI,CAAC,EAAmB,CAAC,GAAG;GAC1B,KAAK,GAAkB;GACvB,IAAM,IAAiB,EAAE,aAAa,CAAC,CAAC,IAClC,IAAa,KAAK,GAAW,MAAK,MAAK,MAAM,CAAc,IAAI,IAAiB;GACtF,AAAI,KACF,KAAK,GAAe,GAAG,CAAU;EAErC;CACF;CAEA,MAAc,MAAqB;EACjC,IAAI,CAAC,EAAuB,CAAC,GAAG;EAChC,KAAK,GAAkB;EACvB,IAAM,IAAO,MAAM,KAAK,KAAK,EAAS,GAChC,IAAQ,MAAM,KAAK,KAAK,EAAU;EAExC,IAAI,EAAmB,MAAM,QAAQ,gBAAgB,EAAkB,CAAI,GAAG;GAC5E,EAAW,KAAK,qEAAqE;GACrF;EACF;EAEA,IAAI,EAAkB,EAAiB,CAAY,GAAG;GACpD,IAAM,EAAE,MAAG,SAAM,EAAmB,GAAO,GAAM;IAC/C,MAAM,EAAE;IACR,SAAS,EAAE;IACX,KAAK,KAAK,KAAK;GACjB,CAAC,GAEK,IAAW,MAAM,KAAK,EAAoB,EAAK,EAAG,CAAC,CAAC,CAAC,QAAO,MAAK,CAAC,CAAC,EAAM,MAAK,MAAK,MAAM,CAAC,CAAC,CAAC,CAChG;GAGF,AADA,KAAK,GAAe,GAAG,CAAQ,GAC/B,EAAE,eAAe;EACnB;CACF;CAEA,GAAe,GAA+B,GAAyB;EAErE,AADA,KAAK,KAAc,GACnB,EAAqB,KAAK,IAAY,CAAU;EAEhD,IAAM,IAAQ,EAA2B,CAAU,GAC7C,IAAc,EAAM,QAAO,MAAK,EAAkB,CAAC,CAAC;EAE1D,AAAI,EAAY,WAAW,KAAK,EAAM,WAAW,IAC/C,EAAa,EAAY,EAAG,IAE5B,EAAa,CAAU;EAGzB,IAAM,IAAS;GAAE,MAAM,aAAa,gBAAgB,EAAE,OAAO;GAAM,UAAU,EAAE;GAAU,YAAY;EAAW;EAChH,EAAW,cAAc,IAAI,YAAY,kBAAkB;GAAE,SAAS;GAAM,UAAU;GAAM;EAAO,CAAC,CAAC;CACvG;CAEA,MAAY,MAAqB;EAC/B,IAAI,EAAE,SAAS,WAAW,EAAE,SAAS,UAAU;EAC/C,KAAK,GAAkB;EACvB,IAAM,IAAa,MAAM,KAAK,KAAK,EAAU,CAAC,CAAC,MAAK,MAAK,EAAE,aAAa,CAAC;EAKzE,AAJI,EAAE,SAAS,YACb,GAAY,MAAM,GAGhB,EAAE,SAAS,WAAW,MAAe,EAAE,aAAa,CAAC,CAAC,MACxD,EAA2B,CAAU,CAAC,CAAC,EAAE,EAAE,MAAM;CAErD;AACF;AAEA,SAAS,EAAa,GAA2B,GAAgD;CAC/F,IAAM,IAAQ,MAAQ,QAAQ,EAAW,aAAa,EAAW,WAC3D,IAAM,MAAQ,QAAQ,EAAW,YAAY,EAAW;CAQ9D,OANI,MAAS,EAAW,UAAgB;EAAE,IAAI;EAAG,IAAI;CAAG,IACpD,MAAS,EAAW,YAAkB;EAAE,IAAI;EAAG,IAAI;CAAE,IACrD,MAAS,IAAc;EAAE,IAAI;EAAI,IAAI;CAAE,IACvC,MAAS,IAAY;EAAE,IAAI;EAAG,IAAI;CAAE,IACpC,MAAS,EAAW,SAAe;EAAE,IAAI;EAAG,IAAI;CAAG,IACnD,MAAS,EAAW,WAAiB;EAAE,IAAI;EAAG,IAAI;CAAE,IACjD;AACT;AAEA,SAAS,EACP,GACA,GACA,GACA;CACA,IAAM,EAAE,MAAG,SAAM,GACX,EAAE,gBAAa,aAAU,eAAY;CAS3C,OARI,MAAS,EAAW,MACf;EAAE,GAAG;EAAa,GAAG,IAAU,IAAW;CAAE,IAGjD,MAAS,EAAW,OACf;EAAE,GAAG;EAAG,GAAG,IAAU,IAAI;CAAE,IAG7B;EAAE;EAAG;CAAE;AAChB;AAEA,SAAgB,EACd,GACA,GACA,GACA;CACA,IAAM,IAAc,EAAM,MAAK,MAAK,EAAE,aAAa,CAAC,GAC9C,IAAa,EAAK,MAAK,MAAK,EAAoB,CAAC,CAAC,CAAC,MAAK,MAAK,MAAM,CAAW,CAAC,GAC/E,IAAkB,MAAM,KAAK,EAAoB,CAAU,CAAC,CAAC,CAAC,QAAO,MAAK,CAAC,CAAC,EAAM,MAAK,MAAK,MAAM,CAAC,CAAC,GACpG,IAAW,EAAK,SAAS,GACzB,IAAc,EAAgB,SAAS,GAEzC,IAAI,EAAgB,QAAQ,CAAW,GACvC,IAAI,EAAK,QAAQ,CAAU,GAEzB,IAAQ,EAAa,EAAO,MAAM,EAAO,GAAG;CAQlD,OAPI,KACF,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAa,IAAI,EAAM,EAAE,CAAC,GACnD,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAU,IAAI,EAAM,EAAE,CAAC,KAE/C,eAAW,EAAiB,EAAO,MAAM;EAAE;EAAG;CAAE,GAAG;EAAE;EAAa;EAAU,SAAS,EAAO;CAAQ,CAAC,GAGjG;EAAE;EAAG;CAAE;AAChB"}
+{"version":3,"file":"keynav-grid.controller.js","names":["keyNavigationGrid","target","KeyNavigationGridController","instance","throttle","#initializeCells","#config","#hostRows","rows","#hostCells","columns","cells","host","#grid","#onKeyUp","#onKeyDown","#onMouseUp","#observer","#onMutations","#updateCells","#activeCell","activeCell","cell","#cells","tabIndex","mutations","mutation","node","isContextMenuClick","#flushCellUpdates","focusedElement","i","#setActiveCell","validKeyNavigationCode","e","GlobalStateService","hasInvalidDOMGrid","isSimpleFocusable","getActiveElement","getNextKeyGridItem","nextCell","getFlattenedDOMTree","y","c","x","setActiveKeyListItem","items","getFlattenedFocusableItems","simpleItems","focusElement","detail","getGridDelta","start","dir","KeynavCode","end","code","applyGridHomeEnd","position","bounds","columnCount","ctrlKey","rowCount","currentCell","currentRow","r","currentRowCells","delta","config"],"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 { throttle } from '../utils/events.js';\nimport { GlobalStateService } from '@nvidia-elements/foundations/internal/state';\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 { focusElement, getActiveElement, setActiveKeyListItem, isSimpleFocusable } 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  #observer?: MutationObserver;\n  #grid?: HTMLElement;\n  #activeCell?: HTMLElement;\n  #cells = new WeakSet<HTMLElement>();\n  #updateCells = throttle(() => this.#initializeCells(), 500, { trailing: true });\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    const { columns, cells } = this.#config;\n    return [...Array.from(columns ?? []), ...Array.from(cells)];\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    if (!this.host.isConnected) return;\n\n    this.#grid = this.#config.grid;\n    this.#initializeCells();\n    this.#grid.addEventListener('keyup', this.#onKeyUp);\n    this.#grid.addEventListener('keydown', this.#onKeyDown);\n    this.#grid.addEventListener('mouseup', this.#onMouseUp);\n    this.#observer?.disconnect();\n    this.#observer = new MutationObserver(this.#onMutations);\n    this.#observer.observe(this.#grid, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['tabindex']\n    });\n  }\n\n  hostDisconnected() {\n    this.#observer?.disconnect();\n    this.#observer = undefined;\n    this.#updateCells.cancel();\n    this.#grid?.removeEventListener('keyup', this.#onKeyUp);\n    this.#grid?.removeEventListener('keydown', this.#onKeyDown);\n    this.#grid?.removeEventListener('mouseup', this.#onMouseUp);\n    this.#grid = undefined;\n    this.#activeCell = undefined;\n  }\n\n  #initializeCells() {\n    const cells = this.#hostCells;\n    const activeCell =\n      cells.find(cell => cell.tabIndex === 0) ??\n      (this.#activeCell && cells.includes(this.#activeCell) ? this.#activeCell : cells[0]);\n    this.#activeCell = activeCell;\n    this.#cells = new WeakSet(cells);\n    for (const cell of cells) {\n      const tabIndex = cell === activeCell ? '0' : '-1';\n      // Avoid observing our own unchanged writes after a DOM morph or key change.\n      if (cell.getAttribute('tabindex') !== tabIndex) {\n        cell.setAttribute('tabindex', tabIndex);\n      }\n    }\n  }\n\n  #onMutations = (mutations: MutationRecord[]) => {\n    const changed = mutations.some(mutation => {\n      if (mutation.type === 'attributes') {\n        const cell = mutation.target;\n        // Ignore nested controls and our own tabindex writes.\n        return (\n          cell instanceof HTMLElement &&\n          this.#cells.has(cell) &&\n          cell.getAttribute('tabindex') !== (cell === this.#activeCell ? '0' : '-1')\n        );\n      }\n      return [...mutation.addedNodes, ...mutation.removedNodes].some(node => node.nodeType === Node.ELEMENT_NODE);\n    });\n    if (changed) this.#updateCells();\n  };\n\n  #flushCellUpdates() {\n    // A key event can arrive before the observer delivers a synchronous DOM update.\n    this.#onMutations(this.#observer?.takeRecords() ?? []);\n    this.#updateCells.flush();\n  }\n\n  #onMouseUp = (e: MouseEvent) => {\n    if (!isContextMenuClick(e)) {\n      this.#flushCellUpdates();\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);\n      }\n    }\n  };\n\n  #onKeyDown = (e: KeyboardEvent) => {\n    if (!validKeyNavigationCode(e)) return;\n    this.#flushCellUpdates();\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 (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    this.#activeCell = activeCell;\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  #onKeyUp = (e: KeyboardEvent) => {\n    if (e.code !== 'Enter' && e.code !== 'Escape') return;\n    this.#flushCellUpdates();\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)[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.js

@@ -1,6 +1,5 @@
-//#region src/internal/controllers/keynav-list.controller.examples.ts
+// src/internal/controllers/keynav-list.controller.examples.ts
 var e = "";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=keynav-list.controller.examples.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"keynav-list.controller.examples.js","names":[],"sources":["../../../src/internal/controllers/keynav-list.controller.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { css, html, LitElement } from 'lit';\nimport { state } from 'lit/decorators/state.js';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport { keyNavigationList } from '@nvidia-elements/core/internal';\n\nexport default {\n  title: 'Internal/Controllers'\n}\n\nconst styles = css`\n  section {\n    display: grid;\n    gap: 4px;\n    grid-template-columns: repeat(10, 50px);\n  }\n\n  .vertical {\n    grid-template-rows: repeat(10, 1fr);\n    grid-template-columns: 50px;\n  }\n\n  .row {\n    display: contents;\n  }\n\n  button {\n    width: 100%;\n    height: 30px;\n    min-width: 30px;\n    display: block;\n  }\n\n  button[selected] {\n    background: green;\n    color: white;\n  }\n`;\n\n@keyNavigationList<DemoKeyNavigationList>()\nclass DemoKeyNavigationList extends LitElement {\n  get keynavListConfig() {\n    return {\n      items: this.shadowRoot.querySelectorAll<HTMLElement>('button')\n    }\n  }\n\n  @state() private selected = '0';\n  @state() private active = '';\n\n  static styles = [styles];\n\n  render() {\n    return html`\n      <p nve-text=\"body\">Selected: ${this.selected}</p>\n      <p nve-text=\"body\">Active: ${this.active}</p>\n      <section @nve-key-change=${e => (this.active = e.detail.activeItem.textContent)}>\n        ${Array.from(Array(10).keys()).map(i => html`<div>\n          <button ?selected=${this.selected === `${i}`} @click=${e => (this.selected = e.target.innerText)}>${i}</button>\n        </div>`)}\n      </section>`;\n  }\n}\ncustomElements.get('demo-key-navigation-list') || customElements.define('demo-key-navigation-list', DemoKeyNavigationList);\n\n/**\n * @summary Horizontal list keyboard navigation controller with arrow key support.\n * @tags test-case\n */\nexport const ListDemo = {\n  render: () => html`<demo-key-navigation-list></demo-key-navigation-list>`\n};\n\n@keyNavigationList<DemoKeyNavigationListVertical>()\nclass DemoKeyNavigationListVertical extends LitElement {\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      layout: 'vertical',\n      items: this.shadowRoot.querySelectorAll<HTMLElement>('button')\n    }\n  }\n\n  @state() private selected = '0';\n  @state() private active = '';\n\n  static styles = [styles];\n\n  render() {\n    return html`\n      <p nve-text=\"body\">Selected: ${this.selected}</p>\n      <p nve-text=\"body\">Active: ${this.active}</p>\n      <section class=\"vertical\" @nve-key-change=${e => (this.active = e.detail.activeItem.textContent)}>\n        ${Array.from(Array(10).keys()).map(i => html`<div>\n          <button ?selected=${this.selected === `${i}`} @click=${e => (this.selected = e.target.innerText)}>${i}</button>\n        </div>`)}\n      </section>\n    `;\n  }\n}\ncustomElements.get('demo-key-navigation-list-vertical') || customElements.define('demo-key-navigation-list-vertical', DemoKeyNavigationListVertical);\n\n/**\n * @summary Vertical list keyboard navigation controller with up and down arrow key support.\n * @tags test-case\n */\nexport const VerticalDemo = {\n  render: () => html`<demo-key-navigation-list-vertical></demo-key-navigation-list-vertical>`\n};\n\n@keyNavigationList<DemoKeyNavigationListLoop>()\nclass DemoKeyNavigationListLoop extends LitElement {\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      loop: true,\n      layout: 'vertical',\n      items: this.shadowRoot.querySelectorAll<HTMLElement>('button')\n    }\n  }\n\n  @state() private selected = '0';\n  @state() private active = '';\n\n  static styles = [styles];\n\n  render() {\n    return html`\n      <p nve-text=\"body\">Selected: ${this.selected}</p>\n      <p nve-text=\"body\">Active: ${this.active}</p>\n      <section class=\"vertical\" @nve-key-change=${e => (this.active = e.detail.activeItem.textContent)}>\n        ${Array.from(Array(10).keys()).map(i => html`<div>\n          <button ?selected=${this.selected === `${i}`} @click=${e => (this.selected = e.target.innerText)}>${i}</button>\n        </div>`)}\n      </section>`;\n  }\n}\ncustomElements.get('demo-key-navigation-list-loop') || customElements.define('demo-key-navigation-list-loop', DemoKeyNavigationListLoop);\n\n/**\n * @summary Vertical list keyboard navigation with looping enabled to wrap from last item to first.\n * @tags test-case\n */\nexport const LoopDemo = {\n  render: () => html`<demo-key-navigation-list-loop></demo-key-navigation-list-loop>`\n};\n"],"mappings":";AAGA,IAAA,IAAc"}
+{"version":3,"file":"keynav-list.controller.examples.js","names":["keynav_list_controller_examples_default"],"sources":["../../../src/internal/controllers/keynav-list.controller.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { css, html, LitElement } from 'lit';\nimport { state } from 'lit/decorators/state.js';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport { keyNavigationList } from '@nvidia-elements/core/internal';\n\nexport default {\n  title: 'Internal/Controllers'\n}\n\nconst styles = css`\n  section {\n    display: grid;\n    gap: 4px;\n    grid-template-columns: repeat(10, 50px);\n  }\n\n  .vertical {\n    grid-template-rows: repeat(10, 1fr);\n    grid-template-columns: 50px;\n  }\n\n  .row {\n    display: contents;\n  }\n\n  button {\n    width: 100%;\n    height: 30px;\n    min-width: 30px;\n    display: block;\n  }\n\n  button[selected] {\n    background: green;\n    color: white;\n  }\n`;\n\n@keyNavigationList<DemoKeyNavigationList>()\nclass DemoKeyNavigationList extends LitElement {\n  get keynavListConfig() {\n    return {\n      items: this.shadowRoot.querySelectorAll<HTMLElement>('button')\n    }\n  }\n\n  @state() private selected = '0';\n  @state() private active = '';\n\n  static styles = [styles];\n\n  render() {\n    return html`\n      <p nve-text=\"body\">Selected: ${this.selected}</p>\n      <p nve-text=\"body\">Active: ${this.active}</p>\n      <section @nve-key-change=${e => (this.active = e.detail.activeItem.textContent)}>\n        ${Array.from(Array(10).keys()).map(i => html`<div>\n          <button ?selected=${this.selected === `${i}`} @click=${e => (this.selected = e.target.innerText)}>${i}</button>\n        </div>`)}\n      </section>`;\n  }\n}\ncustomElements.get('demo-key-navigation-list') || customElements.define('demo-key-navigation-list', DemoKeyNavigationList);\n\n/**\n * @summary Horizontal list keyboard navigation controller with arrow key support.\n * @tags test-case\n */\nexport const ListDemo = {\n  render: () => html`<demo-key-navigation-list></demo-key-navigation-list>`\n};\n\n@keyNavigationList<DemoKeyNavigationListVertical>()\nclass DemoKeyNavigationListVertical extends LitElement {\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      layout: 'vertical',\n      items: this.shadowRoot.querySelectorAll<HTMLElement>('button')\n    }\n  }\n\n  @state() private selected = '0';\n  @state() private active = '';\n\n  static styles = [styles];\n\n  render() {\n    return html`\n      <p nve-text=\"body\">Selected: ${this.selected}</p>\n      <p nve-text=\"body\">Active: ${this.active}</p>\n      <section class=\"vertical\" @nve-key-change=${e => (this.active = e.detail.activeItem.textContent)}>\n        ${Array.from(Array(10).keys()).map(i => html`<div>\n          <button ?selected=${this.selected === `${i}`} @click=${e => (this.selected = e.target.innerText)}>${i}</button>\n        </div>`)}\n      </section>\n    `;\n  }\n}\ncustomElements.get('demo-key-navigation-list-vertical') || customElements.define('demo-key-navigation-list-vertical', DemoKeyNavigationListVertical);\n\n/**\n * @summary Vertical list keyboard navigation controller with up and down arrow key support.\n * @tags test-case\n */\nexport const VerticalDemo = {\n  render: () => html`<demo-key-navigation-list-vertical></demo-key-navigation-list-vertical>`\n};\n\n@keyNavigationList<DemoKeyNavigationListLoop>()\nclass DemoKeyNavigationListLoop extends LitElement {\n  get keynavListConfig(): KeynavListConfig {\n    return {\n      loop: true,\n      layout: 'vertical',\n      items: this.shadowRoot.querySelectorAll<HTMLElement>('button')\n    }\n  }\n\n  @state() private selected = '0';\n  @state() private active = '';\n\n  static styles = [styles];\n\n  render() {\n    return html`\n      <p nve-text=\"body\">Selected: ${this.selected}</p>\n      <p nve-text=\"body\">Active: ${this.active}</p>\n      <section class=\"vertical\" @nve-key-change=${e => (this.active = e.detail.activeItem.textContent)}>\n        ${Array.from(Array(10).keys()).map(i => html`<div>\n          <button ?selected=${this.selected === `${i}`} @click=${e => (this.selected = e.target.innerText)}>${i}</button>\n        </div>`)}\n      </section>`;\n  }\n}\ncustomElements.get('demo-key-navigation-list-loop') || customElements.define('demo-key-navigation-list-loop', DemoKeyNavigationListLoop);\n\n/**\n * @summary Vertical list keyboard navigation with looping enabled to wrap from last item to first.\n * @tags test-case\n */\nexport const LoopDemo = {\n  render: () => html`<demo-key-navigation-list-loop></demo-key-navigation-list-loop>`\n};\n"],"mappings":";AAGA,IAAAA,IAAc"}

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

@@ -1,6 +1,6 @@
 import { focusElement as e, initializeKeyListItems as t, isFocusable as n, setActiveKeyListItem as r } from "../utils/focus.js";
 import { KeynavCode as i, validKeyNavigationCode as a } from "../utils/dom.js";
-//#region src/internal/controllers/keynav-list.controller.ts
+// src/internal/controllers/keynav-list.controller.ts
 function o() {
 	return (e) => e.addInitializer((e) => new s(e));
 }
@@ -31,7 +31,7 @@ var s = class {
 	refreshItems(e) {
 		let { manageFocus: t, manageTabindex: n, items: r, initialItem: i } = this.#e;
 		if (!t || !n || this.#t) return;
-		let a = r.find((t) => e.includes(t) && t.tabIndex === 0) ?? (i && r.includes(i) ? i : r[0]);
+		let a = r.find((e) => e.matches(":focus-within")) ?? r.find((t) => e.includes(t) && t.tabIndex === 0) ?? (i && r.includes(i) ? i : r[0]);
 		Array.from(this.host.keynavListConfig.items).forEach((e) => {
 			e.tabIndex = e === a ? 0 : -1;
 		});
@@ -135,7 +135,6 @@ function d(e, t, n) {
 		previous: i
 	};
 }
-//#endregion
 export { s as KeyNavigationListController, d as getNextKeyListItem, o as keyNavigationList };
 
 //# sourceMappingURL=keynav-list.controller.js.map

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

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

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

@@ -1,4 +1,4 @@
-//#region src/internal/controllers/keynav-spatial.controller.ts
+// src/internal/controllers/keynav-spatial.controller.ts
 var e = class {
 	#e;
 	#t;
@@ -70,7 +70,6 @@ function t(e) {
 		default: return;
 	}
 }
-//#endregion
 export { e as KeyNavigationSpatialController };
 
 //# sourceMappingURL=keynav-spatial.controller.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"keynav-spatial.controller.js","names":[],"sources":["../../../src/internal/controllers/keynav-spatial.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, ReactiveControllerHost } from 'lit';\n\ntype SpatialKeyHost = ReactiveControllerHost & HTMLElement;\n\nexport type SpatialKeyHandling = 'handled' | 'ignored';\n\nexport interface KeyNavigationSpatialControllerOptions {\n  readonly isEnabled?: () => boolean;\n}\n\nexport type SpatialKeyCommand =\n  | {\n      readonly ctrlKey: boolean;\n      readonly event: KeyboardEvent;\n      readonly kind: 'direction';\n      readonly horizontal: -1 | 0 | 1;\n      readonly key: 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'ArrowUp';\n      readonly shiftKey: boolean;\n      readonly vertical: -1 | 0 | 1;\n    }\n  | {\n      readonly event: KeyboardEvent;\n      readonly kind: 'zoom';\n      readonly key: '+' | '-' | '=';\n    };\n\n/** Converts direct-host keyboard input into spatial direction and zoom commands. */\nexport class KeyNavigationSpatialController implements ReactiveController {\n  readonly #host: SpatialKeyHost;\n  readonly #isEnabled: () => boolean;\n\n  constructor(host: SpatialKeyHost, { isEnabled = () => true }: KeyNavigationSpatialControllerOptions = {}) {\n    this.#host = host;\n    this.#isEnabled = isEnabled;\n    host.addController(this);\n  }\n\n  hostConnected(): void {\n    this.#host.addEventListener('keydown', this.#handleKeydown);\n  }\n\n  hostDisconnected(): void {\n    this.#host.removeEventListener('keydown', this.#handleKeydown);\n  }\n\n  #handleKeydown = (event: KeyboardEvent): void => {\n    if (!this.#isEnabled() || event.composedPath()[0] !== this.#host) return;\n    const command = getSpatialKeyCommand(event);\n    if (!command) return;\n    this.#host.dispatchEvent(\n      new CustomEvent<SpatialKeyCommand>('nve-key', {\n        bubbles: false,\n        cancelable: false,\n        composed: false,\n        detail: command\n      })\n    );\n  };\n}\n\nfunction getSpatialKeyCommand(event: KeyboardEvent): SpatialKeyCommand | undefined {\n  switch (event.key) {\n    case 'ArrowDown':\n      return {\n        ctrlKey: event.ctrlKey,\n        event,\n        horizontal: 0,\n        key: event.key,\n        kind: 'direction',\n        shiftKey: event.shiftKey,\n        vertical: -1\n      };\n    case 'ArrowLeft':\n      return {\n        ctrlKey: event.ctrlKey,\n        event,\n        horizontal: -1,\n        key: event.key,\n        kind: 'direction',\n        shiftKey: event.shiftKey,\n        vertical: 0\n      };\n    case 'ArrowRight':\n      return {\n        ctrlKey: event.ctrlKey,\n        event,\n        horizontal: 1,\n        key: event.key,\n        kind: 'direction',\n        shiftKey: event.shiftKey,\n        vertical: 0\n      };\n    case 'ArrowUp':\n      return {\n        ctrlKey: event.ctrlKey,\n        event,\n        horizontal: 0,\n        key: event.key,\n        kind: 'direction',\n        shiftKey: event.shiftKey,\n        vertical: 1\n      };\n    case '+':\n    case '-':\n    case '=':\n      return { event, key: event.key, kind: 'zoom' };\n    default:\n      return undefined;\n  }\n}\n"],"mappings":";AA8BA,IAAa,IAAb,MAA0E;CACxE;CACA;CAEA,YAAY,GAAsB,EAAE,qBAAkB,OAAgD,CAAC,GAAG;EAGxG,AAFA,KAAK,KAAQ,GACb,KAAK,KAAa,GAClB,EAAK,cAAc,IAAI;CACzB;CAEA,gBAAsB;EACpB,KAAK,GAAM,iBAAiB,WAAW,KAAK,EAAc;CAC5D;CAEA,mBAAyB;EACvB,KAAK,GAAM,oBAAoB,WAAW,KAAK,EAAc;CAC/D;CAEA,MAAkB,MAA+B;EAC/C,IAAI,CAAC,KAAK,GAAW,KAAK,EAAM,aAAa,CAAC,CAAC,OAAO,KAAK,IAAO;EAClE,IAAM,IAAU,EAAqB,CAAK;EACrC,KACL,KAAK,GAAM,cACT,IAAI,YAA+B,WAAW;GAC5C,SAAS;GACT,YAAY;GACZ,UAAU;GACV,QAAQ;EACV,CAAC,CACH;CACF;AACF;AAEA,SAAS,EAAqB,GAAqD;CACjF,QAAQ,EAAM,KAAd;EACE,KAAK,aACH,OAAO;GACL,SAAS,EAAM;GACf;GACA,YAAY;GACZ,KAAK,EAAM;GACX,MAAM;GACN,UAAU,EAAM;GAChB,UAAU;EACZ;EACF,KAAK,aACH,OAAO;GACL,SAAS,EAAM;GACf;GACA,YAAY;GACZ,KAAK,EAAM;GACX,MAAM;GACN,UAAU,EAAM;GAChB,UAAU;EACZ;EACF,KAAK,cACH,OAAO;GACL,SAAS,EAAM;GACf;GACA,YAAY;GACZ,KAAK,EAAM;GACX,MAAM;GACN,UAAU,EAAM;GAChB,UAAU;EACZ;EACF,KAAK,WACH,OAAO;GACL,SAAS,EAAM;GACf;GACA,YAAY;GACZ,KAAK,EAAM;GACX,MAAM;GACN,UAAU,EAAM;GAChB,UAAU;EACZ;EACF,KAAK;EACL,KAAK;EACL,KAAK,KACH,OAAO;GAAE;GAAO,KAAK,EAAM;GAAK,MAAM;EAAO;EAC/C,SACE;CACJ;AACF"}
+{"version":3,"file":"keynav-spatial.controller.js","names":["KeyNavigationSpatialController","#host","host","#isEnabled","isEnabled","#handleKeydown","event","command","getSpatialKeyCommand"],"sources":["../../../src/internal/controllers/keynav-spatial.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, ReactiveControllerHost } from 'lit';\n\ntype SpatialKeyHost = ReactiveControllerHost & HTMLElement;\n\nexport type SpatialKeyHandling = 'handled' | 'ignored';\n\nexport interface KeyNavigationSpatialControllerOptions {\n  readonly isEnabled?: () => boolean;\n}\n\nexport type SpatialKeyCommand =\n  | {\n      readonly ctrlKey: boolean;\n      readonly event: KeyboardEvent;\n      readonly kind: 'direction';\n      readonly horizontal: -1 | 0 | 1;\n      readonly key: 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'ArrowUp';\n      readonly shiftKey: boolean;\n      readonly vertical: -1 | 0 | 1;\n    }\n  | {\n      readonly event: KeyboardEvent;\n      readonly kind: 'zoom';\n      readonly key: '+' | '-' | '=';\n    };\n\n/** Converts direct-host keyboard input into spatial direction and zoom commands. */\nexport class KeyNavigationSpatialController implements ReactiveController {\n  readonly #host: SpatialKeyHost;\n  readonly #isEnabled: () => boolean;\n\n  constructor(host: SpatialKeyHost, { isEnabled = () => true }: KeyNavigationSpatialControllerOptions = {}) {\n    this.#host = host;\n    this.#isEnabled = isEnabled;\n    host.addController(this);\n  }\n\n  hostConnected(): void {\n    this.#host.addEventListener('keydown', this.#handleKeydown);\n  }\n\n  hostDisconnected(): void {\n    this.#host.removeEventListener('keydown', this.#handleKeydown);\n  }\n\n  #handleKeydown = (event: KeyboardEvent): void => {\n    if (!this.#isEnabled() || event.composedPath()[0] !== this.#host) return;\n    const command = getSpatialKeyCommand(event);\n    if (!command) return;\n    this.#host.dispatchEvent(\n      new CustomEvent<SpatialKeyCommand>('nve-key', {\n        bubbles: false,\n        cancelable: false,\n        composed: false,\n        detail: command\n      })\n    );\n  };\n}\n\nfunction getSpatialKeyCommand(event: KeyboardEvent): SpatialKeyCommand | undefined {\n  switch (event.key) {\n    case 'ArrowDown':\n      return {\n        ctrlKey: event.ctrlKey,\n        event,\n        horizontal: 0,\n        key: event.key,\n        kind: 'direction',\n        shiftKey: event.shiftKey,\n        vertical: -1\n      };\n    case 'ArrowLeft':\n      return {\n        ctrlKey: event.ctrlKey,\n        event,\n        horizontal: -1,\n        key: event.key,\n        kind: 'direction',\n        shiftKey: event.shiftKey,\n        vertical: 0\n      };\n    case 'ArrowRight':\n      return {\n        ctrlKey: event.ctrlKey,\n        event,\n        horizontal: 1,\n        key: event.key,\n        kind: 'direction',\n        shiftKey: event.shiftKey,\n        vertical: 0\n      };\n    case 'ArrowUp':\n      return {\n        ctrlKey: event.ctrlKey,\n        event,\n        horizontal: 0,\n        key: event.key,\n        kind: 'direction',\n        shiftKey: event.shiftKey,\n        vertical: 1\n      };\n    case '+':\n    case '-':\n    case '=':\n      return { event, key: event.key, kind: 'zoom' };\n    default:\n      return undefined;\n  }\n}\n"],"mappings":";AA8BA,IAAaA,IAAb,MAA0E;CACxE;CACA;CAEA,YAAY,GAAsB,EAAE,qBAAkB,OAAgD,CAAC,GAAG;EAGxG,AAFA,KAAKC,KAAQC,GACb,KAAKC,KAAaC,GAClBF,EAAK,cAAc,IAAI;CACzB;CAEA,gBAAsB;EACpB,KAAKD,GAAM,iBAAiB,WAAW,KAAKI,EAAc;CAC5D;CAEA,mBAAyB;EACvB,KAAKJ,GAAM,oBAAoB,WAAW,KAAKI,EAAc;CAC/D;CAEA,MAAkB,MAA+B;EAC/C,IAAI,CAAC,KAAKF,GAAW,KAAKG,EAAM,aAAa,CAAC,CAAC,OAAO,KAAKL,IAAO;EAClE,IAAMM,IAAUC,EAAqBF,CAAK;EAC1C,AAAKC,KACL,KAAKN,GAAM,cACT,IAAI,YAA+B,WAAW;GAC5C,SAAS;GACT,YAAY;GACZ,UAAU;GACV,QAAQM;EACV,CAAC,CACH;CACF;AACF;AAEA,SAASC,EAAqB,GAAqD;CACjF,QAAQF,EAAM,KAAd;EACE,KAAK,aACH,OAAO;GACL,SAASA,EAAM;GACf;GACA,YAAY;GACZ,KAAKA,EAAM;GACX,MAAM;GACN,UAAUA,EAAM;GAChB,UAAU;EACZ;EACF,KAAK,aACH,OAAO;GACL,SAASA,EAAM;GACf;GACA,YAAY;GACZ,KAAKA,EAAM;GACX,MAAM;GACN,UAAUA,EAAM;GAChB,UAAU;EACZ;EACF,KAAK,cACH,OAAO;GACL,SAASA,EAAM;GACf;GACA,YAAY;GACZ,KAAKA,EAAM;GACX,MAAM;GACN,UAAUA,EAAM;GAChB,UAAU;EACZ;EACF,KAAK,WACH,OAAO;GACL,SAASA,EAAM;GACf;GACA,YAAY;GACZ,KAAKA,EAAM;GACX,MAAM;GACN,UAAUA,EAAM;GAChB,UAAU;EACZ;EACF,KAAK;EACL,KAAK;EACL,KAAK,KACH,OAAO;GAAE;GAAO,KAAKA,EAAM;GAAK,MAAM;EAAO;EAC/C,SACE;CACJ;AACF"}

package/dist/internal/controllers/popover.examples.js

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

package/dist/internal/controllers/popover.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.examples.js","names":[],"sources":["../../../src/internal/controllers/popover.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/dialog/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\nimport '@nvidia-elements/core/toast/define.js';\nimport '@nvidia-elements/core/drawer/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/notification/define.js';\nimport '@nvidia-elements/core/toggletip/define.js';\n\nexport default {\n  title: 'Elements/Popovers',\n  parameters: {\n    layout: 'centered'\n  }\n}\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Anchor-based positioning where popovers anchor to specific elements rather than their triggers.\n * @tags test-case\n */\nexport const Anchor = {\n  render: () => html`\n    <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  `\n}\n\n/**\n * @summary Nested popovers within dialogs and notifications, with proper layering and stacking order.\n * @tags test-case\n */\nexport const Nested = {\n  render: () => html`\n<style>\n  #root-inner { height: 2000px;}\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\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 id=\"tooltip-btn\" icon-name=\"information-circle\" container=\"flat\" aria-label=\"more details\" slot=\"label\"></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\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  `\n}\n\n/**\n * @summary Programmatic popover control with async operations before showing the popover.\n * @tags test-case\n */\nexport const ProgrammaticTrigger = {\n  render: () => html`\n<nve-toast hidden close-timeout=\"3000\">hello there</nve-toast>\n<nve-button>open after 2s</nve-button>\n\n<script type=\"module\">\n  const toast = document.querySelector('nve-toast');\n  const button = document.querySelector('nve-button');\n\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}\n\n/**\n * @summary Interactive showcase of all popover types (tooltip, toast, drawer, dropdown, dialog, notification) using modern popovertarget API.\n */\nexport const Interactive = {\n  render: () => html`\n    <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\n      <nve-toast id=\"toast\" close-timeout=\"1500\">copied!</nve-toast>\n      <nve-button popovertarget=\"toast\">toast</nve-button>\n\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\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\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\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  `\n}\n\n/* eslint-disable @nvidia-elements/lint/no-deprecated-popover-attributes */\n\n/**\n * @deprecated\n * @summary Legacy implementation showing all popover types using the older trigger/behavior-trigger API for backward compatibility.\n * @tags test-case\n */\nexport const LegacyInteractive = {\n  render: () => html`\n    <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\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\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\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\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\n      <nve-button id=\"notification-btn\">notification snackbar</nve-button>\n      <nve-notification trigger=\"notification-btn\" behavior-trigger hidden 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    </div>\n  `\n}\n\n/**\n * @summary Simple modal dialog with keyboard accessibility, including escape key to close functionality.\n * @tags test-case\n */\nexport const Closable = {\n  render: () => html`\n    <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  `\n}\n\n/**\n * @summary example of declarative popovers using the Invoker Commands API\n */\nexport const InvokerCommand = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Custom events like many standard DOM events bubble. When listening\n * to larger DOM trees, check which element dispatched the source event.\n */\nexport const EventBubbling = {\n  render: () => html`\n    <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\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\">\n          dropdown content\n        </nve-dropdown>\n      </nve-dialog>\n    </div>\n\n    <script type=\"module\">\n      const dialog = document.querySelector('#event-example-dialog');\n      const eventLabel = document.querySelector('#event-example');\n\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\n      dialog.addEventListener('close', e => {\n        eventLabel.innerText = 'close: ' + e.target.localName;\n      });\n    </script>\n  `\n}\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"popover.examples.js","names":["popover_examples_default"],"sources":["../../../src/internal/controllers/popover.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/dialog/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\nimport '@nvidia-elements/core/toast/define.js';\nimport '@nvidia-elements/core/drawer/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/notification/define.js';\nimport '@nvidia-elements/core/toggletip/define.js';\n\nexport default {\n  title: 'Elements/Popovers',\n  parameters: {\n    layout: 'centered'\n  }\n}\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Anchor-based positioning where popovers anchor to specific elements rather than their triggers.\n * @tags test-case\n */\nexport const Anchor = {\n  render: () => html`\n    <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  `\n}\n\n/**\n * @summary Nested popovers within dialogs and notifications, with proper layering and stacking order.\n * @tags test-case\n */\nexport const Nested = {\n  render: () => html`\n<style>\n  #root-inner { height: 2000px;}\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\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 id=\"tooltip-btn\" icon-name=\"information-circle\" container=\"flat\" aria-label=\"more details\" slot=\"label\"></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\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  `\n}\n\n/**\n * @summary Programmatic popover control with async operations before showing the popover.\n * @tags test-case\n */\nexport const ProgrammaticTrigger = {\n  render: () => html`\n<nve-toast hidden close-timeout=\"3000\">hello there</nve-toast>\n<nve-button>open after 2s</nve-button>\n\n<script type=\"module\">\n  const toast = document.querySelector('nve-toast');\n  const button = document.querySelector('nve-button');\n\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}\n\n/**\n * @summary Interactive showcase of all popover types (tooltip, toast, drawer, dropdown, dialog, notification) using modern popovertarget API.\n */\nexport const Interactive = {\n  render: () => html`\n    <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\n      <nve-toast id=\"toast\" close-timeout=\"1500\">copied!</nve-toast>\n      <nve-button popovertarget=\"toast\">toast</nve-button>\n\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\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\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\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  `\n}\n\n/* eslint-disable @nvidia-elements/lint/no-deprecated-popover-attributes */\n\n/**\n * @deprecated\n * @summary Legacy implementation showing all popover types using the older trigger/behavior-trigger API for backward compatibility.\n * @tags test-case\n */\nexport const LegacyInteractive = {\n  render: () => html`\n    <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\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\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\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\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\n      <nve-button id=\"notification-btn\">notification snackbar</nve-button>\n      <nve-notification trigger=\"notification-btn\" behavior-trigger hidden 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    </div>\n  `\n}\n\n/**\n * @summary Simple modal dialog with keyboard accessibility, including escape key to close functionality.\n * @tags test-case\n */\nexport const Closable = {\n  render: () => html`\n    <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  `\n}\n\n/**\n * @summary example of declarative popovers using the Invoker Commands API\n */\nexport const InvokerCommand = {\n  render: () => html`\n    <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  `\n};\n\n/**\n * @summary Custom events like many standard DOM events bubble. When listening\n * to larger DOM trees, check which element dispatched the source event.\n */\nexport const EventBubbling = {\n  render: () => html`\n    <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\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\">\n          dropdown content\n        </nve-dropdown>\n      </nve-dialog>\n    </div>\n\n    <script type=\"module\">\n      const dialog = document.querySelector('#event-example-dialog');\n      const eventLabel = document.querySelector('#event-example');\n\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\n      dialog.addEventListener('close', e => {\n        eventLabel.innerText = 'close: ' + e.target.localName;\n      });\n    </script>\n  `\n}\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/internal/controllers/state-expanded.controller.js

@@ -1,5 +1,5 @@
 import { attachInternals as e } from "../utils/a11y.js";
-//#region src/internal/controllers/state-expanded.controller.ts
+// src/internal/controllers/state-expanded.controller.ts
 function t() {
 	return (e) => e.addInitializer((e) => new n(e));
 }
@@ -14,7 +14,6 @@ var n = class {
 		this.host.expanded !== null && this.host.expanded !== void 0 && (this.host._internals.ariaExpanded = `${this.host.expanded}`), this.host.expanded ? this.host._internals.states.add("expanded") : this.host._internals.states.delete("expanded"), this.host.readOnly && (this.host._internals.ariaExpanded = null, this.host._internals.states.delete("expanded"));
 	}
 };
-//#endregion
 export { n as StateExpandedController, t as stateExpanded };
 
 //# sourceMappingURL=state-expanded.controller.js.map

package/dist/internal/controllers/state-expanded.controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"state-expanded.controller.js","names":[],"sources":["../../../src/internal/controllers/state-expanded.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 { attachInternals } from '../utils/a11y.js';\n\n/**\n * Adds expanded support for interactive custom elements including CSS State psuedo-selector :state(expanded) and aria-expanded.\n * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded\n */\nexport function stateExpanded<T extends Expanded>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new StateExpandedController(instance));\n}\n\nexport type Expanded = ReactiveElement & { expanded: boolean; readOnly?: boolean; _internals?: ElementInternals };\n\nexport class StateExpandedController<T extends Expanded> implements ReactiveController {\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  hostConnected() {\n    attachInternals(this.host);\n  }\n\n  hostUpdated() {\n    if (this.host.expanded !== null && this.host.expanded !== undefined) {\n      this.host._internals!.ariaExpanded = `${this.host.expanded}`;\n    }\n\n    if (this.host.expanded) {\n      this.host._internals!.states.add('expanded');\n    } else {\n      this.host._internals!.states.delete('expanded');\n    }\n\n    if (this.host.readOnly) {\n      this.host._internals!.ariaExpanded = null;\n      this.host._internals!.states.delete('expanded');\n    }\n  }\n}\n"],"mappings":";;AAYA,SAAgB,IAAoD;CAClE,QAAQ,MACN,EAAO,gBAAiB,MAAgB,IAAI,EAAwB,CAAQ,CAAC;AACjF;AAIA,IAAa,IAAb,MAAuF;CACrF,YAAY,GAAiB;EAC3B,AADkB,KAAA,OAAA,GAClB,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,gBAAgB;EACd,EAAgB,KAAK,IAAI;CAC3B;CAEA,cAAc;EAWZ,AAVI,KAAK,KAAK,aAAa,QAAQ,KAAK,KAAK,aAAa,KAAA,MACxD,KAAK,KAAK,WAAY,eAAe,GAAG,KAAK,KAAK,aAGhD,KAAK,KAAK,WACZ,KAAK,KAAK,WAAY,OAAO,IAAI,UAAU,IAE3C,KAAK,KAAK,WAAY,OAAO,OAAO,UAAU,GAG5C,KAAK,KAAK,aACZ,KAAK,KAAK,WAAY,eAAe,MACrC,KAAK,KAAK,WAAY,OAAO,OAAO,UAAU;CAElD;AACF"}
+{"version":3,"file":"state-expanded.controller.js","names":["stateExpanded","target","StateExpandedController","instance","host"],"sources":["../../../src/internal/controllers/state-expanded.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 { attachInternals } from '../utils/a11y.js';\n\n/**\n * Adds expanded support for interactive custom elements including CSS State psuedo-selector :state(expanded) and aria-expanded.\n * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded\n */\nexport function stateExpanded<T extends Expanded>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new StateExpandedController(instance));\n}\n\nexport type Expanded = ReactiveElement & { expanded: boolean; readOnly?: boolean; _internals?: ElementInternals };\n\nexport class StateExpandedController<T extends Expanded> implements ReactiveController {\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  hostConnected() {\n    attachInternals(this.host);\n  }\n\n  hostUpdated() {\n    if (this.host.expanded !== null && this.host.expanded !== undefined) {\n      this.host._internals!.ariaExpanded = `${this.host.expanded}`;\n    }\n\n    if (this.host.expanded) {\n      this.host._internals!.states.add('expanded');\n    } else {\n      this.host._internals!.states.delete('expanded');\n    }\n\n    if (this.host.readOnly) {\n      this.host._internals!.ariaExpanded = null;\n      this.host._internals!.states.delete('expanded');\n    }\n  }\n}\n"],"mappings":";;AAYA,SAAgBA,IAAoD;CAClE,QAAQ,MACNC,EAAO,gBAAiB,MAAgB,IAAIC,EAAwBC,CAAQ,CAAC;AACjF;AAIA,IAAaD,IAAb,MAAuF;CACrF,YAAY,GAAiB;EAC3B,AADkB,KAAA,OAAAE,GAClB,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,gBAAgB;EACd,EAAgB,KAAK,IAAI;CAC3B;CAEA,cAAc;EAWZ,AAVI,KAAK,KAAK,aAAa,QAAQ,KAAK,KAAK,aAAa,KAAA,MACxD,KAAK,KAAK,WAAY,eAAe,GAAG,KAAK,KAAK,aAGhD,KAAK,KAAK,WACZ,KAAK,KAAK,WAAY,OAAO,IAAI,UAAU,IAE3C,KAAK,KAAK,WAAY,OAAO,OAAO,UAAU,GAG5C,KAAK,KAAK,aACZ,KAAK,KAAK,WAAY,eAAe,MACrC,KAAK,KAAK,WAAY,OAAO,OAAO,UAAU;CAElD;AACF"}

package/dist/internal/controllers/state-highlighted.controller.js

@@ -1,5 +1,5 @@
 import { attachInternals as e } from "../utils/a11y.js";
-//#region src/internal/controllers/state-highlighted.controller.ts
+// src/internal/controllers/state-highlighted.controller.ts
 function t() {
 	return (e) => e.addInitializer((e) => new n(e));
 }
@@ -14,7 +14,6 @@ var n = class {
 		this.host.highlighted ? this.host._internals.states.add("highlighted") : this.host._internals.states.delete("highlighted");
 	}
 };
-//#endregion
 export { n as StateHighlightedController, t as stateHighlighted };
 
 //# sourceMappingURL=state-highlighted.controller.js.map

package/dist/internal/controllers/state-highlighted.controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"state-highlighted.controller.js","names":[],"sources":["../../../src/internal/controllers/state-highlighted.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 { attachInternals } from '../utils/a11y.js';\n\n/**\n * Adds highlighted support for interactive custom elements including CSS State psuedo-selector :state(highlighted).\n * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states\n */\nexport function stateHighlighted<T extends Highlighted>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new StateHighlightedController(instance));\n}\n\nexport type Highlighted = ReactiveElement & { highlighted: boolean; _internals?: ElementInternals };\n\nexport class StateHighlightedController<T extends Highlighted> implements ReactiveController {\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  hostConnected() {\n    attachInternals(this.host);\n  }\n\n  hostUpdated() {\n    if (this.host.highlighted) {\n      this.host._internals!.states.add('highlighted');\n    } else {\n      this.host._internals!.states.delete('highlighted');\n    }\n  }\n}\n"],"mappings":";;AAWA,SAAgB,IAA0D;CACxE,QAAQ,MACN,EAAO,gBAAiB,MAAgB,IAAI,EAA2B,CAAQ,CAAC;AACpF;AAIA,IAAa,IAAb,MAA6F;CAC3F,YAAY,GAAiB;EAC3B,AADkB,KAAA,OAAA,GAClB,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,gBAAgB;EACd,EAAgB,KAAK,IAAI;CAC3B;CAEA,cAAc;EACZ,AAAI,KAAK,KAAK,cACZ,KAAK,KAAK,WAAY,OAAO,IAAI,aAAa,IAE9C,KAAK,KAAK,WAAY,OAAO,OAAO,aAAa;CAErD;AACF"}
+{"version":3,"file":"state-highlighted.controller.js","names":["stateHighlighted","target","StateHighlightedController","instance","host"],"sources":["../../../src/internal/controllers/state-highlighted.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 { attachInternals } from '../utils/a11y.js';\n\n/**\n * Adds highlighted support for interactive custom elements including CSS State psuedo-selector :state(highlighted).\n * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states\n */\nexport function stateHighlighted<T extends Highlighted>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new StateHighlightedController(instance));\n}\n\nexport type Highlighted = ReactiveElement & { highlighted: boolean; _internals?: ElementInternals };\n\nexport class StateHighlightedController<T extends Highlighted> implements ReactiveController {\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  hostConnected() {\n    attachInternals(this.host);\n  }\n\n  hostUpdated() {\n    if (this.host.highlighted) {\n      this.host._internals!.states.add('highlighted');\n    } else {\n      this.host._internals!.states.delete('highlighted');\n    }\n  }\n}\n"],"mappings":";;AAWA,SAAgBA,IAA0D;CACxE,QAAQ,MACNC,EAAO,gBAAiB,MAAgB,IAAIC,EAA2BC,CAAQ,CAAC;AACpF;AAIA,IAAaD,IAAb,MAA6F;CAC3F,YAAY,GAAiB;EAC3B,AADkB,KAAA,OAAAE,GAClB,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,gBAAgB;EACd,EAAgB,KAAK,IAAI;CAC3B;CAEA,cAAc;EACZ,AAAI,KAAK,KAAK,cACZ,KAAK,KAAK,WAAY,OAAO,IAAI,aAAa,IAE9C,KAAK,KAAK,WAAY,OAAO,OAAO,aAAa;CAErD;AACF"}

package/dist/internal/controllers/state-scroll.controller.js

@@ -1,6 +1,6 @@
 import { endOfScrollBox as e } from "../utils/dom.js";
 import { attachInternals as t } from "../utils/a11y.js";
-//#region src/internal/controllers/state-scroll.controller.ts
+// src/internal/controllers/state-scroll.controller.ts
 function n() {
 	return (e) => e.addInitializer((e) => new r(e));
 }
@@ -54,7 +54,6 @@ var r = class {
 		e?.has("scrolling") && e.delete("scrolling");
 	}
 };
-//#endregion
 export { r as StateScrollController, n as stateScroll };
 
 //# sourceMappingURL=state-scroll.controller.js.map

package/dist/internal/controllers/state-scroll.controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"state-scroll.controller.js","names":[],"sources":["../../../src/internal/controllers/state-scroll.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 { attachInternals, endOfScrollBox } from '@nvidia-elements/core/internal';\n\n/**\n * Adds active scroll state detection\n */\nexport function stateScroll<T extends Scroll>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new StateScrollController(instance));\n}\n\nexport interface StateScrollConfig {\n  target?: HTMLElement;\n  scrollOffset?: number;\n}\n\nexport type Scroll = ReactiveElement & {\n  _internals?: ElementInternals;\n  stateScrollConfig?: StateScrollConfig;\n};\n\nexport class StateScrollController<T extends Scroll> implements ReactiveController {\n  #activeTarget?: HTMLElement;\n  #scrollEndTimeout?: ReturnType<typeof setTimeout>;\n\n  get #target(): HTMLElement {\n    const target = this.host.stateScrollConfig?.target;\n    return target ? target : this.host;\n  }\n\n  get #offset() {\n    return this.host.stateScrollConfig?.scrollOffset ?? 0;\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    attachInternals(this.host);\n    this.#syncTarget();\n  }\n\n  hostUpdated() {\n    this.#syncTarget();\n  }\n\n  hostDisconnected() {\n    this.#removeTargetListeners();\n  }\n\n  #syncTarget() {\n    const target = this.#target;\n    if (this.#activeTarget === target) return;\n\n    this.#removeTargetListeners();\n    this.#activeTarget = target;\n    this.#activeTarget.addEventListener('scrollend', this.#onScrollEnd);\n    this.#startScroll();\n  }\n\n  #onScrollEnd = () => {\n    this.#cancelScrollEnd();\n    // Keep brief scroll bursts in one state to reduce repeated style invalidation.\n    if (this.host._internals!.states.has('scrolling')) {\n      this.#scrollEndTimeout = setTimeout(() => {\n        this.#scrollEndTimeout = undefined;\n        this.host._internals!.states.delete('scrolling');\n      }, 100);\n    }\n    this.#startScroll();\n\n    if (this.#activeTarget && endOfScrollBox(this.#activeTarget, this.#offset)) {\n      this.host.dispatchEvent(new CustomEvent('scrollboxend', { bubbles: true, composed: true }));\n    }\n  };\n\n  #onScroll = () => {\n    this.#cancelScrollEnd();\n    const states = this.host._internals!.states;\n    if (!states.has('scrolling')) states.add('scrolling');\n  };\n\n  #cancelScrollEnd() {\n    if (this.#scrollEndTimeout !== undefined) {\n      clearTimeout(this.#scrollEndTimeout);\n      this.#scrollEndTimeout = undefined;\n    }\n  }\n\n  #startScroll() {\n    this.#activeTarget?.removeEventListener('scroll', this.#onScroll);\n    this.#activeTarget?.addEventListener('scroll', this.#onScroll, { once: true });\n  }\n\n  #removeTargetListeners() {\n    this.#cancelScrollEnd();\n    this.#activeTarget?.removeEventListener('scroll', this.#onScroll);\n    this.#activeTarget?.removeEventListener('scrollend', this.#onScrollEnd);\n    this.#activeTarget = undefined;\n    const states = this.host._internals?.states;\n    if (states?.has('scrolling')) states.delete('scrolling');\n  }\n}\n"],"mappings":";;;AAUA,SAAgB,IAAgD;CAC9D,QAAQ,MACN,EAAO,gBAAiB,MAAgB,IAAI,EAAsB,CAAQ,CAAC;AAC/E;AAYA,IAAa,IAAb,MAAmF;CACjF;CACA;CAEA,IAAI,KAAuB;EAEzB,OADe,KAAK,KAAK,mBAAmB,UACnB,KAAK;CAChC;CAEA,IAAI,KAAU;EACZ,OAAO,KAAK,KAAK,mBAAmB,gBAAgB;CACtD;CAEA,YAAY,GAAiB;EAC3B,AADkB,KAAA,OAAA,GAClB,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,MAAM,gBAAgB;EAGpB,AAFA,MAAM,KAAK,KAAK,gBAChB,EAAgB,KAAK,IAAI,GACzB,KAAK,GAAY;CACnB;CAEA,cAAc;EACZ,KAAK,GAAY;CACnB;CAEA,mBAAmB;EACjB,KAAK,GAAuB;CAC9B;CAEA,KAAc;EACZ,IAAM,IAAS,KAAK;EAChB,KAAK,OAAkB,MAE3B,KAAK,GAAuB,GAC5B,KAAK,KAAgB,GACrB,KAAK,GAAc,iBAAiB,aAAa,KAAK,EAAY,GAClE,KAAK,GAAa;CACpB;CAEA,WAAqB;EAWnB,AAVA,KAAK,GAAiB,GAElB,KAAK,KAAK,WAAY,OAAO,IAAI,WAAW,MAC9C,KAAK,KAAoB,iBAAiB;GAExC,AADA,KAAK,KAAoB,KAAA,GACzB,KAAK,KAAK,WAAY,OAAO,OAAO,WAAW;EACjD,GAAG,GAAG,IAER,KAAK,GAAa,GAEd,KAAK,MAAiB,EAAe,KAAK,IAAe,KAAK,EAAO,KACvE,KAAK,KAAK,cAAc,IAAI,YAAY,gBAAgB;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAE9F;CAEA,WAAkB;EAChB,KAAK,GAAiB;EACtB,IAAM,IAAS,KAAK,KAAK,WAAY;EACrC,AAAK,EAAO,IAAI,WAAW,KAAG,EAAO,IAAI,WAAW;CACtD;CAEA,KAAmB;EACjB,AAAI,KAAK,OAAsB,KAAA,MAC7B,aAAa,KAAK,EAAiB,GACnC,KAAK,KAAoB,KAAA;CAE7B;CAEA,KAAe;EAEb,AADA,KAAK,IAAe,oBAAoB,UAAU,KAAK,EAAS,GAChE,KAAK,IAAe,iBAAiB,UAAU,KAAK,IAAW,EAAE,MAAM,GAAK,CAAC;CAC/E;CAEA,KAAyB;EAIvB,AAHA,KAAK,GAAiB,GACtB,KAAK,IAAe,oBAAoB,UAAU,KAAK,EAAS,GAChE,KAAK,IAAe,oBAAoB,aAAa,KAAK,EAAY,GACtE,KAAK,KAAgB,KAAA;EACrB,IAAM,IAAS,KAAK,KAAK,YAAY;EACrC,AAAI,GAAQ,IAAI,WAAW,KAAG,EAAO,OAAO,WAAW;CACzD;AACF"}
+{"version":3,"file":"state-scroll.controller.js","names":["stateScroll","target","StateScrollController","instance","#target","#offset","host","attachInternals","#syncTarget","#removeTargetListeners","#activeTarget","#onScrollEnd","#startScroll","#cancelScrollEnd","#scrollEndTimeout","endOfScrollBox","states","#onScroll"],"sources":["../../../src/internal/controllers/state-scroll.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 { attachInternals, endOfScrollBox } from '@nvidia-elements/core/internal';\n\n/**\n * Adds active scroll state detection\n */\nexport function stateScroll<T extends Scroll>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new StateScrollController(instance));\n}\n\nexport interface StateScrollConfig {\n  target?: HTMLElement;\n  scrollOffset?: number;\n}\n\nexport type Scroll = ReactiveElement & {\n  _internals?: ElementInternals;\n  stateScrollConfig?: StateScrollConfig;\n};\n\nexport class StateScrollController<T extends Scroll> implements ReactiveController {\n  #activeTarget?: HTMLElement;\n  #scrollEndTimeout?: ReturnType<typeof setTimeout>;\n\n  get #target(): HTMLElement {\n    const target = this.host.stateScrollConfig?.target;\n    return target ? target : this.host;\n  }\n\n  get #offset() {\n    return this.host.stateScrollConfig?.scrollOffset ?? 0;\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    attachInternals(this.host);\n    this.#syncTarget();\n  }\n\n  hostUpdated() {\n    this.#syncTarget();\n  }\n\n  hostDisconnected() {\n    this.#removeTargetListeners();\n  }\n\n  #syncTarget() {\n    const target = this.#target;\n    if (this.#activeTarget === target) return;\n\n    this.#removeTargetListeners();\n    this.#activeTarget = target;\n    this.#activeTarget.addEventListener('scrollend', this.#onScrollEnd);\n    this.#startScroll();\n  }\n\n  #onScrollEnd = () => {\n    this.#cancelScrollEnd();\n    // Keep brief scroll bursts in one state to reduce repeated style invalidation.\n    if (this.host._internals!.states.has('scrolling')) {\n      this.#scrollEndTimeout = setTimeout(() => {\n        this.#scrollEndTimeout = undefined;\n        this.host._internals!.states.delete('scrolling');\n      }, 100);\n    }\n    this.#startScroll();\n\n    if (this.#activeTarget && endOfScrollBox(this.#activeTarget, this.#offset)) {\n      this.host.dispatchEvent(new CustomEvent('scrollboxend', { bubbles: true, composed: true }));\n    }\n  };\n\n  #onScroll = () => {\n    this.#cancelScrollEnd();\n    const states = this.host._internals!.states;\n    if (!states.has('scrolling')) states.add('scrolling');\n  };\n\n  #cancelScrollEnd() {\n    if (this.#scrollEndTimeout !== undefined) {\n      clearTimeout(this.#scrollEndTimeout);\n      this.#scrollEndTimeout = undefined;\n    }\n  }\n\n  #startScroll() {\n    this.#activeTarget?.removeEventListener('scroll', this.#onScroll);\n    this.#activeTarget?.addEventListener('scroll', this.#onScroll, { once: true });\n  }\n\n  #removeTargetListeners() {\n    this.#cancelScrollEnd();\n    this.#activeTarget?.removeEventListener('scroll', this.#onScroll);\n    this.#activeTarget?.removeEventListener('scrollend', this.#onScrollEnd);\n    this.#activeTarget = undefined;\n    const states = this.host._internals?.states;\n    if (states?.has('scrolling')) states.delete('scrolling');\n  }\n}\n"],"mappings":";;;AAUA,SAAgBA,IAAgD;CAC9D,QAAQ,MACNC,EAAO,gBAAiB,MAAgB,IAAIC,EAAsBC,CAAQ,CAAC;AAC/E;AAYA,IAAaD,IAAb,MAAmF;CACjF;CACA;CAEA,IAAIE,KAAuB;EAEzB,OADe,KAAK,KAAK,mBAAmB,UACnB,KAAK;CAChC;CAEA,IAAIC,KAAU;EACZ,OAAO,KAAK,KAAK,mBAAmB,gBAAgB;CACtD;CAEA,YAAY,GAAiB;EAC3B,AADkB,KAAA,OAAAC,GAClB,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,MAAM,gBAAgB;EAGpB,AAFA,MAAM,KAAK,KAAK,gBAChBC,EAAgB,KAAK,IAAI,GACzB,KAAKC,GAAY;CACnB;CAEA,cAAc;EACZ,KAAKA,GAAY;CACnB;CAEA,mBAAmB;EACjB,KAAKC,GAAuB;CAC9B;CAEA,KAAc;EACZ,IAAMR,IAAS,KAAKG;EACpB,AAAI,KAAKM,OAAkBT,MAE3B,KAAKQ,GAAuB,GAC5B,KAAKC,KAAgBT,GACrB,KAAKS,GAAc,iBAAiB,aAAa,KAAKC,EAAY,GAClE,KAAKC,GAAa;CACpB;CAEA,WAAqB;EAWnB,AAVA,KAAKC,GAAiB,GAElB,KAAK,KAAK,WAAY,OAAO,IAAI,WAAW,MAC9C,KAAKC,KAAoB,iBAAiB;GAExC,AADA,KAAKA,KAAoB,KAAA,GACzB,KAAK,KAAK,WAAY,OAAO,OAAO,WAAW;EACjD,GAAG,GAAG,IAER,KAAKF,GAAa,GAEd,KAAKF,MAAiBK,EAAe,KAAKL,IAAe,KAAKL,EAAO,KACvE,KAAK,KAAK,cAAc,IAAI,YAAY,gBAAgB;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAE9F;CAEA,WAAkB;EAChB,KAAKQ,GAAiB;EACtB,IAAMG,IAAS,KAAK,KAAK,WAAY;EACrC,AAAKA,EAAO,IAAI,WAAW,KAAGA,EAAO,IAAI,WAAW;CACtD;CAEA,KAAmB;EACjB,AAAI,KAAKF,OAAsB,KAAA,MAC7B,aAAa,KAAKA,EAAiB,GACnC,KAAKA,KAAoB,KAAA;CAE7B;CAEA,KAAe;EAEb,AADA,KAAKJ,IAAe,oBAAoB,UAAU,KAAKO,EAAS,GAChE,KAAKP,IAAe,iBAAiB,UAAU,KAAKO,IAAW,EAAE,MAAM,GAAK,CAAC;CAC/E;CAEA,KAAyB;EAIvB,AAHA,KAAKJ,GAAiB,GACtB,KAAKH,IAAe,oBAAoB,UAAU,KAAKO,EAAS,GAChE,KAAKP,IAAe,oBAAoB,aAAa,KAAKC,EAAY,GACtE,KAAKD,KAAgB,KAAA;EACrB,IAAMM,IAAS,KAAK,KAAK,YAAY;EACrC,AAAIA,GAAQ,IAAI,WAAW,KAAGA,EAAO,OAAO,WAAW;CACzD;AACF"}

package/dist/internal/controllers/state-selected.controller.js

@@ -1,5 +1,5 @@
 import { attachInternals as e } from "../utils/a11y.js";
-//#region src/internal/controllers/state-selected.controller.ts
+// src/internal/controllers/state-selected.controller.ts
 function t() {
 	return (e) => e.addInitializer((e) => new n(e));
 }
@@ -11,18 +11,9 @@ var n = class {
 		e(this.host);
 	}
 	hostUpdated() {
-		if (this.host.readOnly) {
-			this.host._internals.ariaSelected = null, this.host._internals.states.delete("selected");
-			return;
-		}
-		if (this.host._internals?.states.has("anchor") && this.host.selected) {
-			this.host._internals.ariaSelected = null, this.host._internals.states.add("selected"), this.host.querySelector("a")?.setAttribute("aria-current", "page");
-			return;
-		}
-		this.host.selected !== null && this.host.selected !== void 0 && (this.host._internals.ariaSelected = `${this.host.selected}`), this.host.selected ? this.host._internals.states.add("selected") : this.host._internals.states.delete("selected");
+		this.host.readOnly ? (this.host._internals.ariaSelected = null, this.host._internals.states.delete("selected")) : this.host._internals?.states.has("anchor") && this.host.selected ? (this.host._internals.ariaSelected = null, this.host._internals.states.add("selected"), this.host.querySelector("a")?.setAttribute("aria-current", "page")) : (this.host.selected !== null && this.host.selected !== void 0 && (this.host._internals.ariaSelected = `${this.host.selected}`), this.host.selected ? this.host._internals.states.add("selected") : this.host._internals.states.delete("selected"));
 	}
 };
-//#endregion
 export { n as StateSelectedController, t as stateSelected };
 
 //# sourceMappingURL=state-selected.controller.js.map

package/dist/internal/controllers/state-selected.controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"state-selected.controller.js","names":[],"sources":["../../../src/internal/controllers/state-selected.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 { attachInternals } from '../utils/a11y.js';\n\n/**\n * Adds selected support for interactive custom elements including CSS State psuedo-selector :state(selected) and aria-selected.\n * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected\n */\nexport function stateSelected<T extends Selected>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new StateSelectedController(instance));\n}\n\nexport type Selected = ReactiveElement & { selected: boolean; readOnly?: boolean; _internals?: ElementInternals };\n\nexport class StateSelectedController<T extends Selected> implements ReactiveController {\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  hostConnected() {\n    attachInternals(this.host);\n  }\n\n  hostUpdated() {\n    if (this.host.readOnly) {\n      this.host._internals!.ariaSelected = null;\n      this.host._internals!.states.delete('selected');\n      return;\n    }\n\n    if (this.host._internals?.states.has('anchor') && this.host.selected) {\n      this.host._internals!.ariaSelected = null;\n      this.host._internals!.states.add('selected');\n      this.host.querySelector('a')?.setAttribute('aria-current', 'page');\n      return;\n    }\n\n    if (this.host.selected !== null && this.host.selected !== undefined) {\n      this.host._internals!.ariaSelected = `${this.host.selected}`;\n    }\n\n    if (this.host.selected) {\n      this.host._internals!.states.add('selected');\n    } else {\n      this.host._internals!.states.delete('selected');\n    }\n  }\n}\n"],"mappings":";;AAYA,SAAgB,IAAoD;CAClE,QAAQ,MACN,EAAO,gBAAiB,MAAgB,IAAI,EAAwB,CAAQ,CAAC;AACjF;AAIA,IAAa,IAAb,MAAuF;CACrF,YAAY,GAAiB;EAC3B,AADkB,KAAA,OAAA,GAClB,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,gBAAgB;EACd,EAAgB,KAAK,IAAI;CAC3B;CAEA,cAAc;EACZ,IAAI,KAAK,KAAK,UAAU;GAEtB,AADA,KAAK,KAAK,WAAY,eAAe,MACrC,KAAK,KAAK,WAAY,OAAO,OAAO,UAAU;GAC9C;EACF;EAEA,IAAI,KAAK,KAAK,YAAY,OAAO,IAAI,QAAQ,KAAK,KAAK,KAAK,UAAU;GAGpE,AAFA,KAAK,KAAK,WAAY,eAAe,MACrC,KAAK,KAAK,WAAY,OAAO,IAAI,UAAU,GAC3C,KAAK,KAAK,cAAc,GAAG,CAAC,EAAE,aAAa,gBAAgB,MAAM;GACjE;EACF;EAMA,AAJI,KAAK,KAAK,aAAa,QAAQ,KAAK,KAAK,aAAa,KAAA,MACxD,KAAK,KAAK,WAAY,eAAe,GAAG,KAAK,KAAK,aAGhD,KAAK,KAAK,WACZ,KAAK,KAAK,WAAY,OAAO,IAAI,UAAU,IAE3C,KAAK,KAAK,WAAY,OAAO,OAAO,UAAU;CAElD;AACF"}
+{"version":3,"file":"state-selected.controller.js","names":["stateSelected","target","StateSelectedController","instance","host"],"sources":["../../../src/internal/controllers/state-selected.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 { attachInternals } from '../utils/a11y.js';\n\n/**\n * Adds selected support for interactive custom elements including CSS State psuedo-selector :state(selected) and aria-selected.\n * https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected\n */\nexport function stateSelected<T extends Selected>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new StateSelectedController(instance));\n}\n\nexport type Selected = ReactiveElement & { selected: boolean; readOnly?: boolean; _internals?: ElementInternals };\n\nexport class StateSelectedController<T extends Selected> implements ReactiveController {\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  hostConnected() {\n    attachInternals(this.host);\n  }\n\n  hostUpdated() {\n    if (this.host.readOnly) {\n      this.host._internals!.ariaSelected = null;\n      this.host._internals!.states.delete('selected');\n      return;\n    }\n\n    if (this.host._internals?.states.has('anchor') && this.host.selected) {\n      this.host._internals!.ariaSelected = null;\n      this.host._internals!.states.add('selected');\n      this.host.querySelector('a')?.setAttribute('aria-current', 'page');\n      return;\n    }\n\n    if (this.host.selected !== null && this.host.selected !== undefined) {\n      this.host._internals!.ariaSelected = `${this.host.selected}`;\n    }\n\n    if (this.host.selected) {\n      this.host._internals!.states.add('selected');\n    } else {\n      this.host._internals!.states.delete('selected');\n    }\n  }\n}\n"],"mappings":";;AAYA,SAAgBA,IAAoD;CAClE,QAAQ,MACNC,EAAO,gBAAiB,MAAgB,IAAIC,EAAwBC,CAAQ,CAAC;AACjF;AAIA,IAAaD,IAAb,MAAuF;CACrF,YAAY,GAAiB;EAC3B,AADkB,KAAA,OAAAE,GAClB,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,gBAAgB;EACd,EAAgB,KAAK,IAAI;CAC3B;CAEA,cAAc;EACZ,AAAI,KAAK,KAAK,YACZ,KAAK,KAAK,WAAY,eAAe,MACrC,KAAK,KAAK,WAAY,OAAO,OAAO,UAAU,KAI5C,KAAK,KAAK,YAAY,OAAO,IAAI,QAAQ,KAAK,KAAK,KAAK,YAC1D,KAAK,KAAK,WAAY,eAAe,MACrC,KAAK,KAAK,WAAY,OAAO,IAAI,UAAU,GAC3C,KAAK,KAAK,cAAc,GAAG,CAAC,EAAE,aAAa,gBAAgB,MAAM,MAI/D,KAAK,KAAK,aAAa,QAAQ,KAAK,KAAK,aAAa,KAAA,MACxD,KAAK,KAAK,WAAY,eAAe,GAAG,KAAK,KAAK,aAGhD,KAAK,KAAK,WACZ,KAAK,KAAK,WAAY,OAAO,IAAI,UAAU,IAE3C,KAAK,KAAK,WAAY,OAAO,OAAO,UAAU;CAElD;AACF"}

package/dist/internal/controllers/type-anchor.controller.js

@@ -1,6 +1,6 @@
 import { removeEmptyTextNode as e } from "../utils/dom.js";
 import { attachInternals as t } from "../utils/a11y.js";
-//#region src/internal/controllers/type-anchor.controller.ts
+// src/internal/controllers/type-anchor.controller.ts
 function n() {
 	return (e) => e.addInitializer((e) => new r(e));
 }
@@ -32,7 +32,6 @@ var r = class {
 		this.#e && this.#i && (this.#e.slot = "anchor", this.#r?.assignedNodes().forEach((t) => e(t)));
 	}
 };
-//#endregion
 export { r as TypeAnchorController, n as typeAnchor };
 
 //# sourceMappingURL=type-anchor.controller.js.map

package/dist/internal/controllers/type-anchor.controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"type-anchor.controller.js","names":[],"sources":["../../../src/internal/controllers/type-anchor.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 { removeEmptyTextNode } from '../utils/dom.js';\nimport { attachInternals } from '../utils/a11y.js';\n\n/**\n * Adds anchor/link support for interactive custom elements.\n */\nexport function typeAnchor<T extends Anchor>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) => target.addInitializer!((instance: T) => new TypeAnchorController(instance));\n}\n\nexport interface Anchor extends ReactiveElement {\n  disabled: boolean;\n  readOnly: boolean;\n  _internals: ElementInternals;\n}\n\nexport class TypeAnchorController<T extends Anchor> implements ReactiveController {\n  get #anchor() {\n    return this.#slottedAnchor ? this.#slottedAnchor : this.#parentAnchor;\n  }\n\n  get #slottedAnchor() {\n    // return elements that nest in a slot\n    return this.host\n      .shadowRoot!.querySelector<HTMLSlotElement>('slot, slot[name=anchor]')\n      ?.assignedElements()\n      ?.find(e => e?.tagName === 'A');\n  }\n\n  get #parentAnchor() {\n    return this.host.parentElement?.tagName === 'A' ? (this.host.parentElement as HTMLAnchorElement) : null;\n  }\n\n  get #defaultSlot() {\n    return this.host.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])');\n  }\n\n  get #anchorSlot() {\n    return this.host.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=anchor]');\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  async hostConnected() {\n    attachInternals(this.host);\n    await this.host.updateComplete;\n\n    this.#updateAnchorSlotAssignment();\n\n    if (this.#anchor) {\n      this.host.readOnly = true;\n      this.host._internals?.states.add('anchor');\n    } else {\n      this.host._internals?.states.delete('anchor');\n    }\n\n    if (this.#parentAnchor) {\n      this.#parentAnchor.style.textDecoration = 'none';\n      this.host.style.cursor = 'pointer';\n    }\n\n    this.#anchor?.addEventListener('click', e => {\n      if (this.host.disabled) {\n        e.preventDefault();\n        e.stopImmediatePropagation();\n      }\n    });\n  }\n\n  #updateAnchorSlotAssignment() {\n    if (this.#anchor && this.#anchorSlot) {\n      this.#anchor.slot = 'anchor';\n      this.#defaultSlot?.assignedNodes().forEach(node => removeEmptyTextNode(node));\n    }\n  }\n}\n"],"mappings":";;;AAWA,SAAgB,IAA+C;CAC7D,QAAQ,MAAkC,EAAO,gBAAiB,MAAgB,IAAI,EAAqB,CAAQ,CAAC;AACtH;AAQA,IAAa,IAAb,MAAkF;CAChF,IAAI,KAAU;EACZ,OAAO,KAAK,KAAiB,KAAK,KAAiB,KAAK;CAC1D;CAEA,IAAI,KAAiB;EAEnB,OAAO,KAAK,KACT,WAAY,cAA+B,yBAAyB,CAAC,EACpE,iBAAiB,CAAC,EAClB,MAAK,MAAK,GAAG,YAAY,GAAG;CAClC;CAEA,IAAI,KAAgB;EAClB,OAAO,KAAK,KAAK,eAAe,YAAY,MAAO,KAAK,KAAK,gBAAsC;CACrG;CAEA,IAAI,KAAe;EACjB,OAAO,KAAK,KAAK,WAAY,cAA+B,kBAAkB;CAChF;CAEA,IAAI,KAAc;EAChB,OAAO,KAAK,KAAK,WAAY,cAA+B,mBAAmB;CACjF;CAEA,YAAY,GAAiB;EAC3B,AADkB,KAAA,OAAA,GAClB,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,MAAM,gBAAgB;EAkBpB,AAjBA,EAAgB,KAAK,IAAI,GACzB,MAAM,KAAK,KAAK,gBAEhB,KAAK,GAA4B,GAE7B,KAAK,MACP,KAAK,KAAK,WAAW,IACrB,KAAK,KAAK,YAAY,OAAO,IAAI,QAAQ,KAEzC,KAAK,KAAK,YAAY,OAAO,OAAO,QAAQ,GAG1C,KAAK,OACP,KAAK,GAAc,MAAM,iBAAiB,QAC1C,KAAK,KAAK,MAAM,SAAS,YAG3B,KAAK,IAAS,iBAAiB,UAAS,MAAK;GAC3C,AAAI,KAAK,KAAK,aACZ,EAAE,eAAe,GACjB,EAAE,yBAAyB;EAE/B,CAAC;CACH;CAEA,KAA8B;EAC5B,AAAI,KAAK,MAAW,KAAK,OACvB,KAAK,GAAQ,OAAO,UACpB,KAAK,IAAc,cAAc,CAAC,CAAC,SAAQ,MAAQ,EAAoB,CAAI,CAAC;CAEhF;AACF"}
+{"version":3,"file":"type-anchor.controller.js","names":["typeAnchor","target","TypeAnchorController","instance","#anchor","#slottedAnchor","#parentAnchor","#defaultSlot","#anchorSlot","host","attachInternals","#updateAnchorSlotAssignment","removeEmptyTextNode","node"],"sources":["../../../src/internal/controllers/type-anchor.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 { removeEmptyTextNode } from '../utils/dom.js';\nimport { attachInternals } from '../utils/a11y.js';\n\n/**\n * Adds anchor/link support for interactive custom elements.\n */\nexport function typeAnchor<T extends Anchor>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) => target.addInitializer!((instance: T) => new TypeAnchorController(instance));\n}\n\nexport interface Anchor extends ReactiveElement {\n  disabled: boolean;\n  readOnly: boolean;\n  _internals: ElementInternals;\n}\n\nexport class TypeAnchorController<T extends Anchor> implements ReactiveController {\n  get #anchor() {\n    return this.#slottedAnchor ? this.#slottedAnchor : this.#parentAnchor;\n  }\n\n  get #slottedAnchor() {\n    // return elements that nest in a slot\n    return this.host\n      .shadowRoot!.querySelector<HTMLSlotElement>('slot, slot[name=anchor]')\n      ?.assignedElements()\n      ?.find(e => e?.tagName === 'A');\n  }\n\n  get #parentAnchor() {\n    return this.host.parentElement?.tagName === 'A' ? (this.host.parentElement as HTMLAnchorElement) : null;\n  }\n\n  get #defaultSlot() {\n    return this.host.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])');\n  }\n\n  get #anchorSlot() {\n    return this.host.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=anchor]');\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  async hostConnected() {\n    attachInternals(this.host);\n    await this.host.updateComplete;\n\n    this.#updateAnchorSlotAssignment();\n\n    if (this.#anchor) {\n      this.host.readOnly = true;\n      this.host._internals?.states.add('anchor');\n    } else {\n      this.host._internals?.states.delete('anchor');\n    }\n\n    if (this.#parentAnchor) {\n      this.#parentAnchor.style.textDecoration = 'none';\n      this.host.style.cursor = 'pointer';\n    }\n\n    this.#anchor?.addEventListener('click', e => {\n      if (this.host.disabled) {\n        e.preventDefault();\n        e.stopImmediatePropagation();\n      }\n    });\n  }\n\n  #updateAnchorSlotAssignment() {\n    if (this.#anchor && this.#anchorSlot) {\n      this.#anchor.slot = 'anchor';\n      this.#defaultSlot?.assignedNodes().forEach(node => removeEmptyTextNode(node));\n    }\n  }\n}\n"],"mappings":";;;AAWA,SAAgBA,IAA+C;CAC7D,QAAQ,MAAkCC,EAAO,gBAAiB,MAAgB,IAAIC,EAAqBC,CAAQ,CAAC;AACtH;AAQA,IAAaD,IAAb,MAAkF;CAChF,IAAIE,KAAU;EACZ,OAAO,KAAKC,KAAiB,KAAKA,KAAiB,KAAKC;CAC1D;CAEA,IAAID,KAAiB;EAEnB,OAAO,KAAK,KACT,WAAY,cAA+B,yBAAyB,CAAC,EACpE,iBAAiB,CAAC,EAClB,MAAK,MAAK,GAAG,YAAY,GAAG;CAClC;CAEA,IAAIC,KAAgB;EAClB,OAAO,KAAK,KAAK,eAAe,YAAY,MAAO,KAAK,KAAK,gBAAsC;CACrG;CAEA,IAAIC,KAAe;EACjB,OAAO,KAAK,KAAK,WAAY,cAA+B,kBAAkB;CAChF;CAEA,IAAIC,KAAc;EAChB,OAAO,KAAK,KAAK,WAAY,cAA+B,mBAAmB;CACjF;CAEA,YAAY,GAAiB;EAC3B,AADkB,KAAA,OAAAC,GAClB,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,MAAM,gBAAgB;EAkBpB,AAjBAC,EAAgB,KAAK,IAAI,GACzB,MAAM,KAAK,KAAK,gBAEhB,KAAKC,GAA4B,GAE7B,KAAKP,MACP,KAAK,KAAK,WAAW,IACrB,KAAK,KAAK,YAAY,OAAO,IAAI,QAAQ,KAEzC,KAAK,KAAK,YAAY,OAAO,OAAO,QAAQ,GAG1C,KAAKE,OACP,KAAKA,GAAc,MAAM,iBAAiB,QAC1C,KAAK,KAAK,MAAM,SAAS,YAG3B,KAAKF,IAAS,iBAAiB,UAAS,MAAK;GAC3C,AAAI,KAAK,KAAK,aACZ,EAAE,eAAe,GACjB,EAAE,yBAAyB;EAE/B,CAAC;CACH;CAEA,KAA8B;EAC5B,AAAI,KAAKA,MAAW,KAAKI,OACvB,KAAKJ,GAAQ,OAAO,UACpB,KAAKG,IAAc,cAAc,CAAC,CAAC,SAAQ,MAAQK,EAAoBC,CAAI,CAAC;CAEhF;AACF"}

package/dist/internal/controllers/type-closable.controller.js

@@ -1,5 +1,5 @@
 import { attachInternals as e } from "../utils/a11y.js";
-//#region src/internal/controllers/type-closable.controller.ts
+// src/internal/controllers/type-closable.controller.ts
 var t = class {
 	constructor(e) {
 		this.host = e, this.host.addController(this);
@@ -19,7 +19,6 @@ var t = class {
 		}));
 	}
 };
-//#endregion
 export { t as TypeClosableController };
 
 //# sourceMappingURL=type-closable.controller.js.map

package/dist/internal/controllers/type-closable.controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"type-closable.controller.js","names":[],"sources":["../../../src/internal/controllers/type-closable.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 { attachInternals } from '../utils/a11y.js';\n\nexport type TypeClosable = ReactiveElement & { closable: boolean };\n\n/**\n * Controller for enabling closable behavior for elements.\n */\nexport class TypeClosableController<T extends TypeClosable> implements ReactiveController {\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  hostConnected() {\n    attachInternals(this.host);\n\n    this.host.addEventListener('command', () => {\n      this.host.hidden = true;\n      this.#dispatchEvent();\n    });\n  }\n\n  close() {\n    if (this.host.closable) {\n      this.#dispatchEvent();\n    }\n  }\n\n  #dispatchEvent() {\n    this.host.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));\n  }\n}\n"],"mappings":";;AAWA,IAAa,IAAb,MAA0F;CACxF,YAAY,GAAiB;EAC3B,AADkB,KAAA,OAAA,GAClB,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,gBAAgB;EAGd,AAFA,EAAgB,KAAK,IAAI,GAEzB,KAAK,KAAK,iBAAiB,iBAAiB;GAE1C,AADA,KAAK,KAAK,SAAS,IACnB,KAAK,GAAe;EACtB,CAAC;CACH;CAEA,QAAQ;EACN,AAAI,KAAK,KAAK,YACZ,KAAK,GAAe;CAExB;CAEA,KAAiB;EACf,KAAK,KAAK,cAAc,IAAI,YAAY,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CACrF;AACF"}
+{"version":3,"file":"type-closable.controller.js","names":["TypeClosableController","host","attachInternals","#dispatchEvent"],"sources":["../../../src/internal/controllers/type-closable.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 { attachInternals } from '../utils/a11y.js';\n\nexport type TypeClosable = ReactiveElement & { closable: boolean };\n\n/**\n * Controller for enabling closable behavior for elements.\n */\nexport class TypeClosableController<T extends TypeClosable> implements ReactiveController {\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  hostConnected() {\n    attachInternals(this.host);\n\n    this.host.addEventListener('command', () => {\n      this.host.hidden = true;\n      this.#dispatchEvent();\n    });\n  }\n\n  close() {\n    if (this.host.closable) {\n      this.#dispatchEvent();\n    }\n  }\n\n  #dispatchEvent() {\n    this.host.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));\n  }\n}\n"],"mappings":";;AAWA,IAAaA,IAAb,MAA0F;CACxF,YAAY,GAAiB;EAC3B,AADkB,KAAA,OAAAC,GAClB,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,gBAAgB;EAGd,AAFAC,EAAgB,KAAK,IAAI,GAEzB,KAAK,KAAK,iBAAiB,iBAAiB;GAE1C,AADA,KAAK,KAAK,SAAS,IACnB,KAAKC,GAAe;EACtB,CAAC;CACH;CAEA,QAAQ;EACN,AAAI,KAAK,KAAK,YACZ,KAAKA,GAAe;CAExB;CAEA,KAAiB;EACf,KAAK,KAAK,cAAc,IAAI,YAAY,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CACrF;AACF"}

package/dist/internal/controllers/type-expandable.controller.js

@@ -1,5 +1,5 @@
 import { attachInternals as e } from "../utils/a11y.js";
-//#region src/internal/controllers/type-expandable.controller.ts
+// src/internal/controllers/type-expandable.controller.ts
 var t = class {
 	#e = !1;
 	#t = !1;
@@ -30,7 +30,6 @@ var t = class {
 		this.host.expanded || this.#t && !this.host.hidden ? this.close() : this.open();
 	}
 };
-//#endregion
 export { t as TypeExpandableController };
 
 //# sourceMappingURL=type-expandable.controller.js.map

package/dist/internal/controllers/type-expandable.controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"type-expandable.controller.js","names":[],"sources":["../../../src/internal/controllers/type-expandable.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 { attachInternals } from '../utils/a11y.js';\n\nexport type TypeExpandable = ReactiveElement & {\n  expanded?: boolean;\n  behaviorExpand?: boolean;\n  expandable?: boolean;\n  _internals?: ElementInternals;\n};\n\n/**\n * Controller for enabling expandable behavior for elements.\n * @event open - Dispatched when the expandable element opens.\n * @event close - Dispatched when the expandable element closes.\n * @property expanded - expanded state\n * @property behaviorExpand - determines if stateful auto behavior should enable\n */\nexport class TypeExpandableController<T extends TypeExpandable> implements ReactiveController {\n  #commandTriggered = false;\n  #useHidden = false;\n\n  constructor(\n    private host: T,\n    config: { useHidden?: boolean } = {}\n  ) {\n    this.#useHidden = config.useHidden ?? false;\n    this.host.addController(this);\n  }\n\n  hostConnected() {\n    attachInternals(this.host);\n\n    this.host.addEventListener('command', ((e: CommandEvent) => {\n      this.#commandTriggered = true;\n      if (e.command === '--toggle') {\n        this.toggle();\n      }\n\n      if (e.command === '--open') {\n        this.open();\n      }\n\n      if (e.command === '--close') {\n        this.close();\n      }\n      this.#commandTriggered = false;\n    }) as EventListener);\n  }\n\n  hostUpdated() {\n    this.host.expandable\n      ? this.host._internals!.states.add('expandable')\n      : this.host._internals!.states.delete('expandable');\n  }\n\n  open() {\n    if (this.host.behaviorExpand || this.#commandTriggered) {\n      this.host.expanded = true;\n\n      if (this.#useHidden) {\n        this.host.hidden = false;\n      }\n    }\n\n    this.host.dispatchEvent(new CustomEvent('open', { bubbles: true, composed: true }));\n  }\n\n  close() {\n    if (this.host.behaviorExpand || this.#commandTriggered) {\n      this.host.expanded = false;\n\n      if (this.#useHidden) {\n        this.host.hidden = true;\n      }\n    }\n\n    this.host.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));\n  }\n\n  toggle() {\n    if (this.host.expanded || (this.#useHidden && !this.host.hidden)) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n}\n"],"mappings":";;AAoBA,IAAa,IAAb,MAA8F;CAC5F,KAAoB;CACpB,KAAa;CAEb,YACE,GACA,IAAkC,CAAC,GACnC;EAEA,AAJQ,KAAA,OAAA,GAGR,KAAK,KAAa,EAAO,aAAa,IACtC,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,gBAAgB;EAGd,AAFA,EAAgB,KAAK,IAAI,GAEzB,KAAK,KAAK,iBAAiB,aAAa,MAAoB;GAa1D,AAZA,KAAK,KAAoB,IACrB,EAAE,YAAY,cAChB,KAAK,OAAO,GAGV,EAAE,YAAY,YAChB,KAAK,KAAK,GAGR,EAAE,YAAY,aAChB,KAAK,MAAM,GAEb,KAAK,KAAoB;EAC3B,EAAmB;CACrB;CAEA,cAAc;EACZ,KAAK,KAAK,aACN,KAAK,KAAK,WAAY,OAAO,IAAI,YAAY,IAC7C,KAAK,KAAK,WAAY,OAAO,OAAO,YAAY;CACtD;CAEA,OAAO;EASL,CARI,KAAK,KAAK,kBAAkB,KAAK,QACnC,KAAK,KAAK,WAAW,IAEjB,KAAK,OACP,KAAK,KAAK,SAAS,MAIvB,KAAK,KAAK,cAAc,IAAI,YAAY,QAAQ;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CACpF;CAEA,QAAQ;EASN,CARI,KAAK,KAAK,kBAAkB,KAAK,QACnC,KAAK,KAAK,WAAW,IAEjB,KAAK,OACP,KAAK,KAAK,SAAS,MAIvB,KAAK,KAAK,cAAc,IAAI,YAAY,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CACrF;CAEA,SAAS;EACP,AAAI,KAAK,KAAK,YAAa,KAAK,MAAc,CAAC,KAAK,KAAK,SACvD,KAAK,MAAM,IAEX,KAAK,KAAK;CAEd;AACF"}
+{"version":3,"file":"type-expandable.controller.js","names":["TypeExpandableController","host","#useHidden","config","attachInternals","#commandTriggered"],"sources":["../../../src/internal/controllers/type-expandable.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 { attachInternals } from '../utils/a11y.js';\n\nexport type TypeExpandable = ReactiveElement & {\n  expanded?: boolean;\n  behaviorExpand?: boolean;\n  expandable?: boolean;\n  _internals?: ElementInternals;\n};\n\n/**\n * Controller for enabling expandable behavior for elements.\n * @event open - Dispatched when the expandable element opens.\n * @event close - Dispatched when the expandable element closes.\n * @property expanded - expanded state\n * @property behaviorExpand - determines if stateful auto behavior should enable\n */\nexport class TypeExpandableController<T extends TypeExpandable> implements ReactiveController {\n  #commandTriggered = false;\n  #useHidden = false;\n\n  constructor(\n    private host: T,\n    config: { useHidden?: boolean } = {}\n  ) {\n    this.#useHidden = config.useHidden ?? false;\n    this.host.addController(this);\n  }\n\n  hostConnected() {\n    attachInternals(this.host);\n\n    this.host.addEventListener('command', ((e: CommandEvent) => {\n      this.#commandTriggered = true;\n      if (e.command === '--toggle') {\n        this.toggle();\n      }\n\n      if (e.command === '--open') {\n        this.open();\n      }\n\n      if (e.command === '--close') {\n        this.close();\n      }\n      this.#commandTriggered = false;\n    }) as EventListener);\n  }\n\n  hostUpdated() {\n    this.host.expandable\n      ? this.host._internals!.states.add('expandable')\n      : this.host._internals!.states.delete('expandable');\n  }\n\n  open() {\n    if (this.host.behaviorExpand || this.#commandTriggered) {\n      this.host.expanded = true;\n\n      if (this.#useHidden) {\n        this.host.hidden = false;\n      }\n    }\n\n    this.host.dispatchEvent(new CustomEvent('open', { bubbles: true, composed: true }));\n  }\n\n  close() {\n    if (this.host.behaviorExpand || this.#commandTriggered) {\n      this.host.expanded = false;\n\n      if (this.#useHidden) {\n        this.host.hidden = true;\n      }\n    }\n\n    this.host.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));\n  }\n\n  toggle() {\n    if (this.host.expanded || (this.#useHidden && !this.host.hidden)) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n}\n"],"mappings":";;AAoBA,IAAaA,IAAb,MAA8F;CAC5F,KAAoB;CACpB,KAAa;CAEb,YACE,GACA,IAAkC,CAAC,GACnC;EAEA,AAJQ,KAAA,OAAAC,GAGR,KAAKC,KAAaC,EAAO,aAAa,IACtC,KAAK,KAAK,cAAc,IAAI;CAC9B;CAEA,gBAAgB;EAGd,AAFAC,EAAgB,KAAK,IAAI,GAEzB,KAAK,KAAK,iBAAiB,aAAa,MAAoB;GAa1D,AAZA,KAAKC,KAAoB,IACrB,EAAE,YAAY,cAChB,KAAK,OAAO,GAGV,EAAE,YAAY,YAChB,KAAK,KAAK,GAGR,EAAE,YAAY,aAChB,KAAK,MAAM,GAEb,KAAKA,KAAoB;EAC3B,EAAmB;CACrB;CAEA,cAAc;EACZ,KAAK,KAAK,aACN,KAAK,KAAK,WAAY,OAAO,IAAI,YAAY,IAC7C,KAAK,KAAK,WAAY,OAAO,OAAO,YAAY;CACtD;CAEA,OAAO;EASL,CARI,KAAK,KAAK,kBAAkB,KAAKA,QACnC,KAAK,KAAK,WAAW,IAEjB,KAAKH,OACP,KAAK,KAAK,SAAS,MAIvB,KAAK,KAAK,cAAc,IAAI,YAAY,QAAQ;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CACpF;CAEA,QAAQ;EASN,CARI,KAAK,KAAK,kBAAkB,KAAKG,QACnC,KAAK,KAAK,WAAW,IAEjB,KAAKH,OACP,KAAK,KAAK,SAAS,MAIvB,KAAK,KAAK,cAAc,IAAI,YAAY,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CACrF;CAEA,SAAS;EACP,AAAI,KAAK,KAAK,YAAa,KAAKA,MAAc,CAAC,KAAK,KAAK,SACvD,KAAK,MAAM,IAEX,KAAK,KAAK;CAEd;AACF"}