@nvidia-elements/core 2.23.5 → 2.24.0

package/dist/dashboard/controllers/measurement.controller.js

@@ -0,0 +1,77 @@
+import { haveSameGridPitch as e, resolveDashboardMetrics as t } from "../utils/geometry.utils.js";
+import { isServer as n } from "lit";
+// src/dashboard/controllers/measurement.controller.ts
+var r = class {
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a = /* @__PURE__ */ new Set();
+	constructor(e, t) {
+		this.#e = e, this.#t = t, e.addController(this);
+	}
+	get metrics() {
+		return this.#n;
+	}
+	hostConnected() {
+		n || (this.#r = new ResizeObserver(() => this.#c()), this.#e.hasUpdated && this.observe());
+	}
+	hostDisconnected() {
+		this.#r?.disconnect(), this.#i !== void 0 && cancelAnimationFrame(this.#i), this.#i = void 0, this.#a.clear();
+	}
+	observe() {
+		this.observePanels();
+		for (let e of this.#e.shadowRoot?.querySelectorAll(".viewport, .metric, .gap-metric") ?? []) this.#r?.observe(e);
+	}
+	observePanels() {
+		if (!this.#e.isConnected) return;
+		let e = new Set(this.#t.getPanels().flatMap((e) => {
+			let t = e.shadowRoot?.querySelector("[internal-host]");
+			return t ? [t] : [];
+		}));
+		for (let t of this.#a) e.has(t) || this.#r?.unobserve(t);
+		for (let t of e) this.#a.has(t) || this.#r?.observe(t, { box: "content-box" });
+		this.#a = e;
+	}
+	#o() {
+		let e = [...this.#a].flatMap((e) => {
+			let t = getComputedStyle(e);
+			return [
+				t.borderTopWidth,
+				t.borderRightWidth,
+				t.borderBottomWidth,
+				t.borderLeftWidth
+			].map((e) => Number.parseFloat(e));
+		}), t = e[0], n = `${this.#a.size === this.#t.getPanels().length && t !== void 0 && Number.isFinite(t) && t >= 0 && e.every((e) => e === t) ? t : 0}px`;
+		this.#e.style.getPropertyValue("--_geometry-border-width") !== n && this.#e.style.setProperty("--_geometry-border-width", n);
+	}
+	#s() {
+		let e = this.#t.getViewport(), n = this.#e.shadowRoot?.querySelector(".metric"), r = this.#e.shadowRoot?.querySelector(".gap-metric");
+		if (!e || !n || !r) return;
+		let i = n.getBoundingClientRect(), a = r.getBoundingClientRect(), o = this.#t.getGrid();
+		return t({
+			...o,
+			sizing: this.#t.getSizing(),
+			width: e.clientWidth,
+			height: e.clientHeight,
+			columnSize: i.width,
+			rowSize: i.height,
+			gap: a.width,
+			overlap: a.height
+		});
+	}
+	#c() {
+		this.#e.isConnected && this.#i === void 0 && (this.#i = requestAnimationFrame(() => {
+			this.#i = void 0, this.#e.isConnected && this.measure();
+		}));
+	}
+	measure() {
+		this.#o();
+		let t = this.#s();
+		JSON.stringify(t) !== JSON.stringify(this.#n) && (e(t, this.#n) || this.#t.pitchChanged(), this.#n = t, this.#e.requestUpdate());
+	}
+};
+export { r as DashboardMeasurementController };
+
+//# sourceMappingURL=measurement.controller.js.map

