@ixfx/components 0.5.19 → 0.5.20

package/dist/index.js

@@ -1,48 +1,48 @@
 import { n as buildHighlightTargets, r as clearHighlights, t as applyHighlights } from "./highlight-B-eQrhhb.js";
-import { n as tickledStyles, r as TickledController, t as tickledItemStyles } from "./tickled-styles-fNDdqf6l.js";
-import { t as themeFallbacks } from "./fallbacks-DPgPEqo8.js";
+import { n as tickledStyles, r as TickledController, t as tickledItemStyles } from "./tickled-styles-Bgo_Lpw-.js";
+import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
 import { t as popupSurfaceStyles } from "./popup-D80sj2QC.js";
-import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-DdjvVHS-.js";
 import { a as svgToDataUri, i as registerIcon, n as hasIcon, r as iconBus, t as getIcon } from "./registry-CkW7q09Q.js";
-import { t as IxfxIconElement } from "./icon-DG9Lm3LT.js";
+import { t as IxfxIconElement } from "./icon-CK14NUcE.js";
 import { AcTextElement } from "./ac-text.js";
-import { a as createFuzzySearch, i as createAcCompletionProvider, n as IncrSearchTreeController, r as createIncrSearch, t as createElementIncrSearch } from "./incr-search-2pz21xtR.js";
+import { a as createFuzzySearch, i as createAcCompletionProvider, n as IncrSearchTreeController, r as createIncrSearch, t as createElementIncrSearch } from "./incr-search-CeERfijK.js";
 import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CARET_RIGHT } from "./defaults-BkWCPJFL.js";
 import "./icons.js";
 import { t as prominenceStyles } from "./prominence-DlFShic3.js";
-import { n as buttonStyles, t as ButtonElement } from "./button-CphdEaZd.js";
-import "./interaction-D6efrBLo.js";
-import "./menu-item-CrmUwIoJ.js";
+import { n as buttonStyles, t as ButtonElement } from "./button-pcDaCemT.js";
+import "./interaction-_Y2qO3QI.js";
+import "./menu-item-yHSPV8nS.js";
 import { Checkbox } from "./checkbox.js";
-import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-37NyVenk.js";
+import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-D43Q96r0.js";
 import { LabelledRangeInput } from "./labelled-range-input.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
