@ixfx/components 0.8.1 → 0.8.2

package/bundle/index.js

@@ -730,6 +730,7 @@ var TickledController = class TickledController {
 		this.host = host;
 		this.config = config;
 		this._inputMode = config.initialInputMode ?? `mouse`;
+		this.hoverDisabled = config.hoverDisabled ?? (() => false);
 		host.addController(this);
 	}
 	hostConnected() {
@@ -798,6 +799,7 @@ var TickledController = class TickledController {
 	* Switches to mouse mode and tickles the item.
 	*/
 	handlePointerEnter(id) {
+		if (this.hoverDisabled()) return;
 		if (!TickledController._mouseMovedSinceKeyboard) return;
 		const item = this.config.getItems().find((item) => item.id === id);
 		if (item && item.enabled === false) return;
@@ -815,6 +817,7 @@ var TickledController = class TickledController {
 	* @param _e The pointer event (not used, but kept for API compatibility)
 	*/
 	handlePointerLeave(_e) {
+		if (this.hoverDisabled()) return;
 		if (TickledController._mouseMovedSinceKeyboard) this.clearTickled();
 	}
 	/**
@@ -20483,6 +20486,7 @@ let GridListElement = class GridListElement extends i {
 		super(..._args);
 		this.selectionMode = `single`;
 		this.interactionMode = `standard`;
+		this.disableHoverTickle = false;
 		this.itemSize = 160;
 		this.gap = 8;
 		this.orientation = `grid`;
@@ -20531,7 +20535,8 @@ let GridListElement = class GridListElement extends i {
 				if (k !== void 0) this.#emitItemEvent(`list-tickle`, k);
 			},
 			onStateChange: () => this._syncItemStates(),
-			itemWrap: this.#itemWrap
+			itemWrap: this.#itemWrap,
+			hoverDisabled: () => this.disableHoverTickle
 		});
 		this.#selectedSnapshot = /* @__PURE__ */ new Set();
 		this.#onScroll = (e) => {
@@ -20680,7 +20685,18 @@ let GridListElement = class GridListElement extends i {
         border-radius: var(--grid-list-radius);
       }
 
-      /* The square that holds the slotted content. */
+      /* The square that holds the slotted content — the "image well". Its
+         background is a set of consumer-settable variables so a Finder-style
+         look is possible: on selection the caption takes the accent colouring
+         while the well takes a tint of the surface colour. Each variable is
+         unset by default, so the fallback (today's look) applies until a
+         consumer opts in.
+           --grid-list-thumb-bg                    idle well background
+           --grid-list-thumb-bg-tickled            under the cursor
+           --grid-list-thumb-bg-selected           when the cell is selected
+           --grid-list-thumb-bg-selected-tickled   selected + under the cursor
+           --grid-list-thumb-selection-wash        colour of the box-mode wash (default: --accent)
+           --grid-list-thumb-selection-wash-opacity strength of that wash (default: 0.18; set 0 to drop it) */
       .thumb {
         position: relative;
         flex: 1;
@@ -20690,7 +20706,7 @@ let GridListElement = class GridListElement extends i {
         box-sizing: border-box;
         overflow: hidden;
         border-radius: 0;
-        background: transparent;
+        background: var(--grid-list-thumb-bg, transparent);
         border: 1px solid transparent;
         transition: background var(--transition), border-color var(--transition);
       }
@@ -20714,19 +20730,27 @@ let GridListElement = class GridListElement extends i {
       }
 
       /* Selection / cursor wash — sits over the slotted content so it reads
-         on photos and arbitrary DOM alike. */
+         on photos and arbitrary DOM alike. Set
+         --grid-list-thumb-selection-wash-opacity: 0 to drop it in favour of a
+         --grid-list-thumb-bg-selected tint. */
       .thumb::after {
         content: "";
         position: absolute;
         inset: 0;
         pointer-events: none;
         border-radius: inherit;
-        background: var(--accent);
+        background: var(--grid-list-thumb-selection-wash, var(--accent));
         opacity: 0;
         transition: opacity var(--transition, 0.1s ease-out);
       }
       .cell.selected .thumb::after {
-        opacity: 0.18;
+        opacity: var(--grid-list-thumb-selection-wash-opacity, 0.18);
+      }
+      :host(:not([caption-style="separate"])) .cell.selected .thumb {
+        background: var(--grid-list-thumb-bg-selected, var(--grid-list-thumb-bg, transparent));
+      }
+      :host(:not([caption-style="separate"])) .cell.selected.tickled .thumb {
+        background: var(--grid-list-thumb-bg-selected-tickled, var(--grid-list-thumb-bg-selected, var(--grid-list-thumb-bg, transparent)));
       }
 
       /* ---- Caption (base) ---- */
@@ -20753,8 +20777,8 @@ let GridListElement = class GridListElement extends i {
         overflow: hidden;
         transition: background var(--transition), border-color var(--transition);
       }
-      :host(:not([caption-style="separate"])) .cell:hover,
-      :host(:not([caption-style="separate"])) .cell.tickled {
+      :host(:not([caption-style="separate"])) .cell.tickled,
+      :host(:not([caption-style="separate"]):not([disable-hover-tickle])) .cell:hover {
         background: var(--item-bg-tickled);
         border: var(--item-border-tickled);
       }
@@ -20821,12 +20845,12 @@ let GridListElement = class GridListElement extends i {
       :host([caption-style="separate"]) .thumb {
         flex: none;
         border-radius: var(--grid-list-radius);
-        background: var(--grid-list-item-bg);
+        background: var(--grid-list-thumb-bg, var(--grid-list-item-bg));
         border: 1px solid transparent;
       }
-      :host([caption-style="separate"]) .cell:hover .thumb,
-      :host([caption-style="separate"]) .cell.tickled .thumb {
-        background: var(--item-bg-tickled);
+      :host([caption-style="separate"]) .cell.tickled .thumb,
+      :host([caption-style="separate"]:not([disable-hover-tickle])) .cell:hover .thumb {
+        background: var(--grid-list-thumb-bg-tickled, var(--item-bg-tickled));
         border: var(--item-border-tickled);
       }
       :host([caption-style="separate"]) .caption {
@@ -20839,14 +20863,17 @@ let GridListElement = class GridListElement extends i {
       }
       :host([caption-style="separate"][caption-align="left"]) .caption { align-self: flex-start; }
       :host([caption-style="separate"][caption-align="right"]) .caption { align-self: flex-end; }
+      /* Inset the selection ring (negative offset) so it is never clipped by the
+         scroll viewport's overflow when the cell sits against an edge. */
       :host([caption-style="separate"]) .cell.selected .thumb {
+        background: var(--grid-list-thumb-bg-selected, var(--grid-list-thumb-bg, var(--grid-list-item-bg)));
         outline: 2px solid var(--accent);
-        outline-offset: 2px;
+        outline-offset: -2px;
       }
       :host([caption-style="separate"]) .cell.selected.tickled .thumb {
-        background: var(--item-bg-selected-tickled);
+        background: var(--grid-list-thumb-bg-selected-tickled, var(--item-bg-selected-tickled));
         outline: 2px dashed var(--surface-3);
-        outline-offset: 2px;
+        outline-offset: -2px;
       }
       :host([caption-style="separate"]) .cell.selected .caption {
         background: var(--accent);
@@ -21646,6 +21673,11 @@ __decorate([property({
 	type: String,
 	attribute: `interaction-mode`
 })], GridListElement.prototype, "interactionMode", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `disable-hover-tickle`,
+	reflect: true
+})], GridListElement.prototype, "disableHoverTickle", void 0);
 __decorate([property({
 	type: Number,
 	attribute: `item-size`
@@ -32115,6 +32147,7 @@ let PlotHistogram = class PlotHistogram extends i {
 		this.#onPointerMove = (e) => {
 			if (this.interactionMode === `select` && this._isDragging) {
 				const index = this.#bucketIndexFromPosition(e.clientX, e.clientY);
+				if (index === this._selectionEnd) return;
 				this._selectionEnd = index;
 				const start = Math.min(this._selectionStart, this._selectionEnd);
 				const end = Math.max(this._selectionStart, this._selectionEnd);
@@ -32126,6 +32159,7 @@ let PlotHistogram = class PlotHistogram extends i {
 					this._selectionOverlayText = `Select: ${startBar.valueMin.toFixed(2)} – ${endBar.valueMax.toFixed(2)}`;
 				}
 				this.requestUpdate();
+				this.#emitSelectionChange(false);
 				return;
 			}
 			if (this.interactionMode === `select`) return;
@@ -32141,6 +32175,7 @@ let PlotHistogram = class PlotHistogram extends i {
 					this._isDragging = false;
 					this._selectionOverlayText = null;
 					this.requestUpdate();
+					this.#emitSelectionChange(true);
 				}
 				return;
 			}
@@ -32160,9 +32195,13 @@ let PlotHistogram = class PlotHistogram extends i {
 			this.setColoredRange(startBar.valueMin, endBar.valueMax);
 			this._selectionOverlayText = `Select: ${startBar.valueMin.toFixed(2)} – ${endBar.valueMax.toFixed(2)}`;
 			this.requestUpdate();
+			this.#emitSelectionChange(false);
 		};
 		this.#onPointerUp = () => {
-			if (this.interactionMode === `select`) this._isDragging = false;
+			if (this.interactionMode === `select` && this._isDragging) {
+				this._isDragging = false;
+				this.#emitSelectionChange(true);
+			}
 		};
 	}
 	#series;
@@ -32211,11 +32250,14 @@ let PlotHistogram = class PlotHistogram extends i {
 			this.setColoredRange(startBar.valueMin, endBar.valueMax);
 		}
 		this.requestUpdate();
+		this.#emitSelectionChange(true);
 	}
 	clearSelection() {
+		const had = this._selectionStart !== null || this._selectionEnd !== null;
 		this._selectionStart = null;
 		this._selectionEnd = null;
 		this.requestUpdate();
+		if (had) this.#emitSelectionChange(true);
 	}
 	getSelectedRange() {
 		if (this._selectionStart === null || this._selectionEnd === null) return {
@@ -32300,6 +32342,21 @@ let PlotHistogram = class PlotHistogram extends i {
 			composed: true
 		}));
 	}
+	/**
+	* Fire `plot-selection-change` with the current bar-range selection (indices +
+	* data span). `committed` is `false` mid-drag, `true` on release / programmatic
+	* change.
+	*/
+	#emitSelectionChange(committed) {
+		this.dispatchEvent(new CustomEvent(`plot-selection-change`, {
+			detail: {
+				...this.getSelectedRange(),
+				committed
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
 	/** Bucket layout + counts, shared by render() and pointer hit-testing. */
 	#computeGeometry() {
 		const { values, range } = this.#series;
@@ -32387,7 +32444,7 @@ let PlotHistogram = class PlotHistogram extends i {
 	}
 	/** 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 { isHorizontal, padding, bucketCount, availableMain } = this.#computeGeometry();
 		const rect = this.getBoundingClientRect();
 		const x = clientX - rect.left;
 		const y = clientY - rect.top;