@nvidia-elements/core 2.8.1 → 2.10.0

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

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

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

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

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

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

package/dist/gauge/gauge.d.ts

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

package/dist/gauge/gauge2.js

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

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

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

package/dist/grid/cell/cell2.js

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

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

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

package/dist/grid/column/column2.js

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

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

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

package/dist/grid/footer/footer2.js

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

package/dist/grid/grid.d.ts

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

package/dist/grid/grid2.js

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

package/dist/grid/grid2.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid2.js","names":[],"sources":["../../src/grid/grid.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport {\n  keyNavigationGrid,\n  stateScroll,\n  type StateScrollConfig,\n  useStyles,\n  attachInternals,\n  appendRootNodeStyle,\n  generateId,\n  audit\n} from '@nvidia-elements/core/internal';\nimport { GridPlaceholder } from './placeholder/placeholder.js';\nimport { GridHeader } from './header/header.js';\nimport { GridColumn } from './column/column.js';\nimport { GridFooter } from './footer/footer.js';\nimport { GridRow } from './row/row.js';\nimport { GridCell } from './cell/cell.js';\nimport styles from './grid.css?inline';\nimport globalStyles from './grid.global.css?inline';\n\n/**\n * @element nve-grid\n * @description A versatile table/datagrid component with built-in keyboard navigation for displaying and interacting with structured data. Use it for anything from simple read-only tables to fully interactive, spreadsheet experiences.\n * @documentation https://nvidia.github.io/elements/docs/elements/data-grid/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - `nve-grid-header`, `nve-grid-row`, and `nve-grid-placeholder` elements.\n * @slot footer - slot for grid-footer or toolbar\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --box-shadow\n * @cssprop --font-size\n * @cssprop --row-height - fixed height of each row\n * @cssprop --scroll-height - height of the scrollable area\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\n@audit()\n@stateScroll<Grid>()\n@keyNavigationGrid<Grid>()\nexport class Grid extends LitElement implements ContainerElement {\n  /**\n   * Determines the container styles of component. Flat nests the grid within other containers. Full spans the full edge-to-edge viewport width.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'full';\n\n  /**\n   * Determine style variant stripe rows\n   */\n  @property({ type: Boolean, reflect: true }) stripe: boolean;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid',\n    version: '0.0.0',\n    children: [GridRow.metadata.tag, GridHeader.metadata.tag, GridFooter.metadata.tag, GridPlaceholder.metadata.tag]\n  };\n\n  static elementDefinitions = {};\n\n  get keynavGridConfig() {\n    return {\n      columns: this.#columns,\n      rows: [this.#header!, ...this.#rows],\n      cells: [...this.#columns, ...this.#cells]\n    };\n  }\n\n  get stateScrollConfig(): StateScrollConfig {\n    return {\n      target: this.shadowRoot?.querySelector<HTMLElement>('[part=\"_scrollbox\"]') ?? undefined\n    };\n  }\n\n  get #rows() {\n    return Array.from(this.querySelectorAll<GridRow>(GridRow.metadata.tag));\n  }\n\n  get #header() {\n    return this.querySelector<GridHeader>(GridHeader.metadata.tag);\n  }\n\n  get #columns() {\n    return Array.from(this.querySelectorAll<GridColumn>(GridColumn.metadata.tag));\n  }\n\n  get #cells() {\n    return Array.from(this.querySelectorAll<GridCell>(GridCell.metadata.tag));\n  }\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <div part=\"_scrollbox\">\n          <slot></slot>\n        </div>\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'grid';\n    this.id ||= generateId();\n    appendRootNodeStyle(this, globalStyles);\n  }\n\n  /**\n   * Scroll to a specific position in the grid.\n   */\n  scrollTo(options?: ScrollToOptions): Promise<void>;\n  scrollTo(x: number, y: number): Promise<void>;\n  async scrollTo(...args: [options?: ScrollToOptions] | [x: number, y: number]): Promise<void> {\n    await this.shadowRoot!.querySelector('[part=\"_scrollbox\"]')?.scrollTo(...(args as [ScrollToOptions]));\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA8CO,IAAM,IAAN,cAAmB,EAAuC;;EAW/C,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC,EAAQ,SAAS;IAAK,EAAW,SAAS;IAAK,EAAW,SAAS;IAAK,EAAgB,SAAS;GAAG;EACjH;;;EAE4B,KAAA,qBAAA,CAAC;;CAE7B,IAAI,mBAAmB;EACrB,OAAO;GACL,SAAS,KAAK;GACd,MAAM,CAAC,KAAK,IAAU,GAAG,KAAK,EAAK;GACnC,OAAO,CAAC,GAAG,KAAK,IAAU,GAAG,KAAK,EAAM;EAC1C;CACF;CAEA,IAAI,oBAAuC;EACzC,OAAO,EACL,QAAQ,KAAK,YAAY,cAA2B,uBAAqB,KAAK,KAAA,EAChF;CACF;CAEA,IAAI,KAAQ;EACV,OAAO,MAAM,KAAK,KAAK,iBAA0B,EAAQ,SAAS,GAAG,CAAC;CACxE;CAEA,IAAI,KAAU;EACZ,OAAO,KAAK,cAA0B,EAAW,SAAS,GAAG;CAC/D;CAEA,IAAI,KAAW;EACb,OAAO,MAAM,KAAK,KAAK,iBAA6B,EAAW,SAAS,GAAG,CAAC;CAC9E;CAEA,IAAI,KAAS;EACX,OAAO,MAAM,KAAK,KAAK,iBAA2B,EAAS,SAAS,GAAG,CAAC;CAC1E;CAKA,SAAS;EACP,OAAO,CAAI;CAQb;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,QACvB,KAAK,OAAO,EAAW,GACvB,EAAoB,MAAM,CAAY;CACxC;CAOA,MAAM,SAAS,GAAG,GAA2E;EAC3F,MAAM,KAAK,WAAY,cAAc,uBAAqB,CAAC,EAAE,SAAS,GAAI,CAA0B;CACtG;AACF;AA7EG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA;CAZ3C,EAAM;CACN,EAAkB;CAClB,EAAwB"}
+{"version":3,"file":"grid2.js","names":[],"sources":["../../src/grid/grid.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport {\n  keyNavigationGrid,\n  stateScroll,\n  type StateScrollConfig,\n  useStyles,\n  attachInternals,\n  appendRootNodeStyle,\n  generateId,\n  audit\n} from '@nvidia-elements/core/internal';\nimport { GridPlaceholder } from './placeholder/placeholder.js';\nimport { GridHeader } from './header/header.js';\nimport { GridColumn } from './column/column.js';\nimport { GridFooter } from './footer/footer.js';\nimport { GridRow } from './row/row.js';\nimport { GridCell } from './cell/cell.js';\nimport styles from './grid.css?inline';\nimport globalStyles from './grid.global.css?inline';\n\n/**\n * @element nve-grid\n * @description A versatile table/datagrid component with built-in keyboard navigation for displaying and interacting with structured data. Use it for anything from simple read-only tables to fully interactive, spreadsheet experiences.\n * @documentation https://nvidia.github.io/elements/docs/elements/data-grid/\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - `nve-grid-header`, `nve-grid-row`, and `nve-grid-placeholder` elements.\n * @slot footer - slot for grid-footer or toolbar\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --box-shadow\n * @cssprop --font-size\n * @cssprop --row-height - fixed height of each row\n * @cssprop --scroll-height - height of the scrollable area\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\n@audit()\n@stateScroll<Grid>()\n@keyNavigationGrid<Grid>()\nexport class Grid extends LitElement implements ContainerElement {\n  /**\n   * Determines the container styles of component. Flat nests the grid within other containers. Full spans the full edge-to-edge viewport width.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'full';\n\n  /**\n   * Determine style variant stripe rows\n   */\n  @property({ type: Boolean, reflect: true }) stripe: boolean;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid',\n    version: '0.0.0',\n    children: [GridRow.metadata.tag, GridHeader.metadata.tag, GridFooter.metadata.tag, GridPlaceholder.metadata.tag]\n  };\n\n  static elementDefinitions = {};\n\n  /** @private */\n  get keynavGridConfig() {\n    return {\n      columns: this.#columns,\n      rows: [this.#header!, ...this.#rows],\n      cells: [...this.#columns, ...this.#cells]\n    };\n  }\n\n  /** @private */\n  get stateScrollConfig(): StateScrollConfig {\n    return {\n      target: this.shadowRoot?.querySelector<HTMLElement>('[part=\"_scrollbox\"]') ?? undefined\n    };\n  }\n\n  get #rows() {\n    return Array.from(this.querySelectorAll<GridRow>(GridRow.metadata.tag));\n  }\n\n  get #header() {\n    return this.querySelector<GridHeader>(GridHeader.metadata.tag);\n  }\n\n  get #columns() {\n    return Array.from(this.querySelectorAll<GridColumn>(GridColumn.metadata.tag));\n  }\n\n  get #cells() {\n    return Array.from(this.querySelectorAll<GridCell>(GridCell.metadata.tag));\n  }\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <div part=\"_scrollbox\">\n          <slot></slot>\n        </div>\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'grid';\n    this.id ||= generateId();\n    appendRootNodeStyle(this, globalStyles);\n  }\n\n  /**\n   * Scroll to a specific position in the grid.\n   */\n  scrollTo(options?: ScrollToOptions): Promise<void>;\n  scrollTo(x: number, y: number): Promise<void>;\n  async scrollTo(...args: [options?: ScrollToOptions] | [x: number, y: number]): Promise<void> {\n    await this.shadowRoot!.querySelector('[part=\"_scrollbox\"]')?.scrollTo(...(args as [ScrollToOptions]));\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA8CO,IAAM,IAAN,cAAmB,EAAuC;;EAW/C,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU;IAAC,EAAQ,SAAS;IAAK,EAAW,SAAS;IAAK,EAAW,SAAS;IAAK,EAAgB,SAAS;GAAG;EACjH;;;EAE4B,KAAA,qBAAA,CAAC;;CAG7B,IAAI,mBAAmB;EACrB,OAAO;GACL,SAAS,KAAK;GACd,MAAM,CAAC,KAAK,IAAU,GAAG,KAAK,EAAK;GACnC,OAAO,CAAC,GAAG,KAAK,IAAU,GAAG,KAAK,EAAM;EAC1C;CACF;CAGA,IAAI,oBAAuC;EACzC,OAAO,EACL,QAAQ,KAAK,YAAY,cAA2B,uBAAqB,KAAK,KAAA,EAChF;CACF;CAEA,IAAI,KAAQ;EACV,OAAO,MAAM,KAAK,KAAK,iBAA0B,EAAQ,SAAS,GAAG,CAAC;CACxE;CAEA,IAAI,KAAU;EACZ,OAAO,KAAK,cAA0B,EAAW,SAAS,GAAG;CAC/D;CAEA,IAAI,KAAW;EACb,OAAO,MAAM,KAAK,KAAK,iBAA6B,EAAW,SAAS,GAAG,CAAC;CAC9E;CAEA,IAAI,KAAS;EACX,OAAO,MAAM,KAAK,KAAK,iBAA2B,EAAS,SAAS,GAAG,CAAC;CAC1E;CAKA,SAAS;EACP,OAAO,CAAI;CAQb;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,QACvB,KAAK,OAAO,EAAW,GACvB,EAAoB,MAAM,CAAY;CACxC;CAOA,MAAM,SAAS,GAAG,GAA2E;EAC3F,MAAM,KAAK,WAAY,cAAc,uBAAqB,CAAC,EAAE,SAAS,GAAI,CAA0B;CACtG;AACF;AA/EG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA;CAZ3C,EAAM;CACN,EAAkB;CAClB,EAAwB"}

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

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

package/dist/grid/header/header2.js

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

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

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

package/dist/grid/placeholder/placeholder2.js

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

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

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

package/dist/grid/row/row2.js

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

package/dist/icon/icon.d.ts

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

package/dist/icon/icon2.js

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

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

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

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

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

package/dist/index.js

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

package/dist/input/input-group2.js

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

package/dist/input/input2.js

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

package/dist/internal/controllers/gesture.controller.d.ts

@@ -1,65 +1,145 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
-export interface GestureCapabilities {
-    readonly drag: boolean;
-    readonly pan: boolean;
-    readonly pinch: boolean;
-    readonly wheel: boolean;
+export interface PointerClaimOptions {
+    readonly kind?: 'drag' | 'pan';
+    readonly pinchCandidate?: boolean;
 }
-interface PointerMovementGesture {
+export interface PinchStartDecision<TContext> {
+    readonly context: TContext;
+}
+/** Coordinates and deltas use CSS pixels; movement is sample-relative and total displacement is start-relative. */
+export interface PointerMovementGesture {
     readonly event: PointerEvent;
+    readonly clientX: number;
+    readonly clientY: number;
     readonly movementX: number;
     readonly movementY: number;
+    readonly startClientX: number;
+    readonly startClientY: number;
+    readonly totalDisplacementX: number;
+    readonly totalDisplacementY: number;
+}
+export interface PinchStart {
+    readonly firstPointerId: number;
+    readonly firstPointerType: string;
+    readonly firstStartClientX: number;
+    readonly firstStartClientY: number;
+    readonly secondPointerId: number;
+    readonly secondPointerType: string;
+    readonly secondStartClientX: number;
+    readonly secondStartClientY: number;
+    readonly startCenterClientX: number;
+    readonly startCenterClientY: number;
+}
+export interface PinchGesture<TContext> extends PinchStart {
+    readonly kind: 'pinch';
+    readonly event: PointerEvent;
+    readonly context: TContext;
+    /** Current pointer distance divided by the starting pointer distance. */
+    readonly scale: number;
+    readonly centerClientX: number;
+    readonly centerClientY: number;
+}
+/**
+ * Per-event wheel input normalized to CSS pixels.
+ *
+ * Modifier-assisted trackpad pinch remains wheel input: consumers can classify it using the native event's
+ * `ctrlKey` or `metaKey` without conflating it with the start-relative lifecycle of a two-pointer pinch.
+ */
+export interface WheelGesture {
+    readonly kind: 'wheel';
+    readonly event: WheelEvent;
+    readonly clientX: number;
+    readonly clientY: number;
+    readonly deltaX: number;
+    readonly deltaY: number;
+}
+export type PointerEndReason = 'up' | 'cancel' | 'lost-capture' | 'buttons-released';
+export interface PointerEndGesture extends PointerMovementGesture {
+    readonly kind: 'pointerend';
+    /** Whether the pointer session ended without an observed physical release. */
+    readonly interrupted: boolean;
+    readonly reason: PointerEndReason;
 }
 export type Gesture<TPinchContext> = (PointerMovementGesture & {
     readonly kind: 'drag';
 }) | (PointerMovementGesture & {
     readonly kind: 'pan';
-}) | {
-    readonly context: TPinchContext;
-    readonly event: PointerEvent;
-    readonly kind: 'pinch';
-    readonly scale: number;
-} | {
-    readonly deltaPixels: number;
-    readonly event: WheelEvent;
-    readonly kind: 'wheel';
-};
-export type UnhandledPointerInput = {
-    readonly event: PointerEvent;
-    readonly kind: 'click';
-} | {
-    readonly event: PointerEvent;
-    readonly kind: 'lostpointercapture';
-} | {
-    readonly event: PointerEvent;
-    readonly kind: 'pointercancel';
-} | {
+}) | PinchGesture<TPinchContext>;
+export interface PointerDownInput {
     readonly event: PointerEvent;
     readonly kind: 'pointerdown';
-} | {
-    readonly event: PointerEvent;
-    readonly kind: 'pointermove';
-} | {
-    readonly event: PointerEvent;
-    readonly kind: 'pointerup';
-};
+    /**
+     * Claims this pointer sequence once during the synchronous input dispatch and suppresses native text selection for
+     * its lifetime; returns `false` after that window.
+     */
+    readonly claim: (options?: PointerClaimOptions) => boolean;
+}
+export interface WheelGestureInput extends WheelGesture {
+    /** Claims and prevents this wheel event during the synchronous input dispatch; returns `false` afterward. */
+    readonly claim: () => boolean;
+}
+/** Claimable starts, claimed pointer terminals, and normalized claimable wheel input. */
+export type GestureInput = PointerDownInput | PointerEndGesture | WheelGestureInput;
+/** Precedence policy for claims among nested GestureController targets. */
+export type GestureClaimPriority = 'self-first' | 'descendant-first';
 export interface GestureControllerOptions<TPinchContext = undefined> {
-    /** Creates a snapshot of caller state when a pinch begins. Omit this field to disable pinch recognition. */
-    readonly createPinchContext?: () => TPinchContext;
-    /** Returns the gesture kinds that the controller can recognize for the current input event. */
-    readonly getCapabilities: () => GestureCapabilities;
-    /** Updates caller state before the controller reads capabilities for a nonignored input event. */
-    readonly prepare?: () => void;
-    /** Returns whether the controller should skip an input event before preparing or recognizing it. */
-    readonly shouldIgnore?: (event: Event) => boolean;
+    /**
+     * Skips admission of a new pointer sequence or a stateless native event.
+     * The controller does not consult it again after a pointerdown claim.
+     */
+    readonly shouldIgnoreEvent?: (event: Event) => boolean;
+    /**
+     * Consulted once when the controller first observes two claimed pinch candidates.
+     * Returning `undefined` declines that pair; otherwise the controller retains the context for its pinch lifetime.
+     * The pair remains locked until fewer than two pinch candidates remain.
+     */
+    readonly beginPinch?: (start: PinchStart) => PinchStartDecision<TPinchContext> | undefined;
+    /** Consulted independently for each context-menu event. */
+    readonly shouldPreventContextMenu?: (event: MouseEvent) => boolean;
+    /**
+     * Determines precedence among nested GestureController targets.
+     *
+     * `self-first` is appropriate for a dedicated interaction surface.
+     * `descendant-first` lets nested controllers claim input before this controller.
+     *
+     * Defaults to `self-first`.
+     */
+    readonly claimPriority?: GestureClaimPriority;
+    /**
+     * Consulted during native pointerdown capture before descendant handlers.
+     *
+     * Returning true calls preventDefault() on the pointerdown, but does not
+     * claim the pointer, capture it, stop propagation, create pointer state,
+     * suppress selection, or start a gesture.
+     *
+     * This is meaningful with `claimPriority: 'descendant-first'`. It lets an
+     * activated higher-level interaction mode reserve a sequence for ordinary
+     * target-phase application code while preserving nested GestureController
+     * claim priority.
+     */
+    readonly shouldReservePointerDown?: (event: PointerEvent) => boolean;
+    /** Prevents native HTML drag competition on a dedicated interaction surface. */
+    readonly suppressNativeDrag?: boolean;
+    /**
+     * Inline `touch-action` for a dedicated interaction surface. The controller reevaluates a callback after host updates.
+     * Restores the target's prior inline value afterward.
+     * Avoid applying it to a general root that contains native interactive content.
+     */
+    readonly touchAction?: string | (() => string | undefined);
 }
 type GestureHost = EventTarget & ReactiveControllerHost;
-/** Recognizes drag, pan, pinch, and wheel input on a dynamically assigned target. */
+/**
+ * Normalizes claimable platform pointer and wheel input on a dynamically assigned target.
+ * A pointer claim owns native input competition for its lifetime: the controller prevents claimed movement and text
+ * selection, and can suppress native drag when configured.
+ */
 export declare class GestureController<TPinchContext = undefined> implements ReactiveController {
     #private;
     constructor(host: GestureHost, options: GestureControllerOptions<TPinchContext>);
+    getWheelZoomFactor(input: Pick<WheelGesture, 'deltaY' | 'event'>): number;
     set target(target: HTMLElement | undefined);
     hostConnected(): void;
     hostDisconnected(): void;
+    hostUpdated(): void;
 }
 export {};

package/dist/internal/controllers/gesture.controller.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"gesture.controller.examples.js","names":[],"sources":["../../../src/internal/controllers/gesture.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 { GestureController } from '@nvidia-elements/core/internal';\n\nexport default {\n  title: 'Internal/Controllers'\n};\n\nclass GestureDemoElement extends LitElement {\n  readonly #gestureController = new GestureController(this, {\n    getCapabilities: () => ({ drag: true, pan: false, pinch: false, wheel: false })\n  });\n\n  static styles = css`\n    :host {\n      cursor: grab;\n      display: grid;\n      height: 64px;\n      place-items: center;\n      width: 64px;\n    }\n\n    :host([data-active]) {\n      cursor: grabbing;\n    }\n  `;\n\n  constructor() {\n    super();\n    this.#gestureController.target = this;\n  }\n\n  render() {\n    return html`drag`;\n  }\n}\n\nif (!customElements.get('gesture-controller-demo-element')) {\n  customElements.define('gesture-controller-demo-element', GestureDemoElement);\n}\n\n/**\n * @summary Drag recognition delivered through gesture and unmatched pointer events. Use event details to move content and represent active pointer state.\n * @tags test-case\n */\nexport const Drag = {\n  render: () => html`\n<gesture-controller-demo-element></gesture-controller-demo-element>\n<script type=\"module\">\n  const element = document.querySelector('gesture-controller-demo-element');\n  let x = 0;\n  let y = 0;\n\n  element.addEventListener('nve-pointer-input', ({ detail }) => {\n    if (detail.kind === 'pointerdown') element.dataset.active = '';\n    if (detail.kind === 'pointerup' || detail.kind === 'pointercancel') delete element.dataset.active;\n  });\n\n  element.addEventListener('nve-gesture', ({ detail }) => {\n    if (detail.kind !== 'drag') return;\n    x += detail.movementX;\n    y += detail.movementY;\n    element.style.translate = x + 'px ' + y + 'px';\n  });\n</script>\n`\n};\n"],"mappings":";AAGA,IAAA,IAAc"}
+{"version":3,"file":"gesture.controller.examples.js","names":[],"sources":["../../../src/internal/controllers/gesture.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 { GestureController } from '@nvidia-elements/core/internal';\n\nexport default {\n  title: 'Internal/Controllers'\n};\n\nclass GestureDemoElement extends LitElement {\n  readonly #gestureController = new GestureController(this, {});\n\n  static styles = css`\n    :host {\n      cursor: grab;\n      display: grid;\n      height: 64px;\n      place-items: center;\n      width: 64px;\n    }\n\n    :host([data-active]) {\n      cursor: grabbing;\n    }\n  `;\n\n  constructor() {\n    super();\n    this.#gestureController.target = this;\n  }\n\n  render() {\n    return html`drag`;\n  }\n}\n\nif (!customElements.get('gesture-controller-demo-element')) {\n  customElements.define('gesture-controller-demo-element', GestureDemoElement);\n}\n\n/**\n * @summary Synchronously claimed pointer input produces drag gestures while preserving start and end input. Use this pattern when a control owns a pointer sequence.\n * @tags test-case\n */\nexport const Drag = {\n  render: () => html`\n<gesture-controller-demo-element></gesture-controller-demo-element>\n<script type=\"module\">\n  const element = document.querySelector('gesture-controller-demo-element');\n  let x = 0;\n  let y = 0;\n\n  element.addEventListener('nve-gesture-input', ({ detail }) => {\n    if (detail.kind === 'pointerdown' && detail.claim({ kind: 'drag' })) element.dataset.active = '';\n    if (detail.kind === 'pointerend') delete element.dataset.active;\n  });\n\n  element.addEventListener('nve-gesture', ({ detail }) => {\n    if (detail.kind !== 'drag') return;\n    x += detail.movementX;\n    y += detail.movementY;\n    element.style.translate = x + 'px ' + y + 'px';\n  });\n</script>\n`\n};\n"],"mappings":";AAGA,IAAA,IAAc"}

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

