@ixfx/components 0.6.1 → 0.6.2

package/bundle/index.js

@@ -25228,6 +25228,431 @@ __decorate([property({
 })], SliderInputElement.prototype, "disabled", void 0);
 SliderInputElement = __decorate([safeCustomElement(`ixfx-slider-input`)], SliderInputElement);
 //#endregion
+//#region src/sliding-number/sliding-number.ts
+const REEL_DIGITS = Array.from({ length: 30 }, (_, index) => index % 10);
+const SECTION_RANK = {
+	lead: 0,
+	integer: 1,
+	decimal: 2,
+	fraction: 3,
+	trail: 4
+};
+function mod(n, m) {
+	return (n % m + m) % m;
+}
+/** Parse a CSS time token (`0.7s`, `700ms`, `0`) to milliseconds. */
+function millis(value) {
+	const s = value.trim();
+	if (s === ``) return 0;
+	if (s.endsWith(`ms`)) return Number.parseFloat(s) || 0;
+	if (s.endsWith(`s`)) return (Number.parseFloat(s) || 0) * 1e3;
+	return Number.parseFloat(s) || 0;
+}
+let SlidingNumberElement = class SlidingNumberElement extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.value = 0;
+		this.prefix = ``;
+		this.suffix = ``;
+		this.trend = `auto`;
+		this.noAnimate = false;
+		this.respectMotionPreference = true;
+		this._cells = [];
+		this._formatted = ``;
+		this._ready = false;
+		this._pendingSpins = [];
+		this._pendingDir = `none`;
+		this._reelAnims = /* @__PURE__ */ new Map();
+		this._reapTimer = 0;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute(`role`)) this.setAttribute(`role`, `img`);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		for (const anim of this._reelAnims.values()) anim.cancel();
+		this._reelAnims.clear();
+		if (this._reapTimer) clearTimeout(this._reapTimer);
+	}
+	_motionOK() {
+		if (this.noAnimate) return false;
+		if (this.respectMotionPreference && typeof window !== `undefined` && window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches) return false;
+		return true;
+	}
+	_timing(kind) {
+		const cs = getComputedStyle(this);
+		return {
+			duration: this._motionOK() ? millis(cs.getPropertyValue(`--sliding-number-${kind}-duration`)) : 0,
+			easing: cs.getPropertyValue(`--sliding-number-${kind}-easing`).trim() || `ease`
+		};
+	}
+	_numberFormat() {
+		try {
+			return new Intl.NumberFormat(this.locales || void 0, this.format || void 0);
+		} catch {
+			return new Intl.NumberFormat(this.locales || void 0);
+		}
+	}
+	_resolveDir(first) {
+		switch (this.trend) {
+			case `up`:
+			case `increasing`: return `up`;
+			case `down`:
+			case `decreasing`: return `down`;
+			case `none`: return `none`;
+			default:
+				if (first || this._prevValue === void 0 || this.value === this._prevValue) return `none`;
+				return this.value > this._prevValue ? `up` : `down`;
+		}
+	}
+	/** Split the formatted value into positioned cells. */
+	_buildCells(parts) {
+		const intRaw = [];
+		const fractionChars = [];
+		const lead = [];
+		const trail = [];
+		let decimalChar = ``;
+		let sawInteger = false;
+		let sawDecimal = false;
+		for (const part of parts) switch (part.type) {
+			case `integer`:
+				sawInteger = true;
+				for (const c of part.value) intRaw.push({
+					digit: true,
+					char: c
+				});
+				break;
+			case `group`:
+				intRaw.push({
+					digit: false,
+					char: part.value
+				});
+				break;
+			case `decimal`:
+				sawDecimal = true;
+				decimalChar = part.value;
+				break;
+			case `fraction`:
+				for (const c of part.value) fractionChars.push(c);
+				break;
+			default: (sawInteger || sawDecimal ? trail : lead).push(part.value);
+		}
+		const cells = [];
+		const totalIntDigits = intRaw.filter((x) => x.digit).length;
+		lead.forEach((char, index) => {
+			cells.push({
+				key: `lead:${index}`,
+				kind: `symbol`,
+				section: `lead`,
+				char,
+				pos: index - 100,
+				phase: `active`
+			});
+		});
+		let seen = 0;
+		for (const item of intRaw) if (item.digit) {
+			const place = totalIntDigits - 1 - seen;
+			seen++;
+			cells.push({
+				key: `int:${place}`,
+				kind: `digit`,
+				section: `integer`,
+				char: item.char,
+				pos: -place,
+				phase: `active`
+			});
+		} else {
+			const place = totalIntDigits - seen;
+			cells.push({
+				key: `grp:${place}`,
+				kind: `symbol`,
+				section: `integer`,
+				char: item.char,
+				pos: -place + .5,
+				phase: `active`
+			});
+		}
+		if (sawDecimal) cells.push({
+			key: `decimal`,
+			kind: `symbol`,
+			section: `decimal`,
+			char: decimalChar,
+			pos: 0,
+			phase: `active`
+		});
+		fractionChars.forEach((char, index) => {
+			cells.push({
+				key: `frac:${index}`,
+				kind: `digit`,
+				section: `fraction`,
+				char,
+				pos: index + 1,
+				phase: `active`
+			});
+		});
+		trail.forEach((char, index) => {
+			cells.push({
+				key: `trail:${index}`,
+				kind: `symbol`,
+				section: `trail`,
+				char,
+				pos: index + 100,
+				phase: `active`
+			});
+		});
+		return cells;
+	}
+	willUpdate(changed) {
+		if (![
+			`value`,
+			`format`,
+			`locales`,
+			`prefix`,
+			`suffix`,
+			`noAnimate`
+		].some((p) => changed.has(p)) && this._ready) return;
+		const nf = this._numberFormat();
+		this._formatted = `${this.prefix}${nf.format(this.value)}${this.suffix}`;
+		this.setAttribute(`aria-label`, this._formatted);
+		this.toggleAttribute(`data-static`, !this._motionOK());
+		const first = !this._ready;
+		const motionOK = this._motionOK() && !first;
+		const next = this._buildCells(nf.formatToParts(this.value));
+		const nextKeys = new Set(next.map((c) => c.key));
+		const prev = this._cells.filter((c) => c.phase !== `leave`);
+		const prevByKey = new Map(prev.map((c) => [c.key, c]));
+		const dir = this._resolveDir(first);
+		const spins = [];
+		const merged = [];
+		for (const cell of next) {
+			const before = prevByKey.get(cell.key);
+			if (before) {
+				if (motionOK && cell.kind === `digit` && before.char !== cell.char) spins.push({
+					key: cell.key,
+					from: Number(before.char),
+					to: Number(cell.char)
+				});
+				merged.push({
+					...cell,
+					phase: `active`
+				});
+			} else merged.push({
+				...cell,
+				phase: motionOK ? `enter` : `active`
+			});
+		}
+		if (motionOK) {
+			for (const cell of prev) if (!nextKeys.has(cell.key)) merged.push({
+				...cell,
+				phase: `leave`
+			});
+		}
+		merged.sort((a, b) => SECTION_RANK[a.section] - SECTION_RANK[b.section] || a.pos - b.pos);
+		this._cells = merged;
+		this._pendingSpins = spins;
+		this._pendingDir = dir;
+	}
+	updated() {
+		for (const spin of this._pendingSpins) this._spin(spin.key, spin.from, spin.to, this._pendingDir);
+		this._pendingSpins = [];
+		if (this._cells.some((c) => c.phase === `enter`)) requestAnimationFrame(() => requestAnimationFrame(() => {
+			let changed = false;
+			for (const cell of this._cells) if (cell.phase === `enter`) {
+				cell.phase = `active`;
+				changed = true;
+			}
+			if (changed) {
+				this._cells = [...this._cells];
+				this.requestUpdate();
+			}
+		}));
+		if (this._cells.some((c) => c.phase === `leave`)) {
+			if (this._reapTimer) clearTimeout(this._reapTimer);
+			this._reapTimer = window.setTimeout(() => {
+				this._reapTimer = 0;
+				const kept = this._cells.filter((c) => c.phase !== `leave`);
+				if (kept.length !== this._cells.length) {
+					this._cells = kept;
+					this.requestUpdate();
+				}
+			}, this._timing(`transform`).duration + 120);
+		}
+		this._prevValue = this.value;
+		this._ready = true;
+	}
+	_spin(key, fromDigit, toDigit, dir) {
+		const reel = this.renderRoot.querySelector(`[data-key="${key}"] .reel`);
+		if (!reel) return;
+		const fromOffset = 10 + fromDigit;
+		let toOffset;
+		if (dir === `up`) toOffset = fromOffset + mod(toDigit - fromDigit, 10);
+		else if (dir === `down`) toOffset = fromOffset - mod(fromDigit - toDigit, 10);
+		else toOffset = [
+			toDigit,
+			10 + toDigit,
+			20 + toDigit
+		].reduce((best, candidate) => Math.abs(candidate - fromOffset) < Math.abs(best - fromOffset) ? candidate : best);
+		const { duration, easing } = this._timing(`spin`);
+		this._reelAnims.get(key)?.cancel();
+		if (duration === 0) {
+			reel.style.setProperty(`--o`, String(10 + toDigit));
+			return;
+		}
+		const anim = reel.animate([{ transform: `translateY(calc(-1em * ${fromOffset}))` }, { transform: `translateY(calc(-1em * ${toOffset}))` }], {
+			duration,
+			easing,
+			fill: `both`
+		});
+		this._reelAnims.set(key, anim);
+		anim.finished.then(() => {
+			reel.style.setProperty(`--o`, String(10 + toDigit));
+			anim.cancel();
+			this._reelAnims.delete(key);
+		}).catch(() => {});
+	}
+	_renderCell(cell) {
+		if (cell.kind === `digit`) return b`
+        <span class="cell digit" part="digit" data-key=${cell.key} data-phase=${cell.phase}>
+          <span class="reel" style=${`--o:${10 + Number(cell.char)}`}>
+            ${REEL_DIGITS.map((d) => b`<span>${d}</span>`)}
+          </span>
+        </span>
+      `;
+		return b`
+      <span class="cell symbol" part="symbol" data-key=${cell.key} data-phase=${cell.phase}>${cell.char}</span>
+    `;
+	}
+	render() {
+		const section = (name) => this._cells.filter((c) => c.section === name);
+		const integer = [...section(`integer`)].reverse();
+		return b`
+      ${this.prefix ? b`<span class="affix" part="prefix">${this.prefix}</span>` : A}
+      <span class="number" part="number" aria-hidden="true">
+        <span class="run lead">${section(`lead`).map((c) => this._renderCell(c))}</span>
+        <span class="run integer" part="integer">
+          ${repeat(integer, (c) => c.key, (c) => this._renderCell(c))}
+        </span>
+        ${section(`decimal`).map((c) => this._renderCell(c))}
+        <span class="run fraction" part="fraction">
+          ${repeat(section(`fraction`), (c) => c.key, (c) => this._renderCell(c))}
+        </span>
+        <span class="run trail">${section(`trail`).map((c) => this._renderCell(c))}</span>
+      </span>
+      ${this.suffix ? b`<span class="affix" part="suffix">${this.suffix}</span>` : A}
+    `;
+	}
+	static {
+		this.styles = i$3`
+    :host {
+      --sliding-number-spin-duration: 0.7s;
+      --sliding-number-spin-easing: cubic-bezier(0.16, 1, 0.3, 1);
+      --sliding-number-transform-duration: 0.5s;
+      --sliding-number-transform-easing: cubic-bezier(0.16, 1, 0.3, 1);
+      --sliding-number-opacity-duration: 0.35s;
+      --sliding-number-digit-width: 1ch;
+
+      display: inline-flex;
+      align-items: flex-end;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .number,
+    .run {
+      display: inline-flex;
+      /* Every cell is exactly 1em tall, so aligning bottom edges keeps
+         every glyph on the same line without relying on synthesised
+         flex baselines (which break under overflow: hidden). */
+      align-items: flex-end;
+      white-space: nowrap;
+    }
+
+    .affix {
+      line-height: 1;
+    }
+
+    /* Integer digits stack right-to-left so the units column (next to the
+       decimal point) stays put while higher places grow outward. */
+    .run.integer {
+      flex-direction: row-reverse;
+    }
+
+    .cell {
+      display: block;
+      height: 1em;
+      line-height: 1;
+      text-align: center;
+      overflow: hidden;
+      transition:
+        width var(--sliding-number-transform-duration) var(--sliding-number-transform-easing),
+        max-width var(--sliding-number-transform-duration) var(--sliding-number-transform-easing),
+        opacity var(--sliding-number-opacity-duration) var(--sliding-number-transform-easing);
+    }
+
+    .cell.digit {
+      position: relative;
+      width: var(--sliding-number-digit-width);
+    }
+
+    .cell.symbol {
+      max-width: 4ch;
+    }
+
+    .cell[data-phase='enter'],
+    .cell[data-phase='leave'] {
+      opacity: 0;
+    }
+
+    .cell.digit[data-phase='enter'],
+    .cell.digit[data-phase='leave'] {
+      width: 0;
+    }
+
+    .cell.symbol[data-phase='enter'],
+    .cell.symbol[data-phase='leave'] {
+      max-width: 0;
+    }
+
+    .reel {
+      position: absolute;
+      inset: 0 0 auto 0;
+      display: flex;
+      flex-direction: column;
+      will-change: transform;
+      transform: translateY(calc(-1em * var(--o, 10)));
+    }
+
+    .reel > span {
+      display: block;
+      height: 1em;
+      line-height: 1;
+      text-align: center;
+    }
+
+    :host([data-static]) .cell {
+      transition: none;
+    }
+  `;
+	}
+};
+__decorate([property({ type: Number })], SlidingNumberElement.prototype, "value", void 0);
+__decorate([property({ type: String })], SlidingNumberElement.prototype, "locales", void 0);
+__decorate([property({ type: Object })], SlidingNumberElement.prototype, "format", void 0);
+__decorate([property({ type: String })], SlidingNumberElement.prototype, "prefix", void 0);
+__decorate([property({ type: String })], SlidingNumberElement.prototype, "suffix", void 0);
+__decorate([property({ type: String })], SlidingNumberElement.prototype, "trend", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `no-animate`
+})], SlidingNumberElement.prototype, "noAnimate", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: false
+})], SlidingNumberElement.prototype, "respectMotionPreference", void 0);
+__decorate([state()], SlidingNumberElement.prototype, "_cells", void 0);
+SlidingNumberElement = __decorate([safeCustomElement(`ixfx-sliding-number`)], SlidingNumberElement);
+//#endregion
 //#region src/snackbar/snackbar.ts
 let _instanceCounter = 0;
 let SnackbarElement = class SnackbarElement extends i {
@@ -26606,410 +27031,103 @@ __decorate([property({ type: Number })], SwipeElement.prototype, "debounceMs", v
 __decorate([property({ type: Number })], SwipeElement.prototype, "retractDurationMs", void 0);
 SwipeElement = __decorate([safeCustomElement(`ixfx-swipe`)], SwipeElement);
 //#endregion
-//#region src/toolbar/toolbar.ts
-var _ToolbarElement;
-let ToolbarElement = class ToolbarElement extends i {
-	static {
-		_ToolbarElement = this;
-	}
+//#region src/tabs/tab-list-item.ts
+let TabListItemElement = class TabListItemElement extends i {
 	constructor(..._args) {
 		super(..._args);
-		this.orientation = `horizontal`;
-		this.layout = `one-line`;
-		this.verticalWriting = `auto`;
-		this.showGroupLabels = false;
-		this.invisibleGroups = false;
-		this._overflowCount = 0;
-		this._ro = null;
-		this._anchor = `--toolbar-${_ToolbarElement._cnt++}`;
-		this._sizes = /* @__PURE__ */ new WeakMap();
-		this._measureQueued = false;
+		this.closeable = false;
+		this.hideLabels = false;
+		this.iconName = void 0;
+		this.description = void 0;
+		this.commandActive = void 0;
+		this.registry = void 0;
+		this._compact = false;
+		this._hasToolbarContent = false;
+		this._onToolbarSlotChange = () => {
+			this._updateToolbarContent();
+		};
 	}
-	static {
-		this._cnt = 0;
+	connectedCallback() {
+		super.connectedCallback();
+		this._resizeObserver = new ResizeObserver(([entry]) => {
+			this._compact = entry.contentRect.width < 64;
+		});
+		this._resizeObserver.observe(this);
+		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.addEventListener(`slotchange`, this._onToolbarSlotChange);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._resizeObserver?.disconnect();
+		this._resizeObserver = void 0;
+		this._commandCleanup?.();
+		this._commandCleanup = void 0;
+		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.removeEventListener(`slotchange`, this._onToolbarSlotChange);
+	}
+	updated(changed) {
+		super.updated(changed);
+		this._syncTooltipAttrs();
+		if (changed.has(`registry`) || changed.has(`commandActive`)) this._syncCommandListener();
+	}
+	_syncTooltipAttrs() {
+		if (this.description) {
+			this.setAttribute(`data-tooltip`, this.description);
+			this.setAttribute(`data-tooltip-anchor`, `top`);
+		} else {
+			this.removeAttribute(`data-tooltip`);
+			this.removeAttribute(`data-tooltip-anchor`);
+		}
+	}
+	_syncCommandListener() {
+		this._commandCleanup?.();
+		this._commandCleanup = void 0;
+		if (this.registry && this.commandActive) this._commandCleanup = this.registry.addOnInvokeHandler((id) => {
+			if (id === this.commandActive) this.click();
+		});
+	}
+	_updateToolbarContent() {
+		const slot = this.shadowRoot?.querySelector(`slot[name="toolbar"]`);
+		this._hasToolbarContent = (slot?.assignedElements().length ?? 0) > 0;
+	}
+	firstUpdated() {
+		this._updateToolbarContent();
+	}
+	render() {
+		const showLabel = !this.hideLabels || !this.iconName;
+		const hasActions = this.closeable || this._hasToolbarContent;
+		return b`
+      <div>
+        ${this.iconName ? b`<ixfx-icon name="${this.iconName}"></ixfx-icon>` : A}
+        ${showLabel ? b`<span class="label"><slot></slot></span>` : A}
+        ${hasActions ? b`
+        <div class="actions">
+          <div class="toolbar"><slot name="toolbar"></slot></div>
+          ${this.closeable ? b`
+            <button
+              class="close-btn"
+              type="button"
+              aria-label="Close tab"
+              @click=${this._onCloseClick}
+            >
+              <ixfx-icon name="close"></ixfx-icon>
+            </button>
+          ` : A}
+        </div>
+        ` : A}
+      </div>
+    `;
+	}
+	_onCloseClick(e) {
+		e.stopPropagation();
+		this.dispatchEvent(new CustomEvent(`close`, {
+			bubbles: true,
+			composed: true
+		}));
+		this.remove();
 	}
 	static {
 		this.styles = [
 			themeFallbacks,
-			popupSurfaceStyles,
-			i$3`
-    :host {
-      --toolbar-gap: var(--space-s);
-      --toolbar-group-gap: var(--space-m);
-      display: block;
-      container-type: inline-size;
-    }
-    :host([orientation="vertical-left"]),
-    :host([orientation="vertical-right"]) {
-      container-type: normal;
-      width: max-content;
-    }
-    :host([orientation="vertical-left"]),
-    :host([orientation="vertical-right"]) { height: 100%; }
-    :host([orientation="vertical-left"]) .inner,
-    :host([orientation="vertical-right"]) .inner { height: 100%; box-sizing: border-box; width: max-content; }
-    .inner {
-      display: flex;
-      gap: var(--toolbar-gap);
-      background: var(--toolbar-bg, var(--surface-2));
-      padding: var(--toolbar-padding, var(--space-s));
-      border: var(--toolbar-border, var(--border-subtle));
-      border-radius: var(--radius-s);
-      align-items: center;
-    }
-    :host([orientation="horizontal"]) .inner { flex-direction: row; justify-content: flex-start; }
-    :host([orientation="vertical-left"]) .inner { flex-direction: column-reverse; align-items: stretch; }
-    :host([orientation="vertical-right"]) .inner { flex-direction: column; align-items: stretch; }
-    :host([layout="wrap"]) .inner { flex-wrap: wrap; }
-    :host([layout="one-line"]) .inner { flex-wrap: nowrap; overflow: hidden; }
-    :host([orientation="vertical-left"][vertical-writing="auto"]) ::slotted(*) { writing-mode: sideways-lr; }
-    :host([orientation="vertical-right"][vertical-writing="auto"]) ::slotted(*) { writing-mode: vertical-lr; }
-    :host([vertical-writing="up"]) ::slotted(*) { writing-mode: vertical-rl; text-orientation: upright; }
-    :host([vertical-writing="down"]) ::slotted(*) { writing-mode: vertical-lr; }
-    :host([vertical-writing="none"]) ::slotted(*) { writing-mode: horizontal-tb; }
-    ::slotted(*) { flex: 0 0 auto; }
-    ::slotted([grow]), ::slotted(ixfx-toolbar-group[grow]) { flex: 1 1 auto; }
-    ::slotted([hidden]) { display: none !important; }
-    :host([invisible-groups]) ::slotted(ixfx-toolbar-group) { --toolbar-group-border: none; }
-    .overflow-btn {
-      anchor-name: var(--anchor-name);
-      flex-shrink: 0;
-      background: var(--surface-3);
-      border: var(--border);
-      border-radius: var(--radius-s);
-      padding: var(--space-xs) var(--space-s);
-      cursor: pointer;
-      display: none;
-    }
-    .overflow-btn[visible] { display: inline-flex; }
-    .overflow-popover {
-      position: fixed;
-      top: anchor(bottom);
-      left: anchor(right);
-      position-anchor: var(--anchor-name);
-      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
-      margin: 8px;
-      max-height: min(60vh, 400px);
-      max-width: min(90vw, 320px);
-      overflow: auto;
-      overscroll-behavior: contain;
-      z-index: 100;
-      padding: var(--space-s);
-      flex-direction: column;
-      gap: var(--space-s);
-    }
-    .overflow-popover:popover-open { display: flex; }
-    .overflow-popover ::slotted(*) { writing-mode: horizontal-tb; text-orientation: mixed; }
-  `
-		];
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.style.setProperty(`--anchor-name`, this._anchor);
-	}
-	firstUpdated() {
-		this._slot.addEventListener(`slotchange`, () => this._scheduleMeasure());
-		this._ro = new ResizeObserver(() => this._scheduleMeasure());
-		this._ro.observe(this._inner);
-		this._scheduleMeasure();
-		this._updateGroupLabels();
-	}
-	updated(changed) {
-		if (changed.has(`showGroupLabels`)) this._updateGroupLabels();
-	}
-	_updateGroupLabels() {
-		for (const child of Array.from(this.children)) if (child.tagName === `IXFX-TOOLBAR-GROUP`) {
-			if (this.showGroupLabels) child.setAttribute(`show-label`, ``);
-			else child.removeAttribute(`show-label`);
-		}
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._ro?.disconnect();
-	}
-	/** Coalesce measure passes into one per frame; prevents slotchange feedback loops. */
-	_scheduleMeasure() {
-		if (this._measureQueued) return;
-		this._measureQueued = true;
-		requestAnimationFrame(() => {
-			this._measureQueued = false;
-			this._measure();
-		});
-	}
-	_measure() {
-		const children = Array.from(this.children);
-		const isGrow = (el) => el.hasAttribute(`grow`) || el.matches(`[grow]`);
-		const overflowable = children.filter((el) => !isGrow(el));
-		const isHoriz = this.orientation === `horizontal`;
-		if (this.layout !== `one-line`) {
-			let mutated = false;
-			for (const el of children) {
-				if (el.getAttribute(`slot`) === `overflow`) {
-					el.removeAttribute(`slot`);
-					mutated = true;
-				}
-				if (el.hasAttribute(`hidden`)) {
-					el.removeAttribute(`hidden`);
-					mutated = true;
-				}
-			}
-			if (this._overflowCount !== 0) {
-				this._overflowCount = 0;
-				mutated = true;
-			}
-			if (mutated) this.requestUpdate();
-			return;
-		}
-		if (!this._inner) return;
-		const cs = getComputedStyle(this._inner);
-		const gap = (isHoriz ? Number.parseFloat(cs.columnGap) : Number.parseFloat(cs.rowGap)) || 0;
-		const available = isHoriz ? this._inner.clientWidth : this._inner.clientHeight;
-		const btnSize = 36;
-		const inMain = overflowable.filter((el) => el.getAttribute(`slot`) !== `overflow`);
-		const inOverflow = overflowable.filter((el) => el.getAttribute(`slot`) === `overflow`);
-		let cum = 0;
-		inMain.forEach((el, i) => {
-			const s = isHoriz ? el.offsetWidth : el.offsetHeight;
-			if (s > 0) this._sizes.set(el, s);
-			cum += (i ? gap : 0) + (this._sizes.get(el) ?? s);
-		});
-		const btnAllowance = inOverflow.length > 0 ? gap + btnSize : 0;
-		let mutated = false;
-		while (inMain.length > 0 && cum + btnAllowance > available) {
-			const last = inMain[inMain.length - 1];
-			const s = this._sizes.get(last) ?? 0;
-			last.setAttribute(`slot`, `overflow`);
-			inMain.pop();
-			inOverflow.unshift(last);
-			cum -= (inMain.length ? gap : 0) + s;
-			mutated = true;
-		}
-		while (inOverflow.length > 0) {
-			const first = inOverflow[0];
-			const s = this._sizes.get(first);
-			if (s === void 0) break;
-			const addGap = inMain.length ? gap : 0;
-			const nextBtnAllowance = inOverflow.length > 1 ? gap + btnSize : 0;
-			if (cum + addGap + s + nextBtnAllowance > available) break;
-			first.removeAttribute(`slot`);
-			inOverflow.shift();
-			inMain.push(first);
-			cum += addGap + s;
-			mutated = true;
-		}
-		const newCount = inOverflow.length;
-		if (newCount !== this._overflowCount) {
-			this._overflowCount = newCount;
-			mutated = true;
-		}
-		if (mutated) this.requestUpdate();
-	}
-	_toggleOverflow() {
-		try {
-			this._popover.togglePopover();
-		} catch {
-			this._popover.showPopover();
-		}
-	}
-	render() {
-		const hasOverflow = this._overflowCount > 0;
-		return b`
-      <div class="inner" role="toolbar" aria-orientation=${this.orientation}>
-        <slot></slot>
-        <button class="overflow-btn" ?visible=${hasOverflow} @click=${this._toggleOverflow} aria-label="More" aria-haspopup="true" aria-expanded=${this._popover?.matches(`:popover-open`) ?? false}>⋯</button>
-      </div>
-      <div class="overflow-popover popup-surface" popover="auto" @click=${(e) => e.stopPropagation()}>
-        <slot name="overflow"></slot>
-      </div>
-    `;
-	}
-};
-__decorate([property({
-	type: String,
-	reflect: true
-})], ToolbarElement.prototype, "orientation", void 0);
-__decorate([property({
-	type: String,
-	reflect: true
-})], ToolbarElement.prototype, "layout", void 0);
-__decorate([property({
-	type: String,
-	attribute: `vertical-writing`,
-	reflect: true
-})], ToolbarElement.prototype, "verticalWriting", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: `show-group-labels`,
-	reflect: true
-})], ToolbarElement.prototype, "showGroupLabels", void 0);
-__decorate([property({
-	type: Boolean,
-	attribute: `invisible-groups`,
-	reflect: true
-})], ToolbarElement.prototype, "invisibleGroups", void 0);
-__decorate([state()], ToolbarElement.prototype, "_overflowCount", void 0);
-__decorate([query(`.inner`)], ToolbarElement.prototype, "_inner", void 0);
-__decorate([query(`.overflow-popover`)], ToolbarElement.prototype, "_popover", void 0);
-__decorate([query(`slot`)], ToolbarElement.prototype, "_slot", void 0);
-ToolbarElement = _ToolbarElement = __decorate([safeCustomElement(`ixfx-toolbar`)], ToolbarElement);
-//#endregion
-//#region src/toolbar/toolbar-group.ts
-let ToolbarGroupElement = class ToolbarGroupElement extends i {
-	constructor(..._args) {
-		super(..._args);
-		this.label = ``;
-		this.grow = false;
-	}
-	static {
-		this.styles = [themeFallbacks, i$3`
-    :host {
-      display: flex;
-      flex-direction: column;
-      align-items: var(--toolbar-group-align-items, center);
-      justify-content: var(--toolbar-group-justify-content, flex-start);
-      gap: var(--toolbar-gap, var(--space-s));
-      padding: var(--space-xs);
-      border: 1px solid var(--border-subtle, var(--border));
-      border-radius: var(--radius-s);
-      background: var(--surface-3);
-      min-width: 0;
-    }
-    :host(:not([label])) {
-      border: none;
-      background: transparent;
-      padding: 0;
-    }
-    .label-row {
-      display: none;
-      font-size: var(--text-s, 12px);
-      color: var(--surface-muted-text);
-      padding-inline: var(--space-xs);
-      white-space: nowrap;
-      border-bottom: 1px solid var(--border-subtle);
-      margin-bottom: var(--space-xs);
-    }
-    :host([label][show-label]) .label-row { display: block; }
-    :host(:not([label])) .label-row { display: none; }
-    :host([grow]) { flex: 1 1 auto; min-width: 0; }
-    :host([hidden]) { display: none !important; }
-    .components { display: flex; }
-    ::slotted(*) { flex: 0 0 auto; }
-    ::slotted([grow]) { flex: 1 1 auto; }
-  `];
-	}
-	render() {
-		return b`
-      <div class="label-row">${this.label}</div>
-      <div class="components">
-        <slot></slot>
-      </div>
-    `;
-	}
-};
-__decorate([property({ type: String })], ToolbarGroupElement.prototype, "label", void 0);
-__decorate([property({
-	type: Boolean,
-	reflect: true
-})], ToolbarGroupElement.prototype, "grow", void 0);
-ToolbarGroupElement = __decorate([safeCustomElement(`ixfx-toolbar-group`)], ToolbarGroupElement);
-//#endregion
-//#region src/tabs/tab-list-item.ts
-let TabListItemElement = class TabListItemElement extends i {
-	constructor(..._args) {
-		super(..._args);
-		this.closeable = false;
-		this.hideLabels = false;
-		this.iconName = void 0;
-		this.description = void 0;
-		this.commandActive = void 0;
-		this.registry = void 0;
-		this._compact = false;
-		this._hasToolbarContent = false;
-		this._onToolbarSlotChange = () => {
-			this._updateToolbarContent();
-		};
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this._resizeObserver = new ResizeObserver(([entry]) => {
-			this._compact = entry.contentRect.width < 64;
-		});
-		this._resizeObserver.observe(this);
-		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.addEventListener(`slotchange`, this._onToolbarSlotChange);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._resizeObserver?.disconnect();
-		this._resizeObserver = void 0;
-		this._commandCleanup?.();
-		this._commandCleanup = void 0;
-		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.removeEventListener(`slotchange`, this._onToolbarSlotChange);
-	}
-	updated(changed) {
-		super.updated(changed);
-		this._syncTooltipAttrs();
-		if (changed.has(`registry`) || changed.has(`commandActive`)) this._syncCommandListener();
-	}
-	_syncTooltipAttrs() {
-		if (this.description) {
-			this.setAttribute(`data-tooltip`, this.description);
-			this.setAttribute(`data-tooltip-anchor`, `top`);
-		} else {
-			this.removeAttribute(`data-tooltip`);
-			this.removeAttribute(`data-tooltip-anchor`);
-		}
-	}
-	_syncCommandListener() {
-		this._commandCleanup?.();
-		this._commandCleanup = void 0;
-		if (this.registry && this.commandActive) this._commandCleanup = this.registry.addOnInvokeHandler((id) => {
-			if (id === this.commandActive) this.click();
-		});
-	}
-	_updateToolbarContent() {
-		const slot = this.shadowRoot?.querySelector(`slot[name="toolbar"]`);
-		this._hasToolbarContent = (slot?.assignedElements().length ?? 0) > 0;
-	}
-	firstUpdated() {
-		this._updateToolbarContent();
-	}
-	render() {
-		const showLabel = !this.hideLabels || !this.iconName;
-		const hasActions = this.closeable || this._hasToolbarContent;
-		return b`
-      <div>
-        ${this.iconName ? b`<ixfx-icon name="${this.iconName}"></ixfx-icon>` : A}
-        ${showLabel ? b`<span class="label"><slot></slot></span>` : A}
-        ${hasActions ? b`
-        <div class="actions">
-          <div class="toolbar"><slot name="toolbar"></slot></div>
-          ${this.closeable ? b`
-            <button
-              class="close-btn"
-              type="button"
-              aria-label="Close tab"
-              @click=${this._onCloseClick}
-            >
-              <ixfx-icon name="close"></ixfx-icon>
-            </button>
-          ` : A}
-        </div>
-        ` : A}
-      </div>
-    `;
-	}
-	_onCloseClick(e) {
-		e.stopPropagation();
-		this.dispatchEvent(new CustomEvent(`close`, {
-			bubbles: true,
-			composed: true
-		}));
-		this.remove();
-	}
-	static {
-		this.styles = [
-			themeFallbacks,
-			prominenceStyles,
+			prominenceStyles,
 			i$3`
       :host {
         --selected-tab-color: var(--ixfx-selected-tab-color, var(--surface-2-text));
@@ -28082,8 +28200,85 @@ let TabPanelsElement = class TabPanelsElement extends i {
   `;
 	}
 };
-__decorate([queryAssignedElements()], TabPanelsElement.prototype, "_listItems", void 0);
-TabPanelsElement = __decorate([safeCustomElement(`ixfx-tab-panels`)], TabPanelsElement);
+__decorate([queryAssignedElements()], TabPanelsElement.prototype, "_listItems", void 0);
+TabPanelsElement = __decorate([safeCustomElement(`ixfx-tab-panels`)], TabPanelsElement);
+//#endregion
+//#region src/text-shimmer/text-shimmer.ts
+let TextShimmerElement = class TextShimmerElement extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.text = ``;
+		this.paused = false;
+	}
+	render() {
+		return b`<span class="shimmer" part="text"
+      >${this.text === `` ? b`<slot></slot>` : this.text}</span
+    >`;
+	}
+	static {
+		this.styles = i$3`
+    :host {
+      --text-shimmer-color: var(--surface-3-text, #888);
+      --text-shimmer-gradient-color: var(--surface-2-text, #fff);
+      --text-shimmer-duration: 2s;
+      --text-shimmer-spread: 15%;
+
+      display: inline-block;
+      color: var(--text-shimmer-color);
+    }
+
+    .shimmer {
+      background-image: linear-gradient(
+        90deg,
+        var(--text-shimmer-color) 0%,
+        var(--text-shimmer-color) calc(50% - var(--text-shimmer-spread)),
+        var(--text-shimmer-gradient-color) 50%,
+        var(--text-shimmer-color) calc(50% + var(--text-shimmer-spread)),
+        var(--text-shimmer-color) 100%
+      );
+      background-size: 250% 100%;
+      background-repeat: no-repeat;
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      -webkit-text-fill-color: transparent;
+      animation: ixfx-text-shimmer-sweep var(--text-shimmer-duration) linear infinite;
+    }
+
+    /* Sweep the highlight band from the right edge to the left edge. */
+    @keyframes ixfx-text-shimmer-sweep {
+      from {
+        background-position: 100% center;
+      }
+      to {
+        background-position: 0% center;
+      }
+    }
+
+    :host([paused]) .shimmer {
+      animation: none;
+      background-image: none;
+      color: var(--text-shimmer-color);
+      -webkit-text-fill-color: var(--text-shimmer-color);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .shimmer {
+        animation: none;
+        background-image: none;
+        color: var(--text-shimmer-color);
+        -webkit-text-fill-color: var(--text-shimmer-color);
+      }
+    }
+  `;
+	}
+};
+__decorate([property({ type: String })], TextShimmerElement.prototype, "text", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], TextShimmerElement.prototype, "paused", void 0);
+TextShimmerElement = __decorate([safeCustomElement(`ixfx-text-shimmer`)], TextShimmerElement);
 //#endregion
 //#region src/timeline/timeline-controller.ts
 /**
@@ -29573,262 +29768,569 @@ let IxfxTimelineElement = class IxfxTimelineElement extends i {
 		if (needsVerticalZoomReset) this.#initVerticalZoomToFit();
 		if (needsLayoutRecompute) this.#recomputeTrackLayout();
 	}
-	/**
-	* updated runs after render — for DOM side-effects only (syncing vcanvas,
-	* scrolling, invalidating canvas, dispatching events).
-	*/
-	updated(changedProps) {
-		if (changedProps.has(`_ppu`) || changedProps.has(`_viewRange`) || changedProps.has(`min`) || changedProps.has(`max`)) {
-			this.#syncVCanvas();
-			this.#invalidateCanvas();
-		}
-		if (changedProps.has(`events`) || changedProps.has(`userScale`) || changedProps.has(`altMajorBg`) || changedProps.has(`gridMode`) || changedProps.has(`minorStep`)) this.#invalidateCanvas();
-		if (changedProps.has(`_trackLayout`)) {
-			this.#syncVCanvasVertical();
-			this.#positionTabs();
-			this.#invalidateCanvas();
-		}
-		if (changedProps.has(`_vViewRange`) || changedProps.has(`_vScale`)) {
-			this.#syncVerticalScroll();
-			this.#invalidateCanvas();
-		}
-		if (this._tickledId !== this.#prevTickledId) {
-			this.#prevTickledId = this._tickledId;
-			this.dispatchEvent(new CustomEvent(`tickle-change`, {
-				detail: { event: this.tickledEvent },
-				bubbles: true,
-				composed: true
-			}));
-		}
+	/**
+	* updated runs after render — for DOM side-effects only (syncing vcanvas,
+	* scrolling, invalidating canvas, dispatching events).
+	*/
+	updated(changedProps) {
+		if (changedProps.has(`_ppu`) || changedProps.has(`_viewRange`) || changedProps.has(`min`) || changedProps.has(`max`)) {
+			this.#syncVCanvas();
+			this.#invalidateCanvas();
+		}
+		if (changedProps.has(`events`) || changedProps.has(`userScale`) || changedProps.has(`altMajorBg`) || changedProps.has(`gridMode`) || changedProps.has(`minorStep`)) this.#invalidateCanvas();
+		if (changedProps.has(`_trackLayout`)) {
+			this.#syncVCanvasVertical();
+			this.#positionTabs();
+			this.#invalidateCanvas();
+		}
+		if (changedProps.has(`_vViewRange`) || changedProps.has(`_vScale`)) {
+			this.#syncVerticalScroll();
+			this.#invalidateCanvas();
+		}
+		if (this._tickledId !== this.#prevTickledId) {
+			this.#prevTickledId = this._tickledId;
+			this.dispatchEvent(new CustomEvent(`tickle-change`, {
+				detail: { event: this.tickledEvent },
+				bubbles: true,
+				composed: true
+			}));
+		}
+	}
+	render() {
+		const totalBaseHeight = this.#getTotalBaseHeight();
+		return b`
+      <div class="content-wrapper">
+        <div class="content-area">
+          <div class="v-axis-zone"
+            @pointerdown=${this.#onVAxisPointerDown}
+            @pointermove=${this.#onVAxisPointerMove}
+            @pointerup=${this.#onVAxisPointerUp}
+            @pointercancel=${this.#onVAxisPointerUp}
+          ></div>
+          <div class="tab-column">
+            ${this._internalTracks.filter((t) => !t.hidden).map((t) => {
+			if (!this._trackLayout.find((l) => l.trackKey === t.key)) return A;
+			return b`
+                  <ixfx-timeline-track-tab
+                    .label=${t.label}
+                    track-key="${t.key}"
+                    ?resizable=${this.trackHeight !== `none`}
+                    ?reorderable=${this.reorderable}
+                    @click=${(e) => this.selectTrack(t.key, e.shiftKey)}
+                    @track-resize-move=${this.#onTrackResizeMove}
+                    @track-resize=${this.#onTrackResizeEnd}
+                  ></ixfx-timeline-track-tab>
+                `;
+		})}
+          </div>
+          <x-vcanvas></x-vcanvas>
+        </div>
+        <div class="v-zoom">
+          <ixfx-range-multi
+            orientation="vertical"
+            min="0"
+            max="${totalBaseHeight}"
+            a="${this._vViewRange.min}"
+            b="${this._vViewRange.max}"
+            step="any"
+            crossover="stop"
+            resize-mode="bipolar-flex"
+            @input=${this.#onVZoomInput}
+          ></ixfx-range-multi>
+        </div>
+      </div>
+
+      <div class="h-zoom">
+        <ixfx-range-multi
+          min="${this.min}"
+          max="${this.max}"
+          a="${this._viewRange.min}"
+          b="${this._viewRange.max}"
+          crossover="stop"
+          resize-mode="bipolar-flex"
+          @input=${this.#onHZoomInput}
+        ></ixfx-range-multi>
+      </div>
+
+      <div class="meta-resizer ${this.metaEnabled ? `visible` : ``}"></div>
+      <div class="meta-area ${this.metaEnabled ? `visible` : ``}" style="height:${this._metaHeight}px"></div>
+    `;
+	}
+	/** Compute initial ppu to fit 80% of the range, then derive viewRange */
+	#initZoomToFit() {
+		const vpWidth = this.#getViewportWidth();
+		const totalSpan = this.max - this.min;
+		const zoomFactor = .8;
+		this._ppu = totalSpan > 0 ? vpWidth / (totalSpan * zoomFactor) : 1;
+		this._viewRange = {
+			min: this.min,
+			max: this.min + totalSpan * zoomFactor
+		};
+		this.#syncVCanvas();
+	}
+	#syncVCanvas() {
+		if (!this.#vcanvas) return;
+		const totalSpan = this.max - this.min;
+		this.#vcanvas.logicalWidth = totalSpan * this._ppu;
+		this.#syncVCanvasVertical();
+		this.#syncVCanvasScroll();
+	}
+	/** Sync logicalHeight and logicalScrollTop to the vcanvas */
+	#syncVCanvasVertical() {
+		if (!this.#vcanvas) return;
+		const totalHeight = this._trackLayout.reduce((sum, tl) => sum + tl.height, 0);
+		const canvasHeight = Math.max(totalHeight, 40) + this.#axisHeight;
+		this.#vcanvas.logicalHeight = canvasHeight;
+		this.#vcanvas.logicalScrollTop = this.#vScrollOffset;
+	}
+	#syncVCanvasScroll() {
+		if (!this.#vcanvas) return;
+		this.#vcanvas.logicalScrollLeft = (this._viewRange.min - this.min) * this._ppu;
+	}
+	#invalidateCanvas() {
+		this.#vcanvas?.invalidateAll();
+	}
+	/** Called by ResizeObserver when vcanvas/content-area changes size */
+	#onResize;
+	#drawCallback;
+	#onScrollVirtual;
+	#recomputeTrackLayout() {
+		const layout = [];
+		let y = this.#axisHeight;
+		for (const track of this._internalTracks) {
+			if (track.hidden) continue;
+			const baseHeight = this._trackHeightOverrides.get(track.key) ?? track.height ?? this.defaultTrackHeight;
+			const height = Math.round(baseHeight * this._vScale);
+			layout.push({
+				trackKey: track.key,
+				y,
+				height
+			});
+			y += height;
+		}
+		this._trackLayout = layout;
+	}
+	/**
+	* Range slider handler.
+	* Slider controls zoom (via span) + pan (via position).
+	* Derive ppu from the span the slider produces.
+	*/
+	#onHZoomInput;
+	/**
+	* Vertical range slider handler.
+	* Slider controls vertical zoom (via span) + vertical pan (via position).
+	* Derive _vScale from the span the slider produces.
+	*/
+	#onVZoomInput;
+	#onVAxisPointerDown;
+	#onVAxisPointerMove;
+	#onVAxisPointerUp;
+	/** Sync vertical scroll position to vcanvas logicalScrollTop */
+	#syncVerticalScroll() {
+		this.#syncVCanvasVertical();
+		this.#positionTabs();
+	}
+	/**
+	* Position track tabs in the .tab-column via absolute CSS positioning.
+	* Applies a vertical translateY to offset for the current vertical scroll.
+	*/
+	#positionTabs() {
+		const tabColumn = this.shadowRoot?.querySelector(`.tab-column`);
+		if (!tabColumn) return;
+		const scrollTop = this.#vcanvas?.logicalScrollTop ?? 0;
+		tabColumn.style.transform = `translateY(${-scrollTop}px)`;
+		for (const layout of this._trackLayout) {
+			const tab = tabColumn.querySelector(`ixfx-timeline-track-tab[track-key="${layout.trackKey}"]`);
+			if (!tab) continue;
+			tab.style.top = `${layout.y}px`;
+			tab.style.height = `${layout.height}px`;
+		}
+	}
+	/** Read the tab width from the CSS custom property */
+	get #tabWidth() {
+		const raw = getComputedStyle(this).getPropertyValue(`--timeline-tab-width`).trim();
+		return Number.parseInt(raw, 10) || 120;
+	}
+	/** Live preview during drag — update heights but don't fire public event */
+	#onTrackResizeMove;
+	/** Final resize on pointerup — apply height and fire public event */
+	#onTrackResizeEnd;
+	/**
+	* Apply track height based on the current `trackHeight` mode.
+	* - `fixed`: sets `defaultTrackHeight` (all tracks change uniformly)
+	* - `free`: sets per-track override in `_trackHeightOverrides`
+	* - `none`: should never be called (resize is disabled)
+	*/
+	#applyTrackResize(trackKey, height) {
+		if (this.trackHeight === `fixed`) this.defaultTrackHeight = height;
+		else if (this.trackHeight === `free`) {
+			const next = new Map(this._trackHeightOverrides);
+			next.set(trackKey, height);
+			this._trackHeightOverrides = next;
+		}
+	}
+	#fireSelectionChange() {
+		this.dispatchEvent(new CustomEvent(`selection-change`, {
+			detail: { selectedIds: [...this._selectedIds] },
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([property({ type: Array })], IxfxTimelineElement.prototype, "tracks", void 0);
+__decorate([property({ type: Array })], IxfxTimelineElement.prototype, "events", void 0);
+__decorate([property({ type: Number })], IxfxTimelineElement.prototype, "min", void 0);
+__decorate([property({ type: Number })], IxfxTimelineElement.prototype, "max", void 0);
+__decorate([property({
+	type: String,
+	attribute: `track-height`
+})], IxfxTimelineElement.prototype, "trackHeight", void 0);
+__decorate([property({
+	type: String,
+	attribute: `user-scale`
+})], IxfxTimelineElement.prototype, "userScale", void 0);
+__decorate([property({ type: Boolean })], IxfxTimelineElement.prototype, "reorderable", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `meta`
+})], IxfxTimelineElement.prototype, "metaEnabled", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `alt-major-bg`
+})], IxfxTimelineElement.prototype, "altMajorBg", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `default-track-height`
+})], IxfxTimelineElement.prototype, "defaultTrackHeight", void 0);
+__decorate([property({
+	type: String,
+	attribute: `grid-mode`
+})], IxfxTimelineElement.prototype, "gridMode", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `minor-step`
+})], IxfxTimelineElement.prototype, "minorStep", void 0);
+__decorate([property({ type: Object })], IxfxTimelineElement.prototype, "onDragging", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_ppu", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_viewRange", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_vViewRange", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_vScale", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_selectedIds", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_tickledId", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_drag", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_metaHeight", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_trackHeightOverrides", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_trackLayout", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_internalEvents", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_internalTracks", void 0);
+IxfxTimelineElement = __decorate([safeCustomElement(`ixfx-timeline`)], IxfxTimelineElement);
+//#endregion
+//#region src/toolbar/toolbar-group.ts
+let ToolbarGroupElement = class ToolbarGroupElement extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.label = ``;
+		this.grow = false;
+	}
+	static {
+		this.styles = [themeFallbacks, i$3`
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-items: var(--toolbar-group-align-items, center);
+      justify-content: var(--toolbar-group-justify-content, flex-start);
+      gap: var(--toolbar-gap, var(--space-s));
+      padding: var(--space-xs);
+      border: 1px solid var(--border-subtle, var(--border));
+      border-radius: var(--radius-s);
+      background: var(--surface-3);
+      min-width: 0;
+    }
+    :host(:not([label])) {
+      border: none;
+      background: transparent;
+      padding: 0;
+    }
+    .label-row {
+      display: none;
+      font-size: var(--text-s, 12px);
+      color: var(--surface-muted-text);
+      padding-inline: var(--space-xs);
+      white-space: nowrap;
+      border-bottom: 1px solid var(--border-subtle);
+      margin-bottom: var(--space-xs);
+    }
+    :host([label][show-label]) .label-row { display: block; }
+    :host(:not([label])) .label-row { display: none; }
+    :host([grow]) { flex: 1 1 auto; min-width: 0; }
+    :host([hidden]) { display: none !important; }
+    .components { display: flex; }
+    ::slotted(*) { flex: 0 0 auto; }
+    ::slotted([grow]) { flex: 1 1 auto; }
+  `];
 	}
 	render() {
-		const totalBaseHeight = this.#getTotalBaseHeight();
 		return b`
-      <div class="content-wrapper">
-        <div class="content-area">
-          <div class="v-axis-zone"
-            @pointerdown=${this.#onVAxisPointerDown}
-            @pointermove=${this.#onVAxisPointerMove}
-            @pointerup=${this.#onVAxisPointerUp}
-            @pointercancel=${this.#onVAxisPointerUp}
-          ></div>
-          <div class="tab-column">
-            ${this._internalTracks.filter((t) => !t.hidden).map((t) => {
-			if (!this._trackLayout.find((l) => l.trackKey === t.key)) return A;
-			return b`
-                  <ixfx-timeline-track-tab
-                    .label=${t.label}
-                    track-key="${t.key}"
-                    ?resizable=${this.trackHeight !== `none`}
-                    ?reorderable=${this.reorderable}
-                    @click=${(e) => this.selectTrack(t.key, e.shiftKey)}
-                    @track-resize-move=${this.#onTrackResizeMove}
-                    @track-resize=${this.#onTrackResizeEnd}
-                  ></ixfx-timeline-track-tab>
-                `;
-		})}
-          </div>
-          <x-vcanvas></x-vcanvas>
-        </div>
-        <div class="v-zoom">
-          <ixfx-range-multi
-            orientation="vertical"
-            min="0"
-            max="${totalBaseHeight}"
-            a="${this._vViewRange.min}"
-            b="${this._vViewRange.max}"
-            step="any"
-            crossover="stop"
-            resize-mode="bipolar-flex"
-            @input=${this.#onVZoomInput}
-          ></ixfx-range-multi>
-        </div>
-      </div>
-
-      <div class="h-zoom">
-        <ixfx-range-multi
-          min="${this.min}"
-          max="${this.max}"
-          a="${this._viewRange.min}"
-          b="${this._viewRange.max}"
-          crossover="stop"
-          resize-mode="bipolar-flex"
-          @input=${this.#onHZoomInput}
-        ></ixfx-range-multi>
+      <div class="label-row">${this.label}</div>
+      <div class="components">
+        <slot></slot>
       </div>
-
-      <div class="meta-resizer ${this.metaEnabled ? `visible` : ``}"></div>
-      <div class="meta-area ${this.metaEnabled ? `visible` : ``}" style="height:${this._metaHeight}px"></div>
     `;
 	}
-	/** Compute initial ppu to fit 80% of the range, then derive viewRange */
-	#initZoomToFit() {
-		const vpWidth = this.#getViewportWidth();
-		const totalSpan = this.max - this.min;
-		const zoomFactor = .8;
-		this._ppu = totalSpan > 0 ? vpWidth / (totalSpan * zoomFactor) : 1;
-		this._viewRange = {
-			min: this.min,
-			max: this.min + totalSpan * zoomFactor
-		};
-		this.#syncVCanvas();
+};
+__decorate([property({ type: String })], ToolbarGroupElement.prototype, "label", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ToolbarGroupElement.prototype, "grow", void 0);
+ToolbarGroupElement = __decorate([safeCustomElement(`ixfx-toolbar-group`)], ToolbarGroupElement);
+//#endregion
+//#region src/toolbar/toolbar.ts
+var _ToolbarElement;
+let ToolbarElement = class ToolbarElement extends i {
+	static {
+		_ToolbarElement = this;
 	}
-	#syncVCanvas() {
-		if (!this.#vcanvas) return;
-		const totalSpan = this.max - this.min;
-		this.#vcanvas.logicalWidth = totalSpan * this._ppu;
-		this.#syncVCanvasVertical();
-		this.#syncVCanvasScroll();
+	constructor(..._args) {
+		super(..._args);
+		this.orientation = `horizontal`;
+		this.layout = `one-line`;
+		this.verticalWriting = `auto`;
+		this.showGroupLabels = false;
+		this.invisibleGroups = false;
+		this._overflowCount = 0;
+		this._ro = null;
+		this._anchor = `--toolbar-${_ToolbarElement._cnt++}`;
+		this._sizes = /* @__PURE__ */ new WeakMap();
+		this._measureQueued = false;
 	}
-	/** Sync logicalHeight and logicalScrollTop to the vcanvas */
-	#syncVCanvasVertical() {
-		if (!this.#vcanvas) return;
-		const totalHeight = this._trackLayout.reduce((sum, tl) => sum + tl.height, 0);
-		const canvasHeight = Math.max(totalHeight, 40) + this.#axisHeight;
-		this.#vcanvas.logicalHeight = canvasHeight;
-		this.#vcanvas.logicalScrollTop = this.#vScrollOffset;
+	static {
+		this._cnt = 0;
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			popupSurfaceStyles,
+			i$3`
+    :host {
+      --toolbar-gap: var(--space-s);
+      --toolbar-group-gap: var(--space-m);
+      display: block;
+      container-type: inline-size;
+    }
+    :host([orientation="vertical-left"]),
+    :host([orientation="vertical-right"]) {
+      container-type: normal;
+      width: max-content;
+    }
+    :host([orientation="vertical-left"]),
+    :host([orientation="vertical-right"]) { height: 100%; }
+    :host([orientation="vertical-left"]) .inner,
+    :host([orientation="vertical-right"]) .inner { height: 100%; box-sizing: border-box; width: max-content; }
+    .inner {
+      display: flex;
+      gap: var(--toolbar-gap);
+      background: var(--toolbar-bg, var(--surface-2));
+      padding: var(--toolbar-padding, var(--space-s));
+      border: var(--toolbar-border, var(--border-subtle));
+      border-radius: var(--radius-s);
+      align-items: center;
+    }
+    :host([orientation="horizontal"]) .inner { flex-direction: row; justify-content: flex-start; }
+    :host([orientation="vertical-left"]) .inner { flex-direction: column-reverse; align-items: stretch; }
+    :host([orientation="vertical-right"]) .inner { flex-direction: column; align-items: stretch; }
+    :host([layout="wrap"]) .inner { flex-wrap: wrap; }
+    :host([layout="one-line"]) .inner { flex-wrap: nowrap; overflow: hidden; }
+    :host([orientation="vertical-left"][vertical-writing="auto"]) ::slotted(*) { writing-mode: sideways-lr; }
+    :host([orientation="vertical-right"][vertical-writing="auto"]) ::slotted(*) { writing-mode: vertical-lr; }
+    :host([vertical-writing="up"]) ::slotted(*) { writing-mode: vertical-rl; text-orientation: upright; }
+    :host([vertical-writing="down"]) ::slotted(*) { writing-mode: vertical-lr; }
+    :host([vertical-writing="none"]) ::slotted(*) { writing-mode: horizontal-tb; }
+    ::slotted(*) { flex: 0 0 auto; }
+    ::slotted([grow]), ::slotted(ixfx-toolbar-group[grow]) { flex: 1 1 auto; }
+    ::slotted([hidden]) { display: none !important; }
+    :host([invisible-groups]) ::slotted(ixfx-toolbar-group) { --toolbar-group-border: none; }
+    .overflow-btn {
+      anchor-name: var(--anchor-name);
+      flex-shrink: 0;
+      background: var(--surface-3);
+      border: var(--border);
+      border-radius: var(--radius-s);
+      padding: var(--space-xs) var(--space-s);
+      cursor: pointer;
+      display: none;
+    }
+    .overflow-btn[visible] { display: inline-flex; }
+    .overflow-popover {
+      position: fixed;
+      top: anchor(bottom);
+      left: anchor(right);
+      position-anchor: var(--anchor-name);
+      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+      margin: 8px;
+      max-height: min(60vh, 400px);
+      max-width: min(90vw, 320px);
+      overflow: auto;
+      overscroll-behavior: contain;
+      z-index: 100;
+      padding: var(--space-s);
+      flex-direction: column;
+      gap: var(--space-s);
+    }
+    .overflow-popover:popover-open { display: flex; }
+    .overflow-popover ::slotted(*) { writing-mode: horizontal-tb; text-orientation: mixed; }
+  `
+		];
 	}
-	#syncVCanvasScroll() {
-		if (!this.#vcanvas) return;
-		this.#vcanvas.logicalScrollLeft = (this._viewRange.min - this.min) * this._ppu;
+	connectedCallback() {
+		super.connectedCallback();
+		this.style.setProperty(`--anchor-name`, this._anchor);
 	}
-	#invalidateCanvas() {
-		this.#vcanvas?.invalidateAll();
+	firstUpdated() {
+		this._slot.addEventListener(`slotchange`, () => this._scheduleMeasure());
+		this._ro = new ResizeObserver(() => this._scheduleMeasure());
+		this._ro.observe(this._inner);
+		this._scheduleMeasure();
+		this._updateGroupLabels();
 	}
-	/** Called by ResizeObserver when vcanvas/content-area changes size */
-	#onResize;
-	#drawCallback;
-	#onScrollVirtual;
-	#recomputeTrackLayout() {
-		const layout = [];
-		let y = this.#axisHeight;
-		for (const track of this._internalTracks) {
-			if (track.hidden) continue;
-			const baseHeight = this._trackHeightOverrides.get(track.key) ?? track.height ?? this.defaultTrackHeight;
-			const height = Math.round(baseHeight * this._vScale);
-			layout.push({
-				trackKey: track.key,
-				y,
-				height
-			});
-			y += height;
+	updated(changed) {
+		if (changed.has(`showGroupLabels`)) this._updateGroupLabels();
+	}
+	_updateGroupLabels() {
+		for (const child of Array.from(this.children)) if (child.tagName === `IXFX-TOOLBAR-GROUP`) {
+			if (this.showGroupLabels) child.setAttribute(`show-label`, ``);
+			else child.removeAttribute(`show-label`);
 		}
-		this._trackLayout = layout;
 	}
-	/**
-	* Range slider handler.
-	* Slider controls zoom (via span) + pan (via position).
-	* Derive ppu from the span the slider produces.
-	*/
-	#onHZoomInput;
-	/**
-	* Vertical range slider handler.
-	* Slider controls vertical zoom (via span) + vertical pan (via position).
-	* Derive _vScale from the span the slider produces.
-	*/
-	#onVZoomInput;
-	#onVAxisPointerDown;
-	#onVAxisPointerMove;
-	#onVAxisPointerUp;
-	/** Sync vertical scroll position to vcanvas logicalScrollTop */
-	#syncVerticalScroll() {
-		this.#syncVCanvasVertical();
-		this.#positionTabs();
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._ro?.disconnect();
 	}
-	/**
-	* Position track tabs in the .tab-column via absolute CSS positioning.
-	* Applies a vertical translateY to offset for the current vertical scroll.
-	*/
-	#positionTabs() {
-		const tabColumn = this.shadowRoot?.querySelector(`.tab-column`);
-		if (!tabColumn) return;
-		const scrollTop = this.#vcanvas?.logicalScrollTop ?? 0;
-		tabColumn.style.transform = `translateY(${-scrollTop}px)`;
-		for (const layout of this._trackLayout) {
-			const tab = tabColumn.querySelector(`ixfx-timeline-track-tab[track-key="${layout.trackKey}"]`);
-			if (!tab) continue;
-			tab.style.top = `${layout.y}px`;
-			tab.style.height = `${layout.height}px`;
-		}
+	/** Coalesce measure passes into one per frame; prevents slotchange feedback loops. */
+	_scheduleMeasure() {
+		if (this._measureQueued) return;
+		this._measureQueued = true;
+		requestAnimationFrame(() => {
+			this._measureQueued = false;
+			this._measure();
+		});
 	}
-	/** Read the tab width from the CSS custom property */
-	get #tabWidth() {
-		const raw = getComputedStyle(this).getPropertyValue(`--timeline-tab-width`).trim();
-		return Number.parseInt(raw, 10) || 120;
+	_measure() {
+		const children = Array.from(this.children);
+		const isGrow = (el) => el.hasAttribute(`grow`) || el.matches(`[grow]`);
+		const overflowable = children.filter((el) => !isGrow(el));
+		const isHoriz = this.orientation === `horizontal`;
+		if (this.layout !== `one-line`) {
+			let mutated = false;
+			for (const el of children) {
+				if (el.getAttribute(`slot`) === `overflow`) {
+					el.removeAttribute(`slot`);
+					mutated = true;
+				}
+				if (el.hasAttribute(`hidden`)) {
+					el.removeAttribute(`hidden`);
+					mutated = true;
+				}
+			}
+			if (this._overflowCount !== 0) {
+				this._overflowCount = 0;
+				mutated = true;
+			}
+			if (mutated) this.requestUpdate();
+			return;
+		}
+		if (!this._inner) return;
+		const cs = getComputedStyle(this._inner);
+		const gap = (isHoriz ? Number.parseFloat(cs.columnGap) : Number.parseFloat(cs.rowGap)) || 0;
+		const available = isHoriz ? this._inner.clientWidth : this._inner.clientHeight;
+		const btnSize = 36;
+		const inMain = overflowable.filter((el) => el.getAttribute(`slot`) !== `overflow`);
+		const inOverflow = overflowable.filter((el) => el.getAttribute(`slot`) === `overflow`);
+		let cum = 0;
+		inMain.forEach((el, i) => {
+			const s = isHoriz ? el.offsetWidth : el.offsetHeight;
+			if (s > 0) this._sizes.set(el, s);
+			cum += (i ? gap : 0) + (this._sizes.get(el) ?? s);
+		});
+		const btnAllowance = inOverflow.length > 0 ? gap + btnSize : 0;
+		let mutated = false;
+		while (inMain.length > 0 && cum + btnAllowance > available) {
+			const last = inMain[inMain.length - 1];
+			const s = this._sizes.get(last) ?? 0;
+			last.setAttribute(`slot`, `overflow`);
+			inMain.pop();
+			inOverflow.unshift(last);
+			cum -= (inMain.length ? gap : 0) + s;
+			mutated = true;
+		}
+		while (inOverflow.length > 0) {
+			const first = inOverflow[0];
+			const s = this._sizes.get(first);
+			if (s === void 0) break;
+			const addGap = inMain.length ? gap : 0;
+			const nextBtnAllowance = inOverflow.length > 1 ? gap + btnSize : 0;
+			if (cum + addGap + s + nextBtnAllowance > available) break;
+			first.removeAttribute(`slot`);
+			inOverflow.shift();
+			inMain.push(first);
+			cum += addGap + s;
+			mutated = true;
+		}
+		const newCount = inOverflow.length;
+		if (newCount !== this._overflowCount) {
+			this._overflowCount = newCount;
+			mutated = true;
+		}
+		if (mutated) this.requestUpdate();
 	}
-	/** Live preview during drag — update heights but don't fire public event */
-	#onTrackResizeMove;
-	/** Final resize on pointerup — apply height and fire public event */
-	#onTrackResizeEnd;
-	/**
-	* Apply track height based on the current `trackHeight` mode.
-	* - `fixed`: sets `defaultTrackHeight` (all tracks change uniformly)
-	* - `free`: sets per-track override in `_trackHeightOverrides`
-	* - `none`: should never be called (resize is disabled)
-	*/
-	#applyTrackResize(trackKey, height) {
-		if (this.trackHeight === `fixed`) this.defaultTrackHeight = height;
-		else if (this.trackHeight === `free`) {
-			const next = new Map(this._trackHeightOverrides);
-			next.set(trackKey, height);
-			this._trackHeightOverrides = next;
+	_toggleOverflow() {
+		try {
+			this._popover.togglePopover();
+		} catch {
+			this._popover.showPopover();
 		}
 	}
-	#fireSelectionChange() {
-		this.dispatchEvent(new CustomEvent(`selection-change`, {
-			detail: { selectedIds: [...this._selectedIds] },
-			bubbles: true,
-			composed: true
-		}));
+	render() {
+		const hasOverflow = this._overflowCount > 0;
+		return b`
+      <div class="inner" role="toolbar" aria-orientation=${this.orientation}>
+        <slot></slot>
+        <button class="overflow-btn" ?visible=${hasOverflow} @click=${this._toggleOverflow} aria-label="More" aria-haspopup="true" aria-expanded=${this._popover?.matches(`:popover-open`) ?? false}>⋯</button>
+      </div>
+      <div class="overflow-popover popup-surface" popover="auto" @click=${(e) => e.stopPropagation()}>
+        <slot name="overflow"></slot>
+      </div>
+    `;
 	}
 };
-__decorate([property({ type: Array })], IxfxTimelineElement.prototype, "tracks", void 0);
-__decorate([property({ type: Array })], IxfxTimelineElement.prototype, "events", void 0);
-__decorate([property({ type: Number })], IxfxTimelineElement.prototype, "min", void 0);
-__decorate([property({ type: Number })], IxfxTimelineElement.prototype, "max", void 0);
 __decorate([property({
 	type: String,
-	attribute: `track-height`
-})], IxfxTimelineElement.prototype, "trackHeight", void 0);
+	reflect: true
+})], ToolbarElement.prototype, "orientation", void 0);
 __decorate([property({
 	type: String,
-	attribute: `user-scale`
-})], IxfxTimelineElement.prototype, "userScale", void 0);
-__decorate([property({ type: Boolean })], IxfxTimelineElement.prototype, "reorderable", void 0);
+	reflect: true
+})], ToolbarElement.prototype, "layout", void 0);
 __decorate([property({
-	type: Boolean,
-	attribute: `meta`
-})], IxfxTimelineElement.prototype, "metaEnabled", void 0);
+	type: String,
+	attribute: `vertical-writing`,
+	reflect: true
+})], ToolbarElement.prototype, "verticalWriting", void 0);
 __decorate([property({
 	type: Boolean,
-	attribute: `alt-major-bg`
-})], IxfxTimelineElement.prototype, "altMajorBg", void 0);
-__decorate([property({
-	type: Number,
-	attribute: `default-track-height`
-})], IxfxTimelineElement.prototype, "defaultTrackHeight", void 0);
-__decorate([property({
-	type: String,
-	attribute: `grid-mode`
-})], IxfxTimelineElement.prototype, "gridMode", void 0);
+	attribute: `show-group-labels`,
+	reflect: true
+})], ToolbarElement.prototype, "showGroupLabels", void 0);
 __decorate([property({
-	type: Number,
-	attribute: `minor-step`
-})], IxfxTimelineElement.prototype, "minorStep", void 0);
-__decorate([property({ type: Object })], IxfxTimelineElement.prototype, "onDragging", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_ppu", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_viewRange", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_vViewRange", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_vScale", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_selectedIds", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_tickledId", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_drag", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_metaHeight", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_trackHeightOverrides", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_trackLayout", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_internalEvents", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_internalTracks", void 0);
-IxfxTimelineElement = __decorate([safeCustomElement(`ixfx-timeline`)], IxfxTimelineElement);
+	type: Boolean,
+	attribute: `invisible-groups`,
+	reflect: true
+})], ToolbarElement.prototype, "invisibleGroups", void 0);
+__decorate([state()], ToolbarElement.prototype, "_overflowCount", void 0);
+__decorate([query(`.inner`)], ToolbarElement.prototype, "_inner", void 0);
+__decorate([query(`.overflow-popover`)], ToolbarElement.prototype, "_popover", void 0);
+__decorate([query(`slot`)], ToolbarElement.prototype, "_slot", void 0);
+ToolbarElement = _ToolbarElement = __decorate([safeCustomElement(`ixfx-toolbar`)], ToolbarElement);
 //#endregion
 //#region src/transitory-label/transitory-label.ts
 let TransitoryLabelElement = class TransitoryLabelElement extends i {
@@ -30689,6 +31191,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GroupedItemListerElement, 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, NotificationManager, NotificationPillElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TimelineController, TimelineTrackTabElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, collectDataResult, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, createPillRenderer, createTreeListAdapter, createVerticalListAdapter, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
+export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GroupedItemListerElement, 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, NotificationManager, NotificationPillElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TimelineController, TimelineTrackTabElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, collectDataResult, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, createPillRenderer, createTreeListAdapter, createVerticalListAdapter, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
 
 //# sourceMappingURL=index.js.map