@ixfx/components 0.2.5 → 0.2.6

package/bundle/index.js

@@ -7,7 +7,7 @@ import "@clinth/vcanvas";
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
-const t$6 = globalThis, e$8 = t$6.ShadowRoot && (void 0 === t$6.ShadyCSS || t$6.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$3 = Symbol(), o$7 = /* @__PURE__ */ new WeakMap();
+const t$5 = globalThis, e$8 = t$5.ShadowRoot && (void 0 === t$5.ShadyCSS || t$5.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$3 = Symbol(), o$7 = /* @__PURE__ */ new WeakMap();
 var n$5 = class {
 	constructor(t, e, o) {
 		if (this._$cssResult$ = !0, o !== s$3) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -26,7 +26,7 @@ var n$5 = class {
 		return this.cssText;
 	}
 };
-const r$5 = (t) => new n$5("string" == typeof t ? t : t + "", void 0, s$3), i$6 = (t, ...e) => {
+const r$5 = (t) => new n$5("string" == typeof t ? t : t + "", void 0, s$3), i$7 = (t, ...e) => {
 	return new n$5(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;
@@ -35,7 +35,7 @@ const r$5 = (t) => new n$5("string" == typeof t ? t : t + "", void 0, s$3), i$6
 }, S$1 = (s, o) => {
 	if (e$8) s.adoptedStyleSheets = o.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
 	else for (const e of o) {
-		const o = document.createElement("style"), n = t$6.litNonce;
+		const o = document.createElement("style"), n = t$5.litNonce;
 		void 0 !== n && o.setAttribute("nonce", n), o.textContent = e.cssText, s.appendChild(o);
 	}
 }, c$4 = e$8 ? (t) => t : (t) => t instanceof CSSStyleSheet ? ((t) => {
@@ -49,7 +49,7 @@ const r$5 = (t) => new n$5("string" == typeof t ? t : t + "", void 0, s$3), i$6
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
-*/ const { is: i$5, defineProperty: e$7, getOwnPropertyDescriptor: h$2, getOwnPropertyNames: r$4, getOwnPropertySymbols: o$6, getPrototypeOf: n$4 } = Object, a$1 = globalThis, c$3 = a$1.trustedTypes, l$2 = c$3 ? c$3.emptyScript : "", p$2 = a$1.reactiveElementPolyfillSupport, d$2 = (t, s) => t, u$3 = {
+*/ const { is: i$6, defineProperty: e$7, getOwnPropertyDescriptor: h$2, getOwnPropertyNames: r$4, getOwnPropertySymbols: o$6, getPrototypeOf: n$4 } = Object, a$1 = globalThis, c$3 = a$1.trustedTypes, l$2 = c$3 ? c$3.emptyScript : "", p$2 = a$1.reactiveElementPolyfillSupport, d$2 = (t, s) => t, u$3 = {
 	toAttribute(t, s) {
 		switch (s) {
 			case Boolean:
@@ -78,7 +78,7 @@ const r$5 = (t) => new n$5("string" == typeof t ? t : t + "", void 0, s$3), i$6
 		}
 		return i;
 	}
-}, f$2 = (t, s) => !i$5(t, s), b$1 = {
+}, f$2 = (t, s) => !i$6(t, s), b$1 = {
 	attribute: !0,
 	type: String,
 	converter: u$3,
@@ -274,18 +274,17 @@ var y$1 = class extends HTMLElement {
 };
 y$1.elementStyles = [], y$1.shadowRootOptions = { mode: "open" }, y$1[d$2("elementProperties")] = /* @__PURE__ */ new Map(), y$1[d$2("finalized")] = /* @__PURE__ */ new Map(), p$2?.({ ReactiveElement: y$1 }), (a$1.reactiveElementVersions ??= []).push("2.1.2");
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js
+//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js
 /**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
-const t$5 = globalThis, i$4 = (t) => t, s$2 = t$5.trustedTypes, e$6 = s$2 ? s$2.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, h$1 = "$lit$", o$5 = `lit$${Math.random().toFixed(9).slice(2)}$`, n$3 = "?" + o$5, r$3 = `<${n$3}>`, l$1 = document, c$2 = () => l$1.createComment(""), a = (t) => null === t || "object" != typeof t && "function" != typeof t, u$2 = Array.isArray, d$1 = (t) => u$2(t) || "function" == typeof t?.[Symbol.iterator], f$1 = "[ 	\n\f\r]", v$1 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, _ = /-->/g, m$1 = />/g, p$1 = RegExp(`>|${f$1}(?:([^\\s"'>=/]+)(${f$1}*=${f$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"), g = /'/g, $ = /"/g, y = /^(?:script|style|textarea|title)$/i, x = (t) => (i, ...s) => ({
+const t$4 = globalThis, i$5 = (t) => t, s$2 = t$4.trustedTypes, e$6 = s$2 ? s$2.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, h$1 = "$lit$", o$5 = `lit$${Math.random().toFixed(9).slice(2)}$`, n$3 = "?" + o$5, r$3 = `<${n$3}>`, l$1 = document, c$2 = () => l$1.createComment(""), a = (t) => null === t || "object" != typeof t && "function" != typeof t, u$2 = Array.isArray, d$1 = (t) => u$2(t) || "function" == typeof t?.[Symbol.iterator], f$1 = "[ 	\n\f\r]", v$1 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, _ = /-->/g, m$1 = />/g, p$1 = RegExp(`>|${f$1}(?:([^\\s"'>=/]+)(${f$1}*=${f$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"), g = /'/g, $ = /"/g, y = /^(?:script|style|textarea|title)$/i, x = (t) => (i, ...s) => ({
 	_$litType$: t,
 	strings: i,
 	values: s
 }), b = x(1), w = x(2);
-x(3);
 const E = Symbol.for("lit-noChange"), A = Symbol.for("lit-nothing"), C = /* @__PURE__ */ new WeakMap(), P = l$1.createTreeWalker(l$1, 129);
 function V(t, i) {
 	if (!u$2(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
@@ -443,8 +442,8 @@ var k = class k {
 	}
 	_$AR(t = this._$AA.nextSibling, s) {
 		for (this._$AP?.(!1, !0, s); t !== this._$AB;) {
-			const s = i$4(t).nextSibling;
-			i$4(t).remove(), t = s;
+			const s = i$5(t).nextSibling;
+			i$5(t).remove(), t = s;
 		}
 	}
 	setConnected(t) {
@@ -531,8 +530,8 @@ const j$1 = {
 	U: z,
 	B: I,
 	F: Z
-}, B = t$5.litHtmlPolyfillSupport;
-B?.(S, k), (t$5.litHtmlVersions ??= []).push("3.3.2");
+}, B = t$4.litHtmlPolyfillSupport;
+B?.(S, k), (t$4.litHtmlVersions ??= []).push("3.3.3");
 const D = (t, i, s) => {
 	const e = s?.renderBefore ?? i;
 	let h = e._$litPart$;
@@ -549,7 +548,7 @@ const D = (t, i, s) => {
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */ const s$1 = globalThis;
-var i$3 = class extends y$1 {
+var i$4 = class extends y$1 {
 	constructor() {
 		super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
 	}
@@ -571,23 +570,11 @@ var i$3 = class extends y$1 {
 		return E;
 	}
 };
-i$3._$litElement$ = !0, i$3["finalized"] = !0, s$1.litElementHydrateSupport?.({ LitElement: i$3 });
+i$4._$litElement$ = !0, i$4["finalized"] = !0, s$1.litElementHydrateSupport?.({ LitElement: i$4 });
 const o$4 = s$1.litElementPolyfillSupport;
-o$4?.({ LitElement: i$3 });
+o$4?.({ LitElement: i$4 });
 (s$1.litElementVersions ??= []).push("4.2.2");
 //#endregion
-//#region node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/custom-element.js
-/**
-* @license
-* Copyright 2017 Google LLC
-* SPDX-License-Identifier: BSD-3-Clause
-*/
-const t$4 = (t) => (e, o) => {
-	void 0 !== o ? o.addInitializer(() => {
-		customElements.define(t, e);
-	}) : customElements.define(t, e);
-};
-//#endregion
 //#region node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js
 /**
 * @license
@@ -1018,7 +1005,7 @@ var TickledController = class TickledController {
 * }
 * ```
 */
-const tickledStyles = i$6`
+const tickledStyles = i$7`
   /**
    * No suppression needed - tickled styling is always active.
    */
@@ -1030,7 +1017,7 @@ const tickledStyles = i$6`
 * Components should import this in addition to `tickledStyles` and can override
 * CSS variables to customize appearance.
 */
-const tickledItemStyles = i$6`
+const tickledItemStyles = i$7`
   :host {
     --item-bg: transparent;
     --item-bg-tickled: rgba(0, 0, 0, 0.06);
@@ -1080,7 +1067,7 @@ const tickledItemStyles = i$6`
   }
 `;
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directive.js
+//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directive.js
 /**
 * @license
 * Copyright 2017 Google LLC
@@ -1097,7 +1084,7 @@ const t$2 = {
 	_$litDirective$: t,
 	values: e
 });
-var i$2 = class {
+var i$3 = class {
 	constructor(t) {}
 	get _$AU() {
 		return this._$AM._$AU;
@@ -1113,12 +1100,12 @@ var i$2 = class {
 	}
 };
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/style-map.js
+//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/style-map.js
 /**
 * @license
 * Copyright 2018 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
-*/ const n$1 = "important", i$1 = " !" + n$1, o$1 = e$3(class extends i$2 {
+*/ const n$1 = "important", i$2 = " !" + n$1, o$1 = e$3(class extends i$3 {
 	constructor(t) {
 		if (super(t), t.type !== t$2.ATTRIBUTE || "style" !== t.name || t.strings?.length > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
 	}
@@ -1136,7 +1123,7 @@ var i$2 = class {
 			const e = r[t];
 			if (null != e) {
 				this.ft.add(t);
-				const r = "string" == typeof e && e.endsWith(i$1);
+				const r = "string" == typeof e && e.endsWith(i$2);
 				t.includes("-") || r ? s.setProperty(t, r ? e.slice(0, -11) : e, r ? n$1 : "") : s[t] = e;
 			}
 		}
@@ -1144,12 +1131,12 @@ var i$2 = class {
 	}
 });
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/unsafe-html.js
+//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/unsafe-html.js
 /**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
-*/ var e$2 = class extends i$2 {
+*/ var e$2 = class extends i$3 {
 	constructor(i) {
 		if (super(i), this.it = A, i.type !== t$2.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
 	}
@@ -1188,7 +1175,21 @@ function svgToDataUri(svg) {
 	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.127.0/helpers/decorate.js
+//#region src/util/custom-elements.ts
+const getRegistry = () => {
+	if (typeof customElements === `undefined`) return void 0;
+	return customElements;
+};
+const safeDefine = (name, ctor) => {
+	const registry = getRegistry();
+	if (!registry) return;
+	if (registry.get(name) === void 0) registry.define(name, ctor);
+};
+const safeCustomElement = (name) => (ctor) => {
+	safeDefine(name, ctor);
+};
+//#endregion
+//#region \0@oxc-project+runtime@0.130.0/helpers/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);
@@ -1197,7 +1198,7 @@ function __decorate(decorators, target, key, desc) {
 }
 //#endregion
 //#region src/icons/icon.ts
-let IxfxIconElement = class IxfxIconElement extends i$3 {
+let IxfxIconElement = class IxfxIconElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.name = ``;
@@ -1235,7 +1236,7 @@ let IxfxIconElement = class IxfxIconElement extends i$3 {
 		else this.style.removeProperty(`--rotate`);
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: inline-flex;
       align-items: center;
@@ -1285,7 +1286,7 @@ __decorate([n$2({
 	attribute: "rotate",
 	reflect: true
 })], IxfxIconElement.prototype, "rotate", void 0);
-IxfxIconElement = __decorate([t$4(`ixfx-icon`)], IxfxIconElement);
+IxfxIconElement = __decorate([safeCustomElement(`ixfx-icon`)], IxfxIconElement);
 //#endregion
 //#region src/ac-text/ac-text.ts
 const HIGHLIGHT_KEY$1 = `ac-text-highlight`;
@@ -1302,7 +1303,7 @@ function makeLruCache(maxSize) {
 		clear: () => map.clear()
 	};
 }
-let AcTextElement = class AcTextElement extends i$3 {
+let AcTextElement = class AcTextElement extends i$4 {
 	#cache;
 	#debounceTimer;
 	#abortController;
@@ -1600,7 +1601,7 @@ let AcTextElement = class AcTextElement extends i$3 {
     `;
 	}
 	static {
-		this.styles = [tickledStyles, i$6`
+		this.styles = [tickledStyles, i$7`
     :host {
       display: block;
       position: relative;
@@ -1760,7 +1761,7 @@ __decorate([r$1()], AcTextElement.prototype, "_query", void 0);
 __decorate([r$1()], AcTextElement.prototype, "_results", void 0);
 __decorate([r$1()], AcTextElement.prototype, "_isOpen", void 0);
 __decorate([r$1()], AcTextElement.prototype, "_isLoading", void 0);
-AcTextElement = __decorate([t$4(`ixfx-ac-text`)], AcTextElement);
+AcTextElement = __decorate([safeCustomElement(`ixfx-ac-text`)], AcTextElement);
 //#endregion
 //#region src/icons/defaults.ts
 /**
@@ -1856,7 +1857,7 @@ registerDefaults();
 * - Transition uses `--transition` from the theme (default `0.15s ease-out`).
 * - When disabled, `pointer-events: none` is set and cannot be overridden per-instance.
 */
-const prominenceStyles = i$6`
+const prominenceStyles = i$7`
   :host {
     --prominence-idle-opacity: 0.6;
     --prominence-idle-saturate: 0.4;
@@ -1894,7 +1895,7 @@ const prominenceStyles = i$6`
 `;
 //#endregion
 //#region src/button/button-styles.ts
-const buttonStyles = i$6`
+const buttonStyles = i$7`
   :host {
     display: inline-flex;
     max-width: 100%;
@@ -1969,7 +1970,7 @@ const buttonStyles = i$6`
 `;
 //#endregion
 //#region src/button/button.ts
-let ButtonElement = class ButtonElement extends i$3 {
+let ButtonElement = class ButtonElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.disabled = false;
@@ -2002,10 +2003,10 @@ __decorate([n$2({
 	attribute: `hide-label`,
 	reflect: true
 })], ButtonElement.prototype, "hideLabel", void 0);
-ButtonElement = __decorate([t$4(`ixfx-button`)], ButtonElement);
+ButtonElement = __decorate([safeCustomElement(`ixfx-button`)], ButtonElement);
 //#endregion
 //#region src/button/radio-group.ts
-let RadioGroup = class RadioGroup extends i$3 {
+let RadioGroup = class RadioGroup extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.value = ``;
@@ -2153,7 +2154,7 @@ let RadioGroup = class RadioGroup extends i$3 {
     `;
 	}
 	static {
-		this.styles = [prominenceStyles, i$6`
+		this.styles = [prominenceStyles, i$7`
     :host {
       display: inline-flex;
       min-width: min-content;
@@ -2330,7 +2331,7 @@ __decorate([n$2({
 __decorate([r$1()], RadioGroup.prototype, "_computedItems", void 0);
 __decorate([r$1()], RadioGroup.prototype, "_icons", void 0);
 __decorate([e$4(`slot`)], RadioGroup.prototype, "_slot", void 0);
-RadioGroup = __decorate([t$4(`ixfx-radio-group`)], RadioGroup);
+RadioGroup = __decorate([safeCustomElement(`ixfx-radio-group`)], RadioGroup);
 //#endregion
 //#region src/styles/popup.ts
 /**
@@ -2342,7 +2343,7 @@ RadioGroup = __decorate([t$4(`ixfx-radio-group`)], RadioGroup);
 * Intentionally omitted (remain per-component): positioning, padding,
 * dimensions, z-index, and open/close animations.
 */
-const popupSurfaceStyles = i$6`
+const popupSurfaceStyles = i$7`
   .popup-surface {
     background: var(--surface-5);
     border: 1px solid var(--surface-6);
@@ -2353,7 +2354,7 @@ const popupSurfaceStyles = i$6`
 `;
 //#endregion
 //#region src/menu/menu-container.ts
-let MenuContainer = class MenuContainer extends i$3 {
+let MenuContainer = class MenuContainer extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.tickled = new TickledController(this, {
@@ -2423,7 +2424,7 @@ let MenuContainer = class MenuContainer extends i$3 {
 		this.styles = [
 			popupSurfaceStyles,
 			tickledStyles,
-			i$6`
+			i$7`
     :host {
       display: block;
     }
@@ -2613,11 +2614,11 @@ __decorate([n$2({
 __decorate([n$2({ attribute: false })], MenuContainer.prototype, "registry", void 0);
 __decorate([n$2({ attribute: false })], MenuContainer.prototype, "keyboardManager", void 0);
 __decorate([e$4(`.popover`)], MenuContainer.prototype, "_popover", void 0);
-MenuContainer = __decorate([t$4(`ixfx-menu-container`)], MenuContainer);
+MenuContainer = __decorate([safeCustomElement(`ixfx-menu-container`)], MenuContainer);
 //#endregion
 //#region src/menu/menu-trigger.ts
 var _MenuTrigger;
-let MenuTrigger = class MenuTrigger extends i$3 {
+let MenuTrigger = class MenuTrigger extends i$4 {
 	static {
 		_MenuTrigger = this;
 	}
@@ -2811,7 +2812,7 @@ let MenuTrigger = class MenuTrigger extends i$3 {
 		} catch {}
 	}
 	static {
-		this.styles = [popupSurfaceStyles, i$6`
+		this.styles = [popupSurfaceStyles, i$7`
     :host {
       display: inline-block;
       position: relative;
@@ -2905,10 +2906,10 @@ __decorate([r$1()], MenuTrigger.prototype, "_hasMenu", void 0);
 __decorate([r$1()], MenuTrigger.prototype, "_hasTriggerSlot", void 0);
 __decorate([e$4(`.trigger-btn`)], MenuTrigger.prototype, "_triggerBtn", void 0);
 __decorate([e$4(`.popup`)], MenuTrigger.prototype, "_popup", void 0);
-MenuTrigger = _MenuTrigger = __decorate([t$4(`ixfx-menu-trigger`)], MenuTrigger);
+MenuTrigger = _MenuTrigger = __decorate([safeCustomElement(`ixfx-menu-trigger`)], MenuTrigger);
 //#endregion
 //#region src/menu/menu-item.ts
-let MenuItem = class MenuItem extends i$3 {
+let MenuItem = class MenuItem extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.command = ``;
@@ -3001,7 +3002,7 @@ let MenuItem = class MenuItem extends i$3 {
 		return [...mods, key].join(``);
 	}
 	static {
-		this.styles = [tickledItemStyles, i$6`
+		this.styles = [tickledItemStyles, i$7`
     :host {
       display: block;
     }
@@ -3106,7 +3107,7 @@ __decorate([n$2({ attribute: false })], MenuItem.prototype, "keyboardManager", v
 __decorate([n$2({ attribute: false })], MenuItem.prototype, "submenuPopover", void 0);
 __decorate([r$1()], MenuItem.prototype, "_hasChildren", void 0);
 __decorate([e$4(`slot`)], MenuItem.prototype, "_slot", void 0);
-MenuItem = __decorate([t$4(`ixfx-menu-item`)], MenuItem);
+MenuItem = __decorate([safeCustomElement(`ixfx-menu-item`)], MenuItem);
 //#endregion
 //#region src/button/split-button.ts
 let SplitButton = class SplitButton extends ButtonElement {
@@ -3360,7 +3361,7 @@ let SplitButton = class SplitButton extends ButtonElement {
 		this.styles = [
 			prominenceStyles,
 			buttonStyles,
-			i$6`
+			i$7`
       :host {
         display: inline-flex;
         max-width: 100%;
@@ -3495,7 +3496,7 @@ __decorate([r$1()], SplitButton.prototype, "_switcherItems", void 0);
 __decorate([r$1()], SplitButton.prototype, "_dynamicItems", void 0);
 __decorate([r$1()], SplitButton.prototype, "_loadingItems", void 0);
 __decorate([r$1()], SplitButton.prototype, "_menuHasItems", void 0);
-SplitButton = __decorate([t$4(`ixfx-split-button`)], SplitButton);
+SplitButton = __decorate([safeCustomElement(`ixfx-split-button`)], SplitButton);
 //#endregion
 //#region src/checkbox.ts
 /**
@@ -3533,7 +3534,7 @@ SplitButton = __decorate([t$4(`ixfx-split-button`)], SplitButton);
 *   --label-opacity-unchecked – label opacity when unchecked (default: uses --label-opacity)
 *   --transition-duration – animation duration (default: 0.2s)
 */
-let Checkbox = class Checkbox extends i$3 {
+let Checkbox = class Checkbox extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.checked = false;
@@ -3553,7 +3554,7 @@ let Checkbox = class Checkbox extends i$3 {
 		};
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       /* Box */
       --box-size: 18px;
@@ -3740,7 +3741,7 @@ __decorate([n$2({ type: Boolean })], Checkbox.prototype, "indeterminate", void 0
 __decorate([n$2({ type: String })], Checkbox.prototype, "label", void 0);
 __decorate([n$2({ type: String })], Checkbox.prototype, "name", void 0);
 __decorate([n$2({ type: String })], Checkbox.prototype, "value", void 0);
-Checkbox = __decorate([t$4(`ixfx-checkbox`)], Checkbox);
+Checkbox = __decorate([safeCustomElement(`ixfx-checkbox`)], Checkbox);
 //#endregion
 //#region node_modules/.pnpm/@ixfx+visual@0.56.12/node_modules/@ixfx/visual/dist/chunk-pbuEa-1d.js
 var __defProp$5 = Object.defineProperty;
@@ -17866,7 +17867,7 @@ function applyValue(el, value) {
 }
 //#endregion
 //#region src/mixins/labelled-input-base.ts
-var LabelledInputBase = class extends i$3 {
+var LabelledInputBase = class extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.label = ``;
@@ -18042,7 +18043,7 @@ let LabelledRangeInput = class LabelledRangeInput extends LabelledInputBase {
     `;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: block;
       container-type: size;
@@ -18131,10 +18132,10 @@ __decorate([n$2({
 	type: Number,
 	attribute: `switch-height`
 })], LabelledRangeInput.prototype, "switchHeight", void 0);
-LabelledRangeInput = __decorate([t$4(`ixfx-labelled-range-input`)], LabelledRangeInput);
+LabelledRangeInput = __decorate([safeCustomElement(`ixfx-labelled-range-input`)], LabelledRangeInput);
 //#endregion
 //#region src/colour-picker/colour-picker.ts
-let ColourPicker = class ColourPicker extends i$3 {
+let ColourPicker = class ColourPicker extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.l = .7;
@@ -18450,7 +18451,7 @@ let ColourPicker = class ColourPicker extends i$3 {
 		}));
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     /*
      * Default intrinsic size — not determined by label text.
      * Override via CSS: ixfx-colour-picker { width: 100%; height: 200px; }
@@ -18650,7 +18651,7 @@ __decorate([e$4(`#slider-c`)], ColourPicker.prototype, "_sliderC", void 0);
 __decorate([e$4(`#slider-h`)], ColourPicker.prototype, "_sliderH", void 0);
 __decorate([e$4(`#slider-a`)], ColourPicker.prototype, "_sliderA", void 0);
 __decorate([e$4(`.preview`)], ColourPicker.prototype, "_previewEl", void 0);
-ColourPicker = __decorate([t$4(`ixfx-colour-picker`)], ColourPicker);
+ColourPicker = __decorate([safeCustomElement(`ixfx-colour-picker`)], ColourPicker);
 //#endregion
 //#region src/colour-picker/colour-picker-popup.ts
 let _instanceCounter = 0;
@@ -18682,7 +18683,7 @@ function swatchBackground(l, c, h, a) {
     `;
 	return oklchToCss(l, c, h);
 }
-let ColourPickerPopup = class ColourPickerPopup extends i$3 {
+let ColourPickerPopup = class ColourPickerPopup extends i$4 {
 	constructor() {
 		super();
 		this.mode = `fluid`;
@@ -18886,7 +18887,7 @@ let ColourPickerPopup = class ColourPickerPopup extends i$3 {
     `;
 	}
 	static {
-		this.styles = [popupSurfaceStyles, i$6`
+		this.styles = [popupSurfaceStyles, i$7`
     :host {
       display: inline-block;
     }
@@ -19022,7 +19023,7 @@ __decorate([r$1()], ColourPickerPopup.prototype, "_isOpen", void 0);
 __decorate([r$1()], ColourPickerPopup.prototype, "_everOpened", void 0);
 __decorate([e$4(`.popup`)], ColourPickerPopup.prototype, "_popupEl", void 0);
 __decorate([e$4(`ixfx-colour-picker`)], ColourPickerPopup.prototype, "_pickerEl", void 0);
-ColourPickerPopup = __decorate([t$4(`ixfx-colour-picker-popup`)], ColourPickerPopup);
+ColourPickerPopup = __decorate([safeCustomElement(`ixfx-colour-picker-popup`)], ColourPickerPopup);
 //#endregion
 //#region src/common/tree-data-model.ts
 function findNode(root, key) {
@@ -19243,6 +19244,37 @@ function createFuzzySearch(items, options = {}) {
 	};
 }
 //#endregion
+//#region src/incr-search/ac-adapter.ts
+/**
+* Creates an ixfx-ac-text-compatible `completionProvider` function from a
+* static item list. Uses synchronous fuzzy search wrapped in a Promise so it
+* fits the async provider signature.
+*
+* Each returned item has `positions` populated with matched character indices,
+* which `ixfx-ac-text` uses to render CSS Custom Highlights on the label.
+*
+* Empty query returns all items in original order (no positions).
+* A cancelled signal causes the returned promise to reject with an AbortError.
+*/
+function createAcCompletionProvider(items, options = {}) {
+	const fuzzy = createFuzzySearch(items, { selector: options.selector ?? ((item) => item.label) });
+	return (query, signal) => new Promise((resolve, reject) => {
+		if (signal.aborted) {
+			reject(new DOMException(`Aborted`, `AbortError`));
+			return;
+		}
+		const results = fuzzy.find(query).map((r) => ({
+			...r.item,
+			positions: r.positions
+		}));
+		if (signal.aborted) {
+			reject(new DOMException(`Aborted`, `AbortError`));
+			return;
+		}
+		resolve(results);
+	});
+}
+//#endregion
 //#region src/incr-search/incr-search.ts
 const buildState = (results, query) => {
 	const positionsByItem = /* @__PURE__ */ new Map();
@@ -19311,113 +19343,6 @@ function createIncrSearch(options = {}) {
 	};
 }
 //#endregion
-//#region src/incr-search/element-search.ts
-const defaultGetLabel = (el) => el.textContent?.trim() ?? ``;
-const defaultGetKey = (el) => el.getAttribute(`data-key`) ?? el.getAttribute(`data-value`) ?? el.textContent?.trim() ?? ``;
-function createElementIncrSearch(opts) {
-	const { container, itemSelector, getLabel = defaultGetLabel, getKey = defaultGetKey, labelSelector, highlightKey } = opts;
-	let elementByKey = /* @__PURE__ */ new Map();
-	const search = createIncrSearch({
-		selector: (item) => item.label,
-		fzf: opts.fzf
-	});
-	const updateVisibility = (state) => {
-		const matchedKeys = new Set(state.results.map((r) => r.item.key));
-		const hasQuery = state.query.trim().length > 0;
-		for (const [key, el] of elementByKey) el.hidden = hasQuery ? !matchedKeys.has(key) : false;
-	};
-	const updateHighlights = (state) => {
-		if (!state.query.trim()) {
-			clearHighlights({ key: highlightKey });
-			return;
-		}
-		applyHighlights(buildHighlightTargets(container, labelSelector ?? itemSelector, state.positionsByItem, (el) => {
-			const key = getKey(el);
-			return state.results.find((r) => r.item.key === key)?.item;
-		}, (el) => getLabel(el)), { key: highlightKey });
-	};
-	const unsubscribeState = search.onChange((state) => {
-		updateVisibility(state);
-		updateHighlights(state);
-		opts.onChange?.(state);
-	});
-	let refreshPending = false;
-	const refresh = () => {
-		if (refreshPending) return;
-		refreshPending = true;
-		Promise.resolve().then(() => {
-			refreshPending = false;
-			elementByKey = /* @__PURE__ */ new Map();
-			const els = container.querySelectorAll(itemSelector);
-			const items = [];
-			for (const el of els) {
-				const key = getKey(el);
-				elementByKey.set(key, el);
-				items.push({
-					key,
-					label: getLabel(el)
-				});
-			}
-			search.setItems(items);
-		});
-	};
-	const observer = new MutationObserver(() => refresh());
-	observer.observe(container, {
-		childList: true,
-		subtree: false
-	});
-	refresh();
-	return {
-		async setQuery(query, signal) {
-			await search.setQuery(query, signal);
-		},
-		async clearQuery() {
-			await search.clearQuery();
-		},
-		refresh,
-		onChange(cb) {
-			return search.onChange(cb);
-		},
-		dispose() {
-			observer.disconnect();
-			unsubscribeState();
-			search.dispose();
-			clearHighlights({ key: highlightKey });
-		}
-	};
-}
-//#endregion
-//#region src/incr-search/ac-adapter.ts
-/**
-* Creates an ixfx-ac-text-compatible `completionProvider` function from a
-* static item list. Uses synchronous fuzzy search wrapped in a Promise so it
-* fits the async provider signature.
-*
-* Each returned item has `positions` populated with matched character indices,
-* which `ixfx-ac-text` uses to render CSS Custom Highlights on the label.
-*
-* Empty query returns all items in original order (no positions).
-* A cancelled signal causes the returned promise to reject with an AbortError.
-*/
-function createAcCompletionProvider(items, options = {}) {
-	const fuzzy = createFuzzySearch(items, { selector: options.selector ?? ((item) => item.label) });
-	return (query, signal) => new Promise((resolve, reject) => {
-		if (signal.aborted) {
-			reject(new DOMException(`Aborted`, `AbortError`));
-			return;
-		}
-		const results = fuzzy.find(query).map((r) => ({
-			...r.item,
-			positions: r.positions
-		}));
-		if (signal.aborted) {
-			reject(new DOMException(`Aborted`, `AbortError`));
-			return;
-		}
-		resolve(results);
-	});
-}
-//#endregion
 //#region src/incr-search/controller-tree.ts
 const DEFAULT_HIGHLIGHT_KEY = `incr-search-highlight`;
 /**
@@ -19517,9 +19442,85 @@ var IncrSearchTreeController = class {
 	}
 };
 //#endregion
+//#region src/incr-search/element-search.ts
+const defaultGetLabel = (el) => el.textContent?.trim() ?? ``;
+const defaultGetKey = (el) => el.getAttribute(`data-key`) ?? el.getAttribute(`data-value`) ?? el.textContent?.trim() ?? ``;
+function createElementIncrSearch(opts) {
+	const { container, itemSelector, getLabel = defaultGetLabel, getKey = defaultGetKey, labelSelector, highlightKey } = opts;
+	let elementByKey = /* @__PURE__ */ new Map();
+	const search = createIncrSearch({
+		selector: (item) => item.label,
+		fzf: opts.fzf
+	});
+	const updateVisibility = (state) => {
+		const matchedKeys = new Set(state.results.map((r) => r.item.key));
+		const hasQuery = state.query.trim().length > 0;
+		for (const [key, el] of elementByKey) el.hidden = hasQuery ? !matchedKeys.has(key) : false;
+	};
+	const updateHighlights = (state) => {
+		if (!state.query.trim()) {
+			clearHighlights({ key: highlightKey });
+			return;
+		}
+		applyHighlights(buildHighlightTargets(container, labelSelector ?? itemSelector, state.positionsByItem, (el) => {
+			const key = getKey(el);
+			return state.results.find((r) => r.item.key === key)?.item;
+		}, (el) => getLabel(el)), { key: highlightKey });
+	};
+	const unsubscribeState = search.onChange((state) => {
+		updateVisibility(state);
+		updateHighlights(state);
+		opts.onChange?.(state);
+	});
+	let refreshPending = false;
+	const refresh = () => {
+		if (refreshPending) return;
+		refreshPending = true;
+		Promise.resolve().then(() => {
+			refreshPending = false;
+			elementByKey = /* @__PURE__ */ new Map();
+			const els = container.querySelectorAll(itemSelector);
+			const items = [];
+			for (const el of els) {
+				const key = getKey(el);
+				elementByKey.set(key, el);
+				items.push({
+					key,
+					label: getLabel(el)
+				});
+			}
+			search.setItems(items);
+		});
+	};
+	const observer = new MutationObserver(() => refresh());
+	observer.observe(container, {
+		childList: true,
+		subtree: false
+	});
+	refresh();
+	return {
+		async setQuery(query, signal) {
+			await search.setQuery(query, signal);
+		},
+		async clearQuery() {
+			await search.clearQuery();
+		},
+		refresh,
+		onChange(cb) {
+			return search.onChange(cb);
+		},
+		dispose() {
+			observer.disconnect();
+			unsubscribeState();
+			search.dispose();
+			clearHighlights({ key: highlightKey });
+		}
+	};
+}
+//#endregion
 //#region src/narrowed-text/narrowed-text.ts
 const HIGHLIGHT_KEY = `narrowed-text-highlight`;
-let NarrowedTextElement = class NarrowedTextElement extends i$3 {
+let NarrowedTextElement = class NarrowedTextElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.selectionMode = `single`;
@@ -19896,7 +19897,7 @@ let NarrowedTextElement = class NarrowedTextElement extends i$3 {
 		this.styles = [
 			tickledStyles,
 			tickledItemStyles,
-			i$6`
+			i$7`
     :host {
       display: inline-block;
       position: relative;
@@ -20076,10 +20077,10 @@ __decorate([r$1()], NarrowedTextElement.prototype, "_computedItems", void 0);
 __decorate([r$1()], NarrowedTextElement.prototype, "_filteredItems", void 0);
 __decorate([r$1()], NarrowedTextElement.prototype, "_isFocused", void 0);
 __decorate([e$4(`slot`)], NarrowedTextElement.prototype, "_slot", void 0);
-NarrowedTextElement = __decorate([t$4(`ixfx-narrowed-text`)], NarrowedTextElement);
+NarrowedTextElement = __decorate([safeCustomElement(`ixfx-narrowed-text`)], NarrowedTextElement);
 //#endregion
 //#region src/crumbs/crumb-navigation.ts
-let CrumbNavigationElement = class CrumbNavigationElement extends i$3 {
+let CrumbNavigationElement = class CrumbNavigationElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this._selectedNodes = /* @__PURE__ */ new Set();
@@ -20678,7 +20679,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i$3 {
 		this.styles = [
 			tickledStyles,
 			tickledItemStyles,
-			i$6`
+			i$7`
     :host {
       --text-highlight: var(--accent);
       --separator: var(--surface-muted-text);
@@ -20855,7 +20856,7 @@ __decorate([n$2({
 	reflect: true,
 	attribute: "input-mode"
 })], CrumbNavigationElement.prototype, "inputMode", void 0);
-CrumbNavigationElement = __decorate([t$4(`ixfx-crumb-navigation`)], CrumbNavigationElement);
+CrumbNavigationElement = __decorate([safeCustomElement(`ixfx-crumb-navigation`)], CrumbNavigationElement);
 //#endregion
 //#region src/crumbs/crumb-path-controller.ts
 var CrumbPathController = class {
@@ -20922,7 +20923,7 @@ var CrumbPathController = class {
 //#endregion
 //#region src/crumbs/crumb-path.ts
 const INVALID_ANCHOR_CHARS_RE = /[^\w-]/g;
-let CrumbPathElement = class CrumbPathElement extends i$3 {
+let CrumbPathElement = class CrumbPathElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.path = ``;
@@ -21011,7 +21012,7 @@ let CrumbPathElement = class CrumbPathElement extends i$3 {
 	updated(changedProperties) {
 		if (this._editing) {
 			const el = this.shadowRoot?.querySelector(`ixfx-ac-text`);
-			if (el instanceof i$3) {
+			if (el instanceof i$4) {
 				const editValue = this.path;
 				if (this._editStartIndex !== null) {
 					const segmentLabel = this.#getSegments()[this._editStartIndex];
@@ -21350,7 +21351,7 @@ let CrumbPathElement = class CrumbPathElement extends i$3 {
     `;
 	}
 	static {
-		this.styles = [popupSurfaceStyles, i$6`
+		this.styles = [popupSurfaceStyles, i$7`
     :host {
       --text-highlight: var(--accent);
       --separator: var(--surface-muted-text);
@@ -21540,16 +21541,16 @@ __decorate([r$1()], CrumbPathElement.prototype, "_dropdownActiveIndex", void 0);
 __decorate([r$1()], CrumbPathElement.prototype, "_editingCancelled", void 0);
 __decorate([r$1()], CrumbPathElement.prototype, "_editStartIndex", void 0);
 __decorate([r$1()], CrumbPathElement.prototype, "_openCumPath", void 0);
-CrumbPathElement = __decorate([t$4(`ixfx-crumb-path`)], CrumbPathElement);
+CrumbPathElement = __decorate([safeCustomElement(`ixfx-crumb-path`)], CrumbPathElement);
 //#endregion
 //#region src/data-display.ts
 var _DataDisplayComponent;
-let DataDisplayComponent = class DataDisplayComponent extends i$3 {
+let DataDisplayComponent = class DataDisplayComponent extends i$4 {
 	static {
 		_DataDisplayComponent = this;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: block;
     }
@@ -21633,10 +21634,10 @@ let DataDisplayComponent = class DataDisplayComponent extends i$3 {
 		this.previousValue = value;
 	}
 };
-DataDisplayComponent = _DataDisplayComponent = __decorate([t$4(`ixfx-data-display`)], DataDisplayComponent);
+DataDisplayComponent = _DataDisplayComponent = __decorate([safeCustomElement(`ixfx-data-display`)], DataDisplayComponent);
 //#endregion
 //#region src/editable-label/editable-label.ts
-let EditableLabel = class EditableLabel extends i$3 {
+let EditableLabel = class EditableLabel extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.mode = `label`;
@@ -21796,7 +21797,7 @@ let EditableLabel = class EditableLabel extends i$3 {
 		}
 	}
 	static {
-		this.styles = [i$6`
+		this.styles = [i$7`
     :host {
       display: inline-flex;
       align-items: center;
@@ -21906,7 +21907,7 @@ __decorate([n$2({
 __decorate([n$2({ attribute: false })], EditableLabel.prototype, "validator", void 0);
 __decorate([n$2({ attribute: false })], EditableLabel.prototype, "formatter", void 0);
 __decorate([r$1()], EditableLabel.prototype, "_editing", void 0);
-EditableLabel = __decorate([t$4(`ixfx-editable-label`)], EditableLabel);
+EditableLabel = __decorate([safeCustomElement(`ixfx-editable-label`)], EditableLabel);
 //#endregion
 //#region src/keyboard.ts
 /**
@@ -22326,7 +22327,7 @@ let EditableNumber = class EditableNumber extends EditableLabel {
 		this.styles = [
 			prominenceStyles,
 			...EditableLabel.styles,
-			i$6`
+			i$7`
     :host {
       font-size: var(--text-s,11px);
       --value: 0;
@@ -22501,14 +22502,14 @@ __decorate([n$2({
 	attribute: `no-drag`
 })], EditableNumber.prototype, "noDrag", void 0);
 __decorate([n$2({ type: Number })], EditableNumber.prototype, "precision", void 0);
-EditableNumber = __decorate([t$4(`ixfx-editable-number`)], EditableNumber);
+EditableNumber = __decorate([safeCustomElement(`ixfx-editable-number`)], EditableNumber);
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directive-helpers.js
+//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directive-helpers.js
 /**
 * @license
 * Copyright 2020 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
-*/ const { I: t$1 } = j$1, i = (o) => o, s = () => document.createComment(""), v = (o, n, e) => {
+*/ const { I: t$1 } = j$1, i$1 = (o) => o, s = () => document.createComment(""), v = (o, n, e) => {
 	const l = o._$AA.parentNode, d = void 0 === n ? o._$AB : n._$AA;
 	if (void 0 === e) e = new t$1(l.insertBefore(s(), d), l.insertBefore(s(), d), o, o.options);
 	else {
@@ -22520,8 +22521,8 @@ EditableNumber = __decorate([t$4(`ixfx-editable-number`)], EditableNumber);
 		if (t !== d || c) {
 			let o = e._$AA;
 			for (; o !== t;) {
-				const t = i(o).nextSibling;
-				i(l).insertBefore(o, d), o = t;
+				const t = i$1(o).nextSibling;
+				i$1(l).insertBefore(o, d), o = t;
 			}
 		}
 	}
@@ -22530,7 +22531,7 @@ EditableNumber = __decorate([t$4(`ixfx-editable-number`)], EditableNumber);
 	o._$AR(), o._$AA.remove();
 };
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/repeat.js
+//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/repeat.js
 /**
 * @license
 * Copyright 2017 Google LLC
@@ -22540,7 +22541,7 @@ const u = (e, s, t) => {
 	const r = /* @__PURE__ */ new Map();
 	for (let l = s; l <= t; l++) r.set(e[l], l);
 	return r;
-}, c = e$3(class extends i$2 {
+}, c = e$3(class extends i$3 {
 	constructor(e) {
 		if (super(e), e.type !== t$2.CHILD) throw Error("repeat() can only be used in text expressions");
 	}
@@ -22882,7 +22883,7 @@ const selectionFromPointerRange = (start, end, mode, columns) => {
 };
 //#endregion
 //#region src/hex/hex-editor.ts
-let IxfxHexEditorElement = class IxfxHexEditorElement extends i$3 {
+let IxfxHexEditorElement = class IxfxHexEditorElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.columns = 4;
@@ -23041,7 +23042,7 @@ let IxfxHexEditorElement = class IxfxHexEditorElement extends i$3 {
 		};
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       --hex-row-height: 24px;
       --hex-offset-width: 8ch;
@@ -23726,7 +23727,7 @@ __decorate([r$1()], IxfxHexEditorElement.prototype, "_editState", void 0);
 __decorate([r$1()], IxfxHexEditorElement.prototype, "_containerH", void 0);
 __decorate([r$1()], IxfxHexEditorElement.prototype, "_shadeMap", void 0);
 __decorate([r$1()], IxfxHexEditorElement.prototype, "_focusSide", void 0);
-IxfxHexEditorElement = __decorate([t$4(`ixfx-hex-editor`)], IxfxHexEditorElement);
+IxfxHexEditorElement = __decorate([safeCustomElement(`ixfx-hex-editor`)], IxfxHexEditorElement);
 //#endregion
 //#region src/radial-input/svg-utils.ts
 const PI2 = Math.PI * 2;
@@ -24016,7 +24017,7 @@ const CENTER = {
 	x: 50,
 	y: 50
 };
-let RadialInputElement = class RadialInputElement extends i$3 {
+let RadialInputElement = class RadialInputElement extends i$4 {
 	#_radius;
 	get radius() {
 		return this.#_radius;
@@ -24427,7 +24428,7 @@ let RadialInputElement = class RadialInputElement extends i$3 {
 		if (svg) svg.setAttribute(`viewBox`, `0 0 100 ${viewBoxHeight}`);
 	}
 	static {
-		this.styles = [prominenceStyles, i$6`
+		this.styles = [prominenceStyles, i$7`
     :host {
       display: inline-block;
       width: 100px;
@@ -24567,7 +24568,7 @@ __decorate([n$2({
 	type: Boolean,
 	reflect: true
 })], RadialInputElement.prototype, "disabled", void 0);
-RadialInputElement = __decorate([t$4(`ixfx-radial-input`)], RadialInputElement);
+RadialInputElement = __decorate([safeCustomElement(`ixfx-radial-input`)], RadialInputElement);
 //#endregion
 //#region src/labelled-radial-input/labelled-radial-input.ts
 let LabelledRadialInput = class LabelledRadialInput extends LabelledInputBase {
@@ -24655,7 +24656,7 @@ let LabelledRadialInput = class LabelledRadialInput extends LabelledInputBase {
 		return numValue.toFixed(2);
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
   :host {
     display: block;
     min-height: var(--min-height, 60px);
@@ -24747,10 +24748,10 @@ __decorate([n$2({
 	attribute: `aspect-ratio-threshold`
 })], LabelledRadialInput.prototype, "aspectRatioThreshold", void 0);
 __decorate([r$1()], LabelledRadialInput.prototype, "_isWide", void 0);
-LabelledRadialInput = __decorate([t$4(`ixfx-labelled-radial-input`)], LabelledRadialInput);
+LabelledRadialInput = __decorate([safeCustomElement(`ixfx-labelled-radial-input`)], LabelledRadialInput);
 //#endregion
 //#region src/led.ts
-let LedElement = class LedElement extends i$3 {
+let LedElement = class LedElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.value = 0;
@@ -24796,7 +24797,7 @@ let LedElement = class LedElement extends i$3 {
 		return b`<div part="circle"></div>`;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       --_size: var(--size, 1ex);
       display: inline-block;
@@ -24833,10 +24834,10 @@ __decorate([n$2({
 	type: Number,
 	attribute: `rate`
 })], LedElement.prototype, "rate", void 0);
-LedElement = __decorate([t$4(`ixfx-led`)], LedElement);
+LedElement = __decorate([safeCustomElement(`ixfx-led`)], LedElement);
 //#endregion
 //#region src/menu/menu-bar.ts
-let MenuBar = class MenuBar extends i$3 {
+let MenuBar = class MenuBar extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this._openTrigger = null;
@@ -24899,7 +24900,7 @@ let MenuBar = class MenuBar extends i$3 {
 		return [...this.children].filter((el) => el.tagName === `IXFX-MENU-TRIGGER`);
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: flex;
       align-items: center;
@@ -24916,10 +24917,10 @@ let MenuBar = class MenuBar extends i$3 {
 		return b`<slot role="menubar"></slot>`;
 	}
 };
-MenuBar = __decorate([t$4(`ixfx-menu-bar`)], MenuBar);
+MenuBar = __decorate([safeCustomElement(`ixfx-menu-bar`)], MenuBar);
 //#endregion
 //#region src/menu/menu-check-item.ts
-let MenuCheckItem = class MenuCheckItem extends i$3 {
+let MenuCheckItem = class MenuCheckItem extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.command = ``;
@@ -24975,7 +24976,7 @@ let MenuCheckItem = class MenuCheckItem extends i$3 {
 		return [...mods, key].join(``);
 	}
 	static {
-		this.styles = [tickledItemStyles, i$6`
+		this.styles = [tickledItemStyles, i$7`
     :host {
       display: block;
     }
@@ -25066,7 +25067,7 @@ __decorate([n$2({
 })], MenuCheckItem.prototype, "iconName", void 0);
 __decorate([n$2({ attribute: false })], MenuCheckItem.prototype, "registry", void 0);
 __decorate([n$2({ attribute: false })], MenuCheckItem.prototype, "keyboardManager", void 0);
-MenuCheckItem = __decorate([t$4(`ixfx-menu-check-item`)], MenuCheckItem);
+MenuCheckItem = __decorate([safeCustomElement(`ixfx-menu-check-item`)], MenuCheckItem);
 //#endregion
 //#region src/menu/menu-command-controller.ts
 var MenuCommandController = class {
@@ -25091,13 +25092,13 @@ var MenuCommandController = class {
 };
 //#endregion
 //#region src/menu/menu-header.ts
-let MenuHeader = class MenuHeader extends i$3 {
+let MenuHeader = class MenuHeader extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.label = ``;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: block;
       padding: 6px var(--space-m) var(--space-xs);
@@ -25114,11 +25115,11 @@ let MenuHeader = class MenuHeader extends i$3 {
 	}
 };
 __decorate([n$2({ type: String })], MenuHeader.prototype, "label", void 0);
-MenuHeader = __decorate([t$4(`ixfx-menu-header`)], MenuHeader);
+MenuHeader = __decorate([safeCustomElement(`ixfx-menu-header`)], MenuHeader);
 //#endregion
 //#region src/menu/menu-sub-trigger.ts
 var _MenuSubTrigger;
-let MenuSubTrigger = class MenuSubTrigger extends i$3 {
+let MenuSubTrigger = class MenuSubTrigger extends i$4 {
 	static {
 		_MenuSubTrigger = this;
 	}
@@ -25261,7 +25262,7 @@ let MenuSubTrigger = class MenuSubTrigger extends i$3 {
 		}
 	}
 	static {
-		this.styles = [tickledItemStyles, i$6`
+		this.styles = [tickledItemStyles, i$7`
     :host {
       display: block;
     }
@@ -25371,12 +25372,12 @@ __decorate([r$1()], MenuSubTrigger.prototype, "_hasSubmenu", void 0);
 __decorate([e$4(`slot[name="submenu"]`)], MenuSubTrigger.prototype, "_slot", void 0);
 __decorate([e$4(`.submenu-popover`)], MenuSubTrigger.prototype, "_submenuPopover", void 0);
 __decorate([e$4(`.item`)], MenuSubTrigger.prototype, "_itemEl", void 0);
-MenuSubTrigger = _MenuSubTrigger = __decorate([t$4(`ixfx-menu-sub-trigger`)], MenuSubTrigger);
+MenuSubTrigger = _MenuSubTrigger = __decorate([safeCustomElement(`ixfx-menu-sub-trigger`)], MenuSubTrigger);
 //#endregion
 //#region src/menu/menu-separator.ts
-let MenuSeparator = class MenuSeparator extends i$3 {
+let MenuSeparator = class MenuSeparator extends i$4 {
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: block;
       margin: var(--space-xs) 0;
@@ -25392,7 +25393,7 @@ let MenuSeparator = class MenuSeparator extends i$3 {
 		return b`<div class="separator"></div>`;
 	}
 };
-MenuSeparator = __decorate([t$4(`ixfx-menu-separator`)], MenuSeparator);
+MenuSeparator = __decorate([safeCustomElement(`ixfx-menu-separator`)], MenuSeparator);
 //#endregion
 //#region src/menu/menu-from-tree.ts
 function isLeaf(node) {
@@ -25471,7 +25472,7 @@ function menuFromTreeToElements(nodes, options = {}) {
 }
 //#endregion
 //#region src/menu/menu-radio-item.ts
-let MenuRadioItem = class MenuRadioItem extends i$3 {
+let MenuRadioItem = class MenuRadioItem extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.value = ``;
@@ -25489,7 +25490,7 @@ let MenuRadioItem = class MenuRadioItem extends i$3 {
 		}));
 	}
 	static {
-		this.styles = [tickledItemStyles, i$6`
+		this.styles = [tickledItemStyles, i$7`
     :host {
       display: block;
     }
@@ -25566,10 +25567,10 @@ __decorate([n$2({
 	type: String,
 	attribute: `icon-name`
 })], MenuRadioItem.prototype, "iconName", void 0);
-MenuRadioItem = __decorate([t$4(`ixfx-menu-radio-item`)], MenuRadioItem);
+MenuRadioItem = __decorate([safeCustomElement(`ixfx-menu-radio-item`)], MenuRadioItem);
 //#endregion
 //#region src/menu/menu-radio-group.ts
-let MenuRadioGroup = class MenuRadioGroup extends i$3 {
+let MenuRadioGroup = class MenuRadioGroup extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.name = ``;
@@ -25599,7 +25600,7 @@ let MenuRadioGroup = class MenuRadioGroup extends i$3 {
 		if (changedProperties.has(`value`)) this.updateSlottedValues();
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: block;
     }
@@ -25618,7 +25619,7 @@ let MenuRadioGroup = class MenuRadioGroup extends i$3 {
 __decorate([n$2({ type: String })], MenuRadioGroup.prototype, "name", void 0);
 __decorate([n$2({ type: String })], MenuRadioGroup.prototype, "value", void 0);
 __decorate([r$1()], MenuRadioGroup.prototype, "slottedElements", void 0);
-MenuRadioGroup = __decorate([t$4(`ixfx-menu-radio-group`)], MenuRadioGroup);
+MenuRadioGroup = __decorate([safeCustomElement(`ixfx-menu-radio-group`)], MenuRadioGroup);
 //#endregion
 //#region src/menu/index.ts
 var menu_exports = /* @__PURE__ */ __exportAll$5({
@@ -25639,7 +25640,7 @@ var menu_exports = /* @__PURE__ */ __exportAll$5({
 //#endregion
 //#region src/miller/miller-base.ts
 const EXPAND_DEBOUNCE_MS = 150;
-let MillerBaseElement = class MillerBaseElement extends i$3 {
+let MillerBaseElement = class MillerBaseElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.headers = false;
@@ -26555,7 +26556,7 @@ let MillerBaseElement = class MillerBaseElement extends i$3 {
 		this.tickled.handlePointerLeave(new PointerEvent("pointerleave"));
 	}
 	static {
-		this.styles = [tickledStyles, i$6`
+		this.styles = [tickledStyles, i$7`
     :host {
       --column-bg: var(--surface-3);
       --column-header-bg: var(--surface-2);
@@ -26685,7 +26686,7 @@ __decorate([n$2({ attribute: false })], MillerBaseElement.prototype, "filterPred
 __decorate([r$1()], MillerBaseElement.prototype, "_columns", void 0);
 __decorate([r$1()], MillerBaseElement.prototype, "_loadingDepth", void 0);
 __decorate([r$1()], MillerBaseElement.prototype, "_selectedNodes", void 0);
-MillerBaseElement = __decorate([t$4(`ixfx-miller-base`)], MillerBaseElement);
+MillerBaseElement = __decorate([safeCustomElement(`ixfx-miller-base`)], MillerBaseElement);
 //#endregion
 //#region src/miller/miller-list.ts
 /**
@@ -26765,7 +26766,7 @@ let MillerListElement = class MillerListElement extends MillerBaseElement {
 		this.styles = [
 			...MillerBaseElement.styles,
 			tickledItemStyles,
-			i$6`
+			i$7`
       .item-list {
         list-style: none;
         margin: 0;
@@ -26846,7 +26847,7 @@ let MillerListElement = class MillerListElement extends MillerBaseElement {
 		];
 	}
 };
-MillerListElement = __decorate([t$4(`ixfx-miller-list`)], MillerListElement);
+MillerListElement = __decorate([safeCustomElement(`ixfx-miller-list`)], MillerListElement);
 //#endregion
 //#region src/miller/miller-tree-controller.ts
 /**
@@ -26973,7 +26974,7 @@ var MillerTreeController = class {
 };
 //#endregion
 //#region src/panel/panel-group.ts
-let PanelGroupElement = class PanelGroupElement extends i$3 {
+let PanelGroupElement = class PanelGroupElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.orientation = `horizontal`;
@@ -27015,7 +27016,7 @@ let PanelGroupElement = class PanelGroupElement extends i$3 {
     `;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: flex;
       flex-direction: column;
@@ -27058,10 +27059,10 @@ __decorate([n$2({
 })], PanelGroupElement.prototype, "allowMultiple", void 0);
 __decorate([n$2()], PanelGroupElement.prototype, "gap", void 0);
 __decorate([o$2({ slot: `` })], PanelGroupElement.prototype, "_panels", void 0);
-PanelGroupElement = __decorate([t$4(`ixfx-panel-group`)], PanelGroupElement);
+PanelGroupElement = __decorate([safeCustomElement(`ixfx-panel-group`)], PanelGroupElement);
 //#endregion
 //#region src/panel/panel.ts
-let PanelElement = class PanelElement extends i$3 {
+let PanelElement = class PanelElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.collapsed = false;
@@ -27144,7 +27145,7 @@ let PanelElement = class PanelElement extends i$3 {
     `;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: flex;
       flex-direction: column;
@@ -27459,7 +27460,7 @@ __decorate([n$2({
 	reflect: true
 })], PanelElement.prototype, "variant", void 0);
 __decorate([r$1()], PanelElement.prototype, "_isVertical", void 0);
-PanelElement = __decorate([t$4(`ixfx-panel`)], PanelElement);
+PanelElement = __decorate([safeCustomElement(`ixfx-panel`)], PanelElement);
 //#endregion
 //#region node_modules/.pnpm/@ixfx+modulation@0.56.12/node_modules/@ixfx/modulation/dist/chunk-pbuEa-1d.js
 var __defProp = Object.defineProperty;
@@ -28233,7 +28234,7 @@ function renderHistMiddle(points, crs, barW, mid, ageStyle) {
     />`;
 	});
 }
-let PlotSingleAxis = class PlotSingleAxis extends i$3 {
+let PlotSingleAxis = class PlotSingleAxis extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.drawStyle = `line-sharp`;
@@ -28458,7 +28459,7 @@ let PlotSingleAxis = class PlotSingleAxis extends i$3 {
     `;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: inline-block;
       width: 100%;
@@ -28510,10 +28511,10 @@ __decorate([n$2({ attribute: `color-easing` })], PlotSingleAxis.prototype, "colo
 __decorate([n$2({ attribute: `color-scale` })], PlotSingleAxis.prototype, "colorScale", void 0);
 __decorate([r$1()], PlotSingleAxis.prototype, "_width", void 0);
 __decorate([r$1()], PlotSingleAxis.prototype, "_height", void 0);
-PlotSingleAxis = __decorate([t$4(`ixfx-plot-single-axis`)], PlotSingleAxis);
+PlotSingleAxis = __decorate([safeCustomElement(`ixfx-plot-single-axis`)], PlotSingleAxis);
 //#endregion
 //#region src/plots/xy-axis.ts
-let PlotXyAxis = class PlotXyAxis extends i$3 {
+let PlotXyAxis = class PlotXyAxis extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.drawStyle = `circles`;
@@ -28734,7 +28735,7 @@ let PlotXyAxis = class PlotXyAxis extends i$3 {
     `;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: block;
       width: 100%;
@@ -28780,7 +28781,7 @@ __decorate([n$2({ attribute: `color-easing` })], PlotXyAxis.prototype, "colorEas
 __decorate([n$2({ attribute: `color-scale` })], PlotXyAxis.prototype, "colorScale", void 0);
 __decorate([r$1()], PlotXyAxis.prototype, "_width", void 0);
 __decorate([r$1()], PlotXyAxis.prototype, "_height", void 0);
-PlotXyAxis = __decorate([t$4(`ixfx-plot-xy-axis`)], PlotXyAxis);
+PlotXyAxis = __decorate([safeCustomElement(`ixfx-plot-xy-axis`)], PlotXyAxis);
 //#endregion
 //#region src/polar-pad/polar-pad.ts
 /**
@@ -28914,7 +28915,7 @@ function quantiseRadius(radius, stops) {
 	const step = 1 / stops;
 	return Math.round(radius / step) * step;
 }
-let PolarPad = class PolarPad extends i$3 {
+let PolarPad = class PolarPad extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.angle = 0;
@@ -29022,7 +29023,7 @@ let PolarPad = class PolarPad extends i$3 {
 		this._uid = Math.random().toString(36).slice(2, 8);
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: block;
       width: 200px;
@@ -29311,10 +29312,10 @@ __decorate([n$2({
 	type: Number,
 	attribute: `stops-radius`
 })], PolarPad.prototype, "stopsRadius", void 0);
-PolarPad = __decorate([t$4(`ixfx-polar-pad`)], PolarPad);
+PolarPad = __decorate([safeCustomElement(`ixfx-polar-pad`)], PolarPad);
 //#endregion
 //#region src/styles/tooltip.ts
-const tooltipValueStyles = i$6`
+const tooltipValueStyles = i$7`
 
   output.tooltip {
     user-select: none;
@@ -29417,7 +29418,7 @@ const tooltipValueStyles = i$6`
 function normalize(value, min, max) {
 	return max === min ? 0 : (value - min) / (max - min);
 }
-let RangeInput = class RangeInput extends i$3 {
+let RangeInput = class RangeInput extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.min = 0;
@@ -29560,7 +29561,7 @@ let RangeInput = class RangeInput extends i$3 {
     `;
 	}
 	static {
-		this.styles = [tooltipValueStyles, i$6`
+		this.styles = [tooltipValueStyles, i$7`
     :host {
       display: block;
       container-type: size;
@@ -29863,7 +29864,7 @@ __decorate([n$2({
 __decorate([n$2({ attribute: false })], RangeInput.prototype, "labelFormatter", void 0);
 __decorate([e$4(`input`)], RangeInput.prototype, "_inputEl", void 0);
 __decorate([e$4(`ixfx-tooltip`)], RangeInput.prototype, "_tooltipEl", void 0);
-RangeInput = __decorate([t$4(`ixfx-range-input`)], RangeInput);
+RangeInput = __decorate([safeCustomElement(`ixfx-range-input`)], RangeInput);
 //#endregion
 //#region src/util/drag.ts
 function getCoordinates(event) {
@@ -29900,7 +29901,7 @@ function near(target, range) {
 }
 //#endregion
 //#region src/range/range-multi.ts
-let RangeMultiElement = class RangeMultiElement extends i$3 {
+let RangeMultiElement = class RangeMultiElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.tooltip = true;
@@ -30206,7 +30207,7 @@ let RangeMultiElement = class RangeMultiElement extends i$3 {
 		this.styles = [
 			tooltipValueStyles,
 			prominenceStyles,
-			i$6`
+			i$7`
     :host {
       display: grid;
       --value-label-color: unset;
@@ -30376,10 +30377,10 @@ __decorate([n$2({ type: Number })], RangeMultiElement.prototype, "max", null);
 __decorate([n$2({ type: Number })], RangeMultiElement.prototype, "min", null);
 __decorate([t$3({ capture: true })], RangeMultiElement.prototype, "_onInput", null);
 __decorate([t$3({ capture: true })], RangeMultiElement.prototype, "_onPointerDown", null);
-RangeMultiElement = __decorate([t$4(`ixfx-range-multi`)], RangeMultiElement);
+RangeMultiElement = __decorate([safeCustomElement(`ixfx-range-multi`)], RangeMultiElement);
 //#endregion
 //#region src/range/range.ts
-let RangeElement = class RangeElement extends i$3 {
+let RangeElement = class RangeElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.tooltip = true;
@@ -30424,7 +30425,7 @@ let RangeElement = class RangeElement extends i$3 {
 		this.styles = [
 			prominenceStyles,
 			tooltipValueStyles,
-			i$6`
+			i$7`
     :host {
       display: inline-block;
       --value-label-color: unset;
@@ -30504,10 +30505,10 @@ __decorate([n$2({ type: Number })], RangeElement.prototype, "min", void 0);
 __decorate([n$2({ type: Number })], RangeElement.prototype, "max", void 0);
 __decorate([n$2({ type: Number })], RangeElement.prototype, "value", null);
 __decorate([n$2({ type: Number })], RangeElement.prototype, "step", void 0);
-RangeElement = __decorate([t$4(`ixfx-range`)], RangeElement);
+RangeElement = __decorate([safeCustomElement(`ixfx-range`)], RangeElement);
 //#endregion
 //#region src/selecthorizontal.ts
-let SelectHorizontalElement = class SelectHorizontalElement extends i$3 {
+let SelectHorizontalElement = class SelectHorizontalElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.editMode = false;
@@ -30521,7 +30522,7 @@ let SelectHorizontalElement = class SelectHorizontalElement extends i$3 {
     `;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
   :host {
     display: flex;
     overflow: scroll;
@@ -30540,10 +30541,10 @@ let SelectHorizontalElement = class SelectHorizontalElement extends i$3 {
 	}
 };
 __decorate([n$2({ type: Boolean })], SelectHorizontalElement.prototype, "editMode", void 0);
-SelectHorizontalElement = __decorate([t$4(`ixfx-selecthorizontal-element`)], SelectHorizontalElement);
+SelectHorizontalElement = __decorate([safeCustomElement(`ixfx-selecthorizontal-element`)], SelectHorizontalElement);
 //#endregion
 //#region src/snap-container/snap-container.ts
-let SnapContainer = class SnapContainer extends i$3 {
+let SnapContainer = class SnapContainer extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.orientation = `horizontal`;
@@ -30659,7 +30660,7 @@ let SnapContainer = class SnapContainer extends i$3 {
 		};
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: block;
       position: relative;
@@ -30831,10 +30832,10 @@ __decorate([n$2({
 })], SnapContainer.prototype, "clickSnap", void 0);
 __decorate([n$2({ type: Number })], SnapContainer.prototype, "snap", void 0);
 __decorate([r$1()], SnapContainer.prototype, "_dragging", void 0);
-SnapContainer = __decorate([t$4(`ixfx-snap-container`)], SnapContainer);
+SnapContainer = __decorate([safeCustomElement(`ixfx-snap-container`)], SnapContainer);
 //#endregion
 //#region src/split-layout/split-layout.ts
-let SplitLayoutElement = class SplitLayoutElement extends i$3 {
+let SplitLayoutElement = class SplitLayoutElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.layout = `vertical`;
@@ -31265,7 +31266,7 @@ let SplitLayoutElement = class SplitLayoutElement extends i$3 {
     </div>`;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       --handle-size: 2px;
       --handle-colour: var(--surface-5);
@@ -31369,10 +31370,10 @@ __decorate([n$2({ type: String })], SplitLayoutElement.prototype, "maxSizeA", vo
 __decorate([n$2({ type: String })], SplitLayoutElement.prototype, "minSizeB", void 0);
 __decorate([n$2({ type: String })], SplitLayoutElement.prototype, "maxSizeB", void 0);
 __decorate([r$1()], SplitLayoutElement.prototype, "_hasCorner", void 0);
-SplitLayoutElement = __decorate([t$4(`ixfx-split-layout`)], SplitLayoutElement);
+SplitLayoutElement = __decorate([safeCustomElement(`ixfx-split-layout`)], SplitLayoutElement);
 //#endregion
 //#region src/swipe/swipe.ts
-let SwipeElement = class SwipeElement extends i$3 {
+let SwipeElement = class SwipeElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.barSpacing = 20;
@@ -31520,7 +31521,7 @@ let SwipeElement = class SwipeElement extends i$3 {
 		})}`;
 	}
 	static {
-		this.styles = [prominenceStyles, i$6`
+		this.styles = [prominenceStyles, i$7`
     :host {
       display: block;
       user-select: none;
@@ -31566,10 +31567,10 @@ __decorate([n$2({ type: Number })], SwipeElement.prototype, "barSpacing", void 0
 __decorate([n$2({ type: Number })], SwipeElement.prototype, "barWidth", void 0);
 __decorate([n$2({ type: Number })], SwipeElement.prototype, "debounceMs", void 0);
 __decorate([n$2({ type: Number })], SwipeElement.prototype, "retractDurationMs", void 0);
-SwipeElement = __decorate([t$4(`ixfx-swipe`)], SwipeElement);
+SwipeElement = __decorate([safeCustomElement(`ixfx-swipe`)], SwipeElement);
 //#endregion
 //#region src/tabs/tab-list-item.ts
-let TabListItemElement = class TabListItemElement extends i$3 {
+let TabListItemElement = class TabListItemElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.closeable = false;
@@ -31642,7 +31643,7 @@ let TabListItemElement = class TabListItemElement extends i$3 {
 		this.remove();
 	}
 	static {
-		this.styles = [prominenceStyles, i$6`
+		this.styles = [prominenceStyles, i$7`
       :host {
         --selected-colour: var(--accent);
         --selected-border-width: 1px;
@@ -31728,10 +31729,10 @@ __decorate([n$2({
 })], TabListItemElement.prototype, "commandActive", void 0);
 __decorate([n$2({ attribute: false })], TabListItemElement.prototype, "registry", void 0);
 __decorate([r$1()], TabListItemElement.prototype, "_compact", void 0);
-TabListItemElement = __decorate([t$4(`ixfx-tab-list-item`)], TabListItemElement);
+TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
 //#endregion
 //#region src/tabs/tab-list.ts
-let TabListElement = class TabListElement extends i$3 {
+let TabListElement = class TabListElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.orientation = `horizontal`;
@@ -31851,7 +31852,7 @@ let TabListElement = class TabListElement extends i$3 {
 	}
 	#onSlotClick;
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: inline-block;
       --activated-colour: var(--accent);
@@ -31925,15 +31926,15 @@ let TabListElement = class TabListElement extends i$3 {
 __decorate([n$2({ type: String })], TabListElement.prototype, "orientation", void 0);
 __decorate([n$2({ type: Boolean })], TabListElement.prototype, "flip", void 0);
 __decorate([n$2({ type: Boolean })], TabListElement.prototype, "scrollable", void 0);
-TabListElement = __decorate([t$4(`ixfx-tab-list`)], TabListElement);
+TabListElement = __decorate([safeCustomElement(`ixfx-tab-list`)], TabListElement);
 //#endregion
 //#region src/tabs/tab-panel.ts
-let TabPanelElement = class TabPanelElement extends i$3 {
+let TabPanelElement = class TabPanelElement extends i$4 {
 	render() {
 		return b`<slot></slot>`;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
   :host {
     display:none;
     height:100%;
@@ -31947,10 +31948,10 @@ let TabPanelElement = class TabPanelElement extends i$3 {
   `;
 	}
 };
-TabPanelElement = __decorate([t$4(`ixfx-tab-panel`)], TabPanelElement);
+TabPanelElement = __decorate([safeCustomElement(`ixfx-tab-panel`)], TabPanelElement);
 //#endregion
 //#region src/tabs/tab-panels.ts
-let TabPanelsElement = class TabPanelsElement extends i$3 {
+let TabPanelsElement = class TabPanelsElement extends i$4 {
 	render() {
 		return b`<slot></slot>`;
 	}
@@ -31993,7 +31994,7 @@ let TabPanelsElement = class TabPanelsElement extends i$3 {
 		return found;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
   :host {
     display: block;
   }
@@ -32002,7 +32003,7 @@ let TabPanelsElement = class TabPanelsElement extends i$3 {
 	}
 };
 __decorate([o$2()], TabPanelsElement.prototype, "_listItems", void 0);
-TabPanelsElement = __decorate([t$4(`ixfx-tab-panels`)], TabPanelsElement);
+TabPanelsElement = __decorate([safeCustomElement(`ixfx-tab-panels`)], TabPanelsElement);
 //#endregion
 //#region src/timeline/timeline-draw.ts
 const NICE_STEPS = [
@@ -32622,7 +32623,7 @@ const fireSelectionChange = (host) => {
 };
 //#endregion
 //#region src/timeline/timeline-styles.ts
-const timelineStyles = i$6`
+const timelineStyles = i$7`
   :host {
     /* Layout */
     --timeline-axis-height: 24px;
@@ -32779,7 +32780,7 @@ const timelineStyles = i$6`
 const MIN_TRACK_HEIGHT = 24;
 /** How close to the bottom edge the pointer must be (px) to trigger resize */
 const EDGE_ZONE_PX = 6;
-let TimelineTrackTabElement = class TimelineTrackTabElement extends i$3 {
+let TimelineTrackTabElement = class TimelineTrackTabElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.label = ``;
@@ -32824,7 +32825,7 @@ let TimelineTrackTabElement = class TimelineTrackTabElement extends i$3 {
 		};
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: flex;
       align-items: center;
@@ -32943,14 +32944,14 @@ __decorate([n$2({
 	type: Boolean,
 	reflect: true
 })], TimelineTrackTabElement.prototype, "resizable", void 0);
-TimelineTrackTabElement = __decorate([t$4(`ixfx-timeline-track-tab`)], TimelineTrackTabElement);
+TimelineTrackTabElement = __decorate([safeCustomElement(`ixfx-timeline-track-tab`)], TimelineTrackTabElement);
 //#endregion
 //#region src/timeline/timeline-element.ts
 /** Reasonable maximum ppu to prevent infinite zoom-in */
 const MAX_PPU = 1e4;
 /** Minimum rendered track height (~1.5em) at max zoom-out */
 const MIN_TRACK_RENDER_HEIGHT = 24;
-let IxfxTimelineElement = class IxfxTimelineElement extends i$3 {
+let IxfxTimelineElement = class IxfxTimelineElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.tracks = [];
@@ -33679,7 +33680,7 @@ __decorate([r$1()], IxfxTimelineElement.prototype, "_trackHeightOverrides", void
 __decorate([r$1()], IxfxTimelineElement.prototype, "_trackLayout", void 0);
 __decorate([r$1()], IxfxTimelineElement.prototype, "_internalEvents", void 0);
 __decorate([r$1()], IxfxTimelineElement.prototype, "_internalTracks", void 0);
-IxfxTimelineElement = __decorate([t$4(`ixfx-timeline`)], IxfxTimelineElement);
+IxfxTimelineElement = __decorate([safeCustomElement(`ixfx-timeline`)], IxfxTimelineElement);
 //#endregion
 //#region src/timeline/timeline-controller.ts
 /**
@@ -33745,8 +33746,267 @@ var TimelineController = class {
 	}
 };
 //#endregion
+//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/keyed.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ const i = e$3(class extends i$3 {
+	constructor() {
+		super(...arguments), this.key = A;
+	}
+	render(r, t) {
+		return this.key = r, t;
+	}
+	update(r, [t, e]) {
+		return t !== this.key && (p(r), this.key = t), e;
+	}
+});
+//#endregion
+//#region src/transitory-label/transitory-label.ts
+let TransitoryLabelElement = class TransitoryLabelElement extends i$4 {
+	constructor(..._args) {
+		super(..._args);
+		this.text = ``;
+		this.effect = `fade`;
+		this.duration = 300;
+		this.easing = `ease`;
+		this._currentText = ``;
+		this._outgoingText = ``;
+		this._transitionId = 0;
+		this._queue = [];
+		this.#onOutgoingEnd = () => {
+			this._onTransitionEnd();
+		};
+		this.#onLastCharOut = () => {
+			this._onTransitionEnd();
+		};
+	}
+	setText(msg, effect) {
+		this._pendingEffect = effect;
+		this.text = msg;
+	}
+	updated(changed) {
+		if (changed.has(`text`) && this.text !== this._currentText) {
+			const effect = this._pendingEffect ?? this.effect;
+			this._pendingEffect = void 0;
+			if (this._activeEffect !== void 0) this._queue.push({
+				text: this.text,
+				effect
+			});
+			else this._startTransition(this.text, effect);
+		}
+	}
+	_startTransition(newText, effect) {
+		const prevText = this._currentText;
+		this._currentText = newText;
+		this._outgoingText = prevText;
+		if (prevText !== ``) {
+			this._transitionId++;
+			this._activeEffect = effect;
+		}
+	}
+	_onTransitionEnd() {
+		this._outgoingText = ``;
+		this._activeEffect = void 0;
+		if (this._queue.length > 0) {
+			const next = this._queue.shift();
+			this._startTransition(next.text, next.effect);
+		}
+	}
+	#onOutgoingEnd;
+	#onLastCharOut;
+	#renderCharSwap() {
+		const charDuration = Math.round(this.duration * .3);
+		const charStagger = Math.round(this.duration * .1);
+		const currentChars = this._currentText.split(``);
+		const outgoingChars = this._outgoingText.split(``);
+		const lastIdx = outgoingChars.length - 1;
+		const charStyle = (i) => `animation-duration:${charDuration}ms;animation-delay:${i * charStagger}ms;animation-timing-function:${this.easing}`;
+		return b`
+      ${i(`cc${this._transitionId}`, b`
+        <span class="layer current char-swap">
+          ${currentChars.map((ch, i) => b`<span class="char in" style=${charStyle(i)}>${ch}</span>`)}
+        </span>
+      `)}
+      ${this._outgoingText ? i(this._transitionId, b`
+          <span class="layer outgoing char-swap">
+            ${outgoingChars.map((ch, i) => b`<span
+                class="char out"
+                style=${charStyle(i)}
+                @animationend=${i === lastIdx ? this.#onLastCharOut : void 0}
+              >${ch}</span>`)}
+          </span>
+        `) : A}
+    `;
+	}
+	render() {
+		if (this._activeEffect === `character-swap`) return b`<span class="container">${this.#renderCharSwap()}</span>`;
+		const effect = this._activeEffect ?? ``;
+		const durStyle = this._activeEffect ? `animation-duration:${this.duration}ms;animation-timing-function:${this.easing}` : ``;
+		return b`
+      <span class="container">
+        ${this._outgoingText ? i(this._transitionId, b`
+            <span class="layer outgoing ${effect}" style=${durStyle} @animationend=${this.#onOutgoingEnd}>
+              ${this._outgoingText}
+            </span>
+          `) : A}
+        ${i(`c${this._transitionId}`, b`
+          <span class="layer current ${effect}" style=${durStyle}>
+            ${this._currentText}
+          </span>
+        `)}
+      </span>
+    `;
+	}
+	static {
+		this.styles = i$7`
+    :host {
+      display: inline-block;
+      --transitory-label-easing: ease;
+    }
+
+    .container {
+      display: inline-grid;
+      overflow: hidden;
+    }
+
+    .layer {
+      grid-area: 1 / 1;
+      white-space: nowrap;
+    }
+
+    .layer.outgoing {
+      pointer-events: none;
+    }
+
+    /* slide-right */
+    .layer.current.slide-right {
+      transform: translateX(-100%);
+      animation: tl-slide-in-left var(--transitory-label-easing) forwards;
+    }
+    .layer.outgoing.slide-right {
+      animation: tl-slide-out-right var(--transitory-label-easing) forwards;
+    }
+
+    @keyframes tl-slide-in-left {
+      from { transform: translateX(-100%); }
+      to   { transform: translateX(0); }
+    }
+    @keyframes tl-slide-out-right {
+      from { transform: translateX(0); }
+      to   { transform: translateX(100%); }
+    }
+
+    /* slide-left */
+    .layer.current.slide-left {
+      transform: translateX(100%);
+      animation: tl-slide-in-right var(--transitory-label-easing) forwards;
+    }
+    .layer.outgoing.slide-left {
+      animation: tl-slide-out-left var(--transitory-label-easing) forwards;
+    }
+
+    @keyframes tl-slide-in-right {
+      from { transform: translateX(100%); }
+      to   { transform: translateX(0); }
+    }
+    @keyframes tl-slide-out-left {
+      from { transform: translateX(0); }
+      to   { transform: translateX(-100%); }
+    }
+
+    /* slide-up */
+    .layer.current.slide-up {
+      transform: translateY(100%);
+      animation: tl-slide-in-bottom var(--transitory-label-easing) forwards;
+    }
+    .layer.outgoing.slide-up {
+      animation: tl-slide-out-top var(--transitory-label-easing) forwards;
+    }
+
+    @keyframes tl-slide-in-bottom {
+      from { transform: translateY(100%); }
+      to   { transform: translateY(0); }
+    }
+    @keyframes tl-slide-out-top {
+      from { transform: translateY(0); }
+      to   { transform: translateY(-100%); }
+    }
+
+    /* slide-down */
+    .layer.current.slide-down {
+      transform: translateY(-100%);
+      animation: tl-slide-in-top var(--transitory-label-easing) forwards;
+    }
+    .layer.outgoing.slide-down {
+      animation: tl-slide-out-bottom var(--transitory-label-easing) forwards;
+    }
+
+    @keyframes tl-slide-in-top {
+      from { transform: translateY(-100%); }
+      to   { transform: translateY(0); }
+    }
+    @keyframes tl-slide-out-bottom {
+      from { transform: translateY(0); }
+      to   { transform: translateY(100%); }
+    }
+
+    /* fade */
+    .layer.current.fade {
+      opacity: 0;
+      animation: tl-fade-in var(--transitory-label-easing) forwards;
+    }
+    .layer.outgoing.fade {
+      animation: tl-fade-out var(--transitory-label-easing) forwards;
+    }
+
+    @keyframes tl-fade-in {
+      from { opacity: 0; }
+      to   { opacity: 1; }
+    }
+    @keyframes tl-fade-out {
+      from { opacity: 1; }
+      to   { opacity: 0; }
+    }
+
+    /* character-swap */
+    .char {
+      display: inline-block;
+    }
+
+    .char.in {
+      opacity: 0;
+      animation: tl-char-in var(--transitory-label-easing) forwards;
+    }
+
+    .char.out {
+      animation: tl-char-out var(--transitory-label-easing) forwards;
+    }
+
+    @keyframes tl-char-in {
+      from { opacity: 0; transform: translateY(-0.3em) scale(0.8); }
+      to   { opacity: 1; transform: translateY(0) scale(1); }
+    }
+    @keyframes tl-char-out {
+      from { opacity: 1; transform: translateY(0) scale(1); }
+      to   { opacity: 0; transform: translateY(0.3em) scale(0.8); }
+    }
+  `;
+	}
+};
+__decorate([n$2({ type: String })], TransitoryLabelElement.prototype, "text", void 0);
+__decorate([n$2({ type: String })], TransitoryLabelElement.prototype, "effect", void 0);
+__decorate([n$2({ type: Number })], TransitoryLabelElement.prototype, "duration", void 0);
+__decorate([n$2({ type: String })], TransitoryLabelElement.prototype, "easing", void 0);
+__decorate([r$1()], TransitoryLabelElement.prototype, "_currentText", void 0);
+__decorate([r$1()], TransitoryLabelElement.prototype, "_outgoingText", void 0);
+__decorate([r$1()], TransitoryLabelElement.prototype, "_activeEffect", void 0);
+__decorate([r$1()], TransitoryLabelElement.prototype, "_transitionId", void 0);
+TransitoryLabelElement = __decorate([safeCustomElement(`ixfx-transitory-label`)], TransitoryLabelElement);
+//#endregion
 //#region src/tree/tree-base.ts
-let TreeBaseElement = class TreeBaseElement extends i$3 {
+let TreeBaseElement = class TreeBaseElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.exclusivity = `none`;
@@ -34511,7 +34771,7 @@ let TreeBaseElement = class TreeBaseElement extends i$3 {
 		this.styles = [
 			tickledStyles,
 			tickledItemStyles,
-			i$6`
+			i$7`
       :host {
       --tree-bg: var(--surface-3);
       --tree-text: var(--surface-3-text);
@@ -34639,7 +34899,7 @@ __decorate([n$2({
 })], TreeBaseElement.prototype, "disableKeyboardNavigation", void 0);
 __decorate([r$1()], TreeBaseElement.prototype, "_expandedKeys", void 0);
 __decorate([r$1()], TreeBaseElement.prototype, "_focusedDepth", void 0);
-TreeBaseElement = __decorate([t$4(`ixfx-tree-base`)], TreeBaseElement);
+TreeBaseElement = __decorate([safeCustomElement(`ixfx-tree-base`)], TreeBaseElement);
 //#endregion
 //#region src/tree/tree-controller.ts
 var TreeController = class {
@@ -34808,7 +35068,7 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
     `;
 	}
 	static {
-		this.styles = [...TreeBaseElement.styles, i$6`
+		this.styles = [...TreeBaseElement.styles, i$7`
       .tree-caret {
         display: inline-flex;
         align-items: center;
@@ -34878,7 +35138,7 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
     `];
 	}
 };
-TreeListElement = __decorate([t$4(`ixfx-tree-list`)], TreeListElement);
+TreeListElement = __decorate([safeCustomElement(`ixfx-tree-list`)], TreeListElement);
 //#endregion
 //#region src/util/checkbox.ts
 function isCheckboxLike(el) {
@@ -34932,12 +35192,12 @@ function monitorIndeterminate(targetElOrQuery, watchedElsOrQueries) {
 	};
 }
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/class-map.js
+//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js
 /**
 * @license
 * Copyright 2018 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
-*/ const e = e$3(class extends i$2 {
+*/ const e = e$3(class extends i$3 {
 	constructor(t) {
 		if (super(t), t.type !== t$2.ATTRIBUTE || "class" !== t.name || t.strings?.length > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
 	}
@@ -34970,7 +35230,7 @@ function isNumeric(str) {
 //#endregion
 //#region src/util/tooltip.ts
 var _TooltipElement;
-let TooltipElement = class TooltipElement extends i$3 {
+let TooltipElement = class TooltipElement extends i$4 {
 	static {
 		_TooltipElement = this;
 	}
@@ -35033,7 +35293,553 @@ __decorate([n$2({ type: String })], TooltipElement.prototype, "orientation", voi
 __decorate([n$2({ type: String })], TooltipElement.prototype, "anchor", void 0);
 __decorate([n$2()], TooltipElement.prototype, "value", void 0);
 __decorate([n$2({ type: String })], TooltipElement.prototype, "icon", void 0);
-TooltipElement = _TooltipElement = __decorate([t$4(`ixfx-tooltip`)], TooltipElement);
+TooltipElement = _TooltipElement = __decorate([safeCustomElement(`ixfx-tooltip`)], TooltipElement);
+//#endregion
+//#region src/vertical-list/vertical-list.ts
+const ITEM_SELECTOR = `li, [data-list-item]`;
+const isMultiMode = (mode) => mode === `checked` || mode === `vscode` || mode === `standard`;
+let VerticalListElement = class VerticalListElement extends i$4 {
+	constructor(..._args) {
+		super(..._args);
+		this.selectionMode = `single`;
+		this.interactionMode = `standard`;
+		this._selectedItems = /* @__PURE__ */ new Set();
+		this._searchVisible = false;
+		this._searchQuery = ``;
+		this.tickled = new TickledController(this, {
+			getItems: () => this._getVisibleItems().map((el) => ({
+				id: el,
+				enabled: true
+			})),
+			onTickle: (id) => {
+				if (id !== void 0) this._dispatch(`list-tickle`, { item: id });
+			},
+			onStateChange: () => this._syncItemStates()
+		});
+		this._onPointerOver = (e) => {
+			const item = this._findListItem(e.composedPath());
+			if (item) this.tickled.handlePointerEnter(item);
+		};
+		this._onPointerLeave = (e) => {
+			this.tickled.handlePointerLeave(e);
+		};
+		this._onKeyDown = (e) => {
+			if ((e.ctrlKey || e.metaKey) && e.key === `f`) {
+				e.preventDefault();
+				this._openSearch();
+				return;
+			}
+			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
+				if ((this.selectionMode === `multiple` || isMultiMode(this.interactionMode)) && this.selectionMode !== `none`) {
+					e.preventDefault();
+					this._selectAll();
+				}
+				return;
+			}
+			if (this._searchVisible) return;
+			switch (e.key) {
+				case `ArrowDown`:
+					e.preventDefault();
+					this.tickled.handleKeyboardNavigation(`next`);
+					if (e.shiftKey && this.interactionMode === `vscode`) {
+						const cur = this.tickled.tickledId;
+						if (cur) this._rangeSelectTo(cur);
+					}
+					break;
+				case `ArrowUp`:
+					e.preventDefault();
+					this.tickled.handleKeyboardNavigation(`previous`);
+					if (e.shiftKey && this.interactionMode === `vscode`) {
+						const cur = this.tickled.tickledId;
+						if (cur) this._rangeSelectTo(cur);
+					}
+					break;
+				case `Enter`: {
+					const id = this.tickled.tickledId;
+					if (id) {
+						e.preventDefault();
+						this._dispatch(`list-item-click`, { item: id });
+						this._activateItem(id);
+					}
+					break;
+				}
+				case ` `: {
+					const id = this.tickled.tickledId;
+					if (id) {
+						e.preventDefault();
+						this._handleSpaceKey(id);
+					}
+					break;
+				}
+				case `Escape`:
+					this._clearSelection();
+					break;
+			}
+		};
+		this._onClick = (e) => {
+			const item = this._findListItem(e.composedPath());
+			if (!item) return;
+			this._dispatch(`list-item-click`, { item });
+			this._handleClickSelection(item, e);
+		};
+		this._onDblClick = (e) => {
+			const item = this._findListItem(e.composedPath());
+			if (item) this._activateItem(item);
+		};
+		this._onSearchInput = (e) => {
+			const input = e.target;
+			this._searchQuery = input.value;
+			this.#search?.setQuery(this._searchQuery);
+		};
+		this._onSearchKeydown = (e) => {
+			if (e.key === `Escape`) {
+				e.stopPropagation();
+				this._closeSearch();
+			} else if (e.key === `ArrowDown`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`next`);
+			} else if (e.key === `ArrowUp`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`previous`);
+			} else if (e.key === `Enter`) {
+				e.preventDefault();
+				e.stopPropagation();
+				const id = this.tickled.tickledId ?? this._getVisibleItems()[0];
+				if (id) {
+					this._dispatch(`list-item-click`, { item: id });
+					this._activateItem(id);
+					this._closeSearch();
+				}
+			}
+		};
+	}
+	#search;
+	#selectionAnchor;
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
+		this.addEventListener(`pointerover`, this._onPointerOver);
+		this.addEventListener(`pointerleave`, this._onPointerLeave);
+		this.addEventListener(`keydown`, this._onKeyDown);
+		this.addEventListener(`click`, this._onClick);
+		this.addEventListener(`dblclick`, this._onDblClick);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`pointerover`, this._onPointerOver);
+		this.removeEventListener(`pointerleave`, this._onPointerLeave);
+		this.removeEventListener(`keydown`, this._onKeyDown);
+		this.removeEventListener(`click`, this._onClick);
+		this.removeEventListener(`dblclick`, this._onDblClick);
+		this.#search?.dispose();
+		this.#search = void 0;
+	}
+	firstUpdated() {
+		this.#search = createElementIncrSearch({
+			container: this,
+			itemSelector: ITEM_SELECTOR,
+			getLabel: (el) => el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
+			getKey: (el) => el.getAttribute(`data-key`) ?? el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
+			highlightKey: `vertical-list-search`
+		});
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`interactionMode`)) {
+			this.#selectionAnchor = void 0;
+			this._clearSelection();
+		}
+	}
+	addItem(item) {
+		if (typeof item === `string`) {
+			const li = document.createElement(`li`);
+			li.textContent = item;
+			this.appendChild(li);
+		} else this.appendChild(item);
+		if (this.interactionMode === `checked`) this._syncCheckboxes();
+	}
+	removeItem(item) {
+		item.remove();
+	}
+	clearItems() {
+		this.replaceChildren();
+		this.#selectionAnchor = void 0;
+		this._selectedItems = /* @__PURE__ */ new Set();
+		this._syncItemStates();
+	}
+	select(item) {
+		this._replaceSelection(item);
+	}
+	deselect(item) {
+		if (!this._selectedItems.has(item)) return;
+		const previous = this._selectedItems;
+		const next = new Set(this._selectedItems);
+		next.delete(item);
+		this._selectedItems = next;
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
+	}
+	clearSelection() {
+		this._clearSelection();
+	}
+	selectAll() {
+		if ((this.selectionMode === `multiple` || isMultiMode(this.interactionMode)) && this.selectionMode !== `none`) this._selectAll();
+	}
+	_replaceSelection(item) {
+		if (this.selectionMode === `none`) return;
+		const previous = this._selectedItems;
+		const next = new Set([item]);
+		this._selectedItems = next;
+		this.#selectionAnchor = item;
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
+	}
+	_toggleItem(item) {
+		const effectiveMultiple = this.selectionMode === `multiple` || isMultiMode(this.interactionMode);
+		if (this.selectionMode === `none` && this.interactionMode !== `checked`) return;
+		const previous = this._selectedItems;
+		const next = new Set(this._selectedItems);
+		if (next.has(item)) next.delete(item);
+		else {
+			if (!effectiveMultiple) next.clear();
+			next.add(item);
+		}
+		this._selectedItems = next;
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
+	}
+	_rangeSelectTo(item) {
+		if (this.selectionMode === `none`) return;
+		if (!this.#selectionAnchor) {
+			this._replaceSelection(item);
+			return;
+		}
+		const visible = this._getVisibleItems();
+		const anchorIdx = visible.indexOf(this.#selectionAnchor);
+		const targetIdx = visible.indexOf(item);
+		if (anchorIdx === -1 || targetIdx === -1) {
+			this._replaceSelection(item);
+			return;
+		}
+		const start = Math.min(anchorIdx, targetIdx);
+		const end = Math.max(anchorIdx, targetIdx);
+		const previous = this._selectedItems;
+		const next = new Set(visible.slice(start, end + 1));
+		this._selectedItems = next;
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
+	}
+	_clearSelection() {
+		if (this._selectedItems.size === 0) return;
+		const previous = this._selectedItems;
+		this._selectedItems = /* @__PURE__ */ new Set();
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: /* @__PURE__ */ new Set(),
+			previous
+		});
+	}
+	_selectAll() {
+		const visible = this._getVisibleItems();
+		if (visible.length === 0) return;
+		const previous = this._selectedItems;
+		const next = new Set(visible);
+		this._selectedItems = next;
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
+	}
+	_handleClickSelection(item, e) {
+		const mode = this.interactionMode;
+		if (mode === `manual`) return;
+		if (this.selectionMode === `none` && mode !== `checked`) return;
+		switch (mode) {
+			case `implicit`:
+				this._replaceSelection(item);
+				break;
+			case `standard`:
+			case `vscode`:
+				if (e.ctrlKey || e.metaKey) {
+					if (this.selectionMode === `multiple` || mode === `vscode`) this._toggleItem(item);
+				} else if (e.shiftKey && (this.selectionMode === `multiple` || mode === `vscode`)) this._rangeSelectTo(item);
+				else this._replaceSelection(item);
+				break;
+			case `checked`: break;
+		}
+	}
+	_handleSpaceKey(item) {
+		const mode = this.interactionMode;
+		if (mode === `manual`) return;
+		if (mode === `implicit`) this._replaceSelection(item);
+		else this._toggleItem(item);
+	}
+	_getVisibleItems() {
+		return Array.from(this.querySelectorAll(ITEM_SELECTOR)).filter((el) => {
+			if (el.hidden) return false;
+			if (this.filterPredicate && !this.filterPredicate(el)) return false;
+			return true;
+		});
+	}
+	_syncItemStates() {
+		for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
+			el.toggleAttribute(`data-tickled`, this.tickled.isTickled(el));
+			el.toggleAttribute(`data-selected`, this._selectedItems.has(el));
+			if (this.interactionMode === `checked`) el.toggleAttribute(`data-checked`, this._selectedItems.has(el));
+			else el.removeAttribute(`data-checked`);
+		}
+		this.dataset[`inputMode`] = this.tickled.inputMode;
+		this._syncCheckboxes();
+	}
+	_syncCheckboxes() {
+		const inCheckedMode = this.interactionMode === `checked`;
+		for (const el of this.querySelectorAll(`li`)) {
+			let cb = el.querySelector(`input.ixfx-list-checkbox`);
+			if (inCheckedMode) {
+				if (!cb) {
+					cb = document.createElement(`input`);
+					cb.type = `checkbox`;
+					cb.className = `ixfx-list-checkbox`;
+					cb.style.cssText = `flex-shrink:0;margin:0 6px 0 0;cursor:pointer;accent-color:var(--accent,#60a5fa);pointer-events:auto`;
+					cb.tabIndex = -1;
+					cb.addEventListener(`click`, (e) => {
+						e.stopPropagation();
+						this._toggleItem(el);
+					});
+					el.prepend(cb);
+				}
+				cb.checked = this._selectedItems.has(el);
+			} else if (cb) cb.remove();
+		}
+	}
+	_findListItem(path) {
+		for (const target of path) {
+			if (!(target instanceof Element)) continue;
+			if (target === this) break;
+			if (target.parentElement === this && target.matches(ITEM_SELECTOR)) return target;
+		}
+	}
+	_dispatch(name, detail) {
+		this.dispatchEvent(new CustomEvent(name, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_openSearch() {
+		this._searchVisible = true;
+		this.updateComplete.then(() => this._searchInputEl?.focus());
+	}
+	_closeSearch() {
+		this._searchVisible = false;
+		this._searchQuery = ``;
+		this.#search?.clearQuery();
+		this.focus();
+	}
+	_activateItem(item) {
+		if (this.interactionMode !== `manual`) this._replaceSelection(item);
+		this._dispatch(`list-activate`, { item });
+	}
+	static {
+		this.styles = i$7`
+    :host {
+      display: block;
+      position: relative;
+      background: var(--list-bg, var(--surface-3));
+      color: var(--list-text, var(--surface-3-text));
+      border-radius: var(--list-radius, var(--radius-s));
+      border: 1px solid var(--list-border, var(--border));
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      box-sizing: border-box;
+      outline: none;
+    }
+
+    :host(:focus-visible) {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
+
+    .container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      box-sizing: border-box;
+    }
+
+    ::slotted([hidden]) {
+      display: none !important;
+    }
+
+    ::slotted(li) {
+      display: flex;
+      align-items: center;
+      padding: var(--list-item-padding, 4px var(--space-m, 8px));
+      min-height: var(--list-item-height, 28px);
+      cursor: pointer;
+      user-select: none;
+      transition: background var(--transition, 0.1s ease-out),
+                  outline-color var(--transition, 0.1s ease-out);
+      box-sizing: border-box;
+      outline: 1px solid transparent;
+    }
+
+    /* Custom shadow-DOM components handle their own internal layout/padding */
+    ::slotted([data-list-item]) {
+      display: block;
+      cursor: pointer;
+      user-select: none;
+      transition: background var(--transition, 0.1s ease-out),
+                  outline-color var(--transition, 0.1s ease-out);
+      outline: 1px solid transparent;
+    }
+
+    ::slotted([data-tickled]) {
+      background: var(--item-bg-tickled, rgba(0, 0, 0, 0.06));
+      outline: 1px solid var(--accent, #60a5fa);
+    }
+
+    ::slotted([data-selected]) {
+      background: var(--item-bg-selected, rgba(25, 118, 210, 1));
+      color: var(--item-text-selected, #fff);
+      outline: 1px solid transparent;
+    }
+
+    ::slotted([data-selected][data-tickled]) {
+      background: var(--item-bg-selected-tickled, rgba(21, 101, 192, 1));
+      outline: 2px dashed var(--surface-3, #1e1e1e);
+      outline-offset: -2px;
+    }
+
+    /* checked mode: checkbox (injected into li) communicates selection — suppress bg highlight */
+    :host([interaction-mode="checked"]) ::slotted([data-selected]) {
+      background: transparent;
+      color: inherit;
+      outline: 1px solid transparent;
+    }
+
+    :host([interaction-mode="checked"]) ::slotted([data-selected][data-tickled]) {
+      background: var(--item-bg-tickled, rgba(0, 0, 0, 0.06));
+      color: inherit;
+      outline: 1px solid var(--accent, #60a5fa);
+    }
+
+    /* checked mode: left-border indicator for custom shadow-DOM items (no checkbox injection possible) */
+    :host([interaction-mode="checked"]) ::slotted([data-list-item]) {
+      border-left: 3px solid transparent;
+      transition: background var(--transition, 0.1s ease-out),
+                  border-color var(--transition, 0.1s ease-out);
+    }
+
+    :host([interaction-mode="checked"]) ::slotted([data-list-item][data-checked]) {
+      border-left: 3px solid var(--accent, #60a5fa);
+    }
+
+    .search-overlay {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      background: var(--surface-4, #2a2a2a);
+      border: 1px solid var(--border, #444);
+      border-radius: var(--radius-m, 4px);
+      padding: 4px 6px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    }
+
+    .search-overlay[hidden] {
+      display: none;
+    }
+
+    .search-input {
+      background: transparent;
+      border: none;
+      outline: none;
+      color: inherit;
+      font-size: var(--text-m, 0.875em);
+      min-width: 140px;
+    }
+
+    .search-close {
+      background: transparent;
+      border: none;
+      color: var(--surface-muted-text, #888);
+      cursor: pointer;
+      font-size: 1.1em;
+      line-height: 1;
+      padding: 0 2px;
+    }
+
+    .search-close:hover {
+      color: inherit;
+    }
+  `;
+	}
+	render() {
+		return b`
+      <div class="container">
+        <ul part="list">
+          <slot></slot>
+        </ul>
+        <div
+          class="search-overlay"
+          part="search-overlay"
+          ?hidden=${!this._searchVisible}
+        >
+          <input
+            type="text"
+            class="search-input"
+            placeholder="Search…"
+            .value=${this._searchQuery}
+            @input=${this._onSearchInput}
+            @keydown=${this._onSearchKeydown}
+          />
+          <button class="search-close" @click=${this._closeSearch} title="Close search (Esc)">×</button>
+        </div>
+      </div>
+    `;
+	}
+};
+__decorate([n$2({
+	type: String,
+	attribute: `selection-mode`
+})], VerticalListElement.prototype, "selectionMode", void 0);
+__decorate([n$2({
+	type: String,
+	attribute: `interaction-mode`
+})], VerticalListElement.prototype, "interactionMode", void 0);
+__decorate([n$2({ attribute: false })], VerticalListElement.prototype, "filterPredicate", void 0);
+__decorate([r$1()], VerticalListElement.prototype, "_selectedItems", void 0);
+__decorate([r$1()], VerticalListElement.prototype, "_searchVisible", void 0);
+__decorate([r$1()], VerticalListElement.prototype, "_searchQuery", void 0);
+__decorate([e$4(`.search-input`)], VerticalListElement.prototype, "_searchInputEl", void 0);
+VerticalListElement = __decorate([safeCustomElement(`ixfx-vertical-list`)], VerticalListElement);
 //#endregion
 //#region src/xy-pad.ts
 /**
@@ -35089,7 +35895,7 @@ function quantise(value, min, max, stops) {
 	const step = (max - min) / stops;
 	return Math.round((value - min) / step) * step + min;
 }
-let XyPad = class XyPad extends i$3 {
+let XyPad = class XyPad extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.xMin = 1;
@@ -35208,7 +36014,7 @@ let XyPad = class XyPad extends i$3 {
 		};
 	}
 	static {
-		this.styles = [prominenceStyles, i$6`
+		this.styles = [prominenceStyles, i$7`
     :host {
       display: block;
       width: 200px;
@@ -35460,13 +36266,13 @@ __decorate([n$2({
 	type: Number,
 	attribute: `stops-y`
 })], XyPad.prototype, "stopsY", void 0);
-XyPad = __decorate([t$4(`ixfx-xy-pad`)], XyPad);
+XyPad = __decorate([safeCustomElement(`ixfx-xy-pad`)], XyPad);
 //#endregion
 //#region src/index.ts
 function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataDisplayComponent, EditableLabel, EditableNumber, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, SelectHorizontalElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TimelineController, TimelineTrackTabElement, TooltipElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
+export { AcTextElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataDisplayComponent, EditableLabel, EditableNumber, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, SelectHorizontalElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TimelineController, TimelineTrackTabElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
 
 //# sourceMappingURL=index.js.map