@nvidia-elements/core 2.8.1 → 2.9.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [2.9.0](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v2.8.1...@nvidia-elements/core-v2.9.0) (2026-09-24)
+
+### Features
+
+* **core:** add viewport ([0e9e892](https://github.com/NVIDIA/elements/commit/0e9e892de5d41c2a64d1e9adcfaa7a9df2c4deef))
+
+### Bug Fixes
+
+* **cli:** update bun to 1.4.2 ([0e84e28](https://github.com/NVIDIA/elements/commit/0e84e2880ca5ff09405d0d88d16ef12d9341623e))
+* **core:** enhance gesture recognizer ([0be2399](https://github.com/NVIDIA/elements/commit/0be2399b37982fde94c061ed811c280b29e3a3ae))
+
 ## [2.8.1](https://github.com/NVIDIA/elements/compare/@nvidia-elements/core-v2.8.0...@nvidia-elements/core-v2.8.1) (2026-09-23)
 
 ### Features

package/dist/accordion/accordion2.js

@@ -28,7 +28,7 @@ var b = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-accordion-header",
-			version: "2.8.1"
+			version: "2.9.0"
 		};
 	}
 	render() {
@@ -46,7 +46,7 @@ var x = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-accordion-content",
-			version: "2.8.1"
+			version: "2.9.0"
 		};
 	}
 	render() {
@@ -62,7 +62,7 @@ var x = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-accordion",
-			version: "2.8.1",
+			version: "2.9.0",
 			children: [
 				b.metadata.tag,
 				x.metadata.tag,
@@ -120,7 +120,7 @@ var C = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-accordion-group",
-			version: "2.8.1",
+			version: "2.9.0",
 			children: [S.metadata.tag]
 		};
 	}

package/dist/alert/alert-group2.js

@@ -19,7 +19,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-alert-group",
-			version: "2.8.1",
+			version: "2.9.0",
 			children: [o.metadata.tag]
 		};
 	}

package/dist/alert/alert2.js

@@ -28,7 +28,7 @@ var v = class extends m {
 	static {
 		this.metadata = {
 			tag: "nve-alert",
-			version: "2.8.1"
+			version: "2.9.0"
 		};
 	}
 	static {

package/dist/avatar/avatar-group2.js

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

package/dist/avatar/avatar2.js

@@ -11,7 +11,7 @@ var s = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-avatar",
-			version: "2.8.1"
+			version: "2.9.0"
 		};
 	}
 	render() {

package/dist/badge/badge2.js

@@ -25,7 +25,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-badge",
-			version: "2.8.1"
+			version: "2.9.0"
 		};
 	}
 	static {

package/dist/breadcrumb/breadcrumb2.js

@@ -24,7 +24,7 @@ var m = class extends u {
 	static {
 		this.metadata = {
 			tag: "nve-breadcrumb",
-			version: "2.8.1"
+			version: "2.9.0"
 		};
 	}
 	static {

package/dist/bundle.d.ts

@@ -67,6 +67,7 @@ import '@nvidia-elements/core/toggletip/define.js';
 import '@nvidia-elements/core/toolbar/define.js';
 import '@nvidia-elements/core/tooltip/define.js';
 import '@nvidia-elements/core/tree/define.js';
+import '@nvidia-elements/core/viewport/define.js';
 import '@nvidia-elements/core/week/define.js';
 export * from '@nvidia-elements/core/accordion';
 export * from '@nvidia-elements/core/alert';
@@ -137,4 +138,5 @@ export * from '@nvidia-elements/core/toggletip';
 export * from '@nvidia-elements/core/toolbar';
 export * from '@nvidia-elements/core/tooltip';
 export * from '@nvidia-elements/core/tree';
+export * from '@nvidia-elements/core/viewport';
 export * from '@nvidia-elements/core/week';

package/dist/bundles/index.d.ts

@@ -78,6 +78,19 @@ export interface RenderOptions {
 	 */
 	isConnected?: boolean;
 }
+/** 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 type PointerEndReason = "up" | "cancel" | "lost-capture" | "buttons-released";
 export interface I18nStrings {
 	close: string;
 	copy: string;
@@ -5541,6 +5554,198 @@ export declare class Tree extends LitElement {
 	disconnectedCallback(): void;
 	updated(props: PropertyValues<this>): Promise<void>;
 }
+export interface ViewportTransform {
+	readonly x: number;
+	readonly y: number;
+	readonly scale: number;
+}
+export interface ViewportPoint {
+	readonly x: number;
+	readonly y: number;
+}
+export interface ViewportRect extends ViewportPoint {
+	readonly width: number;
+	readonly height: number;
+}
+export type ViewportPanBehavior = boolean | "space";
+export interface ViewportPointerPanDetail extends PointerMovementGesture {
+	readonly source: "pointer";
+	readonly start: ViewportTransform;
+	readonly next: ViewportTransform;
+}
+export interface ViewportWheelPanDetail {
+	readonly source: "wheel";
+	readonly event: WheelEvent;
+	readonly clientX: number;
+	readonly clientY: number;
+	readonly deltaX: number;
+	readonly deltaY: number;
+	readonly start: ViewportTransform;
+	readonly next: ViewportTransform;
+}
+export interface ViewportDiscretePanDetail {
+	readonly source: "keyboard" | "command";
+	readonly event: KeyboardEvent | CommandEvent;
+	readonly start: ViewportTransform;
+	readonly next: ViewportTransform;
+}
+export type ViewportPanDetail = ViewportPointerPanDetail | ViewportWheelPanDetail | ViewportDiscretePanDetail;
+export type ViewportPanEndReason = PointerEndReason | "pinch";
+export interface ViewportPanEndDetail {
+	readonly source: "pointer";
+	readonly event: PointerEvent;
+	readonly interrupted: boolean;
+	readonly reason: ViewportPanEndReason;
+	readonly start: ViewportTransform;
+	readonly transform: ViewportTransform;
+}
+export interface ViewportZoomDetail {
+	readonly source: "wheel" | "pinch" | "keyboard" | "command";
+	readonly event: WheelEvent | PointerEvent | KeyboardEvent | CommandEvent;
+	readonly clientX: number;
+	readonly clientY: number;
+	readonly anchor: ViewportPoint;
+	readonly factor: number;
+	readonly start: ViewportTransform;
+	readonly next: ViewportTransform;
+}
+export interface ViewportAnimationOptions {
+	readonly duration?: number;
+}
+export interface ViewportRevealOptions {
+	/** Uniform CSS-pixel inset reserved around the revealed bounds. */
+	readonly inset?: number;
+	readonly scale?: number;
+	readonly animated?: boolean;
+	readonly duration?: number;
+}
+/**
+ * @element nve-viewport
+ * @description A viewport provides a spatial surface for arbitrary content, with optional pan and zoom navigation.
+ * @documentation https://nvidia.github.io/elements/docs/elements/viewport/
+ * @since 0.0.0
+ * @entrypoint \@nvidia-elements/core/viewport
+ * @slot - Content positioned in the viewport's infinite content space.
+ * @slot background - Custom content rendered behind viewport content and excluded from content fitting
+ * @event panstart - Dispatched when pointer movement crosses the pan threshold. Cancel to disable built-in pointer panning for the sequence.
+ * @event pan - Dispatched when pointer, wheel, keyboard, or command input requests a pan. Cancel to skip the proposed transform mutation.
+ * @event panend - Dispatched when a pointer pan ends, including its terminal reason.
+ * @event zoom - Dispatched when wheel, pinch, or command input requests a scale change. Cancel to skip the proposed transform mutation.
+ * @event viewportchange - Dispatched once after a render that commits one or more viewport transform changes.
+ * @cssprop --background - Background color of the fixed viewport area.
+ * @cssprop --min-height
+ * @cssprop --pan-cursor - Cursor shown over a background eligible for primary-pointer panning.
+ * @cssprop --panning-cursor - Cursor shown while a pointer pan is active.
+ * @command --pan-left - With behavior-pan enabled, pans left by one discrete step.
+ * @command --pan-right - With behavior-pan enabled, pans right by one discrete step.
+ * @command --pan-up - With behavior-pan enabled, pans up by one discrete step.
+ * @command --pan-down - With behavior-pan enabled, pans down by one discrete step.
+ * @command --zoom-in - With behavior-zoom enabled, animates to the next permitted scale step.
+ * @command --zoom-out - With behavior-zoom enabled, animates to the previous permitted scale step.
+ * @command --zoom-reset - With behavior-zoom enabled, animates to 100% scale.
+ * @command --zoom-to-fit - With behavior-zoom enabled, animates to fit direct default-slot element boxes.
+ * @stable false
+ */
+export declare class Viewport extends LitElement {
+	#private;
+	static styles: CSSResult[];
+	static readonly metadata: {
+		tag: string;
+		version: string;
+	};
+	/** @private */
+	_internals: ElementInternals;
+	private internalHost;
+	constructor();
+	/** Horizontal content-space coordinate at the viewport origin. */
+	get x(): number;
+	set x(value: number);
+	/** Vertical content-space coordinate at the viewport origin. */
+	get y(): number;
+	set y(value: number);
+	/** Content-to-viewport CSS-pixel scale. */
+	get scale(): number;
+	set scale(value: number);
+	/** Inclusive lower scale limit. */
+	get minScale(): number;
+	set minScale(value: number);
+	/** Inclusive upper scale limit. */
+	get maxScale(): number;
+	set maxScale(value: number);
+	/** Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space. */
+	get behaviorPan(): ViewportPanBehavior;
+	set behaviorPan(value: ViewportPanBehavior | null | undefined);
+	/** Enables zooming by pinch, focused modified wheel, focused keyboard, and Invoker commands. */
+	behaviorZoom: boolean;
+	/** Fits measurable direct default-slot content once after initial layout. */
+	autoFit: boolean;
+	/** Default uniform CSS-pixel inset reserved around bounds when fitting content. */
+	get fitInset(): number;
+	set fitInset(value: number);
+	/** CSS-pixel pointer movement required before a pointer pan begins. */
+	get dragThreshold(): number;
+	set dragThreshold(value: number);
+	connectedCallback(): void;
+	disconnectedCallback(): void;
+	protected updated(changed: PropertyValues<this>): void;
+	render(): TemplateResult<1>;
+	/** Converts a content-space point to viewport CSS pixels. */
+	toViewportCoords(contentX: number, contentY: number): ViewportPoint;
+	/** Converts a viewport CSS-pixel point to content space. */
+	toContentCoords(viewportX: number, viewportY: number): ViewportPoint;
+	/** Returns the current content-space origin and CSS-pixel scale. */
+	getTransform(): ViewportTransform;
+	/** Returns the visible content-space rectangle. */
+	getVisibleRect(): ViewportRect;
+	/** Animates the viewport to the requested partial transform. */
+	animateTo(target: Partial<ViewportTransform>, options?: ViewportAnimationOptions): void;
+	/** Centers or fits a content-space region within the viewport. */
+	reveal(region: {
+		x: number;
+		y: number;
+		width?: number;
+		height?: number;
+	}, options?: ViewportRevealOptions): void;
+	/** Fits the union of direct default-slot element boxes within the viewport. */
+	fitContents(options?: ViewportRevealOptions): void;
+}
+/**
+ * @element nve-viewport-gridlines
+ * @description Renders origin-stable, zoom-adaptive gridlines behind viewport content.
+ * @documentation https://nvidia.github.io/elements/docs/elements/viewport/
+ * @since 0.0.0
+ * @entrypoint \@nvidia-elements/core/viewport
+ * @cssprop --color - Sets the gridline stroke color.
+ * @cssprop --line-width - Sets the approximate stroke width in CSS pixels.
+ */
+export declare class ViewportGridlines extends LitElement {
+	#private;
+	static styles: CSSResult[];
+	static readonly metadata: {
+		tag: string;
+		version: string;
+	};
+	/** @private */
+	slot: string;
+	/** @private */
+	protected accessibilityHidden: string;
+	/** Smallest gridline interval in content-space units. */
+	get step(): number;
+	set step(value: number);
+	/** Content-space x coordinate of the grid origin. */
+	get originX(): number;
+	set originX(value: number);
+	/** Content-space y coordinate of the grid origin. */
+	get originY(): number;
+	set originY(value: number);
+	/** Target on-screen separation used to choose the adaptive gridline interval, in CSS pixels. */
+	get targetSpacing(): number;
+	set targetSpacing(value: number);
+	connectedCallback(): void;
+	disconnectedCallback(): void;
+	protected willUpdate(changed: PropertyValues<this>): void;
+	render(): typeof nothing | TemplateResult<1>;
+}
 /**
  * @element nve-week
  * @description A week picker is a control that enables users to choose a week value.