@ixfx/components 0.5.18 → 0.5.20

package/bundle/index.js

@@ -1,4 +1,4 @@
-import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { t as __exportAll } from "./chunk-D7D4PA-g.js";
 import { eventOptions, property, query, queryAssignedElements, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { Fzf } from "fzf";
@@ -18,10 +18,7 @@ import { keyed } from "lit/directives/keyed.js";
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
-const t$1 = globalThis;
-const e$2 = t$1.ShadowRoot && (void 0 === t$1.ShadyCSS || t$1.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype;
-const s$2 = Symbol();
-const o$3 = /* @__PURE__ */ new WeakMap();
+const t$1 = globalThis, e$2 = t$1.ShadowRoot && (void 0 === t$1.ShadyCSS || t$1.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$2 = Symbol(), o$3 = /* @__PURE__ */ new WeakMap();
 var n$2 = class {
 	constructor(t, e, o) {
 		if (this._$cssResult$ = !0, o !== s$2) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -40,22 +37,19 @@ var n$2 = class {
 		return this.cssText;
 	}
 };
-const r$2 = (t) => new n$2("string" == typeof t ? t : t + "", void 0, s$2);
-const i$3 = (t, ...e) => {
+const r$2 = (t) => new n$2("string" == typeof t ? t : t + "", void 0, s$2), i$3 = (t, ...e) => {
 	return new n$2(1 === t.length ? t[0] : e.reduce((e, s, o) => e + ((t) => {
 		if (!0 === t._$cssResult$) return t.cssText;
 		if ("number" == typeof t) return t;
 		throw Error("Value passed to 'css' function must be a 'css' function result: " + t + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
 	})(s) + t[o + 1], t[0]), t, s$2);
-};
-const S$1 = (s, o) => {
+}, S$1 = (s, o) => {
 	if (e$2) s.adoptedStyleSheets = o.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
 	else for (const e of o) {
 		const o = document.createElement("style"), n = t$1.litNonce;
 		void 0 !== n && o.setAttribute("nonce", n), o.textContent = e.cssText, s.appendChild(o);
 	}
-};
-const c$2 = e$2 ? (t) => t : (t) => t instanceof CSSStyleSheet ? ((t) => {
+}, c$2 = e$2 ? (t) => t : (t) => t instanceof CSSStyleSheet ? ((t) => {
 	let e = "";
 	for (const s of t.cssRules) e += s.cssText;
 	return r$2(e);
@@ -165,7 +159,7 @@ var y$1 = class extends HTMLElement {
 	static finalizeStyles(s) {
 		const i = [];
 		if (Array.isArray(s)) {
-			const e = new Set(s.flat(1 / 0).reverse());
+			const e = new Set(s.flat(Infinity).reverse());
 			for (const s of e) i.unshift(c$2(s));
 		} else void 0 !== s && i.push(c$2(s));
 		return i;
@@ -297,38 +291,11 @@ y$1.elementStyles = [], y$1.shadowRootOptions = { mode: "open" }, y$1[d$1("eleme
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
-const t = globalThis;
-const i$1 = (t) => t;
-const s$1 = t.trustedTypes;
-const e = s$1 ? s$1.createPolicy("lit-html", { createHTML: (t) => t }) : void 0;
-const h = "$lit$";
-const o$1 = `lit$${Math.random().toFixed(9).slice(2)}$`;
-const n = "?" + o$1;
-const r = `<${n}>`;
-const l = document;
-const c = () => l.createComment("");
-const a = (t) => null === t || "object" != typeof t && "function" != typeof t;
-const u = Array.isArray;
-const d = (t) => u(t) || "function" == typeof t?.[Symbol.iterator];
-const f = "[ 	\n\f\r]";
-const v = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g;
-const _ = /-->/g;
-const m = />/g;
-const p = RegExp(`>|${f}(?:([^\\s"'>=/]+)(${f}*=${f}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g");
-const g = /'/g;
-const $ = /"/g;
-const y = /^(?:script|style|textarea|title)$/i;
-const x = (t) => (i, ...s) => ({
+const t = globalThis, i$1 = (t) => t, s$1 = t.trustedTypes, e = s$1 ? s$1.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, h = "$lit$", o$1 = `lit$${Math.random().toFixed(9).slice(2)}$`, n = "?" + o$1, r = `<${n}>`, l = document, c = () => l.createComment(""), a = (t) => null === t || "object" != typeof t && "function" != typeof t, u = Array.isArray, d = (t) => u(t) || "function" == typeof t?.[Symbol.iterator], f = "[ 	\n\f\r]", v = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, _ = /-->/g, m = />/g, p = RegExp(`>|${f}(?:([^\\s"'>=/]+)(${f}*=${f}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"), g = /'/g, $ = /"/g, y = /^(?:script|style|textarea|title)$/i, x = (t) => (i, ...s) => ({
 	_$litType$: t,
 	strings: i,
 	values: s
-});
-const b = x(1);
-const w = x(2);
-const E = Symbol.for("lit-noChange");
-const A = Symbol.for("lit-nothing");
-const C = /* @__PURE__ */ new WeakMap();
-const P = l.createTreeWalker(l, 129);
+}), b = x(1), w = x(2), E = Symbol.for("lit-noChange"), A = Symbol.for("lit-nothing"), C = /* @__PURE__ */ new WeakMap(), P = l.createTreeWalker(l, 129);
 function V(t, i) {
 	if (!u(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
 	return void 0 !== e ? e.createHTML(i) : i;
@@ -666,10 +633,11 @@ function findTextNode(element, expectedText) {
 *
 * ## Global Mouse Tracking
 *
-* This controller uses a singleton global `pointermove` listener to track actual
-* mouse movement. This prevents `pointerenter` events caused by content scrolling
-* from incorrectly switching to mouse mode when the user is actually using keyboard
-* navigation.
+* This controller uses a single, ref-counted global `pointermove` listener (shared
+* across all instances) to track actual mouse movement. This prevents `pointerenter`
+* events caused by content scrolling from incorrectly switching to mouse mode when
+* the user is actually using keyboard navigation. The listener is attached when the
+* first host connects and removed once the last host disconnects.
 *
 * @example
 * ```ts
@@ -716,7 +684,12 @@ var TickledController = class TickledController {
 		this._mouseMovedSinceKeyboard = true;
 	}
 	static {
-		this._globalListenerAttached = false;
+		this._listenerRefCount = 0;
+	}
+	static {
+		this._onGlobalPointerMove = (e) => {
+			TickledController.handleGlobalPointerMove(e.clientX, e.clientY);
+		};
 	}
 	constructor(host, config) {
 		this._tickledId = void 0;
@@ -726,14 +699,13 @@ var TickledController = class TickledController {
 		host.addController(this);
 	}
 	hostConnected() {
-		if (!TickledController._globalListenerAttached) {
-			document.addEventListener(`pointermove`, (e) => {
-				TickledController.handleGlobalPointerMove(e.clientX, e.clientY);
-			}, { passive: true });
-			TickledController._globalListenerAttached = true;
-		}
+		if (TickledController._listenerRefCount === 0) document.addEventListener(`pointermove`, TickledController._onGlobalPointerMove, { passive: true });
+		TickledController._listenerRefCount++;
+	}
+	hostDisconnected() {
+		TickledController._listenerRefCount--;
+		if (TickledController._listenerRefCount === 0) document.removeEventListener(`pointermove`, TickledController._onGlobalPointerMove);
 	}
-	hostDisconnected() {}
 	/**
 	* Get the current input mode
 	*/
@@ -876,19 +848,14 @@ var TickledController = class TickledController {
 *
 * ## CSS Variable Contract
 *
-* **Style variables (default values defined in `tickledItemStyles`):**
-* - `--item-bg`: Default background (default: transparent)
-* - `--item-bg-tickled`: Background when tickled (default: rgba(0, 0, 0, 0.06))
-* - `--item-bg-selected`: Background when selected (default: rgba(25, 118, 210, 1))
-* - `--item-bg-selected-tickled`: Background when selected AND tickled (default: rgba(21, 101, 192, 1))
-* - `--item-border`: Border style (default: 1px solid transparent)
-* - `--item-border-tickled`: Border when tickled (default: 1px solid var(--accent))
-* - `--item-border-selected`: Border when selected (default: 1px solid rgba(25, 118, 210, 1))
-* - `--item-text-tickled`: Text color when tickled (default: inherit)
-* - `--item-text-selected`: Text color when selected (default: #fff)
-* - `--item-padding`: Item padding (default: 4px 8px)
-* - `--item-border-radius`: Border radius (default: 4px)
-* - `--item-icon-spacing`: Gap between icon and text (default: 4px)
+* **Style variables** — `tickledItemStyles` only consumes these via `var()`; it
+* defines no defaults itself. Fallback values (used when no theme CSS is loaded)
+* are registered in `themeFallbacks` (`../styles/fallbacks.ts`) and mirror the
+* documented base theme in `user-theming.md`:
+* - `--item-bg`, `--item-bg-tickled`, `--item-bg-selected`, `--item-bg-selected-tickled`
+* - `--item-border`, `--item-border-tickled`, `--item-border-selected` (full border shorthands, not colours)
+* - `--item-text-tickled`, `--item-text-selected`
+* - `--item-padding`, `--item-border-radius`, `--item-icon-spacing`
 *
 * ## Usage
 *
@@ -940,13 +907,13 @@ const tickledItemStyles = i$3`
 
   .item.tickled {
     background: var(--item-bg-tickled);
-    border-color: var(--item-border-tickled);
+    border: var(--item-border-tickled);
     color: var(--item-text-tickled);
   }
 
   .item.selected {
     background: var(--item-bg-selected);
-    border-color: var(--item-border-selected);
+    border: var(--item-border-selected);
     color: var(--item-text-selected);
   }
 
@@ -968,12 +935,13 @@ const tickledItemStyles = i$3`
 *  - If no theme CSS is loaded, these initial values ensure components still
 *    have visible backgrounds, text colours, etc.
 *
-* Spread this into any component whose styles reference theme variables:
-* ```ts
-* static styles = [themeFallbacks, css`...`];
-* ```
+* `@property` registration is document-global — it is not scoped per shadow
+* root — so this is registered exactly once (via `_registerThemeFallbacksOnce`
+* below) rather than adopted into every component's shadow-root stylesheet.
+* Registering the same `@property` rule repeatedly across many shadow roots
+* causes Chrome to log "Ignored @property rule" for every repeat.
 */
-const themeFallbacks = i$3`
+const _themeFallbacksCss = i$3`
   @property --surface-0 {
     syntax: '<color>';
     inherits: true;
@@ -1017,7 +985,7 @@ const themeFallbacks = i$3`
   @property --surface-5 {
     syntax: '<color>';
     inherits: true;
-    initial-value: oklch(28% 0.02 240);
+    initial-value: oklch(19% 0.02 240);
   }
   @property --surface-5-text {
     syntax: '<color>';
@@ -1169,7 +1137,194 @@ const themeFallbacks = i$3`
     inherits: true;
     initial-value: 5ch;
   }
+  @property --space-xs {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 3px;
+  }
+  @property --space-s {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+  @property --space-m {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+  @property --space-l {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+  @property --space-xl {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+  @property --space-2xl {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 20px;
+  }
+  @property --text-xs {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 10px;
+  }
+  @property --text-s {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 11px;
+  }
+  @property --text-m {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+  @property --text-l {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 13px;
+  }
+  @property --text-xl {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+  @property --text-2xl {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 20px;
+  }
+  @property --font-weight-bold {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 600;
+  }
+  @property --radius-s {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 3px;
+  }
+  @property --radius-m {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+  @property --radius-l {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+  @property --radius-xl {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+  @property --shadow-m {
+    syntax: '*';
+    inherits: true;
+    initial-value: 0 4px 12px rgba(0, 0, 0, 0.3);
+  }
+  @property --shadow-l {
+    syntax: '*';
+    inherits: true;
+    initial-value: 0 4px 24px rgba(0, 0, 0, 0.5);
+  }
+  @property --item-bg {
+    syntax: '<color>';
+    inherits: true;
+    initial-value: transparent;
+  }
+  @property --item-bg-tickled {
+    syntax: '<color>';
+    inherits: true;
+    initial-value: oklch(19% 0.02 240);
+  }
+  @property --item-bg-selected {
+    syntax: '<color>';
+    inherits: true;
+    initial-value: oklch(60% 0.15 140);
+  }
+  @property --item-bg-selected-tickled {
+    syntax: '<color>';
+    inherits: true;
+    initial-value: color-mix(in oklch, oklch(60% 0.15 140) 80%, oklch(0% 0 0));
+  }
+  @property --item-text-tickled {
+    syntax: '<color>';
+    inherits: true;
+    initial-value: #fff;
+  }
+  @property --item-text-selected {
+    syntax: '<color>';
+    inherits: true;
+    initial-value: #fff;
+  }
+  @property --item-border {
+    syntax: '*';
+    inherits: true;
+    initial-value: 1px solid oklch(19% 0.02 240);
+  }
+  @property --item-border-tickled {
+    syntax: '*';
+    inherits: true;
+    initial-value: 1px solid color-mix(in oklch, oklch(60% 0.15 140) 40%, transparent);
+  }
+  @property --item-border-selected {
+    syntax: '*';
+    inherits: true;
+    initial-value: 1px dashed oklch(60% 0.15 140);
+  }
+  @property --item-border-active {
+    syntax: '*';
+    inherits: true;
+    initial-value: 2px solid oklch(60% 0.15 140);
+  }
+  @property --item-border-dragged {
+    syntax: '*';
+    inherits: true;
+    initial-value: 2px dotted color-mix(in oklch, oklch(60% 0.15 140) 80%, transparent);
+  }
+  @property --item-border-disabled {
+    syntax: '*';
+    inherits: true;
+    initial-value: 1px solid oklch(22% 0.02 240);
+  }
+  @property --item-padding {
+    syntax: '*';
+    inherits: true;
+    initial-value: 4px 8px;
+  }
+  @property --item-border-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+  @property --item-icon-spacing {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
 `;
+let _themeFallbacksRegistered = false;
+function _registerThemeFallbacksOnce() {
+	if (_themeFallbacksRegistered || typeof document === `undefined`) return;
+	_themeFallbacksRegistered = true;
+	const styleEl = document.createElement(`style`);
+	styleEl.textContent = _themeFallbacksCss.cssText;
+	document.head.append(styleEl);
+}
+_registerThemeFallbacksOnce();
+/**
+* Spread this into any component whose styles reference theme variables.
+* It is an empty stylesheet — the actual `@property` rules are registered
+* once at the document level as a side effect of importing this module — so
+* this exists only to keep the familiar `static styles = [themeFallbacks, ...]`
+* pattern working across all consuming components.
+*/
+const themeFallbacks = i$3``;
 //#endregion
 //#region src/styles/popup.ts
 /**
@@ -1227,7 +1382,7 @@ function svgToDataUri(svg) {
 	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.143.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -1270,10 +1425,8 @@ let IxfxIconElement = class IxfxIconElement extends i {
 	}
 	updated(changed) {
 		super.updated(changed);
-		if (changed.has(`rotate`)) {
-			if (this.rotate?.length > 0) this.style.setProperty(`--rotate`, this.rotate);
-			else this.style.removeProperty(`--rotate`);
-		}
+		if (changed.has(`rotate`)) if (this.rotate?.length > 0) this.style.setProperty(`--rotate`, this.rotate);
+		else this.style.removeProperty(`--rotate`);
 	}
 	static {
 		this.styles = [themeFallbacks, i$3`
@@ -1438,6 +1591,7 @@ let AcTextElement = class AcTextElement extends i {
 					if (!this._isOpen) return;
 					e.preventDefault();
 					this.#closePopup();
+					break;
 			}
 		};
 		this.#onItemPointerDown = (e, item) => {
@@ -2014,9 +2168,8 @@ function defaultSelector(item) {
 	return String(item);
 }
 function createFuzzySearch(items, options = {}) {
-	const selector = options.selector ?? defaultSelector;
 	const fzf = new Fzf(items, {
-		selector,
+		selector: options.selector ?? defaultSelector,
 		...options.fzf ?? {}
 	});
 	const find = (query) => {
@@ -2458,6 +2611,15 @@ let AcTokenElement = class AcTokenElement extends i {
 		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(`, `);
@@ -2478,7 +2640,8 @@ let AcTokenElement = class AcTokenElement extends i {
 		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() {
@@ -2548,6 +2711,7 @@ let AcTokenElement = class AcTokenElement extends i {
 				e.preventDefault();
 				this.#closePopup();
 				this._selectedTokenIndex = void 0;
+				break;
 		}
 	}
 	#onPaste;
@@ -2665,10 +2829,9 @@ let AcTokenElement = class AcTokenElement extends i {
 		});
 	}
 	#renderChip(item, index) {
-		const isSelected = this._selectedTokenIndex === index;
 		return b`
       <span
-        class="token-chip ${isSelected ? `selected` : ``}"
+        class="token-chip ${this._selectedTokenIndex === index ? `selected` : ``}"
         title=${item.subLabel ?? A}
         @pointerdown=${(e) => this.#onChipPointerDown(e, index)}
       >
@@ -2979,6 +3142,11 @@ const ICON_WARNING = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="
 * fill="currentColor" so it inherits CSS color.
 */
 const ICON_CHEVRON_RIGHT = `<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/></svg>`;
+/**
+* Folder with up arrow. Angled line style for navigating up one level.
+* fill="currentColor" so it inherits CSS color.
+*/
+const ICON_FOLDER_UP = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 4L4 12h5v8h6v-8h5L12 4z"/></svg>`;
 function registerDefaults() {
 	registerIcon(`chevron-down`, ICON_CHEVRON_DOWN);
 	registerIcon(`chevron-right`, ICON_CHEVRON_RIGHT);
@@ -2986,6 +3154,7 @@ function registerDefaults() {
 	registerIcon(`check`, ICON_CHECK);
 	registerIcon(`close`, ICON_CLOSE);
 	registerIcon(`error`, ICON_ERROR);
+	registerIcon(`folder-up`, ICON_FOLDER_UP);
 	registerIcon(`info`, ICON_INFO);
 	registerIcon(`warning`, ICON_WARNING);
 }
@@ -3469,6 +3638,11 @@ let RadioGroup = class RadioGroup extends i {
     .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 {
@@ -3632,6 +3806,7 @@ let MenuContainer = class MenuContainer extends i {
 					e.preventDefault();
 					e.stopPropagation();
 					this._activateFocusedItem(items);
+					break;
 			}
 		};
 	}
@@ -4248,9 +4423,9 @@ let MenuItem = class MenuItem extends i {
     }
 
     :host(.tickled) .item {
-      background: rgba(0, 0, 0, 0.06);
-      border: 1px solid var(--accent);
-      color: inherit;
+      background: var(--item-bg-tickled);
+      border: var(--item-border-tickled);
+      color: var(--item-text-tickled);
     }
 
     :host(:focus) {
@@ -5364,7 +5539,9 @@ let ColourPicker = class ColourPicker extends i {
 				case `h`:
 					this.h = value;
 					break;
-				case `a`: this.a = value;
+				case `a`:
+					this.a = value;
+					break;
 			}
 			e.stopPropagation();
 			this.requestUpdate();
@@ -5474,7 +5651,9 @@ let ColourPicker = class ColourPicker extends i {
 			case `h`:
 				this.h = this._clampToRange(`h`, this.h);
 				break;
-			case `a`: this.a = this._clampToRange(`a`, this.a);
+			case `a`:
+				this.a = this._clampToRange(`a`, this.a);
+				break;
 		}
 		this.requestUpdate();
 	}
@@ -5586,25 +5765,25 @@ let ColourPicker = class ColourPicker extends i {
 			for (const v of trackBgVars) el.style.setProperty(v, grad);
 			for (const v of trackValueVars) el.style.setProperty(v, `transparent`);
 		}
-		if (this._previewEl) {
-			if (this.a < 1) {
-				const previewBg = `
+		if (this._previewEl) if (this.a < 1) {
+			const previewBg = `
           linear-gradient(oklch(${l} ${c} ${h} / ${a}), oklch(${l} ${c} ${h} / ${a})),
           repeating-conic-gradient(
             var(--surface-2) 0% 25%,
             var(--surface-4) 0% 50%
           ) 50% / 16px 16px
         `;
-				this._previewEl.style.background = previewBg;
-			} else this._previewEl.style.background = this.value;
-		}
+			this._previewEl.style.background = previewBg;
+		} else this._previewEl.style.background = this.value;
 	}
 	_dispatchInput() {
 		const detail = {
 			l: this.l,
 			c: this.c,
 			h: this.h,
-			a: this.a
+			a: this.a,
+			unit: `scalar`,
+			space: `oklch`
 		};
 		this.dispatchEvent(new CustomEvent(`input`, {
 			detail,
@@ -5617,7 +5796,9 @@ let ColourPicker = class ColourPicker extends i {
 			l: this.l,
 			c: this.c,
 			h: this.h,
-			a: this.a
+			a: this.a,
+			unit: `scalar`,
+			space: `oklch`
 		};
 		this.dispatchEvent(new CustomEvent(`change`, {
 			detail,
@@ -5959,6 +6140,9 @@ let ColourPickerPopup = class ColourPickerPopup extends i {
 	get value() {
 		return oklchToCss(this.l, this.c, this.h, this.a);
 	}
+	set value(colour) {
+		this.setColour(colour);
+	}
 	get _innerHidePreview() {
 		if (this.mode === `fluid`) return !this.showPreview;
 		return false;
@@ -5996,7 +6180,9 @@ let ColourPickerPopup = class ColourPickerPopup extends i {
 			l: this.l,
 			c: this.c,
 			h: this.h,
-			a: this.a
+			a: this.a,
+			unit: `scalar`,
+			space: `oklch`
 		};
 		this.dispatchEvent(new CustomEvent(`input`, {
 			detail,
@@ -6009,7 +6195,9 @@ let ColourPickerPopup = class ColourPickerPopup extends i {
 			l: this.l,
 			c: this.c,
 			h: this.h,
-			a: this.a
+			a: this.a,
+			unit: `scalar`,
+			space: `oklch`
 		};
 		this.dispatchEvent(new CustomEvent(`change`, {
 			detail,
@@ -6592,6 +6780,7 @@ let NarrowedTextElement = class NarrowedTextElement extends i {
 					this._query = ``;
 					this.tickled.clearTickled();
 					this._updateFilteredItems();
+					break;
 			}
 		};
 		this.#onFocus = () => {
@@ -6811,13 +7000,12 @@ let NarrowedTextElement = class NarrowedTextElement extends i {
 		(this.shadowRoot?.querySelector(`.search-input`))?.focus();
 	}
 	_selectItem(item, clearFilter = true) {
-		if (this.selectionMode === `single`) {
-			if (this._selectedValues.has(item.value) && !this.requiredSelection) this._selectedValues.clear();
-			else {
-				this._selectedValues.clear();
-				this._selectedValues.add(item.value);
-			}
-		} else if (this._selectedValues.has(item.value)) {
+		if (this.selectionMode === `single`) if (this._selectedValues.has(item.value) && !this.requiredSelection) this._selectedValues.clear();
+		else {
+			this._selectedValues.clear();
+			this._selectedValues.add(item.value);
+		}
+		else if (this._selectedValues.has(item.value)) {
 			if (!this.requiredSelection || this._selectedValues.size > 1) this._selectedValues.delete(item.value);
 		} else this._selectedValues.add(item.value);
 		this._updateValueFromSelected();
@@ -7105,6 +7293,8 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 		this.leadingCaret = false;
 		this.caretEmbedded = true;
 		this.hideRoot = false;
+		this.padEnding = false;
+		this.withUp = false;
 		this.#previousSelectionKey = ``;
 		this.#menuOpenedByKeyboard = false;
 		this.#currentOpenTrigger = null;
@@ -7197,6 +7387,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 						e.preventDefault();
 						this.#shiftFocusToNarrowedText();
 					}
+					break;
 			}
 		};
 		this.#onNarrowedTextBlur = () => {
@@ -7483,25 +7674,46 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 			inline: `start`
 		});
 	}
+	#updateTrailingWidth() {
+		if (!this.padEnding || !this.shadowRoot) return;
+		const hostContainer = this.shadowRoot.querySelector(`.host-container`);
+		const trailing = this.shadowRoot.querySelector(`.trailing`);
+		if (!hostContainer || !trailing) return;
+		const segments = this.shadowRoot.querySelectorAll(`.crumb-segment`);
+		const lastSegment = segments[segments.length - 1];
+		if (!lastSegment) return;
+		const containerWidth = hostContainer.getBoundingClientRect().width;
+		const itemWidth = lastSegment.getBoundingClientRect().width;
+		if (itemWidth < containerWidth) {
+			trailing.style.width = `${containerWidth - itemWidth - 5}px`;
+			requestAnimationFrame(() => {
+				if (hostContainer.scrollWidth <= hostContainer.clientWidth) hostContainer.style.setProperty(`--scroll-fade-x-start`, `0px`, `important`);
+				else hostContainer.style.removeProperty(`--scroll-fade-x-start`);
+			});
+		} else trailing.style.width = ``;
+	}
 	#setSelected(node) {
 		const previous = this.selectedNode;
 		if (previous) this.#previousSelectionKey = previous.item?.key ?? ``;
 		else this.#previousSelectionKey = ``;
-		const previousSet = previous ? /* @__PURE__ */ new Set([previous]) : /* @__PURE__ */ new Set();
+		const previousSet = previous ? new Set([previous]) : /* @__PURE__ */ new Set();
 		this.selectedNode = node;
-		this._selectedNodes = /* @__PURE__ */ new Set([node]);
+		this._selectedNodes = new Set([node]);
 		if (this.root) {
 			const path = this.#findPath(this.root, node);
 			if (path) {
 				const depth = this.hideRoot && path.length > 1 ? path.length - 2 : path.length - 1;
 				requestAnimationFrame(() => {
+					this.#updateTrailingWidth();
+					const hostContainer = this.#getHostContainer();
+					if (hostContainer) hostContainer.scrollLeft = 0;
 					this.#scrollSegmentIntoView(depth);
 				});
 			}
 		}
 		this.dispatchEvent(new CustomEvent(`select`, {
 			detail: {
-				selected: /* @__PURE__ */ new Set([node]),
+				selected: new Set([node]),
 				previous: previousSet
 			},
 			bubbles: true,
@@ -7625,6 +7837,15 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 			composed: true
 		}));
 	}
+	#onUpClick() {
+		const r = this.root;
+		const sel = this.selectedNode;
+		if (!r || !sel) return;
+		const path = this.#findPath(r, sel);
+		if (!path || path.length <= 1) return;
+		const parent = path[path.length - 2];
+		this.#setSelected(parent);
+	}
 	/** Navigate to a node by key path. Returns false if any key is not found in already-loaded children. */
 	navigateTo(keys) {
 		if (!this.root?.children) return false;
@@ -7672,6 +7893,9 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 		let pathNodes = this.#findPath(r, sel) ?? [r];
 		if (this.hideRoot && pathNodes.length > 1) pathNodes = pathNodes.slice(1);
 		this.#hasChildOptions();
+		const isAtRoot = (() => {
+			return (this.#findPath(r, sel) ?? [r]).length <= 1;
+		})();
 		const parts = [];
 		let segmentId = 0;
 		pathNodes.forEach((node, i) => {
@@ -7785,18 +8009,29 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 			}
 		});
 		return b`
-      <div
-        class="host-container scroll-fade-x"
-        tabindex="0"
-        @focus=${this.#onFocus}
-        @blur=${this.#onBlur}
-        @keydown=${this.#onKeyDown}
-        @click=${this.#onHostClick}
-        @menu-trigger-close=${this.#onMenuTriggerClose}
-        @mouseout=${(e) => this.tickled.handlePointerLeave(e)}
-      >
-        <div class="parts"
-          @mouseover=${(e) => {
+      <div class="crumb-wrapper">
+        ${this.withUp ? b`
+            <button
+              class="up-button"
+              ?disabled=${isAtRoot}
+              aria-label="Go up one level"
+              @click=${this.#onUpClick}
+            >
+              <ixfx-icon name="folder-up"></ixfx-icon>
+            </button>
+          ` : A}
+        <div
+          class="host-container scroll-fade-x"
+          tabindex="0"
+          @focus=${this.#onFocus}
+          @blur=${this.#onBlur}
+          @keydown=${this.#onKeyDown}
+          @click=${this.#onHostClick}
+          @menu-trigger-close=${this.#onMenuTriggerClose}
+          @mouseout=${(e) => this.tickled.handlePointerLeave(e)}
+        >
+          <div class="parts"
+            @mouseover=${(e) => {
 			if (this.#isWheelScrolling) return;
 			const target = e.target;
 			if (!(target instanceof HTMLElement)) return;
@@ -7817,8 +8052,9 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 				composed: true
 			}));
 		}}
-        >${parts}<div class="trailing"></div></div>
-        ${this.showSuggestions ? this.#renderChildOptions() : A}
+          >${parts}${this.padEnding ? b`<div class="trailing"></div>` : A}</div>
+          ${this.showSuggestions ? this.#renderChildOptions() : A}
+        </div>
       </div>
     `;
 	}
@@ -7896,15 +8132,57 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
       outline-offset: 2px;
     }
 
+    .crumb-wrapper {
+      display: flex;
+      align-items: center;
+      gap: var(--crumb-item-gap);
+      width: 100%;
+    }
+
+    .up-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      background: var(--crumb-item-bg);
+      border: var(--crumb-item-border);
+      border-radius: var(--crumb-item-border-radius);
+      padding: var(--crumb-item-padding);
+      cursor: pointer;
+      color: inherit;
+    }
+
+    .up-button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .up-button:hover:not(:disabled) {
+      background: var(--crumb-item-bg-tickled);
+      border-color: var(--crumb-item-border-tickled);
+    }
+
+    .up-button ixfx-icon {
+      width: 1em;
+      height: 1em;
+      pointer-events: none;
+    }
+
     /* Edge fade (shows/hides based on scroll position) comes from the
      * shared .scroll-fade-x class - see ../styles/scroll-fade.ts */
     .host-container {
       display: flex;
-      width: 100%;
+      flex: 1;
+      min-width: 0;
       outline: none;
       overflow: scroll;
       scroll-snap-type: x mandatory;
       scrollbar-width: none;
+      overscroll-behavior: none;
+    }
+
+    .host-container::-webkit-scrollbar {
+      display: none;
     }
 
     .parts {
@@ -7913,9 +8191,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
     }
 
     .trailing {
-      flex: 1;
-      min-width: 1em;
-      cursor: pointer;
+      flex-shrink: 0;
     }
 
     .crumb-segment {
@@ -8131,6 +8407,16 @@ __decorate([property({
 	reflect: true,
 	attribute: `hide-root`
 })], CrumbNavigationElement.prototype, "hideRoot", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `pad-ending`
+})], CrumbNavigationElement.prototype, "padEnding", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `with-up`
+})], CrumbNavigationElement.prototype, "withUp", void 0);
 CrumbNavigationElement = __decorate([safeCustomElement(`ixfx-crumb-navigation`)], CrumbNavigationElement);
 //#endregion
 //#region src/crumbs/crumb-path-controller.ts
@@ -8251,6 +8537,7 @@ let CrumbPathElement = class CrumbPathElement extends i {
 				case `Escape`:
 					e.preventDefault();
 					this.#closeDropdown();
+					break;
 			}
 		};
 		this.#onHostKeyDown = (e) => {
@@ -8589,11 +8876,9 @@ let CrumbPathElement = class CrumbPathElement extends i {
 	#onHostKeyDown;
 	render() {
 		const segments = this.#getSegments();
-		if (this._editing) {
-			const editValue = this.path;
-			return b`
+		if (this._editing) return b`
         <ixfx-ac-text
-          .value=${editValue}
+          .value=${this.path}
           .tabSuffix=${this.separator}
           .completionProvider=${this.#makeCompletionProvider()}
           @change=${this.#onAcChange}
@@ -8601,7 +8886,6 @@ let CrumbPathElement = class CrumbPathElement extends i {
           @keydown=${this.#onAcKeyDown}
         ></ixfx-ac-text>
       `;
-		}
 		const rootSegments = this.#getRootSegments();
 		const leadingCaret = this.siblingLookup && rootSegments.length === 0 ? b`
       <div class="caret ${this._openIdx === -1 ? `open` : ``} ${this._confirmedLeafIndices.has(``) ? `disabled` : ``}"
@@ -8946,16 +9230,15 @@ let DataDisplayComponent = class DataDisplayComponent extends i {
 				}
 				continue;
 			}
-			if (typeof value === `object` && value !== null && !Array.isArray(value)) {
-				if (this.#hasDescendantConfig(fullPath)) this.#walk(value, fullPath, activePaths);
-				else if (this.automap) {
-					const row = this.#ensureRow(fullPath, key);
-					this.#renderNestedDisplay(row, value, true);
-				} else {
-					const row = this.#ensureRow(fullPath, key);
-					this.#renderNestedDisplay(row, value);
-				}
+			if (typeof value === `object` && value !== null && !Array.isArray(value)) if (this.#hasDescendantConfig(fullPath)) this.#walk(value, fullPath, activePaths);
+			else if (this.automap) {
+				const row = this.#ensureRow(fullPath, key);
+				this.#renderNestedDisplay(row, value, true);
 			} else {
+				const row = this.#ensureRow(fullPath, key);
+				this.#renderNestedDisplay(row, value);
+			}
+			else {
 				const autoStyle = this.#determineAutoStyle(value);
 				if (autoStyle !== void 0) {
 					const row = this.#ensureRow(fullPath, key);
@@ -9036,15 +9319,13 @@ let DataDisplayComponent = class DataDisplayComponent extends i {
 			case `plot`:
 				if (typeof value === `number`) {
 					if (changed) el.add(value);
-				} else if (typeof value === `object` && value !== null && changed) {
-					if (Array.isArray(value)) {
-						const record = {};
-						value.forEach((v, i) => {
-							if (typeof v === `number`) record[String(i)] = v;
-						});
-						if (Object.keys(record).length > 0) el.addData(record);
-					} else el.addData(value);
-				}
+				} else if (typeof value === `object` && value !== null && changed) if (Array.isArray(value)) {
+					const record = {};
+					value.forEach((v, i) => {
+						if (typeof v === `number`) record[String(i)] = v;
+					});
+					if (Object.keys(record).length > 0) el.addData(record);
+				} else el.addData(value);
 				this.#applyPlotOptions(el, style, options);
 				break;
 			case `plot-xy`:
@@ -9056,7 +9337,9 @@ let DataDisplayComponent = class DataDisplayComponent extends i {
 				if (typeof value === `number` && changed) el.add(value);
 				this.#applyPlotOptions(el, style, options);
 				break;
-			case `time-elapsed`: el.textContent = this.#formatTimeElapsed(value);
+			case `time-elapsed`:
+				el.textContent = this.#formatTimeElapsed(value);
+				break;
 		}
 		this.#previousValues.set(path, value);
 	}
@@ -9102,10 +9385,9 @@ let DataDisplayComponent = class DataDisplayComponent extends i {
 	#formatTimeElapsed(value) {
 		let timestamp;
 		if (value instanceof Date) timestamp = value.getTime();
-		else if (typeof value === `number`) {
-			if (value > 0xe8d4a51000) timestamp = value;
-			else timestamp = Date.now();
-		} else if (typeof value === `string`) timestamp = new Date(value).getTime();
+		else if (typeof value === `number`) if (value > 0xe8d4a51000) timestamp = value;
+		else timestamp = Date.now();
+		else if (typeof value === `string`) timestamp = new Date(value).getTime();
 		else return String(value);
 		if (Number.isNaN(timestamp)) return String(value);
 		const elapsed = Date.now() - timestamp;
@@ -9837,15 +10119,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;
 		}
@@ -9908,6 +10189,7 @@ let EditableNumber = class EditableNumber extends WheelNudgeMixin(EditableLabel)
 			case `End`:
 				delta = (this.max ?? 0) - this._parseValue();
 				handled = true;
+				break;
 		}
 		if (handled) {
 			e.preventDefault();
@@ -10256,15 +10538,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;
@@ -11000,6 +11280,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 				case `Escape`:
 					event.preventDefault();
 					this.#abortPending();
+					break;
 			}
 		};
 		this.#onDblClick = (e) => {
@@ -11261,7 +11542,9 @@ let TreeBaseElement = class TreeBaseElement extends i {
 			case `manual`:
 				this.#handleManualClick(node, depth, event);
 				break;
-			case `checked`: this.#handleExpandOnly(node, depth);
+			case `checked`:
+				this.#handleExpandOnly(node, depth);
+				break;
 		}
 		this.requestUpdate();
 	}
@@ -11428,10 +11711,8 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		return node.children.every((child) => this.#allDescendantsSelected(child));
 	}
 	#applyCheckedToggle(node, selected) {
-		if (this.#canSelect(node)) {
-			if (selected) this._selectedNodes.add(node);
-			else this._selectedNodes.delete(node);
-		}
+		if (this.#canSelect(node)) if (selected) this._selectedNodes.add(node);
+		else this._selectedNodes.delete(node);
 		if (node.children) for (const child of node.children) this.#applyCheckedToggle(child, selected);
 	}
 	#getFlatIndexOf(node) {
@@ -12249,7 +12530,9 @@ let VerticalListElement = class VerticalListElement extends i {
 					}
 					break;
 				}
-				case `Escape`: this._clearSelection();
+				case `Escape`:
+					this._clearSelection();
+					break;
 			}
 		};
 		this._onClick = (e) => {
@@ -12437,7 +12720,7 @@ let VerticalListElement = class VerticalListElement extends i {
 		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();
@@ -12527,7 +12810,9 @@ let VerticalListElement = class VerticalListElement extends i {
 				else this._replaceSelection(item);
 				break;
 			case `checked`: break;
-			case `sticky`: this._toggleItem(item);
+			case `sticky`:
+				this._toggleItem(item);
+				break;
 		}
 	}
 	_handleSpaceKey(item) {
@@ -12614,10 +12899,7 @@ let VerticalListElement = class VerticalListElement extends i {
 			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;
-					D(renderer(checked), cb);
-				}
+				if (this.checkboxRenderer) D((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;
@@ -13027,7 +13309,7 @@ function createVerticalListAdapter(renderItem, options) {
 }
 //#endregion
 //#region src/hex/colour.ts
-const WHITESPACE_BYTES = /* @__PURE__ */ new Set([
+const WHITESPACE_BYTES = new Set([
 	9,
 	10,
 	11,
@@ -13076,7 +13358,7 @@ function clamp$3(value) {
 function writeByte(store, pos, value) {
 	const clampedValue = clamp$3(value);
 	const before = store.data[pos];
-	const diff = /* @__PURE__ */ new Map([[pos, {
+	const diff = new Map([[pos, {
 		before,
 		after: clampedValue
 	}]]);
@@ -13285,7 +13567,9 @@ function extendRectangular(sel, dir, columns, _dataLength, anchorX = 0, anchorY
 				height += 1;
 			}
 			break;
-		case `down`: height += 1;
+		case `down`:
+			height += 1;
+			break;
 	}
 	return {
 		kind: `rectangular`,
@@ -13331,7 +13615,7 @@ let IxfxHexEditorElement = class IxfxHexEditorElement extends i {
 		this._containerH = 0;
 		this._shadeMap = null;
 		this._focusSide = null;
-		this._store = createHexStore(/* @__PURE__ */ new Uint8Array(0));
+		this._store = createHexStore(new Uint8Array(0));
 		this._undoStack = createUndoRedoStack();
 		this._copyBuffer = null;
 		this._rowHeight = 24;
@@ -14209,10 +14493,7 @@ function valueToAngle(relativeValue, valueMode, flatten) {
 	switch (valueMode) {
 		case `range`: return startAngle + relativeValue * totalArc;
 		case `bipolar`: if (relativeValue <= .5) return startAngle + relativeValue / .5 * (MIDPOINT_ANGLE - startAngle);
-		else {
-			const t = (relativeValue - .5) / .5;
-			return MIDPOINT_ANGLE + t * (endAngle - MIDPOINT_ANGLE);
-		}
+		else return MIDPOINT_ANGLE + (relativeValue - .5) / .5 * (endAngle - MIDPOINT_ANGLE);
 		case `unipolar`: return MIDPOINT_ANGLE;
 		default: return startAngle;
 	}
@@ -14235,14 +14516,11 @@ function getValueArcAngles(relativeValue, valueMode, flatten) {
 			startAngle: startAngle + relativeValue / .5 * (MIDPOINT_ANGLE - startAngle),
 			endAngle: MIDPOINT_ANGLE
 		};
-		else if (relativeValue > .5) {
-			const t = (relativeValue - .5) / .5;
-			const valueAngle = MIDPOINT_ANGLE + t * (endAngle - MIDPOINT_ANGLE);
-			return {
-				startAngle: MIDPOINT_ANGLE,
-				endAngle: valueAngle
-			};
-		} else return {
+		else if (relativeValue > .5) return {
+			startAngle: MIDPOINT_ANGLE,
+			endAngle: MIDPOINT_ANGLE + (relativeValue - .5) / .5 * (endAngle - MIDPOINT_ANGLE)
+		};
+		else return {
 			startAngle: MIDPOINT_ANGLE,
 			endAngle: MIDPOINT_ANGLE
 		};
@@ -14433,10 +14711,9 @@ function getMidpointPosition(radius, center = {
 	x: 50,
 	y: 50
 }) {
-	const position = polarToCartesian(MIDPOINT_ANGLE, radius, center);
 	return {
 		angle: MIDPOINT_ANGLE,
-		position
+		position: polarToCartesian(MIDPOINT_ANGLE, radius, center)
 	};
 }
 /**
@@ -14544,6 +14821,7 @@ let RadialInputElement = class RadialInputElement extends WheelNudgeMixin(i) {
 				case `End`:
 					this.#setValueFromRelative(1, true);
 					handled = true;
+					break;
 			}
 			if (handled) event.preventDefault();
 		};
@@ -14666,13 +14944,10 @@ let RadialInputElement = class RadialInputElement extends WheelNudgeMixin(i) {
 	#renderCircleBorder() {
 		const path = generateCircleBorderPath(this.radius, this.flatten, CENTER);
 		const borderWidth = this.#getCssVar(`--dial-border-width`, 2);
-		const borderColor = getComputedStyle(this).getPropertyValue(`--dial-border-color`).trim() || `var(--surface-4)`;
-		return w`<path class="dial-border" d="${path}" fill="none" stroke="${borderColor}" stroke-width="${borderWidth}" stroke-linecap="round" vector-effect="non-scaling-stroke" />`;
+		return w`<path class="dial-border" d="${path}" fill="none" stroke="${getComputedStyle(this).getPropertyValue(`--dial-border-color`).trim() || `var(--surface-4)`}" stroke-width="${borderWidth}" stroke-linecap="round" vector-effect="non-scaling-stroke" />`;
 	}
 	#renderCircleFill() {
-		const path = generateCircleBorderPath(this.radius, this.flatten, CENTER);
-		const fill = getComputedStyle(this).getPropertyValue(`--dial-fill`).trim() || `transparent`;
-		return w`<path class="dial-fill" d="${path}" fill="${fill}" />`;
+		return w`<path class="dial-fill" d="${generateCircleBorderPath(this.radius, this.flatten, CENTER)}" fill="${getComputedStyle(this).getPropertyValue(`--dial-fill`).trim() || `transparent`}" />`;
 	}
 	#renderWedge() {
 		const { startAngle, endAngle, clockwise } = getWedgeAngles(this.#getRelativeValue(), this.valueMode, this.flatten);
@@ -14746,10 +15021,9 @@ let RadialInputElement = class RadialInputElement extends WheelNudgeMixin(i) {
         `;
 			const length = this.#getCssVar(`--marker-length`, .8);
 			const offset = this.#getCssVar(`--marker-offset`, .2);
-			const path = this.#getNeedlePath(angle, length, offset);
 			return w`
         <g class="value-marker" part="value-marker">
-          <path d="${path}" />
+          <path d="${this.#getNeedlePath(angle, length, offset)}" />
         </g>
       `;
 		}
@@ -15224,16 +15498,14 @@ let LedElement = class LedElement extends i {
 	}
 	#blinkInterval;
 	willUpdate(changedProperties) {
-		if (changedProperties.has(`value`)) this.style.setProperty(`--value`, String(this.value));
+		if (changedProperties.has(`lit`)) this.value = this.lit ? 1 : 0;
+		if (changedProperties.has(`value`) || changedProperties.has(`lit`)) this.style.setProperty(`--value`, String(this.value));
 		if (changedProperties.has(`blinking`) || changedProperties.has(`rate`)) this.#updateBlinking();
 		if (changedProperties.has(`rate`)) {
 			const transitionMs = this.rate < 300 ? this.rate * .5 : 150;
 			this.style.setProperty(`--transition-duration`, `${transitionMs}ms`);
 		}
 	}
-	updated(changedProperties) {
-		if (changedProperties.has(`lit`)) this.value = this.lit ? 1 : 0;
-	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#stopBlinking();
@@ -15698,6 +15970,7 @@ let MenuSubTrigger = class MenuSubTrigger extends i {
 				e.preventDefault();
 				e.stopPropagation();
 				this._hideSubmenu();
+				break;
 		}
 	}
 	static {
@@ -16269,20 +16542,19 @@ let MillerBaseElement = class MillerBaseElement extends i {
 					const tickled = this.#getTickledNodeAndDepth();
 					if (!tickled) return;
 					const { node, depth, index } = tickled;
-					if (this.interactionMode === `standard` || this.interactionMode === `vscode`) {
-						if (event.shiftKey && this.#anchor?.depth === depth) {
-							const from = Math.min(this.#anchor.index, index);
-							const to = Math.max(this.#anchor.index, index);
-							this._selectedKeys = new Set(col.slice(from, to + 1).map((n) => n.item.key));
-						} else {
-							this._selectedKeys.add(node.item.key);
-							this.#anchor = {
-								key: node.item.key,
-								depth,
-								index
-							};
-						}
-					} else this._selectedByDepth.set(depth, node);
+					if (this.interactionMode === `standard` || this.interactionMode === `vscode`) if (event.shiftKey && this.#anchor?.depth === depth) {
+						const from = Math.min(this.#anchor.index, index);
+						const to = Math.max(this.#anchor.index, index);
+						this._selectedKeys = new Set(col.slice(from, to + 1).map((n) => n.item.key));
+					} else {
+						this._selectedKeys.add(node.item.key);
+						this.#anchor = {
+							key: node.item.key,
+							depth,
+							index
+						};
+					}
+					else this._selectedByDepth.set(depth, node);
 					this.dispatchEvent(new CustomEvent(`activate`, {
 						detail: {
 							node,
@@ -16308,6 +16580,7 @@ let MillerBaseElement = class MillerBaseElement extends i {
 						}
 						this.requestUpdate();
 					}
+					break;
 			}
 		};
 		this.#onResizeStart = (event, depth) => {
@@ -16436,7 +16709,7 @@ let MillerBaseElement = class MillerBaseElement extends i {
 	set selectedNode(node) {
 		this.#lastSelectedNode = node;
 		if (node) {
-			if (this.interactionMode === `implicit` || this.interactionMode === `standard`) this._selectedKeys = /* @__PURE__ */ new Set([node.item.key]);
+			if (this.interactionMode === `implicit` || this.interactionMode === `standard`) this._selectedKeys = new Set([node.item.key]);
 		}
 		this.requestUpdate();
 	}
@@ -16537,7 +16810,7 @@ let MillerBaseElement = class MillerBaseElement extends i {
 		if (lastNode) this.tickled.setTickled(this.#buildTickledId(lastNode, lastDepth));
 		if (this.interactionMode !== `implicit` && this.interactionMode !== `manual`) {
 			const leafKey = keys.at(-1);
-			if (leafKey) this._selectedKeys = /* @__PURE__ */ new Set([leafKey]);
+			if (leafKey) this._selectedKeys = new Set([leafKey]);
 		}
 		this.requestUpdate();
 		this.#scrollNavigatedItemIntoView();
@@ -16742,14 +17015,16 @@ let MillerBaseElement = class MillerBaseElement extends i {
 				this.#handleStandardClick(node, depth, event);
 				break;
 			case `manual`: break;
-			case `checked`: this.#expandNode(node, depth);
+			case `checked`:
+				this.#expandNode(node, depth);
+				break;
 		}
 	}
 	#handleImplicitClick(node, depth) {
 		const previous = new Set(this._selectedNodes);
 		this._selectedByDepth.set(depth, node);
 		this.#lastSelectedNode = node;
-		this._selectedKeys = /* @__PURE__ */ new Set([node.item.key]);
+		this._selectedKeys = new Set([node.item.key]);
 		this._selectedNodes.clear();
 		this._selectedNodes.add(node);
 		this.#expandNode(node, depth);
@@ -16786,8 +17061,8 @@ let MillerBaseElement = class MillerBaseElement extends i {
 			return;
 		}
 		const previous = new Set(this._selectedNodes);
-		this._selectedKeys = /* @__PURE__ */ new Set([node.item.key]);
-		this._selectedNodes = /* @__PURE__ */ new Set([node]);
+		this._selectedKeys = new Set([node.item.key]);
+		this._selectedNodes = new Set([node]);
 		this.#anchor = index >= 0 ? {
 			key: node.item.key,
 			depth,
@@ -18855,7 +19130,6 @@ let PlotHistogram = class PlotHistogram extends i {
 				};
 			} else {
 				const y = padding + i * bucketSize;
-				const height = i === bucketCount - 1 ? Math.max(0, padding + availableMain - y) : Math.max(0, bucketSize - gap);
 				return {
 					count,
 					valueMin,
@@ -18864,7 +19138,7 @@ let PlotHistogram = class PlotHistogram extends i {
 					x: padding,
 					y,
 					width: barLen,
-					height
+					height: i === bucketCount - 1 ? Math.max(0, padding + availableMain - y) : Math.max(0, bucketSize - gap)
 				};
 			}
 		});
@@ -19116,8 +19390,7 @@ function renderArea(points, cr, bottom, areaColor) {
 	if (points.length < 2) return w``;
 	const lineD = buildLinePath(points);
 	const fillColor = areaColor || cr.fill;
-	const areaD = `${lineD} L ${points[points.length - 1].x},${bottom} L ${points[0].x},${bottom} Z`;
-	return w`<path d=${areaD} fill=${fillColor} opacity=${cr.opacity * .2} />`;
+	return w`<path d=${`${lineD} L ${points[points.length - 1].x},${bottom} L ${points[0].x},${bottom} Z`} fill=${fillColor} opacity=${cr.opacity * .2} />`;
 }
 function renderCircles(points, crs, radius, ageStyle) {
 	return points.map((p, i) => {
@@ -21119,13 +21392,11 @@ let RangeMultiElement = class RangeMultiElement extends i {
 			}
 			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) {
@@ -21184,65 +21455,63 @@ let RangeMultiElement = class RangeMultiElement extends i {
 					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;
@@ -21803,13 +22072,13 @@ let SelectHorizElement = class SelectHorizElement extends WheelNudgeMixin(i) {
 
       ::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);
       }
 
@@ -21934,14 +22203,14 @@ function getTrackBounds(orientation) {
 	if (orientation === `horizontal`) return {
 		trackStart: 5,
 		trackEnd: 95,
-		centre: 50,
-		crossCentre: 12
+		centre: 100 / 2,
+		crossCentre: 24 / 2
 	};
 	return {
 		trackStart: 5,
 		trackEnd: 95,
-		centre: 50,
-		crossCentre: 12
+		centre: 100 / 2,
+		crossCentre: 24 / 2
 	};
 }
 /**
@@ -21961,12 +22230,11 @@ function valueToPosition(relativeValue, singleStyle, trackBounds, orientation) {
 	const crossCentre = trackBounds.crossCentre;
 	let pos;
 	if (singleStyle === `range`) pos = trackBounds.trackStart + relativeValue * span;
-	else if (singleStyle === `bipolar`) {
-		if (relativeValue <= .5) {
-			const t = relativeValue / .5;
-			pos = trackBounds.trackStart + t * (centre - trackBounds.trackStart);
-		} else pos = centre + (relativeValue - .5) / .5 * (trackBounds.trackEnd - centre);
-	} else pos = centre + relativeValue * span / 2;
+	else if (singleStyle === `bipolar`) if (relativeValue <= .5) {
+		const t = relativeValue / .5;
+		pos = trackBounds.trackStart + t * (centre - trackBounds.trackStart);
+	} else pos = centre + (relativeValue - .5) / .5 * (trackBounds.trackEnd - centre);
+	else pos = centre + relativeValue * span / 2;
 	if (orientation === `horizontal`) return {
 		x: pos,
 		y: crossCentre
@@ -22377,6 +22645,7 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(i) {
 					if (this.valueMode === `single`) this.#setSingleValueFromRelative(1, true);
 					else this.#stepHandleByRelativeDelta(handle, 1);
 					handled = true;
+					break;
 			}
 			if (handled) event.preventDefault();
 		};
@@ -22622,10 +22891,9 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(i) {
 		const gap = this.#getEffectiveValueMin();
 		const other = handle === `a` ? poleB : poleA;
 		let desired = this.#quantise(clamp$1(proposed, this.min, this.max));
-		if (this.crossover === `none`) {
-			if ((handle === `a` ? poleA : poleB) <= other) desired = Math.min(desired, other - gap);
-			else desired = Math.max(desired, other + gap);
-		} else if (desired > other - gap && desired < other + gap) desired = Math.abs(desired - (other - gap)) <= Math.abs(desired - (other + gap)) ? other - gap : other + gap;
+		if (this.crossover === `none`) if ((handle === `a` ? poleA : poleB) <= other) desired = Math.min(desired, other - gap);
+		else desired = Math.max(desired, other + gap);
+		else if (desired > other - gap && desired < other + gap) desired = Math.abs(desired - (other - gap)) <= Math.abs(desired - (other + gap)) ? other - gap : other + gap;
 		desired = clamp$1(desired, this.min, this.max);
 		if (handle === `a`) {
 			if (desired === poleA) return null;
@@ -22898,7 +23166,7 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(i) {
 		if (isVertical) return w`
         <rect
           class="track"
-          x="${12 - strokeWidth / 2}"
+          x="${24 / 2 - strokeWidth / 2}"
           y="${5}"
           width="${strokeWidth}"
           height="${90}"
@@ -22911,7 +23179,7 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(i) {
       <rect
         class="track"
         x="${5}"
-        y="${12 - strokeWidth / 2}"
+        y="${24 / 2 - strokeWidth / 2}"
         width="${90}"
         height="${strokeWidth}"
         fill="${fill}"
@@ -22979,9 +23247,9 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(i) {
 		const markerBorderWidth = this.#getCssVar(`--marker-border-width`, 0);
 		const center = isHorizontal ? {
 			x: pos.x,
-			y: bounds.crossCentre + markerOffset * 12
+			y: bounds.crossCentre + markerOffset * (24 / 2)
 		} : {
-			x: bounds.crossCentre + markerOffset * 12,
+			x: bounds.crossCentre + markerOffset * (24 / 2),
 			y: pos.y
 		};
 		const lowCenter = this.valueMode === `single` && this.singleStyle === `unipolar` ? isHorizontal ? {
@@ -22994,7 +23262,7 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(i) {
 		const id = handle ?? `s`;
 		const effectiveMarkerStyle = handle === `c` && this.markerStyleC ? this.markerStyleC : this.markerStyle;
 		if (effectiveMarkerStyle === `dot`) {
-			const r = markerThickness * 12;
+			const r = markerThickness * (24 / 2);
 			const renderDot = (cx, cy, mid) => {
 				if (markerBorderWidth > 0) {
 					defs.push(w`<circle id="dot-${mid}-path" cx="${cx}" cy="${cy}" r="${r}" />`);
@@ -23049,7 +23317,7 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(i) {
 		}
 		if (effectiveMarkerStyle === `triangle`) {
 			const halfLen = markerLength * 24 / 4;
-			const halfBase = markerThickness * 12;
+			const halfBase = markerThickness * (24 / 2);
 			const renderTriangle = (cx, cy, mid) => {
 				let apex;
 				let base1;
@@ -23114,7 +23382,7 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(i) {
 			const size = this.#getCssVar(`--midpoint-thickness`, .08);
 			return w`
         <g class="midpoint-marker" part="midpoint-marker">
-          <circle cx="${center.x}" cy="${center.y}" r="${size * 12}" />
+          <circle cx="${center.x}" cy="${center.y}" r="${size * (24 / 2)}" />
         </g>
       `;
 		}
@@ -23186,12 +23454,10 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(i) {
 		} else this.#poleC = void 0;
 		if (changed.has(`valueA`) || changed.has(`valueB`) || changed.has(`valueMode`) || changed.has(`singleStyle`) || !this.hasUpdated) {
 			const valueLane = this.#lanes.get(`value`);
-			if (valueLane && valueLane.type === `value`) {
-				if (this.valueMode === `single`) this.#applySingleStyleValueLane(valueLane, this.#getRelativeValueA());
-				else {
-					valueLane.valueMin = valueToRelative(this.#low(), this.min, this.max);
-					valueLane.valueMax = valueToRelative(this.#high(), this.min, this.max);
-				}
+			if (valueLane && valueLane.type === `value`) if (this.valueMode === `single`) this.#applySingleStyleValueLane(valueLane, this.#getRelativeValueA());
+			else {
+				valueLane.valueMin = valueToRelative(this.#low(), this.min, this.max);
+				valueLane.valueMax = valueToRelative(this.#high(), this.min, this.max);
 			}
 		}
 	}
@@ -23860,11 +24126,10 @@ let SnapContainer = class SnapContainer extends i {
 		};
 		this._onKeyDown = (e) => {
 			let newSnap = this.snap;
-			if (this._isHorizontal) {
-				if (e.key === `ArrowLeft`) newSnap = Math.max(0, this.snap - 1);
-				else if (e.key === `ArrowRight`) newSnap = Math.min(this.snapPositions - 1, this.snap + 1);
-				else return;
-			} else if (e.key === `ArrowUp`) newSnap = Math.max(0, this.snap - 1);
+			if (this._isHorizontal) if (e.key === `ArrowLeft`) newSnap = Math.max(0, this.snap - 1);
+			else if (e.key === `ArrowRight`) newSnap = Math.min(this.snapPositions - 1, this.snap + 1);
+			else return;
+			else if (e.key === `ArrowUp`) newSnap = Math.max(0, this.snap - 1);
 			else if (e.key === `ArrowDown`) newSnap = Math.min(this.snapPositions - 1, this.snap + 1);
 			else return;
 			e.preventDefault();
@@ -24104,8 +24369,7 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
 			if (!bounds) return;
 			const threshold = 5;
 			if (this.layout === `horizontal`) {
-				const y = event.y - bounds.y;
-				const relativeY = clamp(y / bounds.height);
+				const relativeY = clamp((event.y - bounds.y) / bounds.height);
 				if (this.collapsible && this.collapsedA) {
 					if (relativeY > (this.#collapsedAPointerAtCollapse ?? .05) + this.#hysteresisThreshold) {
 						this.collapsedA = false;
@@ -24143,8 +24407,7 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
 					this.#collapsedBPointerAtCollapse = relativeY;
 				}
 			} else {
-				const x = event.x - bounds.x;
-				const relativeX = clamp(x / bounds.width);
+				const relativeX = clamp((event.x - bounds.x) / bounds.width);
 				if (this.collapsible && this.collapsedA) {
 					if (relativeX > (this.#collapsedAPointerAtCollapse ?? .05) + this.#hysteresisThreshold) {
 						this.collapsedA = false;
@@ -24198,7 +24461,7 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
 			if (nestedSplit) {
 				this.#nestedSplitInitialSizeA = nestedSplit.sizeA;
 				const nestedBounds = nestedSplit.getBoundingClientRect();
-				const nestedHandle = nestedSplit.shadowRoot?.querySelector(`.resize-handle`);
+				const nestedHandle = nestedSplit.shadowRoot?.querySelector(`.split-bar`);
 				if (nestedHandle) {
 					this.#nestedSplitBounds = nestedBounds;
 					this.#nestedHandleBounds = nestedHandle.getBoundingClientRect();
@@ -24267,6 +24530,11 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
 			event.preventDefault();
 		};
 	}
+	get showGrabHandle() {
+		const size = getComputedStyle(this).getPropertyValue(`--handle-size`).trim();
+		const num = Number.parseFloat(size);
+		return !Number.isNaN(num) && num > 3;
+	}
 	#elementBounds;
 	#startSizeA;
 	#startSizeB;
@@ -24487,17 +24755,30 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
     <div id="zone">
       <slot style=${sizeA} name="a"></slot>
       ${this._hasCorner ? b`<div class="corner-zone" @pointerdown=${this.#onCornerResizeDown}></div>` : ``}
-      <div @pointerdown=${this.#onResizeHandleDown} class="resize-handle"></div>
-      <slot style=${sizeB} name="b"></slot> 
+      <div @pointerdown=${this.#onResizeHandleDown} class="split-bar">
+        ${this.showGrabHandle ? b`
+          <div class="grab-handle">
+            <span class="dot"></span>
+            <span class="dot"></span>
+            <span class="dot"></span>
+          </div>
+        ` : ``}
+      </div>
+      <slot style=${sizeB} name="b"></slot>
     </div>`;
 	}
 	static {
 		this.styles = [themeFallbacks, i$3`
   :host {
       --handle-size: 2px;
-      --handle-colour: var(--surface-5);
+      --handle-colour: transparent;
       --handle-hover-colour: var(--surface-6);
       --handle-active-colour: var(--accent);
+      --handle-bg: var(--handle-colour);
+      --handle-grab-colour: var(--border-subtle-color);
+      --handle-grab-dot-size: 3px;
+      --handle-grab-size: 16px;
+      --handle-grab-thickness: 8px;
 
       display: block;
       box-sizing: border-box;
@@ -24515,29 +24796,80 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
     slot {
       display: block;
       overflow: hidden;
+      border: var(--border-subtle);
+      border-radius: var(--radius-m);
     }
     :slotted(*) {
       width: 100%;
       height: 100%;
     }
 
-    .resize-handle {
+    .split-bar {
+      position: relative;
       background-color: var(--handle-colour);
+      transition: background-color 0.3s ease 0s;
       width: var(--handle-size);
       height: 100%;
       cursor: ew-resize;
       flex-shrink: 0;
+      border-radius: var(--radius-m);
+
+    }
+
+    @keyframes handle-hover {
+      from { background-color: var(--handle-colour); }
+      to { background-color: var(--handle-hover-colour); }
+    }
+
+    .grab-handle {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--handle-grab-dot-size);
+      background: var(--handle-bg);
+      border-radius: var(--radius-s);
+    }
+
+    .grab-handle .dot {
+      width: var(--handle-grab-dot-size);
+      height: var(--handle-grab-dot-size);
+      border-radius: 50%;
+      background: var(--handle-grab-colour);
+      flex-shrink: 0;
+    }
+
+    :host([layout="vertical"]) .grab-handle {
+      flex-direction: column;
+      width: var(--handle-grab-thickness);
+      height: var(--handle-grab-size);
+    }
+
+    :host([layout="horizontal"]) .grab-handle {
+      flex-direction: row;
+      width: var(--handle-grab-size);
+      height: var(--handle-grab-thickness);
+    }
+
+    #zone.user-resizing .grab-handle {
+      display: none;
     }
     #zone.user-resizing {
       slot {
         opacity: 0.5;
       }
-      .resize-handle {
+      .split-bar {
         background-color: var(--handle-active-colour);
+        transition: none;
+        animation: none !important;
       }
     }
-    .resize-handle:hover {
-      background-color: var(--handle-hover-colour);
+
+    #zone:not(.user-resizing) .split-bar:hover {
+      animation: handle-hover 0.001s ease-out 0.7s both;
     }
 
     .corner-zone {
@@ -24556,17 +24888,18 @@ let SplitLayoutElement = class SplitLayoutElement extends i {
       #zone {
         flex-direction: column;
       }
-      .resize-handle {
-        background-color: silver;
+      .split-bar {
+        position: relative;
+        background-color: var(--handle-colour);
+        transition: background-color 0.3s ease 0s;
         height: var(--handle-size);
         width: 100%;
         cursor: ns-resize;
       }
-      .resize-handle:hover {
-        background-color: var(--handle-hover-colour);
-      }
-      #zone.user-resizing .resize-handle {
+      #zone.user-resizing .split-bar {
         background-color: var(--handle-active-colour);
+        transition: none;
+        animation: none !important;
       }
     }
 
@@ -24760,8 +25093,7 @@ let SwipeElement = class SwipeElement extends WheelNudgeMixin(i) {
 			const x0 = cx - half;
 			const x1 = cx + half;
 			const colorVar = i % 2 === 0 ? `var(--swipe-color-a, var(--surface-4))` : `var(--swipe-color-b, var(--surface-5))`;
-			const d = `M${x0},0 L${x1},0 L${x1 + off},${mid} L${x1},${h} L${x0},${h} L${x0 + off},${mid}Z`;
-			return w`<path d=${d} style="fill:${colorVar}"></path>`;
+			return w`<path d=${`M${x0},0 L${x1},0 L${x1 + off},${mid} L${x1},${h} L${x0},${h} L${x0 + off},${mid}Z`} style="fill:${colorVar}"></path>`;
 		})}`;
 	}
 	static {
@@ -24822,11 +25154,16 @@ let TabListItemElement = class TabListItemElement extends i {
 	constructor(..._args) {
 		super(..._args);
 		this.closeable = false;
+		this.hideLabels = false;
 		this.iconName = void 0;
 		this.description = void 0;
 		this.commandActive = void 0;
 		this.registry = void 0;
 		this._compact = false;
+		this._hasToolbarContent = false;
+		this._onToolbarSlotChange = () => {
+			this._updateToolbarContent();
+		};
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -24834,6 +25171,7 @@ let TabListItemElement = class TabListItemElement extends i {
 			this._compact = entry.contentRect.width < 64;
 		});
 		this._resizeObserver.observe(this);
+		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.addEventListener(`slotchange`, this._onToolbarSlotChange);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -24841,6 +25179,7 @@ let TabListItemElement = class TabListItemElement extends i {
 		this._resizeObserver = void 0;
 		this._commandCleanup?.();
 		this._commandCleanup = void 0;
+		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.removeEventListener(`slotchange`, this._onToolbarSlotChange);
 	}
 	updated(changed) {
 		super.updated(changed);
@@ -24863,12 +25202,21 @@ let TabListItemElement = class TabListItemElement extends i {
 			if (id === this.commandActive) this.click();
 		});
 	}
+	_updateToolbarContent() {
+		const slot = this.shadowRoot?.querySelector(`slot[name="toolbar"]`);
+		this._hasToolbarContent = (slot?.assignedElements().length ?? 0) > 0;
+	}
+	firstUpdated() {
+		this._updateToolbarContent();
+	}
 	render() {
-		const showLabel = !this._compact || !this.iconName;
+		const showLabel = !this.hideLabels || !this.iconName;
+		const hasActions = this.closeable || this._hasToolbarContent;
 		return b`
       <div>
         ${this.iconName ? b`<ixfx-icon name="${this.iconName}"></ixfx-icon>` : A}
         ${showLabel ? b`<span class="label"><slot></slot></span>` : A}
+        ${hasActions ? b`
         <div class="actions">
           <div class="toolbar"><slot name="toolbar"></slot></div>
           ${this.closeable ? b`
@@ -24882,6 +25230,7 @@ let TabListItemElement = class TabListItemElement extends i {
             </button>
           ` : A}
         </div>
+        ` : A}
       </div>
     `;
 	}
@@ -24908,17 +25257,19 @@ let TabListItemElement = class TabListItemElement extends i {
         min-width: 0;
         user-select: none;
         box-sizing: border-box;
+        height:fit-content;
       }
 
       :host > div {
         display: flex;
         align-items: center;
-        gap: var(--space-s, 4px);
-        padding: var(--tab-padding) calc(2 * var(--tab-padding));
+        padding: var(--tab-padding) calc(2 * var(--tab-padding-horizontal, var(--tab-padding)));
         min-width: 0;
         width: 100%;
         font-weight: 500;
         border: var(--selected-tab-border-width) solid transparent;
+        gap: var(--space-s);
+
       }
 
       :host([selected]) > div {
@@ -24929,6 +25280,7 @@ let TabListItemElement = class TabListItemElement extends i {
         border-right-color: var(--indicator-color-right, transparent);
         background: var(--selected-background);
         font-weight: var(--selected-tab-weight);
+        border-radius:var(--radius-m);
       }
 
       .label {
@@ -25003,6 +25355,10 @@ let TabListItemElement = class TabListItemElement extends i {
 	}
 };
 __decorate([property({ type: Boolean })], TabListItemElement.prototype, "closeable", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-labels`
+})], TabListItemElement.prototype, "hideLabels", void 0);
 __decorate([property({
 	type: String,
 	attribute: `icon-name`
@@ -25014,6 +25370,7 @@ __decorate([property({
 })], TabListItemElement.prototype, "commandActive", void 0);
 __decorate([property({ attribute: false })], TabListItemElement.prototype, "registry", void 0);
 __decorate([state()], TabListItemElement.prototype, "_compact", void 0);
+__decorate([state()], TabListItemElement.prototype, "_hasToolbarContent", void 0);
 TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
 //#endregion
 //#region src/tabs/tab-panel.ts
@@ -25432,6 +25789,7 @@ let TabListElement = class TabListElement extends i {
 		this.orientation = `horizontal`;
 		this.flip = false;
 		this.scrollable = false;
+		this.hideLabels = false;
 		this.dragMode = `off`;
 		this.#items = [];
 		this.#dragState = null;
@@ -25440,6 +25798,7 @@ let TabListElement = class TabListElement extends i {
 			this.updateComplete.then(() => {
 				this.#items = (this.shadowRoot?.querySelector(`slot`))?.assignedElements({ flatten: true }) ?? [];
 				this.#syncIndicatorColors();
+				this.#syncHideLabels();
 			});
 		};
 		this.#onKeyUp = (event) => {
@@ -25581,13 +25940,21 @@ let TabListElement = class TabListElement extends i {
 	#onSlotChange;
 	firstUpdated() {
 		this.updateComplete.then(() => {
-			if (this.#items.length > 0) this.#syncIndicatorColors();
+			if (this.#items.length > 0) {
+				this.#syncIndicatorColors();
+				this.#syncHideLabels();
+			}
 		});
 	}
 	updated(changedProperties) {
 		super.updated(changedProperties);
 		this.classList.toggle(`scrollable`, this.scrollable);
 		if (changedProperties.has(`dragMode`)) this.toggleAttribute(`drag-mode`, this.dragMode !== `off`);
+		if (changedProperties.has(`hideLabels`)) this.#syncHideLabels();
+	}
+	#syncHideLabels() {
+		for (const item of this.#items) if (this.hideLabels) item.setAttribute(`hide-labels`, ``);
+		else item.removeAttribute(`hide-labels`);
 	}
 	#syncIndicatorColors() {
 		for (const item of this.#items) {
@@ -25842,6 +26209,10 @@ let TabListElement = class TabListElement extends i {
     :host(.scrollable) {
       max-height: var(--scroll-max-height);
     }
+    :host([hide-labels]) {
+      display: inline-flex;
+      width: auto;
+    }
     text {
       user-select:none;
     }
@@ -25925,6 +26296,10 @@ let TabListElement = class TabListElement extends i {
 __decorate([property({ type: String })], TabListElement.prototype, "orientation", void 0);
 __decorate([property({ type: Boolean })], TabListElement.prototype, "flip", void 0);
 __decorate([property({ type: Boolean })], TabListElement.prototype, "scrollable", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-labels`
+})], TabListElement.prototype, "hideLabels", void 0);
 __decorate([property({
 	type: String,
 	attribute: `drag-mode`
@@ -26282,7 +26657,7 @@ function drawEventRects(ctx, region, events, trackLayout, selectedIds, tickledId
 		const x = evt.start * ppu;
 		const w = (evt.end - evt.start) * ppu;
 		const y = layout.y + padding;
-		const h = layout.height - 6;
+		const h = layout.height - padding * 2;
 		if (w < 1) continue;
 		const isSelected = selectedIds.has(evt.id);
 		const isTickled = tickledId === evt.id;