@nvidia-elements/core 2.11.1 → 2.12.0

package/dist/select/select2.js

@@ -27,7 +27,7 @@ var S = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-select",
-			version: "2.11.1"
+			version: "2.12.0"
 		};
 	}
 	static {

package/dist/skeleton/skeleton2.js

@@ -15,7 +15,7 @@ var s = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-skeleton",
-			version: "2.11.1"
+			version: "2.12.0"
 		};
 	}
 	render() {

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

@@ -19,7 +19,7 @@ var u = {
 	static {
 		this.metadata = {
 			tag: "nve-sort-button",
-			version: "2.11.1"
+			version: "2.12.0"
 		};
 	}
 	static {

package/dist/sparkline/sparkline2.js

@@ -21,7 +21,7 @@ var C = class extends _ {
 	static {
 		this.metadata = {
 			tag: "nve-sparkline",
-			version: "2.11.1"
+			version: "2.12.0"
 		};
 	}
 	render() {

package/dist/star-rating/star-rating2.js

@@ -18,7 +18,7 @@ var l = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-star-rating",
-			version: "2.11.1"
+			version: "2.12.0"
 		};
 	}
 	static {

package/dist/steps/steps2.js

@@ -23,7 +23,7 @@ var v = class extends h(d) {
 	static {
 		this.metadata = {
 			tag: "nve-steps-item",
-			version: "2.11.1",
+			version: "2.12.0",
 			parents: ["nve-steps"]
 		};
 	}
@@ -69,7 +69,7 @@ var y = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-steps",
-			version: "2.11.1",
+			version: "2.12.0",
 			children: ["nve-steps-item"]
 		};
 	}

package/dist/switch/switch-group2.js

@@ -11,7 +11,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-switch-group",
-			version: "2.11.1",
+			version: "2.12.0",
 			children: [
 				"label",
 				"nve-control-message",

package/dist/switch/switch2.js

@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-switch",
-			version: "2.11.1",
+			version: "2.12.0",
 			children: [
 				"label",
 				"input",

package/dist/tabs/tabs-group2.js

@@ -33,7 +33,7 @@ var m, h = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-tabs-group",
-			version: "2.11.1",
+			version: "2.12.0",
 			children: ["nve-tabs"]
 		};
 	}

package/dist/tabs/tabs2.js

@@ -20,7 +20,7 @@ var _ = class extends h(f) {
 	static {
 		this.metadata = {
 			tag: "nve-tabs-item",
-			version: "2.11.1",
+			version: "2.12.0",
 			parents: ["nve-tabs"]
 		};
 	}
@@ -53,7 +53,7 @@ var v = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-tabs",
-			version: "2.11.1",
+			version: "2.12.0",
 			children: ["nve-tabs-item"]
 		};
 	}

package/dist/tag/tag2.js

@@ -17,7 +17,7 @@ var p = class extends d(c) {
 	static {
 		this.metadata = {
 			tag: "nve-tag",
-			version: "2.11.1"
+			version: "2.12.0"
 		};
 	}
 	static {

package/dist/textarea/textarea2.js

@@ -16,7 +16,7 @@ var i = class extends t {
 	static {
 		this.metadata = {
 			tag: "nve-textarea",
-			version: "2.11.1"
+			version: "2.12.0"
 		};
 	}
 };

package/dist/time/time2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-time",
-			version: "2.11.1"
+			version: "2.12.0"
 		};
 	}
 	static {

package/dist/toast/toast2.js

@@ -23,7 +23,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-toast",
-			version: "2.11.1"
+			version: "2.12.0"
 		};
 	}
 	static {

package/dist/toggletip/toggletip-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-toggletip-footer",
-			version: "2.11.1",
+			version: "2.12.0",
 			parents: ["nve-toggletip"]
 		};
 	}

package/dist/toggletip/toggletip-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-toggletip-header",
-			version: "2.11.1",
+			version: "2.12.0",
 			parents: ["nve-toggletip"]
 		};
 	}

package/dist/toggletip/toggletip2.js