package/dist/dashboard/controllers/measurement.controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"measurement.controller.js","names":["DashboardMeasurementController","#host","host","#delegate","delegate","#metrics","isServer","#resizeObserver","#scheduleMeasure","#resizeFrame","#borderTargets","target","next","surface","panel","widths","style","value","first","viewport","metric","gap","box","spacing","grid","resolveDashboardMetrics","#updateBorderWidth","#readMetrics","haveSameGridPitch"],"sources":["../../../src/dashboard/controllers/measurement.controller.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { isServer, type ReactiveControllerHost } from 'lit';\n\nimport { haveSameGridPitch, resolveDashboardMetrics } from '../utils/geometry.utils.js';\n\nimport type { DashboardMetrics } from '../utils/geometry.utils.js';\n\nimport type { DashboardPanel } from '../panel/panel.js';\n\ninterface DashboardMeasurementHost extends HTMLElement, ReactiveControllerHost {\n  readonly hasUpdated: boolean;\n}\n\ninterface DashboardMeasurementDelegate {\n  getPanels(): DashboardPanel[];\n  getViewport(): HTMLElement | undefined;\n  getGrid(): { flow: 'vertical' | 'horizontal'; tracks: number };\n  getSizing(): 'fit' | 'fixed';\n  pitchChanged(): void;\n}\n\n/** Measures viewport and cell geometry without owning arrangement policy. */\nexport class DashboardMeasurementController {\n  readonly #host: DashboardMeasurementHost;\n  readonly #delegate: DashboardMeasurementDelegate;\n  #metrics?: DashboardMetrics;\n  #resizeObserver?: ResizeObserver;\n  #resizeFrame?: number;\n  #borderTargets = new Set<HTMLElement>();\n\n  constructor(host: DashboardMeasurementHost, delegate: DashboardMeasurementDelegate) {\n    this.#host = host;\n    this.#delegate = delegate;\n    host.addController(this);\n  }\n\n  get metrics() {\n    return this.#metrics;\n  }\n\n  hostConnected() {\n    if (isServer) return;\n\n    this.#resizeObserver = new ResizeObserver(() => this.#scheduleMeasure());\n\n    if (this.#host.hasUpdated) {\n      this.observe();\n    }\n  }\n\n  hostDisconnected() {\n    this.#resizeObserver?.disconnect();\n\n    if (this.#resizeFrame !== undefined) {\n      cancelAnimationFrame(this.#resizeFrame);\n    }\n\n    this.#resizeFrame = undefined;\n    this.#borderTargets.clear();\n  }\n\n  observe() {\n    this.observePanels();\n\n    for (const target of this.#host.shadowRoot?.querySelectorAll('.viewport, .metric, .gap-metric') ?? []) {\n      this.#resizeObserver?.observe(target);\n    }\n  }\n\n  observePanels() {\n    if (!this.#host.isConnected) return;\n\n    const next = new Set(\n      this.#delegate.getPanels().flatMap(panel => {\n        const surface = panel.shadowRoot?.querySelector<HTMLElement>('[internal-host]');\n        return surface ? [surface] : [];\n      })\n    );\n\n    for (const target of this.#borderTargets) {\n      if (!next.has(target)) {\n        this.#resizeObserver?.unobserve(target);\n      }\n    }\n\n    for (const target of next) {\n      if (!this.#borderTargets.has(target)) {\n        this.#resizeObserver?.observe(target, { box: 'content-box' });\n      }\n    }\n\n    this.#borderTargets = next;\n  }\n\n  #updateBorderWidth() {\n    const widths = [...this.#borderTargets].flatMap(target => {\n      const style = getComputedStyle(target);\n      return [style.borderTopWidth, style.borderRightWidth, style.borderBottomWidth, style.borderLeftWidth].map(value =>\n        Number.parseFloat(value)\n      );\n    });\n    const first = widths[0];\n    const width =\n      this.#borderTargets.size === this.#delegate.getPanels().length &&\n      first !== undefined &&\n      Number.isFinite(first) &&\n      first >= 0 &&\n      widths.every(value => value === first)\n        ? first\n        : 0;\n    const value = `${width}px`;\n\n    if (this.#host.style.getPropertyValue('--_geometry-border-width') !== value) {\n      this.#host.style.setProperty('--_geometry-border-width', value);\n    }\n  }\n\n  #readMetrics() {\n    const viewport = this.#delegate.getViewport();\n    const metric = this.#host.shadowRoot?.querySelector<HTMLElement>('.metric');\n    const gap = this.#host.shadowRoot?.querySelector<HTMLElement>('.gap-metric');\n    if (!viewport || !metric || !gap) {\n      return;\n    }\n\n    const box = metric.getBoundingClientRect();\n    const spacing = gap.getBoundingClientRect();\n    const grid = this.#delegate.getGrid();\n\n    return resolveDashboardMetrics({\n      ...grid,\n      sizing: this.#delegate.getSizing(),\n      width: viewport.clientWidth,\n      height: viewport.clientHeight,\n      columnSize: box.width,\n      rowSize: box.height,\n      gap: spacing.width,\n      overlap: spacing.height\n    });\n  }\n\n  #scheduleMeasure() {\n    if (!this.#host.isConnected || this.#resizeFrame !== undefined) return;\n\n    this.#resizeFrame = requestAnimationFrame(() => {\n      this.#resizeFrame = undefined;\n\n      if (this.#host.isConnected) {\n        this.measure();\n      }\n    });\n  }\n\n  measure() {\n    this.#updateBorderWidth();\n\n    const next = this.#readMetrics();\n    if (JSON.stringify(next) === JSON.stringify(this.#metrics)) return;\n\n    if (!haveSameGridPitch(next, this.#metrics)) {\n      this.#delegate.pitchChanged();\n    }\n\n    this.#metrics = next;\n    this.#host.requestUpdate();\n  }\n}\n"],"mappings":";;;AAwBA,IAAaA,IAAb,MAA4C;CAC1C;CACA;CACA;CACA;CACA;CACA,qBAAiB,IAAI,IAAiB;CAEtC,YAAY,GAAgC,GAAwC;EAGlF,AAFA,KAAKC,KAAQC,GACb,KAAKC,KAAYC,GACjBF,EAAK,cAAc,IAAI;CACzB;CAEA,IAAI,UAAU;EACZ,OAAO,KAAKG;CACd;CAEA,gBAAgB;EACd,AAAIC,MAEJ,KAAKC,KAAkB,IAAI,qBAAqB,KAAKC,GAAiB,CAAC,GAEnE,KAAKP,GAAM,cACb,KAAK,QAAQ;CAEjB;CAEA,mBAAmB;EAQjB,AAPA,KAAKM,IAAiB,WAAW,GAE7B,KAAKE,OAAiB,KAAA,KACxB,qBAAqB,KAAKA,EAAY,GAGxC,KAAKA,KAAe,KAAA,GACpB,KAAKC,GAAe,MAAM;CAC5B;CAEA,UAAU;EACR,KAAK,cAAc;EAEnB,KAAK,IAAMC,KAAU,KAAKV,GAAM,YAAY,iBAAiB,iCAAiC,KAAK,CAAC,GAClG,KAAKM,IAAiB,QAAQI,CAAM;CAExC;CAEA,gBAAgB;EACd,IAAI,CAAC,KAAKV,GAAM,aAAa;EAE7B,IAAMW,IAAO,IAAI,IACf,KAAKT,GAAU,UAAU,CAAC,CAAC,SAAQ,MAAS;GAC1C,IAAMU,IAAUC,EAAM,YAAY,cAA2B,iBAAiB;GAC9E,OAAOD,IAAU,CAACA,CAAO,IAAI,CAAC;EAChC,CAAC,CACH;EAEA,KAAK,IAAMF,KAAU,KAAKD,IACxB,AAAKE,EAAK,IAAID,CAAM,KAClB,KAAKJ,IAAiB,UAAUI,CAAM;EAI1C,KAAK,IAAMA,KAAUC,GACnB,AAAK,KAAKF,GAAe,IAAIC,CAAM,KACjC,KAAKJ,IAAiB,QAAQI,GAAQ,EAAE,KAAK,cAAc,CAAC;EAIhE,KAAKD,KAAiBE;CACxB;CAEA,KAAqB;EACnB,IAAMG,IAAS,CAAC,GAAG,KAAKL,EAAc,CAAC,CAAC,SAAQ,MAAU;GACxD,IAAMM,IAAQ,iBAAiBL,CAAM;GACrC,OAAO;IAACK,EAAM;IAAgBA,EAAM;IAAkBA,EAAM;IAAmBA,EAAM;GAAe,CAAC,CAAC,KAAI,MACxG,OAAO,WAAWC,CAAK,CACzB;EACF,CAAC,GACKC,IAAQH,EAAO,IASfE,IAAQ,GAPZ,KAAKP,GAAe,SAAS,KAAKP,GAAU,UAAU,CAAC,CAAC,UACxDe,MAAU,KAAA,KACV,OAAO,SAASA,CAAK,KACrBA,KAAS,KACTH,EAAO,OAAM,MAASE,MAAUC,CAAK,IACjCA,IACA,EACiB;EAEvB,AAAI,KAAKjB,GAAM,MAAM,iBAAiB,0BAA0B,MAAMgB,KACpE,KAAKhB,GAAM,MAAM,YAAY,4BAA4BgB,CAAK;CAElE;CAEA,KAAe;EACb,IAAME,IAAW,KAAKhB,GAAU,YAAY,GACtCiB,IAAS,KAAKnB,GAAM,YAAY,cAA2B,SAAS,GACpEoB,IAAM,KAAKpB,GAAM,YAAY,cAA2B,aAAa;EAC3E,IAAI,CAACkB,KAAY,CAACC,KAAU,CAACC,GAC3B;EAGF,IAAMC,IAAMF,EAAO,sBAAsB,GACnCG,IAAUF,EAAI,sBAAsB,GACpCG,IAAO,KAAKrB,GAAU,QAAQ;EAEpC,OAAOsB,EAAwB;GAC7B,GAAGD;GACH,QAAQ,KAAKrB,GAAU,UAAU;GACjC,OAAOgB,EAAS;GAChB,QAAQA,EAAS;GACjB,YAAYG,EAAI;GAChB,SAASA,EAAI;GACb,KAAKC,EAAQ;GACb,SAASA,EAAQ;EACnB,CAAC;CACH;CAEA,KAAmB;EACjB,AAAK,KAAKtB,GAAM,eAAe,KAAKQ,OAAiB,KAAA,MAErD,KAAKA,KAAe,4BAA4B;GAG9C,AAFA,KAAKA,KAAe,KAAA,GAEhB,KAAKR,GAAM,eACb,KAAK,QAAQ;EAEjB,CAAC;CACH;CAEA,UAAU;EACR,KAAKyB,GAAmB;EAExB,IAAMd,IAAO,KAAKe,GAAa;EAC/B,AAAI,KAAK,UAAUf,CAAI,MAAM,KAAK,UAAU,KAAKP,EAAQ,MAEpDuB,EAAkBhB,GAAM,KAAKP,EAAQ,KACxC,KAAKF,GAAU,aAAa,GAG9B,KAAKE,KAAWO,GAChB,KAAKX,GAAM,cAAc;CAC3B;AACF"}

