@ixfx/components 0.7.5 → 0.8.0

package/dist/{vertical-list-DwtCPy1b.d.ts → vertical-list-CFuFDygi.d.ts}

@@ -1,4 +1,4 @@
-import { y as ListSearchController } from "./index-CBS4z1v-.js";
+import { S as ListSearchController } from "./index-h6gxtfHH.js";
 import { i as ListInteractionMode, l as ListSelectionMode, r as ListElementEventMap } from "./list-selection-types-B5ioL-dG.js";
 import { LitElement, PropertyValues } from "lit";
 import { CommandId, CommandRegistry } from "@clinth/ui-commands";
@@ -140,4 +140,4 @@ declare global {
 }
 //#endregion
 export { CustomCheckboxOptions as n, VerticalListElement as r, AddItemOptions as t };
-//# sourceMappingURL=vertical-list-DwtCPy1b.d.ts.map
+//# sourceMappingURL=vertical-list-CFuFDygi.d.ts.map

package/dist/{vertical-list-DwtCPy1b.d.ts.map → vertical-list-CFuFDygi.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"vertical-list-DwtCPy1b.d.ts","names":[],"sources":["../src/vertical-list/vertical-list.ts"],"mappings":";;;;;UA2CiB;EACf,WAAW;EACX;EACA;;UAGe;;;;;;EAMf;;cAMW,4BAA4B;;EAEvC,eAAe;EAGf,iBAAiB;EAGjB,mBAAmB,IAAI;;;;;;EAQvB;;;;;;;;;;;;;;;;;;;EAqBA,oBAAoB,gCAAgC;;;;;;EAQpD;mBAUiB;UAeT;;WAeC,QAAM,qBAAA;;MAYX,YAAY;EAoBP;EAmBA;EA4CA,QAAQ,SAAS;;MAmCtB,gBAAgB;;MAKhB,iBAAiB,YAAY;EAIjC,QAAQ,MAAM,kBAAkB,UAAU;;;;;;EAqB1C,WAAW,MAAM,UAAU;;EAW3B,YAAY,OAAO,SAAS,WAAW;EAIvC;;;;;;EAYA,SAAS,gBAAgB;;;;;;EAczB,SAAS,WAAW,WAAW,OAAO;EAItC,OAAO,MAAM;EAIb,WAAW,OAAO,SAAS;EAI3B,SAAS,MAAM;EAIf;EAIA;;MAQI,gBAAgB;;MAKhB;;EAMJ,WAAW,MAAM;;EAKjB,gBAAgB,MAAM;;EAKtB,mBAAmB,MAAM;;EAKzB,SAAS;EAkBP,eAAe,0CAA0C,UAAU;UAqB7D;UAgBA;UAOA;UAiBA;;;;;;;UA6FA;;;;;UAuBA;UAcA;UAYA;UAUA;UAMA;UAIA;UAwDA;UAQA;UAMA;SAUQ,sBAAM;EA+Hb,wBAAM;;QAYT;YACI;IACR,sBAAsB;;YAGd,4BAA4B"}
+{"version":3,"file":"vertical-list-CFuFDygi.d.ts","names":[],"sources":["../src/vertical-list/vertical-list.ts"],"mappings":";;;;;UA2CiB;EACf,WAAW;EACX;EACA;;UAGe;;;;;;EAMf;;cAMW,4BAA4B;;EAEvC,eAAe;EAGf,iBAAiB;EAGjB,mBAAmB,IAAI;;;;;;EAQvB;;;;;;;;;;;;;;;;;;;EAqBA,oBAAoB,gCAAgC;;;;;;EAQpD;mBAUiB;UAeT;;WAeC,QAAM,qBAAA;;MAYX,YAAY;EAoBP;EAmBA;EA4CA,QAAQ,SAAS;;MAmCtB,gBAAgB;;MAKhB,iBAAiB,YAAY;EAIjC,QAAQ,MAAM,kBAAkB,UAAU;;;;;;EAqB1C,WAAW,MAAM,UAAU;;EAW3B,YAAY,OAAO,SAAS,WAAW;EAIvC;;;;;;EAYA,SAAS,gBAAgB;;;;;;EAczB,SAAS,WAAW,WAAW,OAAO;EAItC,OAAO,MAAM;EAIb,WAAW,OAAO,SAAS;EAI3B,SAAS,MAAM;EAIf;EAIA;;MAQI,gBAAgB;;MAKhB;;EAMJ,WAAW,MAAM;;EAKjB,gBAAgB,MAAM;;EAKtB,mBAAmB,MAAM;;EAKzB,SAAS;EAkBP,eAAe,0CAA0C,UAAU;UAqB7D;UAgBA;UAOA;UAiBA;;;;;;;UA6FA;;;;;UAuBA;UAcA;UAYA;UAUA;UAMA;UAIA;UAwDA;UAQA;UAMA;SAUQ,sBAAM;EA+Hb,wBAAM;;QAYT;YACI;IACR,sBAAsB;;YAGd,4BAA4B"}