@@ -24,7 +24,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-toggletip",
-			version: "2.11.1"
+			version: "2.12.0"
 		};
 	}
 	static {

package/dist/toolbar/toolbar2.js

@@ -21,7 +21,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-toolbar",
-			version: "2.11.1"
+			version: "2.12.0"
 		};
 	}
 	static {

package/dist/tooltip/tooltip2.js

@@ -19,7 +19,7 @@ var d = class extends s {
 	static {
 		this.metadata = {
 			tag: "nve-tooltip",
-			version: "2.11.1"
+			version: "2.12.0"
 		};
 	}
 	render() {

package/dist/tree/tree-node2.js

@@ -44,7 +44,7 @@ var E = class extends b {
 	static {
 		this.metadata = {
 			tag: "nve-tree-node",
-			version: "2.11.1",
+			version: "2.12.0",
 			parents: ["nve-tree", "nve-tree-node"]
 		};
 	}

package/dist/tree/tree2.js

@@ -22,7 +22,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-tree",
-			version: "2.11.1",
+			version: "2.12.0",
 			children: ["nve-tree-node"]
 		};
 	}

package/dist/viewport/viewport-gridlines.d.ts

@@ -1,12 +1,14 @@
 import { LitElement, nothing, type PropertyValues } from 'lit';
 /**
  * @element nve-viewport-gridlines
- * @description Renders origin-stable, zoom-adaptive gridlines behind viewport content.
+ * @description Renders origin-stable, zoom-adaptive gridline patterns 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 --color - Sets the gridline pattern color.
  * @cssprop --line-width - Sets the approximate stroke width in CSS pixels.
+ * @cssprop --dot-radius - Sets the approximate dot radius in CSS pixels.
+ * @cssprop --cross-size - Sets the approximate full width and height of each cross in CSS pixels.
  */
 export declare class ViewportGridlines extends LitElement {
     #private;
@@ -19,6 +21,8 @@ export declare class ViewportGridlines extends LitElement {
     slot: string;
     /** @private */
     protected accessibilityHidden: string;
+    /** Grid pattern to render. */
+    pattern: 'lines' | 'dots' | 'crosses';
     /** Smallest gridline interval in content-space units. */
     get step(): number;
     set step(value: number);

package/dist/viewport/viewport-gridlines.js

@@ -1,5 +1,5 @@
 //#region src/viewport/viewport-gridlines.css?inline
-var e = ":host{--_scale: 1;--color: var(--nve-ref-border-color-muted);--line-width: 1px;position:absolute;inset:0;contain:none;pointer-events:none;user-select:none}svg{position:absolute;overflow:visible;pointer-events:none}path{fill:none;stroke:var(--color);stroke-width:calc(var(--line-width) / var(--_scale))}";
+var e = ":host{--color: var(--nve-ref-border-color-muted);--line-width: var(--nve-ref-border-width-sm);--dot-radius: var(--nve-ref-size-50);--cross-size: var(--nve-ref-size-200);--_scale: 1;position:absolute;inset:0;contain:none;pointer-events:none;user-select:none}svg{position:absolute;overflow:visible;pointer-events:none}path{fill:none;stroke:var(--color);stroke-width:calc(var(--line-width) / var(--_scale))}circle{fill:var(--color);r:calc(var(--dot-radius) / var(--_scale))}.cross{fill:var(--color)}.cross-horizontal{x:calc(var(--cross-size) / var(--_scale) / -2);y:calc(var(--line-width) / var(--_scale) / -2);width:calc(var(--cross-size) / var(--_scale));height:calc(var(--line-width) / var(--_scale))}.cross-vertical{x:calc(var(--line-width) / var(--_scale) / -2);y:calc(var(--cross-size) / var(--_scale) / -2);width:calc(var(--line-width) / var(--_scale));height:calc(var(--cross-size) / var(--_scale))}";
 //#endregion
 export { e as default };
 

package/dist/viewport/viewport-gridlines.js.map

@@ -1 +1 @@
-{"version":3,"file":"viewport-gridlines.js","names":[],"sources":["../../src/viewport/viewport-gridlines.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --_scale: 1;\n  --color: var(--nve-ref-border-color-muted);\n  --line-width: 1px;\n\n  position: absolute;\n  inset: 0;\n  contain: none;\n  pointer-events: none;\n  user-select: none;\n}\n\nsvg {\n  position: absolute;\n  overflow: visible;\n  pointer-events: none;\n}\n\npath {\n  fill: none;\n  stroke: var(--color);\n  stroke-width: calc(var(--line-width) / var(--_scale));\n}\n"],"mappings":""}
+{"version":3,"file":"viewport-gridlines.js","names":[],"sources":["../../src/viewport/viewport-gridlines.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --color: var(--nve-ref-border-color-muted);\n  --line-width: var(--nve-ref-border-width-sm);\n  --dot-radius: var(--nve-ref-size-50);\n  --cross-size: var(--nve-ref-size-200);\n\n  --_scale: 1;\n\n  position: absolute;\n  inset: 0;\n  contain: none;\n  pointer-events: none;\n  user-select: none;\n}\n\nsvg {\n  position: absolute;\n  overflow: visible;\n  pointer-events: none;\n}\n\npath {\n  fill: none;\n  stroke: var(--color);\n  stroke-width: calc(var(--line-width) / var(--_scale));\n}\n\ncircle {\n  fill: var(--color);\n  r: calc(var(--dot-radius) / var(--_scale));\n}\n\n.cross {\n  fill: var(--color);\n}\n\n.cross-horizontal {\n  x: calc(var(--cross-size) / var(--_scale) / -2);\n  y: calc(var(--line-width) / var(--_scale) / -2);\n  width: calc(var(--cross-size) / var(--_scale));\n  height: calc(var(--line-width) / var(--_scale));\n}\n\n.cross-vertical {\n  x: calc(var(--line-width) / var(--_scale) / -2);\n  y: calc(var(--cross-size) / var(--_scale) / -2);\n  width: calc(var(--line-width) / var(--_scale));\n  height: calc(var(--cross-size) / var(--_scale));\n}\n"],"mappings":""}

package/dist/viewport/viewport-gridlines2.js

@@ -5,17 +5,17 @@ import i from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js
 import { Viewport as a } from "./viewport2.js";
 import o from "./viewport-gridlines.js";
 import { createGridlineCoverage as s, gridlineCoverageNeedsUpdate as c, selectGridlineInterval as l } from "./viewport-gridlines.utils.js";
-import { LitElement as u, html as d, nothing as f } from "lit";
-import { property as p } from "lit/decorators/property.js";
-import { styleMap as m } from "lit/directives/style-map.js";
+import { LitElement as u, html as d, nothing as f, svg as p } from "lit";
+import { property as m } from "lit/decorators/property.js";
+import { styleMap as h } from "lit/directives/style-map.js";
 //#region src/viewport/viewport-gridlines.ts
-var h = 10, g = 64, _ = class extends u {
+var g = 10, _ = 64, v = class extends u {
 	constructor(...e) {
-		super(...e), this.slot = "background", this.accessibilityHidden = "true", this.#e = h, this.#t = 0, this.#n = 0, this.#r = g, this.#s = () => {
+		super(...e), this.slot = "background", this.accessibilityHidden = "true", this.#e = g, this.#t = 0, this.#n = 0, this.#r = _, this.pattern = "lines", this.#c = () => {
 			let e = this.#i;
-			e && (this.style.setProperty("--_scale", `${e.scale}`), this.#l());
-		}, this.#c = () => {
-			this.#l({ forceCoverage: !0 });
+			e && (this.style.setProperty("--_scale", `${e.scale}`), this.#u());
+		}, this.#l = () => {
+			this.#u({ forceCoverage: !0 });
 		};
 	}
 	static {
@@ -24,7 +24,7 @@ var h = 10, g = 64, _ = class extends u {
 	static {
 		this.metadata = {
 			tag: "nve-viewport-gridlines",
-			version: "2.11.1"
+			version: "2.12.0"
 		};
 	}
 	#e;
@@ -38,7 +38,7 @@ var h = 10, g = 64, _ = class extends u {
 		return this.#e;
 	}
 	set step(e) {
-		let t = r(e, h);
+		let t = r(e, g);
 		if (t === this.#e) return;
 		let n = this.#e;
 		this.#e = t, this.requestUpdate("step", n);
@@ -65,7 +65,7 @@ var h = 10, g = 64, _ = class extends u {
 		return this.#r;
 	}
 	set targetSpacing(e) {
-		let t = r(e, g);
+		let t = r(e, _);
 		if (t === this.#r) return;
 		let n = this.#r;
 		this.#r = t, this.requestUpdate("targetSpacing", n);
@@ -73,16 +73,16 @@ var h = 10, g = 64, _ = class extends u {
 	connectedCallback() {
 		super.connectedCallback();
 		let e = this.parentElement;
-		e instanceof a && (this.#i = e, this.style.setProperty("--_scale", `${e.scale}`), this.#i.addEventListener("viewportchange", this.#s), typeof ResizeObserver < "u" && (this.#a = new ResizeObserver(this.#c), this.#a.observe(e)), this.#u({
+		e instanceof a && (this.#i = e, this.style.setProperty("--_scale", `${e.scale}`), this.#i.addEventListener("viewportchange", this.#c), typeof ResizeObserver < "u" && (this.#a = new ResizeObserver(this.#l), this.#a.observe(e)), this.#d({
 			forceCoverage: !0,
 			resetInterval: !0
 		}));
 	}
 	disconnectedCallback() {
-		this.#i && this.#i.removeEventListener("viewportchange", this.#s), this.#a?.disconnect(), this.#a = void 0, this.#i = void 0, this.#o = void 0, super.disconnectedCallback();
+		this.#i && this.#i.removeEventListener("viewportchange", this.#c), this.#a?.disconnect(), this.#a = void 0, this.#i = void 0, this.#o = void 0, super.disconnectedCallback();
 	}
 	willUpdate(e) {
-		super.willUpdate(e), (e.has("step") || e.has("targetSpacing")) && this.#u({
+		super.willUpdate(e), (e.has("step") || e.has("targetSpacing")) && this.#d({
 			forceCoverage: !0,
 			resetInterval: !0
 		});
@@ -90,15 +90,22 @@ var h = 10, g = 64, _ = class extends u {
 	render() {
 		let e = this.#o;
 		if (!e) return f;
-		let { coverage: t, interval: n } = e;
-		return d`<svg internal-host aria-hidden="true" focusable="false" preserveAspectRatio="none" style="${m(y(t))}" viewBox="${t.x} ${t.y} ${t.width} ${t.height}"><defs><pattern data-gridline-pattern id="gridlines" x="${this.#t}" y="${this.#n}" width="${n}" height="${n}" patternUnits="userSpaceOnUse"><path d="M ${n} 0 H 0 V ${n}"></path></pattern></defs><rect x="${t.x}" y="${t.y}" width="${t.width}" height="${t.height}" fill="url(#gridlines)"></rect></svg>`;
+		let { coverage: t, interval: n } = e, r = this.pattern === "dots" || this.pattern === "crosses";
+		return d`<svg internal-host aria-hidden="true" focusable="false" preserveAspectRatio="none" style="${h(b(t))}" viewBox="${t.x} ${t.y} ${t.width} ${t.height}"><defs><pattern data-gridline-pattern id="gridlines" x="${this.#t - (r ? n / 2 : 0)}" y="${this.#n - (r ? n / 2 : 0)}" width="${n}" height="${n}" patternUnits="userSpaceOnUse">${this.#s(n)}</pattern></defs><rect x="${t.x}" y="${t.y}" width="${t.width}" height="${t.height}" fill="url(#gridlines)"></rect></svg>`;
 	}
-	#s;
-	#c;
-	#l(e = {}) {
-		this.#u(e) && this.requestUpdate();
+	#s(e) {
+		switch (this.pattern) {
+			case "dots": return p`<circle cx="${e / 2}" cy="${e / 2}" r="2"></circle>`;
+			case "crosses": return p`<g transform="translate(${e / 2} ${e / 2})"><clipPath id="cross-clip"><rect class="cross-horizontal"></rect><rect class="cross-vertical"></rect></clipPath><rect class="cross" x="${-e / 2}" y="${-e / 2}" width="${e}" height="${e}" clip-path="url(#cross-clip)"></rect></g>`;
+			default: return p`<path d="M ${e} 0 H 0 V ${e}"></path>`;
+		}
 	}
+	#c;
+	#l;
 	#u(e = {}) {
+		this.#d(e) && this.requestUpdate();
+	}
+	#d(e = {}) {
 		let t = this.#i;
 		if (!t) return !1;
 		let n = t.getVisibleRect();
@@ -108,7 +115,7 @@ var h = 10, g = 64, _ = class extends u {
 			scale: t.scale,
 			step: this.#e,
 			targetSpacing: this.#r
-		}), i = v({
+		}), i = y({
 			forceCoverage: e.forceCoverage === !0,
 			interval: r,
 			previous: this.#o,
@@ -117,30 +124,33 @@ var h = 10, g = 64, _ = class extends u {
 		return i ? (this.#o = i, !0) : !1;
 	}
 };
-i([e()], _.prototype, "slot", void 0), i([e({ attribute: "aria-hidden" })], _.prototype, "accessibilityHidden", void 0), i([p({
+i([e()], v.prototype, "slot", void 0), i([e({ attribute: "aria-hidden" })], v.prototype, "accessibilityHidden", void 0), i([m({
+	type: String,
+	reflect: !0
+})], v.prototype, "pattern", void 0), i([m({
 	type: Number,
 	reflect: !0
-})], _.prototype, "step", null), i([p({
+})], v.prototype, "step", null), i([m({
 	type: Number,
 	attribute: "origin-x",
 	reflect: !0
-})], _.prototype, "originX", null), i([p({
+})], v.prototype, "originX", null), i([m({
 	type: Number,
 	attribute: "origin-y",
 	reflect: !0
-})], _.prototype, "originY", null), i([p({
+})], v.prototype, "originY", null), i([m({
 	type: Number,
 	attribute: "target-spacing",
 	reflect: !0
-})], _.prototype, "targetSpacing", null);
-function v({ forceCoverage: e, interval: t, previous: n, visible: r }) {
+})], v.prototype, "targetSpacing", null);
+function y({ forceCoverage: e, interval: t, previous: n, visible: r }) {
 	let i = e || c(n?.coverage, r), a = t !== n?.interval;
 	if (!(!i && !a)) return {
 		coverage: i || !n ? s(r) : n.coverage,
 		interval: t
 	};
 }
-function y(e) {
+function b(e) {
 	return {
 		height: `${e.height}px`,
 		left: `${e.x}px`,
@@ -149,6 +159,6 @@ function y(e) {
 	};
 }
 //#endregion
-export { _ as ViewportGridlines };
+export { v as ViewportGridlines };
 
 //# sourceMappingURL=viewport-gridlines2.js.map

package/dist/viewport/viewport-gridlines2.js.map

@@ -1 +1 @@
-{"version":3,"file":"viewport-gridlines2.js","names":[],"sources":["../../src/viewport/viewport-gridlines.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { finiteOr, hostAttr, positiveFiniteOr, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './viewport-gridlines.css?inline';\nimport {\n  createGridlineCoverage,\n  gridlineCoverageNeedsUpdate,\n  selectGridlineInterval\n} from './viewport-gridlines.utils.js';\nimport { Viewport } from './viewport.js';\nimport type { ViewportRect } from './viewport.types.js';\n\nconst DEFAULT_STEP = 10;\nconst DEFAULT_TARGET_SPACING = 64;\n\ninterface GridlineProjection {\n  readonly coverage: ViewportRect;\n  readonly interval: number;\n}\n\ninterface ProjectionSyncOptions {\n  readonly forceCoverage?: boolean;\n  readonly resetInterval?: boolean;\n}\n\n/**\n * @element nve-viewport-gridlines\n * @description Renders origin-stable, zoom-adaptive gridlines behind viewport content.\n * @documentation https://nvidia.github.io/elements/docs/elements/viewport/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/viewport\n * @cssprop --color - Sets the gridline stroke color.\n * @cssprop --line-width - Sets the approximate stroke width in CSS pixels.\n */\nexport class ViewportGridlines extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-viewport-gridlines',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  @hostAttr() slot = 'background';\n\n  /** @private */\n  @hostAttr({ attribute: 'aria-hidden' }) protected accessibilityHidden = 'true';\n\n  #step = DEFAULT_STEP;\n  #originX = 0;\n  #originY = 0;\n  #targetSpacing = DEFAULT_TARGET_SPACING;\n  #viewport?: Viewport;\n  #resizeObserver?: ResizeObserver;\n  #projection?: GridlineProjection;\n\n  /** Smallest gridline interval in content-space units. */\n  @property({ type: Number, reflect: true })\n  get step(): number {\n    return this.#step;\n  }\n\n  set step(value: number) {\n    const next = positiveFiniteOr(value, DEFAULT_STEP);\n    if (next === this.#step) return;\n    const previous = this.#step;\n    this.#step = next;\n    this.requestUpdate('step', previous);\n  }\n\n  /** Content-space x coordinate of the grid origin. */\n  @property({ type: Number, attribute: 'origin-x', reflect: true })\n  get originX(): number {\n    return this.#originX;\n  }\n\n  set originX(value: number) {\n    const next = finiteOr(value, 0);\n    if (next === this.#originX) return;\n    const previous = this.#originX;\n    this.#originX = next;\n    this.requestUpdate('originX', previous);\n  }\n\n  /** Content-space y coordinate of the grid origin. */\n  @property({ type: Number, attribute: 'origin-y', reflect: true })\n  get originY(): number {\n    return this.#originY;\n  }\n\n  set originY(value: number) {\n    const next = finiteOr(value, 0);\n    if (next === this.#originY) return;\n    const previous = this.#originY;\n    this.#originY = next;\n    this.requestUpdate('originY', previous);\n  }\n\n  /** Target on-screen separation used to choose the adaptive gridline interval, in CSS pixels. */\n  @property({ type: Number, attribute: 'target-spacing', reflect: true })\n  get targetSpacing(): number {\n    return this.#targetSpacing;\n  }\n\n  set targetSpacing(value: number) {\n    const next = positiveFiniteOr(value, DEFAULT_TARGET_SPACING);\n    if (next === this.#targetSpacing) return;\n    const previous = this.#targetSpacing;\n    this.#targetSpacing = next;\n    this.requestUpdate('targetSpacing', previous);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    const viewport = this.parentElement;\n    if (!(viewport instanceof Viewport)) return;\n    this.#viewport = viewport;\n    this.style.setProperty('--_scale', `${viewport.scale}`);\n    this.#viewport.addEventListener('viewportchange', this.#handleViewportChange);\n    if (typeof ResizeObserver !== 'undefined') {\n      this.#resizeObserver = new ResizeObserver(this.#handleViewportResize);\n      this.#resizeObserver.observe(viewport);\n    }\n    this.#updateProjection({ forceCoverage: true, resetInterval: true });\n  }\n\n  disconnectedCallback(): void {\n    if (this.#viewport) {\n      this.#viewport.removeEventListener('viewportchange', this.#handleViewportChange);\n    }\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = undefined;\n    this.#viewport = undefined;\n    this.#projection = undefined;\n    super.disconnectedCallback();\n  }\n\n  protected willUpdate(changed: PropertyValues<this>): void {\n    super.willUpdate(changed);\n    if (changed.has('step') || changed.has('targetSpacing')) {\n      this.#updateProjection({ forceCoverage: true, resetInterval: true });\n    }\n  }\n\n  render() {\n    const projection = this.#projection;\n    if (!projection) return nothing;\n    const { coverage, interval } = projection;\n    return html`\n      <svg\n        internal-host\n        aria-hidden=\"true\"\n        focusable=\"false\"\n        preserveAspectRatio=\"none\"\n        style=${styleMap(coverageStyles(coverage))}\n        viewBox=\"${coverage.x} ${coverage.y} ${coverage.width} ${coverage.height}\"\n      >\n        <defs>\n          <pattern\n            data-gridline-pattern\n            id=\"gridlines\"\n            x=${this.#originX}\n            y=${this.#originY}\n            width=${interval}\n            height=${interval}\n            patternUnits=\"userSpaceOnUse\"\n          >\n            <path d=\"M ${interval} 0 H 0 V ${interval}\"></path>\n          </pattern>\n        </defs>\n        <rect\n          x=${coverage.x}\n          y=${coverage.y}\n          width=${coverage.width}\n          height=${coverage.height}\n          fill=\"url(#gridlines)\"\n        ></rect>\n      </svg>\n    `;\n  }\n\n  #handleViewportChange = (): void => {\n    const viewport = this.#viewport;\n    if (!viewport) return;\n    this.style.setProperty('--_scale', `${viewport.scale}`);\n    this.#requestProjectionUpdate();\n  };\n\n  #handleViewportResize = (): void => {\n    this.#requestProjectionUpdate({ forceCoverage: true });\n  };\n\n  #requestProjectionUpdate(options: ProjectionSyncOptions = {}): void {\n    if (this.#updateProjection(options)) this.requestUpdate();\n  }\n\n  #updateProjection(options: ProjectionSyncOptions = {}): boolean {\n    const viewport = this.#viewport;\n    if (!viewport) return false;\n    const visible = viewport.getVisibleRect();\n    if (visible.width <= 0 || visible.height <= 0) return false;\n    const interval = selectGridlineInterval({\n      current: options.resetInterval ? undefined : this.#projection?.interval,\n      scale: viewport.scale,\n      step: this.#step,\n      targetSpacing: this.#targetSpacing\n    });\n    const projection = nextProjection({\n      forceCoverage: options.forceCoverage === true,\n      interval,\n      previous: this.#projection,\n      visible\n    });\n    if (!projection) return false;\n    this.#projection = projection;\n    return true;\n  }\n}\n\nfunction nextProjection({\n  forceCoverage,\n  interval,\n  previous,\n  visible\n}: {\n  forceCoverage: boolean;\n  interval: number;\n  previous?: GridlineProjection;\n  visible: ViewportRect;\n}): GridlineProjection | undefined {\n  const coverageChanged = forceCoverage || gridlineCoverageNeedsUpdate(previous?.coverage, visible);\n  const intervalChanged = interval !== previous?.interval;\n  if (!coverageChanged && !intervalChanged) return undefined;\n  const coverage = coverageChanged || !previous ? createGridlineCoverage(visible) : previous.coverage;\n  return { coverage, interval };\n}\n\nfunction coverageStyles(coverage: ViewportRect): Record<string, string> {\n  return {\n    height: `${coverage.height}px`,\n    left: `${coverage.x}px`,\n    top: `${coverage.y}px`,\n    width: `${coverage.width}px`\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"viewport-gridlines2.js","names":[],"sources":["../../src/viewport/viewport-gridlines.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing, svg, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { finiteOr, hostAttr, positiveFiniteOr, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './viewport-gridlines.css?inline';\nimport {\n  createGridlineCoverage,\n  gridlineCoverageNeedsUpdate,\n  selectGridlineInterval\n} from './viewport-gridlines.utils.js';\nimport { Viewport } from './viewport.js';\nimport type { ViewportRect } from './viewport.types.js';\n\nconst DEFAULT_STEP = 10;\nconst DEFAULT_TARGET_SPACING = 64;\n\ninterface GridlineProjection {\n  readonly coverage: ViewportRect;\n  readonly interval: number;\n}\n\ninterface ProjectionSyncOptions {\n  readonly forceCoverage?: boolean;\n  readonly resetInterval?: boolean;\n}\n\n/**\n * @element nve-viewport-gridlines\n * @description Renders origin-stable, zoom-adaptive gridline patterns behind viewport content.\n * @documentation https://nvidia.github.io/elements/docs/elements/viewport/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/viewport\n * @cssprop --color - Sets the gridline pattern color.\n * @cssprop --line-width - Sets the approximate stroke width in CSS pixels.\n * @cssprop --dot-radius - Sets the approximate dot radius in CSS pixels.\n * @cssprop --cross-size - Sets the approximate full width and height of each cross in CSS pixels.\n */\nexport class ViewportGridlines extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-viewport-gridlines',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  @hostAttr() slot = 'background';\n\n  /** @private */\n  @hostAttr({ attribute: 'aria-hidden' }) protected accessibilityHidden = 'true';\n\n  #step = DEFAULT_STEP;\n  #originX = 0;\n  #originY = 0;\n  #targetSpacing = DEFAULT_TARGET_SPACING;\n  #viewport?: Viewport;\n  #resizeObserver?: ResizeObserver;\n  #projection?: GridlineProjection;\n\n  /** Grid pattern to render. */\n  @property({ type: String, reflect: true }) pattern: 'lines' | 'dots' | 'crosses' = 'lines';\n\n  /** Smallest gridline interval in content-space units. */\n  @property({ type: Number, reflect: true })\n  get step(): number {\n    return this.#step;\n  }\n\n  set step(value: number) {\n    const next = positiveFiniteOr(value, DEFAULT_STEP);\n    if (next === this.#step) return;\n    const previous = this.#step;\n    this.#step = next;\n    this.requestUpdate('step', previous);\n  }\n\n  /** Content-space x coordinate of the grid origin. */\n  @property({ type: Number, attribute: 'origin-x', reflect: true })\n  get originX(): number {\n    return this.#originX;\n  }\n\n  set originX(value: number) {\n    const next = finiteOr(value, 0);\n    if (next === this.#originX) return;\n    const previous = this.#originX;\n    this.#originX = next;\n    this.requestUpdate('originX', previous);\n  }\n\n  /** Content-space y coordinate of the grid origin. */\n  @property({ type: Number, attribute: 'origin-y', reflect: true })\n  get originY(): number {\n    return this.#originY;\n  }\n\n  set originY(value: number) {\n    const next = finiteOr(value, 0);\n    if (next === this.#originY) return;\n    const previous = this.#originY;\n    this.#originY = next;\n    this.requestUpdate('originY', previous);\n  }\n\n  /** Target on-screen separation used to choose the adaptive gridline interval, in CSS pixels. */\n  @property({ type: Number, attribute: 'target-spacing', reflect: true })\n  get targetSpacing(): number {\n    return this.#targetSpacing;\n  }\n\n  set targetSpacing(value: number) {\n    const next = positiveFiniteOr(value, DEFAULT_TARGET_SPACING);\n    if (next === this.#targetSpacing) return;\n    const previous = this.#targetSpacing;\n    this.#targetSpacing = next;\n    this.requestUpdate('targetSpacing', previous);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    const viewport = this.parentElement;\n    if (!(viewport instanceof Viewport)) return;\n    this.#viewport = viewport;\n    this.style.setProperty('--_scale', `${viewport.scale}`);\n    this.#viewport.addEventListener('viewportchange', this.#handleViewportChange);\n    if (typeof ResizeObserver !== 'undefined') {\n      this.#resizeObserver = new ResizeObserver(this.#handleViewportResize);\n      this.#resizeObserver.observe(viewport);\n    }\n    this.#updateProjection({ forceCoverage: true, resetInterval: true });\n  }\n\n  disconnectedCallback(): void {\n    if (this.#viewport) {\n      this.#viewport.removeEventListener('viewportchange', this.#handleViewportChange);\n    }\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = undefined;\n    this.#viewport = undefined;\n    this.#projection = undefined;\n    super.disconnectedCallback();\n  }\n\n  protected willUpdate(changed: PropertyValues<this>): void {\n    super.willUpdate(changed);\n    if (changed.has('step') || changed.has('targetSpacing')) {\n      this.#updateProjection({ forceCoverage: true, resetInterval: true });\n    }\n  }\n\n  render() {\n    const projection = this.#projection;\n    if (!projection) return nothing;\n    const { coverage, interval } = projection;\n    const centered = this.pattern === 'dots' || this.pattern === 'crosses';\n    return html`\n      <svg\n        internal-host\n        aria-hidden=\"true\"\n        focusable=\"false\"\n        preserveAspectRatio=\"none\"\n        style=${styleMap(coverageStyles(coverage))}\n        viewBox=\"${coverage.x} ${coverage.y} ${coverage.width} ${coverage.height}\"\n      >\n        <defs>\n          <pattern\n            data-gridline-pattern\n            id=\"gridlines\"\n            x=${this.#originX - (centered ? interval / 2 : 0)}\n            y=${this.#originY - (centered ? interval / 2 : 0)}\n            width=${interval}\n            height=${interval}\n            patternUnits=\"userSpaceOnUse\"\n          >\n            ${this.#renderPattern(interval)}\n          </pattern>\n        </defs>\n        <rect\n          x=${coverage.x}\n          y=${coverage.y}\n          width=${coverage.width}\n          height=${coverage.height}\n          fill=\"url(#gridlines)\"\n        ></rect>\n      </svg>\n    `;\n  }\n\n  #renderPattern(interval: number) {\n    switch (this.pattern) {\n      case 'dots':\n        return svg`<circle cx=${interval / 2} cy=${interval / 2} r=\"2\"></circle>`;\n      case 'crosses':\n        return svg`\n          <g transform=\"translate(${interval / 2} ${interval / 2})\">\n            <clipPath id=\"cross-clip\">\n              <rect class=\"cross-horizontal\"></rect>\n              <rect class=\"cross-vertical\"></rect>\n            </clipPath>\n            <rect\n              class=\"cross\"\n              x=${-interval / 2}\n              y=${-interval / 2}\n              width=${interval}\n              height=${interval}\n              clip-path=\"url(#cross-clip)\"\n            ></rect>\n          </g>\n        `;\n      case 'lines':\n      default:\n        return svg`<path d=\"M ${interval} 0 H 0 V ${interval}\"></path>`;\n    }\n  }\n\n  #handleViewportChange = (): void => {\n    const viewport = this.#viewport;\n    if (!viewport) return;\n    this.style.setProperty('--_scale', `${viewport.scale}`);\n    this.#requestProjectionUpdate();\n  };\n\n  #handleViewportResize = (): void => {\n    this.#requestProjectionUpdate({ forceCoverage: true });\n  };\n\n  #requestProjectionUpdate(options: ProjectionSyncOptions = {}): void {\n    if (this.#updateProjection(options)) this.requestUpdate();\n  }\n\n  #updateProjection(options: ProjectionSyncOptions = {}): boolean {\n    const viewport = this.#viewport;\n    if (!viewport) return false;\n    const visible = viewport.getVisibleRect();\n    if (visible.width <= 0 || visible.height <= 0) return false;\n    const interval = selectGridlineInterval({\n      current: options.resetInterval ? undefined : this.#projection?.interval,\n      scale: viewport.scale,\n      step: this.#step,\n      targetSpacing: this.#targetSpacing\n    });\n    const projection = nextProjection({\n      forceCoverage: options.forceCoverage === true,\n      interval,\n      previous: this.#projection,\n      visible\n    });\n    if (!projection) return false;\n    this.#projection = projection;\n    return true;\n  }\n}\n\nfunction nextProjection({\n  forceCoverage,\n  interval,\n  previous,\n  visible\n}: {\n  forceCoverage: boolean;\n  interval: number;\n  previous?: GridlineProjection;\n  visible: ViewportRect;\n}): GridlineProjection | undefined {\n  const coverageChanged = forceCoverage || gridlineCoverageNeedsUpdate(previous?.coverage, visible);\n  const intervalChanged = interval !== previous?.interval;\n  if (!coverageChanged && !intervalChanged) return undefined;\n  const coverage = coverageChanged || !previous ? createGridlineCoverage(visible) : previous.coverage;\n  return { coverage, interval };\n}\n\nfunction coverageStyles(coverage: ViewportRect): Record<string, string> {\n  return {\n    height: `${coverage.height}px`,\n    left: `${coverage.x}px`,\n    top: `${coverage.y}px`,\n    width: `${coverage.width}px`\n  };\n}\n"],"mappings":";;;;;;;;;;;AAgBA,IAAM,IAAe,IACf,IAAyB,IAuBlB,IAAb,cAAuC,EAAW;;EAyLZ,aAhLjB,KAAA,OAAA,cAGqD,KAAA,sBAAA,QAEhE,KAAA,KAAA,GACG,KAAA,KAAA,GACA,KAAA,KAAA,GACM,KAAA,KAAA,GAMkE,KAAA,UAAA,SA2J/C,KAAA,WAAA;GAClC,IAAM,IAAW,KAAK;GACjB,MACL,KAAK,MAAM,YAAY,YAAY,GAAG,EAAS,OAAO,GACtD,KAAK,GAAyB;EAChC,GAEoC,KAAA,WAAA;GAClC,KAAK,GAAyB,EAAE,eAAe,GAAK,CAAC;EACvD;;;EA1LgB,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAQA;CACA;CACA;CACA;CACA;CACA;CACA;CAMA,IACI,OAAe;EACjB,OAAO,KAAK;CACd;CAEA,IAAI,KAAK,GAAe;EACtB,IAAM,IAAO,EAAiB,GAAO,CAAY;EACjD,IAAI,MAAS,KAAK,IAAO;EACzB,IAAM,IAAW,KAAK;EAEtB,AADA,KAAK,KAAQ,GACb,KAAK,cAAc,QAAQ,CAAQ;CACrC;CAGA,IACI,UAAkB;EACpB,OAAO,KAAK;CACd;CAEA,IAAI,QAAQ,GAAe;EACzB,IAAM,IAAO,EAAS,GAAO,CAAC;EAC9B,IAAI,MAAS,KAAK,IAAU;EAC5B,IAAM,IAAW,KAAK;EAEtB,AADA,KAAK,KAAW,GAChB,KAAK,cAAc,WAAW,CAAQ;CACxC;CAGA,IACI,UAAkB;EACpB,OAAO,KAAK;CACd;CAEA,IAAI,QAAQ,GAAe;EACzB,IAAM,IAAO,EAAS,GAAO,CAAC;EAC9B,IAAI,MAAS,KAAK,IAAU;EAC5B,IAAM,IAAW,KAAK;EAEtB,AADA,KAAK,KAAW,GAChB,KAAK,cAAc,WAAW,CAAQ;CACxC;CAGA,IACI,gBAAwB;EAC1B,OAAO,KAAK;CACd;CAEA,IAAI,cAAc,GAAe;EAC/B,IAAM,IAAO,EAAiB,GAAO,CAAsB;EAC3D,IAAI,MAAS,KAAK,IAAgB;EAClC,IAAM,IAAW,KAAK;EAEtB,AADA,KAAK,KAAiB,GACtB,KAAK,cAAc,iBAAiB,CAAQ;CAC9C;CAEA,oBAA0B;EACxB,MAAM,kBAAkB;EACxB,IAAM,IAAW,KAAK;EAChB,aAAoB,MAC1B,KAAK,KAAY,GACjB,KAAK,MAAM,YAAY,YAAY,GAAG,EAAS,OAAO,GACtD,KAAK,GAAU,iBAAiB,kBAAkB,KAAK,EAAqB,GACxE,OAAO,iBAAmB,QAC5B,KAAK,KAAkB,IAAI,eAAe,KAAK,EAAqB,GACpE,KAAK,GAAgB,QAAQ,CAAQ,IAEvC,KAAK,GAAkB;GAAE,eAAe;GAAM,eAAe;EAAK,CAAC;CACrE;CAEA,uBAA6B;EAQ3B,AAPI,KAAK,MACP,KAAK,GAAU,oBAAoB,kBAAkB,KAAK,EAAqB,GAEjF,KAAK,IAAiB,WAAW,GACjC,KAAK,KAAkB,KAAA,GACvB,KAAK,KAAY,KAAA,GACjB,KAAK,KAAc,KAAA,GACnB,MAAM,qBAAqB;CAC7B;CAEA,WAAqB,GAAqC;EAExD,AADA,MAAM,WAAW,CAAO,IACpB,EAAQ,IAAI,MAAM,KAAK,EAAQ,IAAI,eAAe,MACpD,KAAK,GAAkB;GAAE,eAAe;GAAM,eAAe;EAAK,CAAC;CAEvE;CAEA,SAAS;EACP,IAAM,IAAa,KAAK;EACxB,IAAI,CAAC,GAAY,OAAO;EACxB,IAAM,EAAE,aAAU,gBAAa,GACzB,IAAW,KAAK,YAAY,UAAU,KAAK,YAAY;EAC7D,OAAO,CAAI,6FAMC,EAAS,EAAe,CAAQ,CAAC,EAAE,aAChC,EAAS,EAAE,GAAG,EAAS,EAAE,GAAG,EAAS,MAAM,GAAG,EAAS,OAAO,2DAMjE,KAAK,MAAY,IAAW,IAAW,IAAI,GAAG,OAC9C,KAAK,MAAY,IAAW,IAAW,IAAI,GAAG,WAC1C,EAAS,YACR,EAAS,kCAGhB,KAAK,GAAe,CAAQ,EAAE,4BAI9B,EAAS,EAAE,OACX,EAAS,EAAE,WACP,EAAS,MAAM,YACd,EAAS,OAAO;CAKjC;CAEA,GAAe,GAAkB;EAC/B,QAAQ,KAAK,SAAb;GACE,KAAK,QACH,OAAO,CAAG,eAAc,IAAW,EAAE,QAAM,IAAW,EAAE;GAC1D,KAAK,WACH,OAAO,CAAG,2BACkB,IAAW,EAAE,GAAG,IAAW,EAAE,2IAO/C,CAAC,IAAW,EAAE,OACd,CAAC,IAAW,EAAE,WACV,EAAS,YACR,EAAS;GAM1B,SACE,OAAO,CAAG,cAAc,EAAS,WAAW,EAAS;EACzD;CACF;CAEA;CAOA;CAIA,GAAyB,IAAiC,CAAC,GAAS;EAClE,AAAI,KAAK,GAAkB,CAAO,KAAG,KAAK,cAAc;CAC1D;CAEA,GAAkB,IAAiC,CAAC,GAAY;EAC9D,IAAM,IAAW,KAAK;EACtB,IAAI,CAAC,GAAU,OAAO;EACtB,IAAM,IAAU,EAAS,eAAe;EACxC,IAAI,EAAQ,SAAS,KAAK,EAAQ,UAAU,GAAG,OAAO;EACtD,IAAM,IAAW,EAAuB;GACtC,SAAS,EAAQ,gBAAgB,KAAA,IAAY,KAAK,IAAa;GAC/D,OAAO,EAAS;GAChB,MAAM,KAAK;GACX,eAAe,KAAK;EACtB,CAAC,GACK,IAAa,EAAe;GAChC,eAAe,EAAQ,kBAAkB;GACzC;GACA,UAAU,KAAK;GACf;EACF,CAAC;EAGD,OAFK,KACL,KAAK,KAAc,GACZ,MAFiB;CAG1B;AACF;AA7MG,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAGT,EAAA,CAAA,EAAS,EAAE,WAAW,cAAc,CAAC,CAAA,GAAA,EAAA,WAAA,uBAAA,KAAA,CAAA,GAWrC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,IAAA,GAcxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAY,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,IAAA,GAc/D,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAY,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,IAAA,GAc/D,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAkB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,iBAAA,IAAA;AAoJxE,SAAS,EAAe,EACtB,kBACA,aACA,aACA,cAMiC;CACjC,IAAM,IAAkB,KAAiB,EAA4B,GAAU,UAAU,CAAO,GAC1F,IAAkB,MAAa,GAAU;CAC3C,OAAC,KAAmB,CAAC,IAEzB,OAAO;EAAE,UADQ,KAAmB,CAAC,IAAW,EAAuB,CAAO,IAAI,EAAS;EACxE;CAAS;AAC9B;AAEA,SAAS,EAAe,GAAgD;CACtE,OAAO;EACL,QAAQ,GAAG,EAAS,OAAO;EAC3B,MAAM,GAAG,EAAS,EAAE;EACpB,KAAK,GAAG,EAAS,EAAE;EACnB,OAAO,GAAG,EAAS,MAAM;CAC3B;AACF"}

package/dist/viewport/viewport-minimap2.js

@@ -18,7 +18,7 @@ var _ = 3, v = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-viewport-minimap",
-			version: "2.11.1"
+			version: "2.12.0"
 		};
 	}
 	#e;

package/dist/viewport/viewport.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"viewport.examples.js","names":[],"sources":["../../src/viewport/viewport.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/alert/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/button-group/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/toolbar/define.js';\nimport '@nvidia-elements/core/viewport/define.js';\n\nexport default {\n  title: 'Elements/Viewport',\n  component: 'nve-viewport'\n};\n\n/**\n * @summary Auto-fit a bounded SVG with direct pan and zoom; the minimap represents its single content root as one rectangle.\n */\nexport const Default = {\n  render: () => html`\n    <nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n      <nve-viewport-gridlines></nve-viewport-gridlines>\n\n      <svg\n        role=\"img\"\n        aria-label=\"Three geometric forms in a spatial field\"\n        width=\"900\"\n        height=\"600\"\n        viewBox=\"0 0 900 600\"\n        style=\"position: absolute; left: 0; top: 0\"\n      >\n        <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n        <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n        <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n        <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n      </svg>\n\n      <nve-viewport-minimap></nve-viewport-minimap>\n    </nve-viewport>\n  `\n};\n\n/**\n * @summary Provide custom minimap content to replace the automatic bounding boxes with a simplified representation of the viewport content.\n */\nexport const Minimap = {\n  render: () => html`\n    <nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n      <nve-viewport-gridlines></nve-viewport-gridlines>\n\n      <svg\n        role=\"img\"\n        aria-label=\"Three geometric forms in a spatial field\"\n        width=\"900\"\n        height=\"600\"\n        viewBox=\"0 0 900 600\"\n        style=\"position: absolute; left: 0; top: 0\"\n      >\n        <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n        <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n        <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n        <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n      </svg>\n\n      <nve-viewport-minimap>\n        <svg slot=\"preview\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n          <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n          <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n          <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n        </svg>\n      </nve-viewport-minimap>\n    </nve-viewport>\n  `\n};\n\n/**\n * @summary Place custom content in the background slot to provide a spatial reference without affecting content fitting.\n */\nexport const Background = {\n  render: () => html`\n    <nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n      <svg\n        slot=\"background\"\n        aria-hidden=\"true\"\n        width=\"20480\"\n        height=\"20480\"\n        viewBox=\"-10240 -10240 20480 20480\"\n        style=\"position: absolute; left: -10240px; top: -10240px\"\n      >\n        <defs>\n          <pattern id=\"viewport-background-dots\" width=\"100\" height=\"100\" patternUnits=\"userSpaceOnUse\">\n            <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"var(--nve-ref-border-color-emphasis)\"></circle>\n          </pattern>\n        </defs>\n        <rect x=\"-10240\" y=\"-10240\" width=\"20480\" height=\"20480\" fill=\"url(#viewport-background-dots)\"></rect>\n      </svg>\n\n      <svg\n        role=\"img\"\n        aria-label=\"Three geometric forms in a spatial field\"\n        width=\"900\"\n        height=\"600\"\n        viewBox=\"0 0 900 600\"\n        style=\"position: absolute; left: 0; top: 0\"\n      >\n        <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n        <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n        <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n        <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n      </svg>\n    </nve-viewport>\n  `\n};\n\n/**\n * @summary Place native and Elements controls inside a viewport without losing their standard interactions.\n */\nexport const InteractiveContent = {\n  render: () => html`\n    <nve-viewport x=\"-20\" y=\"-20\" scale=\"0.9\" behavior-pan behavior-zoom style=\"height: 420px\">\n      <nve-viewport-gridlines step=\"20\" target-spacing=\"72\"></nve-viewport-gridlines>\n\n      <nve-card style=\"position: absolute; left: 280px; top: 110px; width: 300px\">\n        <nve-card-header>\n          <h2 nve-text=\"heading sm bold\">Viewport content</h2>\n        </nve-card-header>\n        <nve-card-content>\n          <nve-input>\n            <label>Label</label>\n            <input value=\"Editable value\" />\n          </nve-input>\n        </nve-card-content>\n      </nve-card>\n    </nve-viewport>\n  `\n};\n\n/**\n * @summary Configure panning to require Space when application content needs to handle its own drag interactions.\n */\nexport const PanWithSpace = {\n  render: () => html`\n    <style>\n      #viewport-space-pan-card {\n        cursor: var(--drag-cursor, auto);\n      }\n\n      #viewport-space-pan-card:hover {\n        --drag-cursor: grab;\n      }\n\n      #viewport-space-pan-card[data-dragging] {\n        --background: var(--nve-sys-layer-overlay-background);\n        --box-shadow: var(--nve-ref-shadow-300);\n        --drag-cursor: grabbing;\n      }\n    </style>\n\n    <div nve-layout=\"column align:horizontal-stretch\" style=\"height: 420px\">\n      <nve-alert-group status=\"accent\">\n        <nve-alert>\n          <p nve-text=\"body sm medium\">\n            Pan the viewport with <kbd nve-text=\"code\">Space</kbd>, or using the middle mouse button.\n          </p>\n        </nve-alert>\n      </nve-alert-group>\n\n      <nve-viewport\n        id=\"viewport-space-pan-demo\"\n        behavior-pan=\"space\"\n        behavior-zoom\n        style=\"flex: 1; --min-height: 0\"\n      >\n        <nve-viewport-gridlines step=\"20\"></nve-viewport-gridlines>\n\n        <nve-card\n          id=\"viewport-space-pan-card\"\n          data-draggable-card\n          data-card-drag-handle\n          style=\"position: absolute; left: 290px; top: 120px; width: 300px\"\n        >\n          <nve-card-header>\n            <h2 nve-text=\"heading sm bold\">Drag this card</h2>\n          </nve-card-header>\n          <nve-card-content>\n            <p nve-text=\"body relaxed\" nve-layout=\"pad:md\" style=\"text-align: center\">Application-defined dragging remains independent in this mode.</p>\n          </nve-card-content>\n        </nve-card>\n      </nve-viewport>\n    </div>\n\n    <script type=\"module\">\n      const viewport = document.querySelector('#viewport-space-pan-demo');\n      const handles = viewport.querySelectorAll('[data-card-drag-handle]');\n\n      handles.forEach(handle => {\n        const card = handle.closest('[data-draggable-card]');\n        let pointerId;\n        let startClientX;\n        let startClientY;\n        let startLeft;\n        let startTop;\n\n        const finishDrag = event => {\n          if (event.pointerId !== pointerId) return;\n          pointerId = undefined;\n          card.removeAttribute('data-dragging');\n        };\n\n        handle.addEventListener('pointerdown', event => {\n          if (\n            (event.pointerType !== 'mouse' && event.pointerType !== 'pen') ||\n            event.button !== 0 ||\n            event.defaultPrevented\n          ) {\n            return;\n          }\n\n          event.preventDefault();\n          event.stopPropagation();\n\n          pointerId = event.pointerId;\n          startClientX = event.clientX;\n          startClientY = event.clientY;\n          startLeft = Number.parseFloat(card.style.left);\n          startTop = Number.parseFloat(card.style.top);\n          card.setAttribute('data-dragging', '');\n          handle.setPointerCapture(pointerId);\n        });\n\n        handle.addEventListener('pointermove', event => {\n          if (event.pointerId !== pointerId) return;\n\n          card.style.left = startLeft + (event.clientX - startClientX) / viewport.scale + 'px';\n          card.style.top = startTop + (event.clientY - startClientY) / viewport.scale + 'px';\n          event.preventDefault();\n        });\n\n        handle.addEventListener('pointerup', finishDrag);\n        handle.addEventListener('pointercancel', finishDrag);\n        handle.addEventListener('lostpointercapture', finishDrag);\n      });\n    </script>\n  `\n};\n\n/**\n * @summary Use external controls with `commandfor` to invoke viewport pan, zoom, reset, and fit commands.\n */\nexport const Commands = {\n  render: () => html`\n    <div nve-layout=\"column align:horizontal-stretch\" style=\"height: 420px\">\n      <nve-toolbar aria-label=\"Viewport navigation controls\">\n        <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-left\" aria-label=\"Pan left\">←</nve-button>\n        <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-up\" aria-label=\"Pan up\">↑</nve-button>\n        <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-down\" aria-label=\"Pan down\">↓</nve-button>\n        <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-right\" aria-label=\"Pan right\">→</nve-button>\n        <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-out\" aria-label=\"Zoom out\">−</nve-button>\n        <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-reset\">100%</nve-button>\n        <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-in\" aria-label=\"Zoom in\">+</nve-button>\n        <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-to-fit\">Fit</nve-button>\n      </nve-toolbar>\n\n      <nve-viewport\n        id=\"viewport-command-demo\"\n        autofit\n        fit-inset=\"24\"\n        behavior-pan\n        behavior-zoom\n        style=\"flex: 1; --min-height: 0\"\n      >\n        <nve-viewport-gridlines></nve-viewport-gridlines>\n\n        <svg\n          role=\"img\"\n          aria-label=\"Three geometric forms in a spatial field\"\n          width=\"900\"\n          height=\"600\"\n          viewBox=\"0 0 900 600\"\n          style=\"position: absolute; left: 0; top: 0\"\n        >\n          <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n          <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n          <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n          <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n        </svg>\n      </nve-viewport>\n    </div>\n  `\n};\n\n/**\n * @summary Viewport navigation helpers let application logic animate specific content regions into view.\n */\nexport const ProgrammaticNavigation = {\n  render: () => html`\n    <div nve-layout=\"column gap:sm align:horizontal-stretch\" style=\"height: 420px\">\n      <div nve-layout=\"row align:center\">\n        <nve-button-group container=\"rounded\" behavior-select=\"single\" aria-label=\"Navigate to workflow region\">\n          <nve-button data-viewport-region=\"viewport-region-ingest\">Ingest</nve-button>\n          <nve-button data-viewport-region=\"viewport-region-train\">Train</nve-button>\n          <nve-button data-viewport-region=\"viewport-region-deploy\">Deploy</nve-button>\n        </nve-button-group>\n      </div>\n\n      <nve-viewport id=\"viewport-reveal-demo\" autofit fit-inset=\"24\" style=\"flex: 1; --min-height: 0\">\n        <nve-viewport-gridlines step=\"40\"></nve-viewport-gridlines>\n\n        <svg\n          aria-hidden=\"true\"\n          width=\"500\"\n          height=\"320\"\n          viewBox=\"0 0 500 320\"\n          style=\"position: absolute; left: 380px; top: 144px\"\n        >\n          <path\n            d=\"M 0 0 C 50 0 50 160 100 160 M 400 160 C 450 160 450 320 500 320\"\n            fill=\"none\"\n            stroke=\"var(--nve-ref-border-color-emphasis)\"\n            stroke-width=\"4\"\n          ></path>\n        </svg>\n\n        <nve-card id=\"viewport-region-ingest\" style=\"position: absolute; left: 80px; top: 80px; width: 320px\">\n          <nve-card-header><h2 nve-text=\"heading sm bold\">Ingest</h2></nve-card-header>\n          <nve-card-content>\n            <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Validate and prepare the dataset.</p>\n          </nve-card-content>\n        </nve-card>\n        <nve-card id=\"viewport-region-train\" style=\"position: absolute; left: 480px; top: 240px; width: 320px\">\n          <nve-card-header><h2 nve-text=\"heading sm bold\">Train</h2></nve-card-header>\n          <nve-card-content>\n            <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Run and compare model experiments.</p>\n          </nve-card-content>\n        </nve-card>\n        <nve-card id=\"viewport-region-deploy\" style=\"position: absolute; left: 880px; top: 400px; width: 320px\">\n          <nve-card-header><h2 nve-text=\"heading sm bold\">Deploy</h2></nve-card-header>\n          <nve-card-content>\n            <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Promote the selected model.</p>\n          </nve-card-content>\n        </nve-card>\n      </nve-viewport>\n    </div>\n\n    <script type=\"module\">\n      const viewport = document.querySelector('#viewport-reveal-demo');\n      const buttons = Array.from(document.querySelectorAll('[data-viewport-region]'));\n      const framing = 80;\n\n      buttons.forEach(button => {\n        button.addEventListener('click', () => {\n          const region = viewport.querySelector('#' + button.dataset.viewportRegion);\n          viewport.reveal(\n            {\n              x: region.offsetLeft - framing,\n              y: region.offsetTop - framing,\n              width: region.offsetWidth + framing * 2,\n              height: region.offsetHeight + framing * 2\n            },\n            { animated: true, duration: 500 }\n          );\n        });\n      });\n    </script>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"viewport.examples.js","names":[],"sources":["../../src/viewport/viewport.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/alert/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/button-group/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/toolbar/define.js';\nimport '@nvidia-elements/core/viewport/define.js';\n\nexport default {\n  title: 'Elements/Viewport',\n  component: 'nve-viewport'\n};\n\n/**\n * @summary Auto-fit a bounded SVG with direct pan and zoom; the minimap represents its single content root as one rectangle.\n */\nexport const Default = {\n  render: () => html`\n    <nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n      <nve-viewport-gridlines></nve-viewport-gridlines>\n\n      <svg\n        role=\"img\"\n        aria-label=\"Three geometric forms in a spatial field\"\n        width=\"900\"\n        height=\"600\"\n        viewBox=\"0 0 900 600\"\n        style=\"position: absolute; left: 0; top: 0\"\n      >\n        <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n        <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n        <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n        <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n      </svg>\n\n      <nve-viewport-minimap></nve-viewport-minimap>\n    </nve-viewport>\n  `\n};\n\n/**\n * @summary Provide custom minimap content to replace the default bounding boxes with a simplified representation of the viewport content.\n */\nexport const Minimap = {\n  render: () => html`\n    <nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n      <nve-viewport-gridlines></nve-viewport-gridlines>\n\n      <svg\n        role=\"img\"\n        aria-label=\"Three geometric forms in a spatial field\"\n        width=\"900\"\n        height=\"600\"\n        viewBox=\"0 0 900 600\"\n        style=\"position: absolute; left: 0; top: 0\"\n      >\n        <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n        <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n        <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n        <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n      </svg>\n\n      <nve-viewport-minimap>\n        <svg slot=\"preview\" width=\"900\" height=\"600\" viewBox=\"0 0 900 600\" style=\"position: absolute; left: 0; top: 0\">\n          <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n          <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n          <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n        </svg>\n      </nve-viewport-minimap>\n    </nve-viewport>\n  `\n};\n\n/**\n * @summary Place native and Elements controls inside a viewport without losing their standard interactions.\n */\nexport const InteractiveContent = {\n  render: () => html`\n    <nve-viewport x=\"-20\" y=\"-20\" scale=\"0.9\" behavior-pan behavior-zoom style=\"height: 420px\">\n      <nve-viewport-gridlines step=\"20\" target-spacing=\"72\"></nve-viewport-gridlines>\n\n      <nve-card style=\"position: absolute; left: 280px; top: 110px; width: 300px\">\n        <nve-card-header>\n          <h2 nve-text=\"heading sm bold\">Viewport content</h2>\n        </nve-card-header>\n        <nve-card-content>\n          <nve-input>\n            <label>Label</label>\n            <input value=\"Editable value\" />\n          </nve-input>\n        </nve-card-content>\n      </nve-card>\n    </nve-viewport>\n  `\n};\n\n/**\n * @summary Configure panning to require Space when application content needs to handle its own drag interactions.\n */\nexport const PanWithSpace = {\n  render: () => html`\n    <style>\n      #viewport-space-pan-card {\n        cursor: var(--drag-cursor, auto);\n      }\n\n      #viewport-space-pan-card:hover {\n        --drag-cursor: grab;\n      }\n\n      #viewport-space-pan-card[data-dragging] {\n        --background: var(--nve-sys-layer-overlay-background);\n        --box-shadow: var(--nve-ref-shadow-300);\n        --drag-cursor: grabbing;\n      }\n    </style>\n\n    <div nve-layout=\"column align:horizontal-stretch\" style=\"height: 420px\">\n      <nve-alert-group status=\"accent\">\n        <nve-alert>\n          <p nve-text=\"body sm medium\">\n            Pan the viewport with <kbd nve-text=\"code\">Space</kbd>, or using the middle mouse button.\n          </p>\n        </nve-alert>\n      </nve-alert-group>\n\n      <nve-viewport\n        id=\"viewport-space-pan-demo\"\n        behavior-pan=\"space\"\n        behavior-zoom\n        style=\"flex: 1; --min-height: 0\"\n      >\n        <nve-viewport-gridlines step=\"20\"></nve-viewport-gridlines>\n\n        <nve-card\n          id=\"viewport-space-pan-card\"\n          data-draggable-card\n          data-card-drag-handle\n          style=\"position: absolute; left: 290px; top: 120px; width: 300px\"\n        >\n          <nve-card-header>\n            <h2 nve-text=\"heading sm bold\">Drag this card</h2>\n          </nve-card-header>\n          <nve-card-content>\n            <p nve-text=\"body relaxed\" nve-layout=\"pad:md\" style=\"text-align: center\">Application-defined dragging remains independent in this mode.</p>\n          </nve-card-content>\n        </nve-card>\n      </nve-viewport>\n    </div>\n\n    <script type=\"module\">\n      const viewport = document.querySelector('#viewport-space-pan-demo');\n      const handles = viewport.querySelectorAll('[data-card-drag-handle]');\n\n      handles.forEach(handle => {\n        const card = handle.closest('[data-draggable-card]');\n        let pointerId;\n        let startClientX;\n        let startClientY;\n        let startLeft;\n        let startTop;\n\n        const finishDrag = event => {\n          if (event.pointerId !== pointerId) return;\n          pointerId = undefined;\n          card.removeAttribute('data-dragging');\n        };\n\n        handle.addEventListener('pointerdown', event => {\n          if (\n            (event.pointerType !== 'mouse' && event.pointerType !== 'pen') ||\n            event.button !== 0 ||\n            event.defaultPrevented\n          ) {\n            return;\n          }\n\n          event.preventDefault();\n          event.stopPropagation();\n\n          pointerId = event.pointerId;\n          startClientX = event.clientX;\n          startClientY = event.clientY;\n          startLeft = Number.parseFloat(card.style.left);\n          startTop = Number.parseFloat(card.style.top);\n          card.setAttribute('data-dragging', '');\n          handle.setPointerCapture(pointerId);\n        });\n\n        handle.addEventListener('pointermove', event => {\n          if (event.pointerId !== pointerId) return;\n\n          card.style.left = startLeft + (event.clientX - startClientX) / viewport.scale + 'px';\n          card.style.top = startTop + (event.clientY - startClientY) / viewport.scale + 'px';\n          event.preventDefault();\n        });\n\n        handle.addEventListener('pointerup', finishDrag);\n        handle.addEventListener('pointercancel', finishDrag);\n        handle.addEventListener('lostpointercapture', finishDrag);\n      });\n    </script>\n  `\n};\n\n/**\n * @summary Use external controls with `commandfor` to invoke viewport pan, zoom, reset, and fit commands.\n */\nexport const Commands = {\n  render: () => html`\n    <div nve-layout=\"column align:horizontal-stretch\" style=\"height: 420px\">\n      <nve-toolbar aria-label=\"Viewport navigation controls\">\n        <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-left\" aria-label=\"Pan left\">←</nve-button>\n        <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-up\" aria-label=\"Pan up\">↑</nve-button>\n        <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-down\" aria-label=\"Pan down\">↓</nve-button>\n        <nve-button commandfor=\"viewport-command-demo\" command=\"--pan-right\" aria-label=\"Pan right\">→</nve-button>\n        <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-out\" aria-label=\"Zoom out\">−</nve-button>\n        <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-reset\">100%</nve-button>\n        <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-in\" aria-label=\"Zoom in\">+</nve-button>\n        <nve-button slot=\"suffix\" commandfor=\"viewport-command-demo\" command=\"--zoom-to-fit\">Fit</nve-button>\n      </nve-toolbar>\n\n      <nve-viewport\n        id=\"viewport-command-demo\"\n        autofit\n        fit-inset=\"24\"\n        behavior-pan\n        behavior-zoom\n        style=\"flex: 1; --min-height: 0\"\n      >\n        <nve-viewport-gridlines></nve-viewport-gridlines>\n\n        <svg\n          role=\"img\"\n          aria-label=\"Three geometric forms in a spatial field\"\n          width=\"900\"\n          height=\"600\"\n          viewBox=\"0 0 900 600\"\n          style=\"position: absolute; left: 0; top: 0\"\n        >\n          <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n          <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n          <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n          <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n        </svg>\n      </nve-viewport>\n    </div>\n  `\n};\n\n/**\n * @summary Viewport navigation helpers let application logic animate specific content regions into view.\n */\nexport const ProgrammaticNavigation = {\n  render: () => html`\n    <div nve-layout=\"column gap:sm align:horizontal-stretch\" style=\"height: 420px\">\n      <div nve-layout=\"row align:center\">\n        <nve-button-group container=\"rounded\" behavior-select=\"single\" aria-label=\"Navigate to workflow region\">\n          <nve-button data-viewport-region=\"viewport-region-ingest\">Ingest</nve-button>\n          <nve-button data-viewport-region=\"viewport-region-train\">Train</nve-button>\n          <nve-button data-viewport-region=\"viewport-region-deploy\">Deploy</nve-button>\n        </nve-button-group>\n      </div>\n\n      <nve-viewport id=\"viewport-reveal-demo\" autofit fit-inset=\"24\" style=\"flex: 1; --min-height: 0\">\n        <nve-viewport-gridlines step=\"40\"></nve-viewport-gridlines>\n\n        <svg\n          aria-hidden=\"true\"\n          width=\"500\"\n          height=\"320\"\n          viewBox=\"0 0 500 320\"\n          style=\"position: absolute; left: 380px; top: 144px\"\n        >\n          <path\n            d=\"M 0 0 C 50 0 50 160 100 160 M 400 160 C 450 160 450 320 500 320\"\n            fill=\"none\"\n            stroke=\"var(--nve-ref-border-color-emphasis)\"\n            stroke-width=\"4\"\n          ></path>\n        </svg>\n\n        <nve-card id=\"viewport-region-ingest\" style=\"position: absolute; left: 80px; top: 80px; width: 320px\">\n          <nve-card-header><h2 nve-text=\"heading sm bold\">Ingest</h2></nve-card-header>\n          <nve-card-content>\n            <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Validate and prepare the dataset.</p>\n          </nve-card-content>\n        </nve-card>\n        <nve-card id=\"viewport-region-train\" style=\"position: absolute; left: 480px; top: 240px; width: 320px\">\n          <nve-card-header><h2 nve-text=\"heading sm bold\">Train</h2></nve-card-header>\n          <nve-card-content>\n            <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Run and compare model experiments.</p>\n          </nve-card-content>\n        </nve-card>\n        <nve-card id=\"viewport-region-deploy\" style=\"position: absolute; left: 880px; top: 400px; width: 320px\">\n          <nve-card-header><h2 nve-text=\"heading sm bold\">Deploy</h2></nve-card-header>\n          <nve-card-content>\n            <p nve-text=\"body\" nve-layout=\"pad:md\" style=\"text-align: center\">Promote the selected model.</p>\n          </nve-card-content>\n        </nve-card>\n      </nve-viewport>\n    </div>\n\n    <script type=\"module\">\n      const viewport = document.querySelector('#viewport-reveal-demo');\n      const buttons = Array.from(document.querySelectorAll('[data-viewport-region]'));\n      const framing = 80;\n\n      buttons.forEach(button => {\n        button.addEventListener('click', () => {\n          const region = viewport.querySelector('#' + button.dataset.viewportRegion);\n          viewport.reveal(\n            {\n              x: region.offsetLeft - framing,\n              y: region.offsetTop - framing,\n              width: region.offsetWidth + framing * 2,\n              height: region.offsetHeight + framing * 2\n            },\n            { animated: true, duration: 500 }\n          );\n        });\n      });\n    </script>\n  `\n};\n\n/**\n * @summary Optionally configure viewport grid lines to use dots instead of lines.\n */\nexport const Dots = {\n  render: () => html`\n    <nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n      <nve-viewport-gridlines pattern=\"dots\"></nve-viewport-gridlines>\n\n      <svg\n        role=\"img\"\n        aria-label=\"Three geometric forms in a spatial field\"\n        width=\"900\"\n        height=\"600\"\n        viewBox=\"0 0 900 600\"\n        style=\"position: absolute; left: 0; top: 0\"\n      >\n        <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n        <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n        <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n        <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n      </svg>\n    </nve-viewport>\n  `\n};\n\n/**\n * @summary Use crosses as spatial reference points to help users judge positions while keeping the content between them unobstructed.\n */\nexport const Crosses = {\n  render: () => html`\n    <nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n      <nve-viewport-gridlines pattern=\"crosses\"></nve-viewport-gridlines>\n\n      <svg\n        role=\"img\"\n        aria-label=\"Three geometric forms in a spatial field\"\n        width=\"900\"\n        height=\"600\"\n        viewBox=\"0 0 900 600\"\n        style=\"position: absolute; left: 0; top: 0\"\n      >\n        <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n        <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n        <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n        <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n      </svg>\n    </nve-viewport>\n  `\n};\n\n/**\n * @summary Place custom content in the background slot to provide a spatial reference without affecting content fitting.\n */\nexport const Background = {\n  render: () => html`\n    <nve-viewport autofit fit-inset=\"24\" behavior-pan behavior-zoom style=\"height: 420px\">\n      <svg\n        slot=\"background\"\n        aria-hidden=\"true\"\n        width=\"20480\"\n        height=\"20480\"\n        viewBox=\"-10240 -10240 20480 20480\"\n        style=\"position: absolute; left: -10240px; top: -10240px\"\n      >\n        <defs>\n          <pattern id=\"viewport-background-triangles\" width=\"200\" height=\"200\" patternUnits=\"userSpaceOnUse\">\n            <path d=\"M 0 0 H 200 V 200 M 0 0 L 200 200 M 0 200 L 200 0\" fill=\"none\" stroke=\"var(--nve-ref-border-color-muted)\" stroke-width=\"1.5\" vector-effect=\"non-scaling-stroke\"></path>\n          </pattern>\n        </defs>\n        <rect x=\"-10240\" y=\"-10240\" width=\"20480\" height=\"20480\" fill=\"url(#viewport-background-triangles)\"></rect>\n      </svg>\n\n      <svg\n        role=\"img\"\n        aria-label=\"Three geometric forms in a spatial field\"\n        width=\"900\"\n        height=\"600\"\n        viewBox=\"0 0 900 600\"\n        style=\"position: absolute; left: 0; top: 0\"\n      >\n        <circle cx=\"200\" cy=\"400\" r=\"100\" fill=\"var(--nve-ref-color-green-jade-600)\"></circle>\n        <rect x=\"350\" y=\"100\" width=\"200\" height=\"200\" rx=\"50\" fill=\"var(--nve-ref-color-blue-cobalt-600)\"></rect>\n        <path d=\"M 700 290 L 810 400 L 700 510 L 590 400 Z\" fill=\"var(--nve-ref-color-purple-lavender-600)\"></path>\n        <rect x=\"1\" y=\"1\" width=\"898\" height=\"598\" rx=\"24\" fill=\"none\" stroke=\"var(--nve-ref-border-color-emphasis)\" stroke-width=\"2\" stroke-dasharray=\"32 20\" vector-effect=\"non-scaling-stroke\"></rect>\n      </svg>\n    </nve-viewport>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}