package/dist/dashboard/dashboard.d.ts

@@ -0,0 +1,83 @@
+import { LitElement, type PropertyValues } from 'lit';
+import { Ghost } from '@nvidia-elements/core/ghost';
+import type { DashboardCommandContext, DashboardGridPlacement } from './dashboard.types.js';
+/**
+ * @element nve-dashboard
+ * @description A dashboard arranges application panels on a resizable grid with a restorable layout.
+ * @documentation https://nvidia.github.io/elements/docs/elements/dashboard/
+ * @since 0.0.0
+ * @stable false
+ * @entrypoint \@nvidia-elements/core/dashboard
+ * @command --enter-fullscreen - Present the invoking panel in native fullscreen.
+ * @command --exit-fullscreen - Exit native fullscreen.
+ * @command --toggle-fullscreen - Toggle native fullscreen for the invoking panel.
+ * @command --place - Apply the invoking control's integer grid placement without pointer target snapping. Target a panel directly or identify it with value when targeting the dashboard. Anchored span changes require resizing; other position changes require movement.
+ * @command --move-left - Move left through the same contact-aware movement step as a movement-handle arrow key. Target a panel directly or identify it with value on an invoker targeting the dashboard.
+ * @command --move-right - Move right through the same contact-aware movement step as a movement-handle arrow key. Target a panel directly or identify it with value on an invoker targeting the dashboard.
+ * @command --move-up - Move up through the same contact-aware movement step as a movement-handle arrow key. Target a panel directly or identify it with value on an invoker targeting the dashboard.
+ * @command --move-down - Move down through the same contact-aware movement step as a movement-handle arrow key. Target a panel directly or identify it with value on an invoker targeting the dashboard.
+ * @command --move-to-start - Place at the growth-axis start, using available space before making room. Keep the bounded-axis coordinate unless placement supplies another. Uses the same operation as Home on the movement grip.
+ * @command --increase-width - Increase width by one cell, subject to panel constraints. Target a panel directly or identify it with value on an invoker targeting the dashboard.
+ * @command --decrease-width - Decrease width by one cell, subject to panel constraints. Target a panel directly or identify it with value on an invoker targeting the dashboard.
+ * @command --increase-height - Increase height by one cell, subject to panel constraints. Target a panel directly or identify it with value on an invoker targeting the dashboard.
+ * @command --decrease-height - Decrease height by one cell, subject to panel constraints. Target a panel directly or identify it with value on an invoker targeting the dashboard.
+ * @slot - Direct dashboard panels with unique durable IDs, required headers, and application dropdown groups. DOM order remains application authored. Native reading order follows committed placement where supported; previews preserve that order.
+ * @event change - Announces one committed arrangement after interaction, commands, or panel membership and span-constraint reconciliation. Read value on the dashboard; authored content events still bubble normally.
+ * @event {Event} commandavailabilitychange - Arrangement or fullscreen command availability may have changed.
+ * @cssprop --column-size - Single-cell outer column length in fixed sizing or horizontal flow. Defaults to 160px.
+ * @cssprop --row-size - Single-cell outer row length in fixed sizing or vertical flow. Defaults to 120px.
+ * @cssprop --gap - Nonnegative CSS length between cells. Include units, including 0px for no gap. At zero, uniform used border widths overlap; unequal widths keep independent geometry. Shared seams assume square panels with solid opaque borders.
+ * @cssprop --guide-color - Color of the circular cell-center guides. Defaults to the muted border color.
+ * @cssprop --guide-size - Nonnegative CSS length for the guide circle diameter. Defaults to 8px. Include units, including 0px to hide the circles.
+ * @cssprop --height - Default viewport height. Defaults to 400px; horizontal fit needs a definite height.
+ * @cssprop --animation-duration - Duration of panel geometry, destination ghost geometry, and arrangement control transitions. Defaults to 150ms; reduced motion uses 0ms. Panel geometry follows external container resizing immediately; explicit arrangement and sizing changes use transitions. Animation never delays logical placement commits.
+ * @cssprop --animation-easing - Easing of panel and destination ghost geometry transitions.
+ * @csspart ghost - Inert placement preview shown during pointer arrangement.
+ */
+export declare class Dashboard extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+        children: string[];
+    };
+    static elementDefinitions: {
+        [Ghost.metadata.tag]: typeof Ghost;
+    };
+    /** Localized labels and placement announcements. Grid placement placeholders are column, row, columnSpan, and rowSpan. */
+    i18n: Partial<import("@nvidia-elements/foundations/internal/i18n").I18nStrings & {
+        __set: boolean;
+    }>;
+    /** Enables moving and resizing panels through controls and placement commands. */
+    rearrangeable: boolean;
+    /** Enables native fullscreen commands and a header control for each panel. Turning this off preserves an accepted session and its exit control. Fullscreen does not change the saved arrangement. */
+    fullscreenable: boolean;
+    /** Selects panel content framing. */
+    container?: 'inset' | 'flat' | 'full';
+    /** Cell sizing, defaulting to fit. Fit sizing fits bounded tracks to the viewport and scrolls along the growth axis. Fixed sizing uses the configured --column-size and --row-size dimensions and may scroll on both axes. Does not change value. */
+    sizing: 'fit' | 'fixed';
+    /** Guide visibility: auto shows circular cell-center guides during pointer arrangement, visible always shows them, and hidden hides them while keeping the destination preview. Attribute keywords ignore case; missing, empty, or unrecognized values use auto. Does not change value or interaction permissions. */
+    guides: 'auto' | 'visible' | 'hidden';
+    /** Closes growth-axis gaps toward top in vertical flow or inline start in horizontal flow, preserving bounded-axis positions and spans. Defaults to false. Enabling silently canonicalizes the current arrangement; disabling keeps current coordinates. This policy is independent of value. */
+    get autoSettle(): boolean;
+    set autoSettle(value: boolean);
+    /** Version 1 JSON with grid {flow, tracks} and items {id, column, row, columnSpan, rowSpan}. Positions are zero-based cells from inline start and top; column zero is at the right in RTL. Spans count columns and rows. Defaults to an empty string, which seeds one-cell panels in DOM order. Assignment validates the saved model immediately and normalizes panels once their upgrades and unique nonempty IDs are ready; restoration is silent. Intentional gaps remain when autoSettle is false. After successful reconciliation, only direct default-slot panel children remain in the value, including hidden children. Removed panels lose their placement. Applications own content data, persistence, and any saved placement history. */
+    get value(): string;
+    set value(value: string);
+    /** Growth direction, defaulting to vertical with bounded columns. Horizontal flow bounds rows. Changing flow does not transpose panel coordinates or spans. Assignment updates the arrangement silently; changes that conflict with panel constraints throw before changing the arrangement. */
+    get flow(): 'vertical' | 'horizontal';
+    set flow(value: 'vertical' | 'horizontal');
+    /** Bounded-axis track count, defaulting to 12. Valid integers range from 1 through 1000000. Assignment updates the arrangement silently and rejects changes that conflict with panel constraints. */
+    get tracks(): number;
+    set tracks(value: number);
+    private announcement;
+    protected firstUpdated(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(): void;
+    /** Requests an integer placement without gesture target snapping. Anchored span changes use resizing permission, including left and top edges that change the origin; other position changes require movement. Directional collisions and optional growth-axis settling determine the final arrangement. Returns false for unavailable, invalid, or unchanged normalized placement. Successful placement emits one change. */
+    place(id: string, placement: DashboardGridPlacement): boolean;
+    /** Queries arrangement and fullscreen commands using a panel ID. A placement supplies the full grid placement for --place, or the desired bounded-axis coordinate for --move-to-start. Availability compares the complete normalized proposal with the current arrangement. Directional movement derives from grid placement and panel permissions without requiring rendered controls. Native fullscreen admission remains subject to browser permission. */
+    isCommandAvailable(command: string, context?: DashboardCommandContext): boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/dashboard/dashboard.examples.js

@@ -0,0 +1,5 @@
+// src/dashboard/dashboard.examples.ts
+var e = "";
+export { e as default };
+
+//# sourceMappingURL=dashboard.examples.js.map

package/dist/dashboard/dashboard.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard.examples.js","names":["dashboard_examples_default"],"sources":["../../src/dashboard/dashboard.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';\n\nimport '@nvidia-elements/core/dashboard/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/dropdown-group/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/menu/define.js';\nimport '@nvidia-elements/core/switch/define.js';\nimport '@nvidia-elements/core/range/define.js';\nimport '@nvidia-elements/core/select/define.js';\n\nexport default { title: 'Elements/Dashboard', component: 'nve-dashboard' };\n\n/**\n * @summary Arrange panels on a grid while retaining application content.\n */\nexport const Default = {\n  render: () => html`\n    <div id=\"default-dashboard-example\" nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:md align:space-between align:wrap\">\n        <nve-button id=\"reset-default-layout\">Reset layout</nve-button>\n      </div>\n      <nve-dashboard id=\"default-dashboard\" rearrangeable style=\"height:600px;--row-size:90px\"\n        value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"hero-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"hero-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"hero-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"hero-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"hero-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'>\n        <nve-dashboard-panel id=\"hero-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"hero-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"hero-changes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"hero-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"hero-notes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>\n            <nve-input>\n              <input aria-label=\"Notes\" value=\"Review findings.\" />\n            </nve-input>\n          </nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n      </nve-dashboard>\n      <script type=\"module\">\n        const example = document.querySelector('#default-dashboard-example');\n        const dashboard = example.querySelector('nve-dashboard');\n        const reset = example.querySelector('#reset-default-layout');\n        const initialValue = dashboard.getAttribute('value');\n        reset.addEventListener('click', () => { dashboard.value = initialValue; });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Rearrange and resize panels while retaining application content.\n */\nexport const Rearrangeable = {\n  render: () => html`\n    <div id=\"rearrangeable-dashboard-example\" nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:md align:space-between align:wrap\">\n        <nve-button id=\"reset-rearrangeable-layout\">Reset layout</nve-button>\n        <nve-switch id=\"toggle-rearrangeable\">\n          <label>Rearrangeable</label>\n          <input type=\"checkbox\" checked />\n        </nve-switch>\n      </div>\n      <nve-dashboard id=\"rearrangeable-dashboard\" rearrangeable style=\"height:600px;--row-size:90px\"\n        value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"rearrangeable-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"rearrangeable-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"rearrangeable-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"rearrangeable-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"rearrangeable-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'>\n        <nve-dashboard-panel id=\"rearrangeable-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"rearrangeable-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"rearrangeable-changes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"rearrangeable-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"rearrangeable-notes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>\n            <nve-input>\n              <input aria-label=\"Notes\" value=\"Review findings.\" />\n            </nve-input>\n          </nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n      </nve-dashboard>\n      <script type=\"module\">\n        const example = document.querySelector('#rearrangeable-dashboard-example');\n        const dashboard = example.querySelector('nve-dashboard');\n        const toggle = example.querySelector('#toggle-rearrangeable input');\n        const initialValue = dashboard.getAttribute('value');\n        toggle.addEventListener('change', () => {\n          dashboard.rearrangeable = toggle.checked;\n        });\n        example.querySelector('#reset-rearrangeable-layout').addEventListener('click', () => {\n          dashboard.value = initialValue;\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Grow vertically within bounded columns or horizontally within bounded rows.\n */\nexport const Flow = {\n  render: () => html`\n    <div id=\"flow-example\" nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:md align:space-between align:vertical-center align:wrap\">\n        <nve-button id=\"reset-flow-layout\">Reset layout</nve-button>\n        <nve-select layout=\"horizontal-inline\" fit-content>\n          <label>Flow</label>\n          <select id=\"flow-mode\">\n            <option value=\"vertical\" selected>Vertical</option>\n            <option value=\"horizontal\">Horizontal</option>\n          </select>\n        </nve-select>\n      </div>\n      <nve-dashboard id=\"flow-dashboard\" rearrangeable style=\"height:600px;--row-size:90px\"\n        value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"flow-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"flow-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"flow-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"flow-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"flow-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'>\n        <nve-dashboard-panel id=\"flow-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"flow-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"flow-changes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"flow-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"flow-notes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>\n            <nve-input>\n              <input aria-label=\"Notes\" value=\"Review findings.\" />\n            </nve-input>\n          </nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n      </nve-dashboard>\n      <script type=\"module\">\n        const example = document.querySelector('#flow-example');\n        const dashboard = example.querySelector('nve-dashboard');\n        const select = example.querySelector('#flow-mode');\n        const initialLayout = JSON.parse(dashboard.getAttribute('value'));\n        // Transpose the cells, keeping application content in the same panels.\n        function transposeForFlow(layout, flow) {\n          if (layout.grid.flow === flow) return layout;\n          return {\n            ...layout,\n            grid: { ...layout.grid, flow },\n            items: layout.items.map(item => ({\n              ...item,\n              column: item.row,\n              row: item.column,\n              columnSpan: item.rowSpan,\n              rowSpan: item.columnSpan\n            }))\n          };\n        }\n        select.addEventListener('change', () => {\n          const layout = JSON.parse(dashboard.value);\n          dashboard.value = JSON.stringify(transposeForFlow(layout, select.value));\n        });\n        example.querySelector('#reset-flow-layout').addEventListener('click', () => {\n          dashboard.value = JSON.stringify(transposeForFlow(initialLayout, select.value));\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Compare tracks fitted to the viewport with fixed CSS cell dimensions.\n */\n// eslint-disable-next-line local-typescript/example-template-size -- Keep the complete sizing controls and five-panel content with the required viewport width.\nexport const Sizing = {\n  render: () => html`\n    <div id=\"sizing-dashboard-example\" nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:md align:space-between align:vertical-center align:wrap\">\n        <nve-button id=\"reset-sizing-layout\">Reset layout</nve-button>\n        <div nve-layout=\"row gap:md align:vertical-center align:wrap\">\n          <nve-select layout=\"horizontal-inline\" fit-content>\n            <label>Sizing</label>\n            <select id=\"sizing-mode\">\n              <option value=\"fit\" selected>Fit</option>\n              <option value=\"fixed\">Fixed</option>\n            </select>\n          </nve-select>\n          <nve-range layout=\"horizontal-inline\" fit-content style=\"width:auto\">\n            <label>Viewport width: <output for=\"sizing-width\">100</output>%</label>\n            <input id=\"sizing-width\" type=\"range\" min=\"50\" max=\"100\" value=\"100\" />\n          </nve-range>\n        </div>\n      </div>\n      <div id=\"sizing-viewport\" style=\"width:100%\">\n        <nve-dashboard id=\"sizing-dashboard\" rearrangeable style=\"height:600px;--row-size:90px;--column-size:140px\"\n          value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"sizing-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"sizing-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"sizing-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"sizing-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"sizing-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'>\n          <nve-dashboard-panel id=\"sizing-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n            <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n            <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n            <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n          </nve-dashboard-panel>\n          <nve-dashboard-panel id=\"sizing-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n            <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n            <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n            <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n          </nve-dashboard-panel>\n          <nve-dashboard-panel id=\"sizing-changes\" min-column-span=\"2\" min-row-span=\"2\">\n            <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n            <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n          </nve-dashboard-panel>\n          <nve-dashboard-panel id=\"sizing-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n            <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n            <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n          </nve-dashboard-panel>\n          <nve-dashboard-panel id=\"sizing-notes\" min-column-span=\"2\" min-row-span=\"2\">\n            <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n            <nve-dashboard-panel-content>\n              <nve-input>\n                <input aria-label=\"Notes\" value=\"Review findings.\" />\n              </nve-input>\n            </nve-dashboard-panel-content>\n          </nve-dashboard-panel>\n        </nve-dashboard>\n      </div>\n      <script type=\"module\">\n        const example = document.querySelector('#sizing-dashboard-example');\n        const dashboard = example.querySelector('nve-dashboard');\n        const viewport = example.querySelector('#sizing-viewport');\n        const select = example.querySelector('#sizing-mode');\n        const range = example.querySelector('#sizing-width');\n        const output = example.querySelector('output');\n        const initialValue = dashboard.getAttribute('value');\n        select.addEventListener('change', () => {\n          dashboard.sizing = select.value;\n        });\n        range.addEventListener('input', () => {\n          viewport.style.width = range.value + '%';\n          output.value = range.value;\n        });\n        example.querySelector('#reset-sizing-layout').addEventListener('click', () => {\n          dashboard.value = initialValue;\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Choose when to show the grid guides.\n */\nexport const Guides = {\n  render: () => html`\n    <div id=\"guides-example\" nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:md align:space-between align:vertical-center align:wrap\">\n        <nve-button id=\"reset-guides-layout\">Reset layout</nve-button>\n        <nve-select layout=\"horizontal-inline\" fit-content>\n          <label>Guides</label>\n          <select id=\"guides-mode\">\n            <option value=\"auto\">Auto</option>\n            <option value=\"visible\" selected>Visible</option>\n            <option value=\"hidden\">Hidden</option>\n          </select>\n        </nve-select>\n      </div>\n      <nve-dashboard id=\"guided-dashboard\" guides=\"visible\" rearrangeable style=\"height:702px;--row-size:90px;--guide-size:var(--nve-ref-size-200)\"\n        value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"guided-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"guided-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"guided-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"guided-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"guided-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'>\n        <nve-dashboard-panel id=\"guided-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"guided-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"guided-changes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"guided-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"guided-notes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>\n            <nve-input>\n              <input aria-label=\"Notes\" value=\"Review findings.\" />\n            </nve-input>\n          </nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n      </nve-dashboard>\n      <script type=\"module\">\n        const example = document.querySelector('#guides-example');\n        const dashboard = example.querySelector('nve-dashboard');\n        const select = example.querySelector('#guides-mode');\n        const initialValue = dashboard.getAttribute('value');\n        select.addEventListener('change', () => {\n          dashboard.guides = select.value;\n        });\n        example.querySelector('#reset-guides-layout').addEventListener('click', () => {\n          dashboard.value = initialValue;\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Automatically close gaps along the growth axis.\n */\nexport const AutoSettle = {\n  render: () => html`\n    <div id=\"auto-settle-example\" nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:md align:space-between align:vertical-center align:wrap\">\n        <nve-button id=\"reset-settle-layout\">Reset layout</nve-button>\n        <nve-switch id=\"toggle-auto-settle\">\n          <label>Auto Settle</label>\n          <input type=\"checkbox\" />\n        </nve-switch>\n      </div>\n      <nve-dashboard id=\"settle-dashboard\" guides=\"visible\" rearrangeable style=\"height:702px;--row-size:90px\"\n        value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"settle-baseline\",\"column\":0,\"row\":1,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"settle-candidate\",\"column\":3,\"row\":1,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"settle-changes\",\"column\":0,\"row\":3,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"settle-evidence\",\"column\":3,\"row\":3,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"settle-notes\",\"column\":0,\"row\":5,\"columnSpan\":6,\"rowSpan\":2}]}'>\n        <nve-dashboard-panel id=\"settle-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"settle-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"settle-changes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"settle-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"settle-notes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>\n            <nve-input>\n              <input aria-label=\"Notes\" value=\"Review findings.\" />\n            </nve-input>\n          </nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n      </nve-dashboard>\n      <script type=\"module\">\n        const example = document.querySelector('#auto-settle-example');\n        const dashboard = example.querySelector('nve-dashboard');\n        const toggle = example.querySelector('#toggle-auto-settle input');\n        const initialValue = dashboard.getAttribute('value');\n        toggle.addEventListener('change', () => {\n          dashboard.autoSettle = toggle.checked;\n        });\n        example.querySelector('#reset-settle-layout').addEventListener('click', () => {\n          dashboard.autoSettle = false;\n          toggle.checked = false;\n          dashboard.value = initialValue;\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Present one panel in native fullscreen without changing the saved arrangement.\n */\nexport const Fullscreenable = {\n  render: () => html`\n    <div id=\"fullscreen-dashboard-example\" nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:md align:space-between align:wrap\">\n        <nve-button id=\"reset-fullscreen-layout\">Reset layout</nve-button>\n        <nve-switch id=\"toggle-fullscreenable\">\n          <label>Fullscreenable</label>\n          <input type=\"checkbox\" checked />\n        </nve-switch>\n      </div>\n      <nve-dashboard id=\"fullscreen-dashboard\" fullscreenable rearrangeable style=\"height:600px;--row-size:90px\"\n        value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"fullscreen-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"fullscreen-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"fullscreen-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"fullscreen-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"fullscreen-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'>\n        <nve-dashboard-panel id=\"fullscreen-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"fullscreen-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"fullscreen-changes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"fullscreen-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"fullscreen-notes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>\n            <nve-input>\n              <input aria-label=\"Notes\" value=\"Review findings.\" />\n            </nve-input>\n          </nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n      </nve-dashboard>\n      <script type=\"module\">\n        const example = document.querySelector('#fullscreen-dashboard-example');\n        const dashboard = example.querySelector('nve-dashboard');\n        const toggle = example.querySelector('#toggle-fullscreenable input');\n        const initialValue = dashboard.getAttribute('value');\n        toggle.addEventListener('change', () => {\n          dashboard.fullscreenable = toggle.checked;\n        });\n        example.querySelector('#reset-fullscreen-layout').addEventListener('click', () => {\n          dashboard.value = initialValue;\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Add custom menus that use invoker commands to move and resize panels.\n */\n// eslint-disable-next-line local-typescript/example-template-size -- Keep the complete menu composition readable without compressing its markup.\nexport const CustomPanelActions = {\n  render: () => html`\n    <nve-dashboard id=\"actions-dashboard\" rearrangeable style=\"height:600px;--row-size:90px\"\n      value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"actions-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"actions-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"actions-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"actions-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"actions-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'>\n        <nve-dashboard-panel id=\"actions-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>\n            Baseline\n            <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" container=\"flat\" size=\"sm\" aria-label=\"Baseline actions\" value=\"actions-baseline\" popovertarget=\"dashboard-actions-menu\"></nve-icon-button>\n          </nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"actions-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>\n            Candidate\n            <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" container=\"flat\" size=\"sm\" aria-label=\"Candidate actions\" value=\"actions-candidate\" popovertarget=\"dashboard-actions-menu\"></nve-icon-button>\n          </nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"actions-changes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>\n            Changes\n            <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" container=\"flat\" size=\"sm\" aria-label=\"Changes actions\" value=\"actions-changes\" popovertarget=\"dashboard-actions-menu\"></nve-icon-button>\n          </nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"actions-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>\n            Evidence\n            <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" container=\"flat\" size=\"sm\" aria-label=\"Evidence actions\" value=\"actions-evidence\" popovertarget=\"dashboard-actions-menu\"></nve-icon-button>\n          </nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"actions-notes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>\n            Notes\n            <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" container=\"flat\" size=\"sm\" aria-label=\"Notes actions\" value=\"actions-notes\" popovertarget=\"dashboard-actions-menu\"></nve-icon-button>\n          </nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>\n            <nve-input>\n              <input aria-label=\"Notes\" value=\"Review findings.\" />\n            </nve-input>\n          </nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n      <nve-dropdown-group>\n        <nve-dropdown id=\"dashboard-actions-menu\">\n          <nve-menu>\n            <nve-menu-item popovertarget=\"dashboard-move-menu\">\n              Move\n              <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n            </nve-menu-item>\n            <nve-menu-item popovertarget=\"dashboard-shrink-menu\">\n              Shrink\n              <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n            </nve-menu-item>\n            <nve-menu-item popovertarget=\"dashboard-grow-menu\">\n              Grow\n              <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n            </nve-menu-item>\n          </nve-menu>\n        </nve-dropdown>\n        <nve-dropdown id=\"dashboard-move-menu\" position=\"right\">\n          <nve-menu>\n            <nve-menu-item commandfor=\"actions-dashboard\" command=\"--move-to-start\">To start</nve-menu-item>\n            <nve-menu-item commandfor=\"actions-dashboard\" command=\"--move-left\">Left</nve-menu-item>\n            <nve-menu-item commandfor=\"actions-dashboard\" command=\"--move-right\">Right</nve-menu-item>\n            <nve-menu-item commandfor=\"actions-dashboard\" command=\"--move-up\">Up</nve-menu-item>\n            <nve-menu-item commandfor=\"actions-dashboard\" command=\"--move-down\">Down</nve-menu-item>\n          </nve-menu>\n        </nve-dropdown>\n        <nve-dropdown id=\"dashboard-shrink-menu\" position=\"right\">\n          <nve-menu>\n            <nve-menu-item commandfor=\"actions-dashboard\" command=\"--decrease-width\">Width</nve-menu-item>\n            <nve-menu-item commandfor=\"actions-dashboard\" command=\"--decrease-height\">Height</nve-menu-item>\n          </nve-menu>\n        </nve-dropdown>\n        <nve-dropdown id=\"dashboard-grow-menu\" position=\"right\">\n          <nve-menu>\n            <nve-menu-item commandfor=\"actions-dashboard\" command=\"--increase-width\">Width</nve-menu-item>\n            <nve-menu-item commandfor=\"actions-dashboard\" command=\"--increase-height\">Height</nve-menu-item>\n          </nve-menu>\n        </nve-dropdown>\n      </nve-dropdown-group>\n      <script type=\"module\">\n        const dashboard = document.querySelector('#actions-dashboard');\n        const dropdownGroup = dashboard.querySelector('nve-dropdown-group');\n        let panelId = 'actions-baseline';\n        function refresh() {\n          for (const item of dropdownGroup.querySelectorAll('[command]')) {\n            item.value = panelId;\n            item.disabled = !dashboard.isCommandAvailable(item.command, { value: panelId });\n          }\n          for (const trigger of dropdownGroup.querySelectorAll('[popovertarget]')) {\n            const items = trigger.popoverTargetElement.querySelectorAll('[command]');\n            trigger.disabled = [...items].every(item => item.disabled);\n          }\n        }\n        dropdownGroup.addEventListener('beforetoggle', event => {\n          if (event.newState !== 'open') return;\n          if (event.target.id === 'dashboard-actions-menu') panelId = event.source?.value ?? panelId;\n          refresh();\n        }, true);\n        dashboard.addEventListener('commandavailabilitychange', refresh);\n        dashboard.addEventListener('change', event => {\n          if (event.target === dashboard) dropdownGroup.close();\n        });\n        refresh();\n      </script>\n    </nve-dashboard>\n  `\n};\n\n/**\n * @summary Add and remove panels through the DOM while preserving application content.\n */\nexport const DynamicPanels = {\n  render: () => html`\n    <div id=\"dynamic-panels-example\" nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:md align:space-between align:wrap\">\n        <nve-button id=\"reset-dynamic-layout\">Reset layout</nve-button>\n        <div nve-layout=\"row gap:sm\">\n          <nve-button id=\"add-dynamic-notes\">Add Notes</nve-button>\n          <nve-button id=\"remove-dynamic-notes\" disabled>Remove Notes</nve-button>\n        </div>\n      </div>\n      <nve-dashboard id=\"dynamic-dashboard\" rearrangeable style=\"height:400px;--row-size:90px\"\n        value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"dynamic-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"dynamic-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2}]}'>\n        <nve-dashboard-panel id=\"dynamic-baseline\" min-column-span=\"3\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"dynamic-candidate\" min-column-span=\"3\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n      </nve-dashboard>\n      <template id=\"dynamic-notes-template\">\n        <nve-dashboard-panel id=\"dynamic-notes\" min-column-span=\"3\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>\n            <nve-input>\n              <input aria-label=\"Notes\" value=\"Review findings.\" />\n            </nve-input>\n          </nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n      </template>\n      <script type=\"module\">\n        const example = document.querySelector('#dynamic-panels-example');\n        const dashboard = example.querySelector('nve-dashboard');\n        const add = example.querySelector('#add-dynamic-notes');\n        const remove = example.querySelector('#remove-dynamic-notes');\n        const notes = example.querySelector('#dynamic-notes-template').content.firstElementChild;\n        const initialValue = dashboard.getAttribute('value');\n\n        add.addEventListener('click', () => {\n          dashboard.append(notes);\n          add.disabled = true;\n          remove.disabled = false;\n        });\n\n        remove.addEventListener('click', () => {\n          notes.remove();\n          add.disabled = false;\n          remove.disabled = true;\n        });\n\n        example.querySelector('#reset-dynamic-layout').addEventListener('click', () => {\n          dashboard.value = initialValue;\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Save and restore panel placement without recreating application content.\n */\nexport const SaveRestore = {\n  render: () => html`\n    <div nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:md align:space-between align:wrap\">\n        <nve-button id=\"reset-layout\">Reset layout</nve-button>\n        <div nve-layout=\"row gap:sm\">\n          <nve-button id=\"save-layout\">Save layout</nve-button>\n          <nve-button id=\"restore-layout\">Restore layout</nve-button>\n        </div>\n      </div>\n      <nve-dashboard id=\"saved-layout\" rearrangeable style=\"height:600px;--row-size:90px\" value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"saved-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"saved-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"saved-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"saved-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"saved-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'>\n        <nve-dashboard-panel id=\"saved-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"saved-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"saved-changes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"saved-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"saved-notes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>\n            <nve-input>\n              <input aria-label=\"Notes\" value=\"Review findings.\" />\n            </nve-input>\n          </nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n      </nve-dashboard>\n      <script type=\"module\">\n        const dashboard = document.querySelector('#saved-layout');\n        const save = document.querySelector('#save-layout');\n        const restore = document.querySelector('#restore-layout');\n        const reset = document.querySelector('#reset-layout');\n        const initialValue = dashboard.getAttribute('value');\n        let savedValue = initialValue;\n        save.addEventListener('click', () => { savedValue = dashboard.value; });\n        restore.addEventListener('click', () => { dashboard.value = savedValue; });\n        reset.addEventListener('click', () => { dashboard.value = initialValue; });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Match the surrounding layout with inset, flat, or full container framing.\n */\nexport const Container = {\n  render: () => html`\n    <div nve-layout=\"column gap:md\">\n      <nve-dashboard container=\"inset\" rearrangeable style=\"height:260px\" value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":2},\"items\":[{\"id\":\"inset-baseline\",\"column\":0,\"row\":0,\"columnSpan\":1,\"rowSpan\":2},{\"id\":\"inset-candidate\",\"column\":1,\"row\":0,\"columnSpan\":1,\"rowSpan\":2}]}'>\n        <nve-dashboard-panel id=\"inset-baseline\"><nve-dashboard-panel-header>Baseline (inset)</nve-dashboard-panel-header><nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content><nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer></nve-dashboard-panel>\n        <nve-dashboard-panel id=\"inset-candidate\"><nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header><nve-dashboard-panel-content>Current run</nve-dashboard-panel-content><nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer></nve-dashboard-panel>\n      </nve-dashboard>\n      <nve-dashboard container=\"flat\" rearrangeable style=\"height:260px\" value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":2},\"items\":[{\"id\":\"flat-baseline\",\"column\":0,\"row\":0,\"columnSpan\":1,\"rowSpan\":2},{\"id\":\"flat-candidate\",\"column\":1,\"row\":0,\"columnSpan\":1,\"rowSpan\":2}]}'>\n        <nve-dashboard-panel id=\"flat-baseline\"><nve-dashboard-panel-header>Baseline (flat)</nve-dashboard-panel-header><nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content><nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer></nve-dashboard-panel>\n        <nve-dashboard-panel id=\"flat-candidate\"><nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header><nve-dashboard-panel-content>Current run</nve-dashboard-panel-content><nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer></nve-dashboard-panel>\n      </nve-dashboard>\n      <nve-dashboard container=\"full\" rearrangeable style=\"height:260px\" value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":2},\"items\":[{\"id\":\"full-baseline\",\"column\":0,\"row\":0,\"columnSpan\":1,\"rowSpan\":2},{\"id\":\"full-candidate\",\"column\":1,\"row\":0,\"columnSpan\":1,\"rowSpan\":2}]}'>\n        <nve-dashboard-panel id=\"full-baseline\"><nve-dashboard-panel-header>Baseline (full)</nve-dashboard-panel-header><nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content><nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer></nve-dashboard-panel>\n        <nve-dashboard-panel id=\"full-candidate\"><nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header><nve-dashboard-panel-content>Current run</nve-dashboard-panel-content><nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer></nve-dashboard-panel>\n      </nve-dashboard>\n    </div>\n  `\n};\n\n/**\n * @summary Customize header and footer spacing, control sizes, and panel corners for a compact dashboard.\n * @tags theme\n */\nexport const CompactStyling = {\n  render: () => html`\n    <div id=\"compact-dashboard-example\" nve-layout=\"column gap:md\">\n      <nve-button>Reset layout</nve-button>\n      <style>\n        #condensed-dashboard > nve-dashboard-panel {\n          --box-shadow: none;\n          --border-radius: 0;\n          --control-width: var(--nve-ref-size-600);\n          --control-height: var(--nve-ref-size-800);\n        }\n        #condensed-dashboard nve-dashboard-panel-header {\n          --min-height: var(--nve-ref-size-800);\n          --suffix-padding: var(--nve-ref-size-50);\n          --padding: var(--nve-ref-size-100) var(--nve-ref-size-100) var(--nve-ref-size-100) var(--nve-ref-size-250);\n        }\n        #condensed-dashboard nve-dashboard-panel-footer {\n          --suffix-padding: var(--nve-ref-size-50);\n          --padding: var(--nve-ref-size-100) var(--nve-ref-size-250);\n        }\n      </style>\n      <nve-dashboard id=\"condensed-dashboard\" rearrangeable style=\"height:480px;--gap:0px;--row-size:80px\"\n        value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"condensed-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"condensed-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"condensed-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"condensed-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"condensed-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'>\n        <nve-dashboard-panel id=\"condensed-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header><span nve-text=\"label sm semibold\">Baseline</span></nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer><span nve-text=\"body sm\">Complete</span></nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"condensed-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header><span nve-text=\"label sm semibold\">Candidate</span></nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer><span nve-text=\"body sm\">Complete</span></nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"condensed-changes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header><span nve-text=\"label sm semibold\">Changes</span></nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"condensed-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header><span nve-text=\"label sm semibold\">Evidence</span></nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"condensed-notes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header><span nve-text=\"label sm semibold\">Notes</span></nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>\n            <nve-input>\n              <input aria-label=\"Notes\" value=\"Review findings.\" />\n            </nve-input>\n          </nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n      </nve-dashboard>\n      <script type=\"module\">\n        const example = document.querySelector('#compact-dashboard-example');\n        const dashboard = example.querySelector('nve-dashboard');\n        const initialValue = dashboard.getAttribute('value');\n        example.querySelector('nve-button').addEventListener('click', () => {\n          dashboard.value = initialValue;\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Adjust spacing between panels with --gap. Zero joins borders with matching widths.\n * @tags test-case\n */\nexport const Gap = {\n  render: () => html`\n    <div id=\"dashboard-gap-example\" nve-layout=\"column gap:md\">\n      <nve-range>\n        <label>\n          Gap:\n          <output for=\"dashboard-gap-range\">0</output>\n          px\n        </label>\n        <input id=\"dashboard-gap-range\" type=\"range\" min=\"0\" max=\"24\" value=\"0\" />\n      </nve-range>\n      <nve-dashboard id=\"gap-dashboard\" container=\"full\" rearrangeable style=\"height:600px;--row-size:90px;--gap:0px\"\n        value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"gap-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"gap-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"gap-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"gap-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"gap-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'>\n        <nve-dashboard-panel id=\"gap-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"gap-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"gap-changes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"gap-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"gap-notes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>\n            <nve-input>\n              <input aria-label=\"Notes\" value=\"Review findings.\" />\n            </nve-input>\n          </nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n      </nve-dashboard>\n      <script type=\"module\">\n        const example = document.querySelector('#dashboard-gap-example');\n        const dashboard = example.querySelector('nve-dashboard');\n        const range = example.querySelector('input[type=\"range\"]');\n        const output = example.querySelector('output');\n        range.addEventListener('input', () => {\n          dashboard.style.setProperty('--gap', range.value + 'px');\n          output.value = range.value;\n        });\n      </script>\n    </div>\n  `\n};\n\n/**\n * @summary Mirror panel placement and controls with the reading direction.\n * @tags test-case\n */\nexport const RightToLeft = {\n  render: () => html`\n    <div id=\"rtl-dashboard-example\" nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:md align:space-between align:wrap\">\n        <nve-button id=\"reset-rtl-layout\">Reset layout</nve-button>\n      </div>\n      <nve-dashboard id=\"rtl-dashboard\" dir=\"rtl\" rearrangeable guides=\"visible\" style=\"height:600px;--row-size:90px\"\n        value='{\"version\":1,\"grid\":{\"flow\":\"vertical\",\"tracks\":6},\"items\":[{\"id\":\"rtl-baseline\",\"column\":0,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"rtl-candidate\",\"column\":3,\"row\":0,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"rtl-changes\",\"column\":0,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"rtl-evidence\",\"column\":3,\"row\":2,\"columnSpan\":3,\"rowSpan\":2},{\"id\":\"rtl-notes\",\"column\":0,\"row\":4,\"columnSpan\":6,\"rowSpan\":2}]}'>\n        <nve-dashboard-panel id=\"rtl-baseline\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Baseline</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Reference run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"rtl-candidate\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Candidate</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Current run</nve-dashboard-panel-content>\n          <nve-dashboard-panel-footer>Complete</nve-dashboard-panel-footer>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"rtl-changes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Changes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Comparison</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"rtl-evidence\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Evidence</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>Test cases</nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n        <nve-dashboard-panel id=\"rtl-notes\" min-column-span=\"2\" min-row-span=\"2\">\n          <nve-dashboard-panel-header>Notes</nve-dashboard-panel-header>\n          <nve-dashboard-panel-content>\n            <nve-input>\n              <input aria-label=\"Notes\" value=\"Review findings.\" />\n            </nve-input>\n          </nve-dashboard-panel-content>\n        </nve-dashboard-panel>\n      </nve-dashboard>\n      <script type=\"module\">\n        const example = document.querySelector('#rtl-dashboard-example');\n        const dashboard = example.querySelector('nve-dashboard');\n        const reset = example.querySelector('#reset-rtl-layout');\n        const initialValue = dashboard.getAttribute('value');\n        reset.addEventListener('click', () => { dashboard.value = initialValue; });\n      </script>\n    </div>\n  `\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}