package/dist/vertical-list.d.ts

@@ -1,3 +1,3 @@
 import { a as ListItemClickDetail, c as ListSelectEvent, d as ListTickleEvent, i as ListInteractionMode, l as ListSelectionMode, n as ListActivateEvent, o as ListItemClickEvent, r as ListElementEventMap, s as ListSelectDetail, t as ListActivateDetail, u as ListTickleDetail } from "./list-selection-types-B5ioL-dG.js";
-import { n as CustomCheckboxOptions, r as VerticalListElement, t as AddItemOptions } from "./vertical-list-DwtCPy1b.js";
+import { n as CustomCheckboxOptions, r as VerticalListElement, t as AddItemOptions } from "./vertical-list-CFuFDygi.js";
 export { AddItemOptions, CustomCheckboxOptions, type ListActivateDetail, type ListActivateEvent, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListSelectDetail, type ListSelectEvent, type ListSelectionMode, type ListTickleDetail, type ListTickleEvent, VerticalListElement };

package/dist/vertical-list.js

@@ -1,7 +1,7 @@
 import { t as TickledController } from "./tickled-controller-C66DgJHl.js";
 import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import { c as createElementListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-DpbSJtgj.js";
+import { c as createElementListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-C05WjbZh.js";
 import { n as animateListItemIn, r as animateListItemOut } from "./list-item-animation-DuiwgN3l.js";
 import { t as ListSelectionController } from "./list-selection-controller-DTFI40li.js";
 import { LitElement, css, html, render } from "lit";

package/dist/{xy-axis-5KhVTNoX.d.ts → xy-axis-BfP9hKLj.d.ts}

@@ -291,6 +291,7 @@ type PlotHistogramOrientation = `horizontal` | `vertical`;
  * - `none`: no hover feedback.
  */
 type PlotHistogramValueTooltips = `hover` | `inline` | `none`;
+type PlotHistogramInteractionMode = `inspect` | `select`;
 type PlotHistogramBucketClickDetail = {
   readonly bucketIndex: number;
   readonly valueMin: number;
@@ -320,15 +321,37 @@ declare class PlotHistogram extends LitElement {
   tooltipDelay: number;
   /** Max rate (ms) at which an already-shown value display refreshes to match live-changing bucket data. */
   valueUpdateInterval: number;
+  /** Interaction mode: 'inspect' for hover tooltips, 'select' for click-drag selection. */
+  interactionMode: PlotHistogramInteractionMode;
   /** Override to customize the value/frequency label used by the tooltip and overlay text. */
   valueFormat: (valueMin: number, valueMax: number, frequency: number) => string;
   private _width;
   private _height;
   private _hoveredIndex;
   private _inlineOverlayText;
+  private _coloredRangeMin;
+  private _coloredRangeMax;
+  private _selectionStart;
+  private _selectionEnd;
+  private _isDragging;
+  private _selectionOverlayText;
   add(v: number): void;
   set(values: number[]): void;
   clear(): void;
+  setColoredRange(min: number, max: number): void;
+  clearColoredRange(): void;
+  setSelection(startBarIndex: number, endBarIndex: number): void;
+  clearSelection(): void;
+  getSelectedRange(): {
+    barIndices: {
+      start: number;
+      end: number;
+    } | null;
+    dataValues: {
+      min: number;
+      max: number;
+    } | null;
+  };
   protected firstUpdated(_changed: PropertyValues): void;
   protected updated(changed: PropertyValues): void;
   disconnectedCallback(): void;
@@ -384,5 +407,5 @@ declare global {
   }
 }
 //#endregion
-export { ColourMapConfig as C, computeColour as D, applyAgeModification as E, parseColourScaleAttr as O, PlotDataSeriesOptions as S, ColourResult as T, PlotSingleAxisPointerMoveDetail as _, PlotHistogramBucketClickDetail as a, SingleAxisDrawStyle as b, PlotHistogramOrientation as c, PlotMultiAxisDataPointClickDetail as d, PlotMultiAxisDataPointClickEvent as f, PlotSingleAxisElementEventMap as g, PlotSingleAxis as h, PlotHistogram as i, readBaseColour as k, PlotHistogramValueTooltips as l, PlotMultiAxisLayout as m, XyAgeStyle as n, PlotHistogramBucketClickEvent as o, PlotMultiAxisElementEventMap as p, XyDrawStyle as r, PlotHistogramElementEventMap as s, PlotXyAxis as t, PlotMultiAxis as u, PlotSingleAxisPointerMoveEvent as v, ColourMode as w, PlotDataSeries as x, SingleAxisAgeStyle as y };
-//# sourceMappingURL=xy-axis-5KhVTNoX.d.ts.map
+export { readBaseColour as A, PlotDataSeriesOptions as C, applyAgeModification as D, ColourResult as E, computeColour as O, PlotDataSeries as S, ColourMode as T, PlotSingleAxisElementEventMap as _, PlotHistogramBucketClickDetail as a, SingleAxisAgeStyle as b, PlotHistogramInteractionMode as c, PlotMultiAxis as d, PlotMultiAxisDataPointClickDetail as f, PlotSingleAxis as g, PlotMultiAxisLayout as h, PlotHistogram as i, parseColourScaleAttr as k, PlotHistogramOrientation as l, PlotMultiAxisElementEventMap as m, XyAgeStyle as n, PlotHistogramBucketClickEvent as o, PlotMultiAxisDataPointClickEvent as p, XyDrawStyle as r, PlotHistogramElementEventMap as s, PlotXyAxis as t, PlotHistogramValueTooltips as u, PlotSingleAxisPointerMoveDetail as v, ColourMapConfig as w, SingleAxisDrawStyle as x, PlotSingleAxisPointerMoveEvent as y };
+//# sourceMappingURL=xy-axis-BfP9hKLj.d.ts.map

package/dist/{xy-axis-5KhVTNoX.d.ts.map → xy-axis-BfP9hKLj.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"xy-axis-5KhVTNoX.d.ts","names":[],"sources":["../src/plots/colour-map.ts","../src/plots/data.ts","../src/plots/single-axis.ts","../src/plots/multi-axis.ts","../src/plots/plot-histogram.ts","../src/plots/xy-axis.ts"],"mappings":"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"}
+{"version":3,"file":"xy-axis-BfP9hKLj.d.ts","names":[],"sources":["../src/plots/colour-map.ts","../src/plots/data.ts","../src/plots/single-axis.ts","../src/plots/multi-axis.ts","../src/plots/plot-histogram.ts","../src/plots/xy-axis.ts"],"mappings":";;KAeY;KAEA;EACV,MAAM;;EAEN;;EAEA;;EAEA,YAAY;;KAGF;EAAiB;EAAc;;;iBA2C3B,eAAe,IAAI;;iBAMnB,qBAAqB;;;;;;;iBAuCrB,cAAc,qBAAqB,oBAAoB,QAAQ,kBAAkB;;;;;iBAkDjF,qBAAqB,MAAM,cAAc,qBAAqB,mBAAmB;;;KCnKrF;;;;;EAKV;;;;;;;EAOA;EAEA;IAAc;IAAa;;;;;;cAMhB;;EACX;;;;;;;;;;EAeY,YAAA,UAAS,QAAQ;;;;;;;EAkB7B,SAAS,aAAa;;;;EAOtB;MAKI;;;;;EAQJ,IAAI;;;;;EAmCJ,IAAI;;;;MAWA;IAhGiB;IAAa;;;;;;EA0GlC;;;;KC1HU;KAWA;;;;;;;;cAyHC,uBAAuB;;EAElC,WAAW;EAGX,UAAU;EAEE;EAEiB;EACA;EACD;EAEA;EACA;EAG5B;EAE4C;EACY;EAGxD;EAGA;EAGuC,WAAW;EACT;EACD;;EAExC,iBAAiB;UAEA;UACA;;EAiBjB,cAAc;;;;;;;;;;EAWd,IAAI,kCAAkC;;;;;EActC;;;;;;;;;;EAcA,IAAI,kBAAkB;;;;EAatB;YAMmB,aAAa,UAAU;YAkBvB,QAAQ,SAAS;MA0FhC,UAAM;;;;MAON;;;;MAOA;;;;;EAQJ,WAAW;;;;;EAQX,oBAAoB;EAyCX,wBAAM;SA8EC,sBAAM;;KAwBZ;WACD;WACA;WACA;;KAGC,iCAAiC,YAAY;UAExC;EACf,qBAAqB;EACrB,sBAAsB;;QAGhB;YACI;IACR,yBAAyB;;;UAKZ;EACf;KACG,gBAAgB,+BACf,MAAM,GACN,WAAW,MAAM,gBAAgB,OAAO,8BAA8B,aACtE,oBAAoB;KAGpB,cACA,UAAU,oCACV,oBAAoB;;;;;KC7iBd;KAEA;WACD;WACA;WACA;;KAGC,mCAAmC,YAAY;UAE1C;EACf,wBAAwB;;cAgBb,sBAAsB;;EACrB,QAAQ;EAGpB;;EAGA,cAAc;;;;;;;EAad,QAAQ,cAAc,eAAe,0BAAwB;EAS7D,QAAQ,cAAc,kBAAkB,0BAAwB;EAchE,WAAW,MAAM,0BAA0B;;;;EAc3C;;;;;;EAWA,UAAU,MAAM,mCAAmC;;;;;;EAgBnD,YAAY,cAAc,QAAQ;;;;;EAoBlC;;;;;;EAaA,YAAY;;;;MAYR;YA4Fe,wBAAM;SAmBT,sBAAM;;QAkDhB;YACI;IACR,wBAAwB;;;UAKX;EACf;KACG,gBAAgB,8BACf,MAAM,GACN,WAAW,MAAM,eAAe,OAAO,6BAA6B,aACpE,oBAAoB;KAGpB,cACA,UAAU,oCACV,oBAAoB;;;;;KC7Ud;;;;;;KAOA;KAEA;KAEA;WACD;WACA;WACA;WACA;;KAGC,gCAAgC,YAAY;UAEvC;EACf,qBAAqB;;cAeV,sBAAsB;;EAEjC,aAAa;EAGb;EAGA;EAGA;EAGA;;;;;EAOA;EAGA;;EAIA,eAAe;;EAIf;;EAIA;;EAIA,iBAAiB;;EAGjB,cAAc,kBAAkB,kBAAkB;UAGjC;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;EAYjB,IAAI;EAQJ,IAAI;EAQJ;EAKA,gBAAgB,aAAa;EAM7B;EAMA,aAAa,uBAAuB;EAgBpC;EAMA;IAAsB;MAAc;MAAe;;IAAsB;MAAc;MAAa;;;YAiBjF,aAAa,UAAU;YA2BvB,QAAQ,SAAS;EAc3B;EA6VA,wBAAM;SA2CC,sBAAM;;QAmChB;YACI;IACR,uBAAuB;;;UAIV;EACf,oBAAoB,gBAAgB,8BAClC,MAAM,GACN,WAAW,MAAM,eAAe,OAAO,6BAA6B,aACpE,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB;;;;KChpBZ;KACA;cAOC,mBAAmB;;EAE9B,WAAW;EAGX,UAAU;EAEE;EACiB;EACA;EACD;EAG5B;EAE4C;EACY;EAGjB,WAAW;EACT;EACD;;;;;EAKxC,iBAAiB;UAEA;UACA;;EAMjB,cAAc,WAAW;EAEzB,IAAI,WAAW;EASf,MAAM,cAAc;EASpB;YAMmB,aAAa,UAAU;YAWvB,QAAQ,SAAS;EA8G3B,wBAAM;SAkEC,sBAAM;;QAuBhB;YACI;IACR,qBAAqB"}

package/dist/{xy-axis-VrX8dmvS.js → xy-axis-DzM1brBZ.js}

@@ -717,11 +717,18 @@ let PlotHistogram = class PlotHistogram extends LitElement {
 		this.valueTooltips = `hover`;
 		this.tooltipDelay = 400;
 		this.valueUpdateInterval = 500;
+		this.interactionMode = `inspect`;
 		this.valueFormat = (valueMin, valueMax, frequency) => `${valueMin.toFixed(2)} - ${valueMax.toFixed(2)}: ${frequency}`;
 		this._width = 100;
 		this._height = 40;
 		this._hoveredIndex = null;
 		this._inlineOverlayText = null;
+		this._coloredRangeMin = null;
+		this._coloredRangeMax = null;
+		this._selectionStart = null;
+		this._selectionEnd = null;
+		this._isDragging = false;
+		this._selectionOverlayText = null;
 		this.#series = new PlotDataSeries({
 			capacityLimit: 100,
 			persistentScaling: true
@@ -734,6 +741,22 @@ let PlotHistogram = class PlotHistogram extends LitElement {
 		this.#tooltipPosition = null;
 		this.#valueRefreshTimer = null;
 		this.#onPointerMove = (e) => {
+			if (this.interactionMode === `select` && this._isDragging) {
+				const index = this.#bucketIndexFromPosition(e.clientX, e.clientY);
+				this._selectionEnd = index;
+				const start = Math.min(this._selectionStart, this._selectionEnd);
+				const end = Math.max(this._selectionStart, this._selectionEnd);
+				const bars = this.#computeBars();
+				if (start <= end) {
+					const startBar = bars[start];
+					const endBar = bars[end];
+					this.setColoredRange(startBar.valueMin, endBar.valueMax);
+					this._selectionOverlayText = `Select: ${startBar.valueMin.toFixed(2)} – ${endBar.valueMax.toFixed(2)}`;
+				}
+				this.requestUpdate();
+				return;
+			}
+			if (this.interactionMode === `select`) return;
 			if (this.valueTooltips === `none`) return;
 			const index = this.#bucketIndexFromPointer(e.clientX, e.clientY);
 			const bucketIndex = index >= 0 ? index : null;
@@ -741,10 +764,34 @@ let PlotHistogram = class PlotHistogram extends LitElement {
 			else this.#updateBubbleTooltip(bucketIndex, e.clientX, e.clientY);
 		};
 		this.#onPointerLeave = () => {
+			if (this.interactionMode === `select`) {
+				if (this._isDragging) {
+					this._isDragging = false;
+					this._selectionOverlayText = null;
+					this.requestUpdate();
+				}
+				return;
+			}
 			if (this.valueTooltips === `none`) return;
 			if (this.valueTooltips === `inline`) this.#setInlineIndex(null);
 			else this.#updateBubbleTooltip(null, 0, 0);
 		};
+		this.#onPointerDown = (e) => {
+			if (this.interactionMode !== `select`) return;
+			const index = this.#bucketIndexFromPosition(e.clientX, e.clientY);
+			this._isDragging = true;
+			this._selectionStart = index;
+			this._selectionEnd = index;
+			const bars = this.#computeBars();
+			const startBar = bars[index];
+			const endBar = bars[index];
+			this.setColoredRange(startBar.valueMin, endBar.valueMax);
+			this._selectionOverlayText = `Select: ${startBar.valueMin.toFixed(2)} – ${endBar.valueMax.toFixed(2)}`;
+			this.requestUpdate();
+		};
+		this.#onPointerUp = () => {
+			if (this.interactionMode === `select`) this._isDragging = false;
+		};
 	}
 	#series;
 	#hasProgrammaticData;
@@ -768,6 +815,59 @@ let PlotHistogram = class PlotHistogram extends LitElement {
 		this.#series.clear();
 		this.requestUpdate();
 	}
+	setColoredRange(min, max) {
+		this._coloredRangeMin = min;
+		this._coloredRangeMax = max;
+		this.requestUpdate();
+	}
+	clearColoredRange() {
+		this._coloredRangeMin = null;
+		this._coloredRangeMax = null;
+		this.requestUpdate();
+	}
+	setSelection(startBarIndex, endBarIndex) {
+		const bars = this.#computeBars();
+		const start = Math.min(startBarIndex, endBarIndex);
+		const end = Math.max(startBarIndex, endBarIndex);
+		const clampedStart = Math.max(0, Math.min(start, bars.length - 1));
+		const clampedEnd = Math.max(0, Math.min(end, bars.length - 1));
+		this._selectionStart = clampedStart;
+		this._selectionEnd = clampedEnd;
+		if (clampedStart <= clampedEnd) {
+			const startBar = bars[clampedStart];
+			const endBar = bars[clampedEnd];
+			this.setColoredRange(startBar.valueMin, endBar.valueMax);
+		}
+		this.requestUpdate();
+	}
+	clearSelection() {
+		this._selectionStart = null;
+		this._selectionEnd = null;
+		this.requestUpdate();
+	}
+	getSelectedRange() {
+		if (this._selectionStart === null || this._selectionEnd === null) return {
+			barIndices: null,
+			dataValues: null
+		};
+		const bars = this.#computeBars();
+		const start = Math.min(this._selectionStart, this._selectionEnd);
+		const end = Math.max(this._selectionStart, this._selectionEnd);
+		const clampedStart = Math.max(0, Math.min(start, bars.length - 1));
+		const clampedEnd = Math.max(0, Math.min(end, bars.length - 1));
+		const startBar = bars[clampedStart];
+		const endBar = bars[clampedEnd];
+		return {
+			barIndices: {
+				start: clampedStart,
+				end: clampedEnd
+			},
+			dataValues: {
+				min: startBar.valueMin,
+				max: endBar.valueMax
+			}
+		};
+	}
 	firstUpdated(_changed) {
 		this._width = this.clientWidth || 100;
 		this._height = this.clientHeight || 40;
@@ -902,6 +1002,10 @@ let PlotHistogram = class PlotHistogram extends LitElement {
 			}
 		});
 	}