-import { i as TreeDataModel, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-BtiiDX1a.js";
-import { n as scrollFadeStyles, t as CrumbNavigationElement } from "./crumb-navigation-BrB0r14u.js";
+import { i as TreeDataModel, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-CqPhQRHo.js";
+import { n as scrollFadeStyles, t as CrumbNavigationElement } from "./crumb-navigation-Pif-kupA.js";
 import { NarrowedTextElement } from "./narrowed-text.js";
 import { DataDisplayComponent } from "./data-display.js";
 import { EditableLabel } from "./editable-label.js";
 import { t as resolveAxisStep } from "./keyboard-B5xD7Fz-.js";
-import { t as WheelNudgeMixin } from "./wheel-nudge-BlSCe_hD.js";
+import { t as WheelNudgeMixin } from "./wheel-nudge-Dhzi5nHc.js";
 import { PanelElement } from "./panel.js";
-import { t as IxfxHexEditorElement } from "./hex-editor-Bk6rxhfg.js";
-import { t as RadialInputElement } from "./radial-input-CVxGH-Cp.js";
+import { t as IxfxHexEditorElement } from "./hex-editor-B-UI4OZu.js";
+import { t as RadialInputElement } from "./radial-input-C4f-2Bya.js";
 import { LabelledRadialInput } from "./labelled-radial-input.js";
 import { LedElement } from "./led.js";
-import { t as menu_exports } from "./menu-CdwSe_XN.js";
+import { t as menu_exports } from "./menu-BiFarLUA.js";
 import { MillerBaseElement, MillerListElement, MillerTreeController } from "./miller.js";
-import { a as TooltipElement, c as computeColour, i as PlotMultiAxis, l as parseColourScaleAttr, n as PlotSingleAxis, o as PlotDataSeries, r as PlotHistogram, s as applyAgeModification, t as PlotXyAxis, u as readBaseColour } from "./xy-axis-CxHC8z5E.js";
+import { a as TooltipElement, c as computeColour, i as PlotMultiAxis, l as parseColourScaleAttr, n as PlotSingleAxis, o as PlotDataSeries, r as PlotHistogram, s as applyAgeModification, t as PlotXyAxis, u as readBaseColour } from "./xy-axis-BpA2eJq6.js";
 import { PolarPad } from "./polar-pad.js";
 import { t as tooltipValueStyles } from "./tooltip-CJt3WLmN.js";
 import { RangeInput } from "./range-input.js";
 import { RangeElement } from "./range.js";
 import { SelectHorizontalElement } from "./selecthorizontal.js";
-import { t as SliderInputElement } from "./slider-input-CzmSVgm7.js";
+import { t as SliderInputElement } from "./slider-input-SW7e2Ac2.js";
 import { SnapContainer } from "./snap-container.js";
 import { SplitLayoutElement } from "./split-layout.js";
 import { SwipeElement } from "./swipe.js";
-import { t as TabListElement } from "./tab-list-mAoD6L0e.js";
-import { a as resolveCssVars, i as attachTimelineInteractions, n as TimelineTrackTabElement, o as resolveGrid, r as timelineStyles, s as TimelineController, t as IxfxTimelineElement } from "./timeline-B2fgDL4U.js";
+import { t as TabListElement } from "./tab-list-CR0v53KJ.js";
+import { a as resolveCssVars, i as attachTimelineInteractions, n as TimelineTrackTabElement, o as resolveGrid, r as timelineStyles, s as TimelineController, t as IxfxTimelineElement } from "./timeline-CdSI003L.js";
 import { XyPad } from "./xy-pad.js";
 import { LitElement, css, html, nothing, render } from "lit";
 import { eventOptions, property, query, queryAssignedElements, state } from "lit/decorators.js";
@@ -364,6 +364,15 @@ let AcTokenElement = class AcTokenElement extends LitElement {
 		this._tokens = [...value];
 		this.#emitChange();
 	}
+	/**
+	* Set the token list programmatically. Unlike the `tokens` property setter,
+	* this does not dispatch `ac-token-change` — use it for initialisation or any
+	* other programmatic update that should not re-enter a parent's own
+	* `ac-token-change` handler.
+	*/
+	setTokens(value) {
+		this._tokens = [...value];
+	}
 	/** All committed token labels joined with commas. */
 	get value() {
 		return this._tokens.map((t) => t.label).join(`, `);
@@ -384,7 +393,8 @@ let AcTokenElement = class AcTokenElement extends LitElement {
 		if (changedProps.has(`completionProvider`)) this.#buildStaticProvider();
 		if (this.#data.items !== this.#lastSuggestions) {
 			this.#lastSuggestions = this.#data.items;
-			this._tickled.clearTickled();
+			if (this.#data.items.length > 0) this._tickled.setTickled(0);
+			else this._tickled.clearTickled();
 		}
 	}
 	#buildStaticProvider() {
@@ -454,6 +464,7 @@ let AcTokenElement = class AcTokenElement extends LitElement {
 				e.preventDefault();
 				this.#closePopup();
 				this._selectedTokenIndex = void 0;
+				break;
 		}
 	}
 	#onPaste;
@@ -571,10 +582,9 @@ let AcTokenElement = class AcTokenElement extends LitElement {
 		});
 	}
 	#renderChip(item, index) {
-		const isSelected = this._selectedTokenIndex === index;
 		return html`
       <span
-        class="token-chip ${isSelected ? `selected` : ``}"
+        class="token-chip ${this._selectedTokenIndex === index ? `selected` : ``}"
         title=${item.subLabel ?? nothing}
         @pointerdown=${(e) => this.#onChipPointerDown(e, index)}
       >
@@ -1079,6 +1089,11 @@ let RadioGroup = class RadioGroup extends LitElement {
     .radio-item:hover:not([disabled]) {
       opacity: 0.9;
       background: color-mix(in oklch, var(--surface-4) 80%, transparent);
+    border-color: var(--accent, #666);
+    box-shadow: 
+      inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-5) 70%, transparent), 
+      inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-2) 60%, transparent),
+      2px 2px 1px 0px color-mix(in oklch, var(--surface-2) 90%, transparent);
     }
 
     .radio-item.selected {
@@ -1702,6 +1717,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 				case `Escape`:
 					e.preventDefault();
 					this.#closeDropdown();
+					break;
 			}
 		};
 		this.#onHostKeyDown = (e) => {
@@ -2040,11 +2056,9 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 	#onHostKeyDown;
 	render() {
 		const segments = this.#getSegments();
-		if (this._editing) {
-			const editValue = this.path;
-			return html`
+		if (this._editing) return html`
         <ixfx-ac-text
-          .value=${editValue}
+          .value=${this.path}
           .tabSuffix=${this.separator}
           .completionProvider=${this.#makeCompletionProvider()}
           @change=${this.#onAcChange}
@@ -2052,7 +2066,6 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
           @keydown=${this.#onAcKeyDown}
         ></ixfx-ac-text>
       `;
-		}
 		const rootSegments = this.#getRootSegments();
 		const leadingCaret = this.siblingLookup && rootSegments.length === 0 ? html`
       <div class="caret ${this._openIdx === -1 ? `open` : ``} ${this._confirmedLeafIndices.has(``) ? `disabled` : ``}"
@@ -2534,15 +2547,14 @@ let EditableNumber = class EditableNumber extends WheelNudgeMixin(EditableLabel)
 		this.style.setProperty(`--value`, String(normalized));
 		let valueStart = 0;
 		let valueEnd = normalized;
-		if (this.linearStyle === `bipolar`) {
-			if (normalized <= .5) {
-				valueStart = normalized;
-				valueEnd = .5;
-			} else {
-				valueStart = .5;
-				valueEnd = normalized;
-			}
-		} else if (this.linearStyle === `unipolar`) {
+		if (this.linearStyle === `bipolar`) if (normalized <= .5) {
+			valueStart = normalized;
+			valueEnd = .5;
+		} else {
+			valueStart = .5;
+			valueEnd = normalized;
+		}
+		else if (this.linearStyle === `unipolar`) {
 			valueStart = .5 - normalized * .5;
 			valueEnd = .5 + normalized * .5;
 		}
@@ -2605,6 +2617,7 @@ let EditableNumber = class EditableNumber extends WheelNudgeMixin(EditableLabel)
 			case `End`:
 				delta = (this.max ?? 0) - this._parseValue();
 				handled = true;
+				break;
 		}
 		if (handled) {
 			e.preventDefault();
@@ -2953,15 +2966,13 @@ function collectFormValues(root) {
 	root.querySelectorAll(`[name]`).forEach((el) => {
 		const name = el.getAttribute(`name`);
 		if (!name) return;
-		if (el instanceof HTMLInputElement) {
-			if (el.type === `radio`) {
-				if (el.checked) values[name] = el.value;
-			} else if (el.type === `checkbox`) values[name] = el.checked;
-			else values[name] = el.value;
-		} else if (el instanceof HTMLSelectElement) {
-			if (el.multiple) values[name] = Array.from(el.selectedOptions).map((opt) => opt.value);
-			else values[name] = el.value;
-		} else if (el instanceof HTMLTextAreaElement) values[name] = el.value;
+		if (el instanceof HTMLInputElement) if (el.type === `radio`) {
+			if (el.checked) values[name] = el.value;
+		} else if (el.type === `checkbox`) values[name] = el.checked;
+		else values[name] = el.value;
+		else if (el instanceof HTMLSelectElement) if (el.multiple) values[name] = Array.from(el.selectedOptions).map((opt) => opt.value);
+		else values[name] = el.value;
+		else if (el instanceof HTMLTextAreaElement) values[name] = el.value;
 		else if (`value` in el) values[name] = el.value;
 	});
 	return values;
@@ -3415,7 +3426,9 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 					}
 					break;
 				}
-				case `Escape`: this._clearSelection();
+				case `Escape`:
+					this._clearSelection();
+					break;
 			}
 		};
 		this._onClick = (e) => {
@@ -3603,7 +3616,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		if (this.selectionMode === `none`) return;
 		if (!this._isCheckable(item)) return;
 		const previous = this._selectedItems;
-		const next = /* @__PURE__ */ new Set([item]);
+		const next = new Set([item]);
 		this._selectedItems = next;
 		this.#selectionAnchor = item;
 		this._syncItemStates();
@@ -3693,7 +3706,9 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 				else this._replaceSelection(item);
 				break;
 			case `checked`: break;
-			case `sticky`: this._toggleItem(item);
+			case `sticky`:
+				this._toggleItem(item);
+				break;
 		}
 	}
 	_handleSpaceKey(item) {
@@ -3780,10 +3795,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			if (wantsCustom) {
 				cb.setAttribute(`aria-checked`, String(checked));
 				cb.toggleAttribute(`data-checked`, checked);
-				if (this.checkboxRenderer) {
-					const renderer = typeof this.checkboxRenderer === `function` ? this.checkboxRenderer : this.checkboxRenderer.renderer;
-					render(renderer(checked), cb);
-				}
+				if (this.checkboxRenderer) render((typeof this.checkboxRenderer === `function` ? this.checkboxRenderer : this.checkboxRenderer.renderer)(checked), cb);
 			} else {
 				const input = cb.querySelector(`input.ixfx-list-checkbox`);
 				if (input) input.checked = checked;
@@ -4861,13 +4873,11 @@ let RangeMultiElement = class RangeMultiElement extends LitElement {
 			}
 			a = newA;
 			b = newB;
-		} else if (which === `a`) {
-			if (v > this.b && this.crossover === `stop`) t.valueAsNumber = this.#scaleTo100(this.a);
-			else a = v;
-		} else if (which === `b`) {
-			if (v < a && this.crossover === `stop`) t.valueAsNumber = this.#scaleTo100(this.b);
-			else b = v;
-		} else throw new Error(`Expected 'a' or 'b', got: '${t.id}'`);
+		} else if (which === `a`) if (v > this.b && this.crossover === `stop`) t.valueAsNumber = this.#scaleTo100(this.a);
+		else a = v;
+		else if (which === `b`) if (v < a && this.crossover === `stop`) t.valueAsNumber = this.#scaleTo100(this.b);
+		else b = v;
+		else throw new Error(`Expected 'a' or 'b', got: '${t.id}'`);
 		this.setPoles(a, b);
 	}
 	setPoles(a, b) {
@@ -4926,65 +4936,63 @@ let RangeMultiElement = class RangeMultiElement extends LitElement {
 					const currentPos = isVertical ? current.offset.y : current.offset.x;
 					const amt = (isVertical ? startPos - currentPos : currentPos - startPos) / valuePerPix;
 					polesChanged = true;
-					if (draggingWhich === `a`) {
-						if (resizeMode === `bipolar`) {
-							const calcA = startA + amt;
-							const calcB = startB - amt;
-							if (calcA < min || calcB > max || calcA > max || calcB < min) return;
-							setPoles(calcA, calcB);
-						} else if (resizeMode === `bipolar-flex`) {
-							let calcA = startA + amt;
-							let calcB = startB;
-							if (startB <= min) calcB = min;
-							else if (startB >= max) calcB = max;
-							else {
-								calcA = startA + amt;
-								calcB = startB - amt;
-							}
-							if (calcA < min) calcA = min;
-							if (calcA > max) calcA = max;
-							if (calcB < min) calcB = min;
-							if (calcB > max) calcB = max;
-							if (calcA > calcB) return;
-							setPoles(calcA, calcB);
-						} else {
-							let constrainedAmt = amt;
-							if (startA + amt < min) constrainedAmt = min - startA;
-							if (startB + constrainedAmt > max) constrainedAmt = max - startB;
-							const finalA = startA + constrainedAmt;
-							const finalB = startB + constrainedAmt;
-							if (finalA >= min && finalB <= max) setPoles(finalA, finalB);
+					if (draggingWhich === `a`) if (resizeMode === `bipolar`) {
+						const calcA = startA + amt;
+						const calcB = startB - amt;
+						if (calcA < min || calcB > max || calcA > max || calcB < min) return;
+						setPoles(calcA, calcB);
+					} else if (resizeMode === `bipolar-flex`) {
+						let calcA = startA + amt;
+						let calcB = startB;
+						if (startB <= min) calcB = min;
+						else if (startB >= max) calcB = max;
+						else {
+							calcA = startA + amt;
+							calcB = startB - amt;
 						}
-					} else if (draggingWhich === `b`) {
-						if (resizeMode === `bipolar`) {
-							const calcA = startA - amt;
-							const calcB = startB + amt;
-							if (calcA < min || calcB > max || calcA > max || calcB < min) return;
-							setPoles(calcA, calcB);
-						} else if (resizeMode === `bipolar-flex`) {
-							let calcA = startA;
-							let calcB = startB + amt;
-							if (startA <= min) calcA = min;
-							else if (startA >= max) calcA = max;
-							else {
-								calcA = startA - amt;
-								calcB = startB + amt;
-							}
-							if (calcA < min) calcA = min;
-							if (calcA > max) calcA = max;
-							if (calcB < min) calcB = min;
-							if (calcB > max) calcB = max;
-							if (calcA > calcB) return;
-							setPoles(calcA, calcB);
-						} else {
-							let constrainedAmt = amt;
-							if (startA + amt < min) constrainedAmt = min - startA;
-							if (startB + constrainedAmt > max) constrainedAmt = max - startB;
-							const finalA = startA + constrainedAmt;
-							const finalB = startB + constrainedAmt;
-							if (finalA >= min && finalB <= max) setPoles(finalA, finalB);
+						if (calcA < min) calcA = min;
+						if (calcA > max) calcA = max;
+						if (calcB < min) calcB = min;
+						if (calcB > max) calcB = max;
+						if (calcA > calcB) return;
+						setPoles(calcA, calcB);
+					} else {
+						let constrainedAmt = amt;
+						if (startA + amt < min) constrainedAmt = min - startA;
+						if (startB + constrainedAmt > max) constrainedAmt = max - startB;
+						const finalA = startA + constrainedAmt;
+						const finalB = startB + constrainedAmt;
+						if (finalA >= min && finalB <= max) setPoles(finalA, finalB);
+					}
+					else if (draggingWhich === `b`) if (resizeMode === `bipolar`) {
+						const calcA = startA - amt;
+						const calcB = startB + amt;
+						if (calcA < min || calcB > max || calcA > max || calcB < min) return;
+						setPoles(calcA, calcB);
+					} else if (resizeMode === `bipolar-flex`) {
+						let calcA = startA;
+						let calcB = startB + amt;
+						if (startA <= min) calcA = min;
+						else if (startA >= max) calcA = max;
+						else {
+							calcA = startA - amt;
+							calcB = startB + amt;
 						}
-					} else if (resizeMode === `bipolar`) {
+						if (calcA < min) calcA = min;
+						if (calcA > max) calcA = max;
+						if (calcB < min) calcB = min;
+						if (calcB > max) calcB = max;
+						if (calcA > calcB) return;
+						setPoles(calcA, calcB);
+					} else {
+						let constrainedAmt = amt;
+						if (startA + amt < min) constrainedAmt = min - startA;
+						if (startB + constrainedAmt > max) constrainedAmt = max - startB;
+						const finalA = startA + constrainedAmt;
+						const finalB = startB + constrainedAmt;
+						if (finalA >= min && finalB <= max) setPoles(finalA, finalB);
+					}
+					else if (resizeMode === `bipolar`) {
 						const calcA = startA + amt;
 						const calcB = startB + amt;
 						if (calcA < min || calcB > max) return;
@@ -5396,13 +5404,13 @@ let SelectHorizElement = class SelectHorizElement extends WheelNudgeMixin(LitEle
 
       ::slotted(.tickled) {
         background: var(--item-bg-tickled);
-        border-color: var(--item-border-tickled);
+        border: var(--item-border-tickled);
         color: var(--item-text-tickled);
       }
 
       ::slotted([selected]) {
         background: var(--item-bg-selected);
-        border-color: var(--item-border-selected);
+        border: var(--item-border-selected);
         color: var(--item-text-selected);
       }