@@ -4,8 +4,8 @@
     {
       "id": "internal-controllers-gesture.controller-drag",
       "name": "Drag",
-      "template": "<gesture-controller-demo-element></gesture-controller-demo-element>\n<script type=\"module\">\n  const element = document.querySelector(\"gesture-controller-demo-element\");\n  let x = 0;\n  let y = 0;\n  element.addEventListener(\"nve-pointer-input\", ({ detail }) => {\n    if (detail.kind === \"pointerdown\") element.dataset.active = \"\";\n    if (detail.kind === \"pointerup\" || detail.kind === \"pointercancel\") delete element.dataset.active;\n  });\n  element.addEventListener(\"nve-gesture\", ({ detail }) => {\n    if (detail.kind !== \"drag\") return;\n    x += detail.movementX;\n    y += detail.movementY;\n    element.style.translate = x + \"px \" + y + \"px\";\n  });\n</script>\n",
-      "summary": "Drag recognition delivered through gesture and unmatched pointer events. Use event details to move content and represent active pointer state.",
+      "template": "<gesture-controller-demo-element></gesture-controller-demo-element>\n<script type=\"module\">\n  const element = document.querySelector(\"gesture-controller-demo-element\");\n  let x = 0;\n  let y = 0;\n  element.addEventListener(\"nve-gesture-input\", ({ detail }) => {\n    if (detail.kind === \"pointerdown\" && detail.claim({ kind: \"drag\" })) element.dataset.active = \"\";\n    if (detail.kind === \"pointerend\") delete element.dataset.active;\n  });\n  element.addEventListener(\"nve-gesture\", ({ detail }) => {\n    if (detail.kind !== \"drag\") return;\n    x += detail.movementX;\n    y += detail.movementY;\n    element.style.translate = x + \"px \" + y + \"px\";\n  });\n</script>\n",
+      "summary": "Synchronously claimed pointer input produces drag gestures while preserving start and end input. Use this pattern when a control owns a pointer sequence.",
       "description": "",
       "composition": false,
       "tags": [