+	#isBarInColoredRange(bar) {
+		if (this._coloredRangeMin === null || this._coloredRangeMax === null) return true;
+		return bar.valueMin < this._coloredRangeMax && bar.valueMax > this._coloredRangeMin;
+	}
 	/** Index of the bar rect under the pointer, or -1 if none (matches click hit-testing). */
 	#bucketIndexFromPointer(clientX, clientY) {
 		const rect = this.getBoundingClientRect();
@@ -909,6 +1013,18 @@ let PlotHistogram = class PlotHistogram extends LitElement {
 		const y = clientY - rect.top;
 		return this.#computeBars().findIndex((b) => x >= b.x && x <= b.x + b.width && y >= b.y && y <= b.y + b.height);
 	}
+	/** Gets bucket index from position, clamping to valid range (0 to bucketCount-1). */
+	#bucketIndexFromPosition(clientX, clientY) {
+		const { w, h, isHorizontal, padding, dataMin, dataSpan, bucketCount, availableMain } = this.#computeGeometry();
+		const rect = this.getBoundingClientRect();
+		const x = clientX - rect.left;
+		const y = clientY - rect.top;
+		let relativePos;
+		if (isHorizontal) relativePos = (x - padding) / availableMain;
+		else relativePos = (y - padding) / availableMain;
+		relativePos = Math.max(0, Math.min(1, relativePos));
+		return Math.floor(relativePos * bucketCount);
+	}
 	#tooltipIndex;
 	#tooltipVisible;
 	#tooltipShowTimer;
@@ -1043,15 +1159,23 @@ let PlotHistogram = class PlotHistogram extends LitElement {
 	}
 	#onPointerMove;
 	#onPointerLeave;
+	#onPointerDown;
+	#onPointerUp;
 	render() {
 		const { w, h, padding } = this.#computeGeometry();
-		const barsContent = this.#computeBars().map((b, i) => svg`
-      <rect class="bar" x=${b.x} y=${b.y} width=${b.width} height=${b.height}
-        style="--value: ${b.relativeValue}"
-        @click=${() => this.#emitClick(i, b.valueMin, b.valueMax, b.relativeValue)} />
-    `);
+		const barsContent = this.#computeBars().map((b, i) => {
+			const greyStyle = this.#isBarInColoredRange(b) ? `` : `filter: grayscale(1)`;
+			return svg`
+        <rect class="bar" x=${b.x} y=${b.y} width=${b.width} height=${b.height}
+          style="--value: ${b.relativeValue}; ${greyStyle}"
+          @click=${() => this.#emitClick(i, b.valueMin, b.valueMax, b.relativeValue)} />
+      `;
+		});
 		const textColor = `var(--plot-text, var(--surface-2-text, #fff))`;
-		const overlayText = this.valueTooltips === `inline` && this._inlineOverlayText !== null ? this._inlineOverlayText : this.title;
+		let overlayText;
+		if (this.interactionMode === `select` && this._selectionOverlayText !== null) overlayText = this._selectionOverlayText;
+		else if (this.valueTooltips === `inline` && this._inlineOverlayText !== null) overlayText = this._inlineOverlayText;
+		else overlayText = this.title;
 		const titleContent = overlayText ? svg`<text x=${padding + 2} y=${padding + Math.min(10, h * .6)}
           class="overlay-text" fill=${textColor}
           style="opacity: 0.6">${overlayText}</text>` : svg``;
@@ -1059,7 +1183,9 @@ let PlotHistogram = class PlotHistogram extends LitElement {
       <svg width=${w} height=${h} viewBox="0 0 ${w} ${h}"
         xmlns="http://www.w3.org/2000/svg"
         @pointermove=${this.#onPointerMove}
-        @pointerleave=${this.#onPointerLeave}>
+        @pointerleave=${this.#onPointerLeave}
+        @pointerdown=${this.#onPointerDown}
+        @pointerup=${this.#onPointerUp}>
         <rect width=${w} height=${h} fill="transparent" />
         ${barsContent}
         ${titleContent}
@@ -1121,10 +1247,17 @@ __decorate([property({
 	type: Number,
 	attribute: `value-update-interval`
 })], PlotHistogram.prototype, "valueUpdateInterval", void 0);
+__decorate([property({ attribute: `interaction-mode` })], PlotHistogram.prototype, "interactionMode", void 0);
 __decorate([state()], PlotHistogram.prototype, "_width", void 0);
 __decorate([state()], PlotHistogram.prototype, "_height", void 0);
 __decorate([state()], PlotHistogram.prototype, "_hoveredIndex", void 0);
 __decorate([state()], PlotHistogram.prototype, "_inlineOverlayText", void 0);
+__decorate([state()], PlotHistogram.prototype, "_coloredRangeMin", void 0);
+__decorate([state()], PlotHistogram.prototype, "_coloredRangeMax", void 0);
+__decorate([state()], PlotHistogram.prototype, "_selectionStart", void 0);
+__decorate([state()], PlotHistogram.prototype, "_selectionEnd", void 0);
+__decorate([state()], PlotHistogram.prototype, "_isDragging", void 0);
+__decorate([state()], PlotHistogram.prototype, "_selectionOverlayText", void 0);
 PlotHistogram = __decorate([safeCustomElement(`ixfx-plot-histogram`)], PlotHistogram);
 //#endregion
 //#region src/plots/single-axis.ts
@@ -1846,4 +1979,4 @@ PlotXyAxis = __decorate([safeCustomElement(`ixfx-plot-xy-axis`)], PlotXyAxis);
 //#endregion
 export { TooltipElement as a, computeColour as c, PlotMultiAxis as i, parseColourScaleAttr as l, PlotSingleAxis as n, PlotDataSeries as o, PlotHistogram as r, applyAgeModification as s, PlotXyAxis as t, readBaseColour as u };
 
-//# sourceMappingURL=xy-axis-VrX8dmvS.js.map
+//# sourceMappingURL=xy-axis-DzM1brBZ.js.map