@ixfx/components 0.15.4 → 0.15.5

package/dist/sunbursttree-list-yXwS-uEI.js

@@ -0,0 +1,1337 @@
+import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
+import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, t as createTreeListSearchAdapter } from "./incr-search-JIhwB49y.js";
+import { t as collectDataResult } from "./data-provider-35TyWclX.js";
+import { LitElement, css, html, nothing, svg } from "lit";
+import { property, state } from "lit/decorators.js";
+import { createCommandRegistry } from "@clinth/ui-commands";
+import { repeat } from "lit/directives/repeat.js";
+//#region src/sunburst-tree/types.ts
+/** Ids are key paths; keys only need to be unique among siblings. */
+const SUNBURST_PATH_SEPARATOR = `\u001F`;
+//#endregion
+//#region src/sunburst-tree/layout.ts
+/** Default accessor: the shared `TreeItem.weight` field. */
+const defaultSunburstValueAccessor = (item) => item.weight;
+/** Id of the child `key` under `parentId`. */
+function sunburstChildId(parentId, key) {
+	return `${parentId}${SUNBURST_PATH_SEPARATOR}${key}`;
+}
+/** Join a key path (root key first) into an id. */
+function sunburstPathToId(path) {
+	return path.join(SUNBURST_PATH_SEPARATOR);
+}
+/** True when `ancestorId` is a strict ancestor of `id`. */
+function isSunburstAncestorId(ancestorId, id) {
+	return id.startsWith(`${ancestorId}${SUNBURST_PATH_SEPARATOR}`);
+}
+/** Split an id back into its key path. */
+function sunburstIdToPath(id) {
+	return id.split(SUNBURST_PATH_SEPARATOR);
+}
+/** Parent id, or `undefined` for the root id. */
+function sunburstParentId(id) {
+	const at = id.lastIndexOf(SUNBURST_PATH_SEPARATOR);
+	return at < 0 ? void 0 : id.slice(0, at);
+}
+/** Resolve an id (key path from the root, root key included) to a node. */
+function findSunburstNodeById(root, id) {
+	if (!root) return void 0;
+	const [rootKey, ...rest] = sunburstIdToPath(id);
+	if (rootKey !== root.item.key) return void 0;
+	let current = root;
+	for (const key of rest) {
+		current = current.children?.find((c) => c.item.key === key);
+		if (!current) return void 0;
+	}
+	return current;
+}
+/**
+* Depth-first search for the first node matching `predicate`. Returns its id
+* (root key included), or `undefined`.
+*/
+function findSunburstId(root, predicate) {
+	if (!root) return void 0;
+	const visit = (node, id) => {
+		if (predicate(node)) return id;
+		for (const child of node.children ?? []) {
+			const hit = visit(child, sunburstChildId(id, child.item.key));
+			if (hit !== void 0) return hit;
+		}
+	};
+	return visit(root, root.item.key);
+}
+/** Valid explicit value: finite and non-negative. */
+function explicitValue(raw) {
+	return typeof raw === `number` && Number.isFinite(raw) && raw >= 0 ? raw : void 0;
+}
+/**
+* Returns a memoised resolver for node values: the accessor's value when
+* valid, else the sum of loaded children, else `1`.
+*/
+function createValueResolver(accessor) {
+	const cache = /* @__PURE__ */ new Map();
+	const resolve = (node) => {
+		const cached = cache.get(node);
+		if (cached !== void 0) return cached;
+		let value = explicitValue(accessor(node.item, node));
+		if (value === void 0) {
+			const children = node.children ?? [];
+			value = children.length > 0 ? children.reduce((sum, c) => sum + resolve(c), 0) : 1;
+		}
+		cache.set(node, value);
+		return value;
+	};
+	return resolve;
+}
+/** True when `node` may have children (loaded or loadable). */
+function sunburstHasChildren(node) {
+	if (node.children !== void 0) return node.children.length > 0;
+	return node.item.isLeaf !== true;
+}
+/**
+* Compute the absolute layout of the whole (loaded) tree. The root spans the
+* full turn at depth `0`; each child spans
+* `parentSpan × value / max(parentValue, Σ siblingValues)`, packed from the
+* parent's start angle in sibling order. Returned in ring-major order.
+*/
+function computeSunburstLayout(root, options = {}) {
+	const out = /* @__PURE__ */ new Map();
+	if (!root) return out;
+	const { valueAccessor = defaultSunburstValueAccessor, maxDepth = Number.POSITIVE_INFINITY } = options;
+	const valueOf = createValueResolver(valueAccessor);
+	const rootEntry = {
+		id: root.item.key,
+		node: root,
+		parentId: void 0,
+		depth: 0,
+		x0: 0,
+		x1: 1,
+		value: valueOf(root),
+		index: 0,
+		setSize: 1,
+		hasChildren: sunburstHasChildren(root)
+	};
+	out.set(rootEntry.id, rootEntry);
+	let ring = [rootEntry];
+	while (ring.length > 0) {
+		const next = [];
+		for (const parent of ring) {
+			const children = parent.node.children ?? [];
+			if (children.length === 0 || parent.depth + 1 > maxDepth) continue;
+			const values = children.map(valueOf);
+			const total = values.reduce((a, b) => a + b, 0);
+			const denominator = Math.max(parent.value, total);
+			const span = parent.x1 - parent.x0;
+			let cursor = parent.x0;
+			children.forEach((node, index) => {
+				const width = denominator > 0 ? span * values[index] / denominator : 0;
+				const entry = {
+					id: sunburstChildId(parent.id, node.item.key),
+					node,
+					parentId: parent.id,
+					depth: parent.depth + 1,
+					x0: cursor,
+					x1: cursor + width,
+					value: values[index],
+					index,
+					setSize: children.length,
+					hasChildren: sunburstHasChildren(node)
+				};
+				cursor += width;
+				out.set(entry.id, entry);
+				next.push(entry);
+			});
+		}
+		ring = next;
+	}
+	return out;
+}
+//#endregion
+//#region src/sunburst-tree/geometry.ts
+const TAU = Math.PI * 2;
+/** Spans at least this close to a full turn are drawn as full rings. */
+const FULL_TURN = 1 - 1e-6;
+const clamp01 = (v) => Math.min(1, Math.max(0, v));
+/** View that makes `zoom` the centre and its span the full circle. */
+function sunburstViewFor(zoom) {
+	if (!zoom || zoom.x1 - zoom.x0 <= 0) return {
+		x0: 0,
+		x1: 1,
+		depth: 0
+	};
+	return {
+		x0: zoom.x0,
+		x1: zoom.x1,
+		depth: zoom.depth
+	};
+}
+/** Screen angles + relative ring for `node` seen through `view`. */
+function projectArc(node, view) {
+	const span = view.x1 - view.x0;
+	return {
+		a0: clamp01((node.x0 - view.x0) / span),
+		a1: clamp01((node.x1 - view.x0) / span),
+		depth: node.depth - view.depth - 1
+	};
+}
+/**
+* Radius of ring boundary `d`. Boundary `0` is the centre disc's edge;
+* negative boundaries shrink linearly into the centre, so the zoom node
+* (ring `-1`) is the centre disc and its ancestors collapse to nothing.
+*/
+function ringBoundary(d, rings) {
+	return d >= 0 ? rings.center + d * rings.ring : Math.max(0, rings.center * (1 + d));
+}
+/** Inner/outer radius of an arc sitting in (possibly fractional) ring `depth`. */
+function arcRadii(depth, rings) {
+	return {
+		inner: ringBoundary(depth, rings),
+		outer: ringBoundary(depth + 1, rings)
+	};
+}
+/** Split `outerRadius` into a centre disc and `maxDepth` equal rings. */
+function computeRings(outerRadius, maxDepth, centerRatio) {
+	const radius = Math.max(0, outerRadius);
+	const center = radius * Math.min(.9, Math.max(0, centerRatio));
+	return {
+		center,
+		ring: (radius - center) / Math.max(1, maxDepth)
+	};
+}
+function point(angle, r) {
+	const theta = angle * TAU;
+	return `${(r * Math.sin(theta)).toFixed(2)} ${(-r * Math.cos(theta)).toFixed(2)}`;
+}
+function circle(r) {
+	const d = (r * 2).toFixed(2);
+	return `M0 ${(-r).toFixed(2)}a${r.toFixed(2)} ${r.toFixed(2)} 0 1 1 0 ${d}a${r.toFixed(2)} ${r.toFixed(2)} 0 1 1 0 -${d}Z`;
+}
+/**
+* SVG path for an annular sector. Full turns become a ring (two circles,
+* drawn with `fill-rule: evenodd`) or a disc when `inner` is `0`. Returns
+* an empty string for degenerate arcs.
+*/
+function arcPath(a0, a1, inner, outer) {
+	const span = a1 - a0;
+	if (span <= 0 || outer <= 0 || outer <= inner) return ``;
+	if (span >= FULL_TURN) return inner > 0 ? `${circle(outer)}${circle(inner)}` : circle(outer);
+	const large = span > .5 ? 1 : 0;
+	const o = outer.toFixed(2);
+	if (inner <= 0) return `M0 0L${point(a0, outer)}A${o} ${o} 0 ${large} 1 ${point(a1, outer)}Z`;
+	const i = inner.toFixed(2);
+	return `M${point(a0, outer)}A${o} ${o} 0 ${large} 1 ${point(a1, outer)}L${point(a1, inner)}A${i} ${i} 0 ${large} 0 ${point(a0, inner)}Z`;
+}
+/** On-screen length (px) of the outer edge of an arc. */
+function arcLength(a0, a1, radius) {
+	return Math.max(0, a1 - a0) * TAU * radius;
+}
+/**
+* Guide path for curved text: an arc of radius `r` from `a0` to `a1`,
+* clockwise — or, when `flip`, counter-clockwise from `a1` to `a0` so text
+* in the bottom half reads left-to-right rather than upside-down.
+*/
+function labelArcPath(a0, a1, r, flip) {
+	const end = Math.min(a1, a0 + .9999);
+	const large = end - a0 > .5 ? 1 : 0;
+	const rr = r.toFixed(2);
+	return flip ? `M${point(end, r)}A${rr} ${rr} 0 ${large} 0 ${point(a0, r)}` : `M${point(a0, r)}A${rr} ${rr} 0 ${large} 1 ${point(end, r)}`;
+}
+function truncate(label, fits) {
+	return label.length <= fits ? label : `${label.slice(0, fits - 1)}…`;
+}
+/**
+* Where to draw `label` inside an arc, or `undefined` if it can't fit
+* legibly. Prefers tangential text (following the ring) when the arc is long
+* enough — curved along the ring with `curved`, else straight — otherwise
+* radial text truncated to the ring width. All are oriented to read upright.
+*/
+function labelPlacement(visual, label, rings, fontSize, options = {}) {
+	if (visual.depth < 0 || label.length === 0) return void 0;
+	const { inner, outer } = arcRadii(visual.depth, rings);
+	const thickness = outer - inner;
+	const mid = (inner + outer) / 2;
+	const span = visual.a1 - visual.a0;
+	const chord = arcLength(visual.a0, visual.a1, mid);
+	const charWidth = fontSize * .6;
+	const pad = fontSize * .5;
+	const midAngle = (visual.a0 + visual.a1) / 2;
+	const degrees = midAngle * 360;
+	const bottomHalf = degrees > 90 && degrees < 270;
+	const lineFits = thickness >= fontSize * 1.3;
+	if (options.curved && lineFits) {
+		const fits = Math.floor((chord - pad) / charWidth);
+		if (fits >= Math.min(label.length, 4)) return {
+			kind: `curved`,
+			path: span >= FULL_TURN ? labelArcPath(.5, 1.5, mid, false) : labelArcPath(visual.a0, visual.a1, mid, bottomHalf),
+			text: truncate(label, fits)
+		};
+	}
+	const theta = midAngle * TAU;
+	const x = mid * Math.sin(theta);
+	const y = -mid * Math.cos(theta);
+	if (!options.curved && lineFits && span < .5 && chord >= label.length * charWidth + pad) return {
+		kind: `straight`,
+		x,
+		y,
+		rotate: degrees + (bottomHalf ? 180 : 0),
+		text: label
+	};
+	if (chord < fontSize * 1.1) return void 0;
+	const fits = Math.floor((thickness - pad) / charWidth);
+	if (fits < 3) return void 0;
+	return {
+		kind: `straight`,
+		x,
+		y,
+		rotate: degrees - 90 + (degrees > 180 ? 180 : 0),
+		text: truncate(label, fits)
+	};
+}
+/**
+* Target hue offset (degrees) per arc: the angular midpoint of its
+* first-ring ancestor (the zoom node's child it descends from), so the ring
+* around the centre spans the colour wheel and everything outside it takes a
+* tone of its ancestor's hue. Arcs outside the zoomed subtree get no entry.
+*/
+function targetHues(layout, view, zoomId) {
+	const hues = /* @__PURE__ */ new Map();
+	for (const entry of layout.values()) {
+		if (entry.depth <= view.depth) continue;
+		if (entry.parentId === zoomId) {
+			const { a0, a1 } = projectArc(entry, view);
+			hues.set(entry.id, (a0 + a1) / 2 * 360);
+			continue;
+		}
+		const parentHue = entry.parentId === void 0 ? void 0 : hues.get(entry.parentId);
+		if (parentHue !== void 0) hues.set(entry.id, parentHue);
+	}
+	return hues;
+}
+/** Tone offset from sibling position, so neighbouring same-hue arcs differ. */
+function siblingShade(index, setSize) {
+	return setSize <= 1 ? 0 : (index + .5) / setSize - .5;
+}
+//#endregion
+//#region src/sunburst-tree/keyboard.ts
+/**
+* Id the cursor moves to for `key`, or `undefined` when the key isn't a
+* navigation key or there's nowhere to go. With no current arc, any
+* navigation key lands on the first arc.
+*/
+function sunburstKeyTarget(arcs, currentId, key) {
+	if (arcs.length === 0) return void 0;
+	const current = currentId === void 0 ? void 0 : arcs.find((a) => a.id === currentId);
+	if (key === `Home`) return arcs[0].id;
+	if (key === `End`) return arcs.at(-1).id;
+	if (![
+		`ArrowLeft`,
+		`ArrowRight`,
+		`ArrowUp`,
+		`ArrowDown`
+	].includes(key)) return void 0;
+	if (!current) return arcs[0].id;
+	switch (key) {
+		case `ArrowLeft`:
+		case `ArrowRight`: {
+			const siblings = arcs.filter((a) => a.parentId === current.parentId);
+			return siblings[(siblings.findIndex((a) => a.id === current.id) + (key === `ArrowRight` ? 1 : -1) + siblings.length) % siblings.length].id;
+		}
+		case `ArrowUp`: return arcs.find((a) => a.id === current.parentId)?.id;
+		default: return arcs.find((a) => a.parentId === current.id)?.id;
+	}
+}
+//#endregion
+//#region src/sunburst-tree/styles.ts
+/**
+* Shadow-DOM styles for `ixfx-sunbursttree-list`.
+*
+* Arc colour is computed here, not in JS: each arc carries its (animated)
+* `--arc-hue`, `--arc-depth`, `--arc-shade` and `--arc-centre`, and the
+* `--sunbursttree-*` knobs turn those into a fill — so the palette is
+* themeable without touching the component.
+*/
+const sunburstTreeStyles = css`
+  :host {
+    --sunbursttree-hue-start: 250;
+    --sunbursttree-chroma: 0.14;
+    --sunbursttree-chroma-step: 0.015;
+    --sunbursttree-lightness: 60%;
+    --sunbursttree-lightness-step: 5%;
+    --sunbursttree-shade-step: 10%;
+    --sunbursttree-center-color: var(--surface-4);
+    --sunbursttree-center-text: var(--surface-4-text);
+    --sunbursttree-gap-color: var(--surface-2);
+    --sunbursttree-gap: 1px;
+    --sunbursttree-font-size: 11px;
+    --sunbursttree-label-lightness: 22%;
+
+    display: block;
+    position: relative;
+    min-height: 200px;
+    aspect-ratio: 1;
+    outline: none;
+  }
+
+  :host(:focus),
+  :host(:focus-visible) {
+    outline: none;
+  }
+
+  .sunburst {
+    display: block;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    overflow: hidden;
+    font-size: var(--sunbursttree-font-size);
+  }
+
+  .arc {
+    --_l: clamp(
+      10%,
+      calc(
+        var(--sunbursttree-lightness)
+        + var(--arc-depth, 0) * var(--sunbursttree-lightness-step)
+        + var(--arc-shade, 0) * var(--sunbursttree-shade-step)
+        + var(--_boost, 0%)
+      ),
+      95%
+    );
+    --_c: max(0, calc(var(--sunbursttree-chroma) - var(--arc-depth, 0) * var(--sunbursttree-chroma-step)));
+    --_arc-color: oklch(var(--_l) var(--_c) calc(var(--sunbursttree-hue-start) + var(--arc-hue, 0)));
+
+    fill: color-mix(in oklch, var(--_arc-color), var(--sunbursttree-center-color) calc(var(--arc-centre, 0) * 100%));
+    fill-rule: evenodd;
+    stroke: var(--sunbursttree-gap-color);
+    stroke-width: var(--sunbursttree-gap);
+    stroke-linejoin: round;
+    cursor: pointer;
+  }
+
+  .arc.tickled {
+    --_boost: 10%;
+  }
+
+  .arc.selected {
+    stroke: var(--accent);
+    stroke-width: calc(var(--sunbursttree-gap) + 1.5px);
+    paint-order: fill;
+  }
+
+  .arc.filtered {
+    fill-opacity: 0.3;
+  }
+
+  .arc.loading {
+    cursor: progress;
+  }
+
+  .arc.exiting {
+    pointer-events: none;
+  }
+
+  .arc.center.leaf {
+    cursor: default;
+  }
+
+  .sunburst-label {
+    fill: oklch(var(--sunbursttree-label-lightness) 0.03 calc(var(--sunbursttree-hue-start) + var(--arc-hue, 0)));
+    pointer-events: none;
+    user-select: none;
+    dominant-baseline: central;
+    text-anchor: middle;
+  }
+
+  .center-readout {
+    fill: var(--sunbursttree-center-text);
+    pointer-events: none;
+    user-select: none;
+    text-anchor: middle;
+    dominant-baseline: central;
+  }
+
+  .center-readout .center-label {
+    font-weight: var(--font-weight-bold, 600);
+  }
+
+  .center-readout .center-meta {
+    fill-opacity: 0.75;
+  }
+
+  .empty-state {
+    padding: var(--space-l);
+    color: var(--surface-muted-text);
+    font-size: var(--text-s);
+  }
+`;
+//#endregion
+//#region src/sunburst-tree/tween.ts
+function easeInOutCubic(t) {
+	return t < .5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+}
+function easeOutCubic(t) {
+	return 1 - (1 - t) ** 3;
+}
+function prefersReducedMotion() {
+	return typeof matchMedia === `function` && matchMedia(`(prefers-reduced-motion: reduce)`).matches;
+}
+const lerp = (a, b, t) => a + (b - a) * t;
+/** Interpolate hue (degrees) along the shorter way round the wheel. */
+function lerpHue(a, b, t) {
+	return a + (((b - a) % 360 + 540) % 360 - 180) * t;
+}
+function lerpVisual(a, b, t) {
+	return {
+		a0: lerp(a.a0, b.a0, t),
+		a1: lerp(a.a1, b.a1, t),
+		depth: lerp(a.depth, b.depth, t),
+		hue: lerpHue(a.hue, b.hue, t),
+		shade: lerp(a.shade, b.shade, t),
+		opacity: lerp(a.opacity, b.opacity, t)
+	};
+}
+function planTransition(options) {
+	const { current, targets, enter, exit } = options;
+	const from = /* @__PURE__ */ new Map();
+	const to = /* @__PURE__ */ new Map();
+	const exiting = /* @__PURE__ */ new Set();
+	for (const [id, target] of targets) {
+		from.set(id, current.get(id) ?? enter(id, target));
+		to.set(id, target);
+	}
+	for (const [id, shown] of current) {
+		if (targets.has(id)) continue;
+		from.set(id, shown);
+		to.set(id, exit(id, shown));
+		exiting.add(id);
+	}
+	return {
+		from,
+		to,
+		exiting
+	};
+}
+/** Displayed state at eased progress `t` (0–1). */
+function sampleTransition(transition, t) {
+	const out = /* @__PURE__ */ new Map();
+	for (const [id, target] of transition.to) {
+		const start = transition.from.get(id) ?? target;
+		out.set(id, t >= 1 ? target : lerpVisual(start, target, t));
+	}
+	return out;
+}
+/** Settled state: the targets, without the arcs that animated out. */
+function settleTransition(transition) {
+	const out = /* @__PURE__ */ new Map();
+	for (const [id, target] of transition.to) if (!transition.exiting.has(id)) out.set(id, target);
+	return out;
+}
+const EPSILON = 1e-4;
+function sameVisual(a, b) {
+	return Math.abs(a.a0 - b.a0) < EPSILON && Math.abs(a.a1 - b.a1) < EPSILON && Math.abs(a.depth - b.depth) < EPSILON && Math.abs(lerpHue(a.hue, b.hue, 1) - a.hue) < EPSILON * 360 && Math.abs(a.shade - b.shade) < EPSILON && Math.abs(a.opacity - b.opacity) < EPSILON;
+}
+/** True when two target sets would render identically. */
+function sameTargets(a, b) {
+	if (a.size !== b.size) return false;
+	for (const [id, va] of a) {
+		const vb = b.get(id);
+		if (!vb || !sameVisual(va, vb)) return false;
+	}
+	return true;
+}
+//#endregion
+//#region src/sunburst-tree/sunbursttree-list.ts
+const defaultFormatter = (value) => value.toLocaleString(void 0, { maximumFractionDigits: 2 });
+let instanceCount = 0;
+/** Size used before the element has been measured (and in DOM-less tests). */
+const FALLBACK_SIZE = 320;
+let SunburstTreeListElement = class SunburstTreeListElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.exclusivity = `none`;
+		this.selectionFilter = `all`;
+		this.interactionMode = `standard`;
+		this.maxDepth = 5;
+		this.centerRatio = .22;
+		this.minArcLength = 1.5;
+		this.disableLabels = false;
+		this.curvedLabels = false;
+		this.animationDuration = 600;
+		this.valueAccessor = defaultSunburstValueAccessor;
+		this.valueFormatter = defaultFormatter;
+		this._selectedNodes = /* @__PURE__ */ new Set();
+		this.disableKeyboardNavigation = false;
+		this.registry = void 0;
+		this._zoomId = void 0;
+		this._size = {
+			width: 0,
+			height: 0
+		};
+		this.search = new ListSearchController(this, { adapter: createTreeListSearchAdapter(this, {
+			labelSelector: `.sunburst-label`,
+			highlightKey: `incr-search-highlight`
+		}) });
+		this.tickled = new TickledController(this, {
+			getItems: () => this.#visibleArcs().map((a) => ({
+				id: a.id,
+				enabled: true
+			})),
+			onStateChange: () => {
+				this.setAttribute(`data-input-mode`, this.tickled.inputMode);
+			},
+			onTickle: (id) => {
+				const entry = id === void 0 ? void 0 : this.#layout.get(id);
+				if (!entry) return;
+				this.dispatchEvent(new CustomEvent(`tickle`, {
+					detail: {
+						node: entry.node,
+						depth: entry.depth - 1
+					},
+					bubbles: true,
+					composed: true
+				}));
+			}
+		});
+		this._layoutDirty = true;
+		this._ticking = false;
+		this.#layout = /* @__PURE__ */ new Map();
+		this.#view = {
+			x0: 0,
+			x1: 1,
+			depth: 0
+		};
+		this.#rings = {
+			center: 0,
+			ring: 0
+		};
+		this.#targets = /* @__PURE__ */ new Map();
+		this.#displayed = /* @__PURE__ */ new Map();
+		this.#animStart = 0;
+		this.#easing = easeInOutCubic;
+		this.#fontSize = 11;
+		this.#labelIdPrefix = `sunburst-${++instanceCount}-label-`;
+		this.#pendingIds = /* @__PURE__ */ new Set();
+		this.#aborters = /* @__PURE__ */ new Map();
+		this.#tick = (now) => {
+			this.#raf = void 0;
+			const transition = this.#transition;
+			if (!transition) return;
+			const t = (now - this.#animStart) / Math.max(1, this.animationDuration);
+			if (t >= 1) {
+				this.#displayed = settleTransition(transition);
+				this.#transition = void 0;
+			} else {
+				this.#displayed = sampleTransition(transition, this.#easing(Math.max(0, t)));
+				this.#raf = requestAnimationFrame(this.#tick);
+			}
+			this._ticking = true;
+			try {
+				this.requestUpdate();
+			} finally {
+				this._ticking = false;
+			}
+		};
+	}
+	static {
+		this.shadowRootOptions = {
+			...LitElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	get selectedNodes() {
+		return this._selectedNodes;
+	}
+	/** Current zoom root. `undefined` when showing the full tree. Pure view-state. */
+	get focusedNode() {
+		if (this._zoomId === void 0) return void 0;
+		return findSunburstNodeById(this.#effectiveRoot, this._zoomId);
+	}
+	#layout;
+	#view;
+	#rings;
+	#targets;
+	#displayed;
+	#transition;
+	#animStart;
+	#easing;
+	#raf;
+	#fontSize;
+	/** Unique per instance — guide-path ids are referenced by `<textPath href>`. */
+	#labelIdPrefix;
+	#filtered;
+	#modelUnsubscribe;
+	#pendingIds;
+	#aborters;
+	#anchorIndex;
+	#ownedRegistry;
+	#unregisterSearchCommands;
+	#resizeObserver;
+	get #effectiveRoot() {
+		return this.model?.root ?? this.root;
+	}
+	get #zoomEntryId() {
+		return this._zoomId ?? this.#effectiveRoot?.item.key;
+	}
+	/** Settled, interactive arcs (the centre excluded), in ring-major order. */
+	#visibleArcs() {
+		const out = [];
+		for (const [id, target] of this.#targets) {
+			const entry = this.#layout.get(id);
+			if (entry && target.depth >= 0) out.push(entry);
+		}
+		return out;
+	}
+	requestUpdate(...args) {
+		if (!this._ticking) this._layoutDirty = true;
+		super.requestUpdate(...args);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute(`data-input-mode`, `mouse`);
+		const registry = this.#ownedRegistry = createCommandRegistry();
+		registry.register({
+			id: `select-all`,
+			label: `Select All`,
+			description: `Select all visible items`,
+			execute: () => this.selectAll()
+		});
+		registry.register({
+			id: `deselect-all`,
+			label: `Deselect All`,
+			description: `Clear all selection`,
+			execute: () => this.deselectAll()
+		});
+		registry.register({
+			id: `zoom-up`,
+			label: `Zoom Out One Level`,
+			description: `Zoom to the parent of the centre`,
+			execute: () => this.zoomUp()
+		});
+		this.registry = registry;
+		this.#syncSearchCommands();
+		if (typeof ResizeObserver !== `undefined`) {
+			this.#resizeObserver = new ResizeObserver(([entry]) => {
+				const { width, height } = entry.contentRect;
+				this.#fontSize = Number.parseFloat(getComputedStyle(this).getPropertyValue(`--sunbursttree-font-size`)) || 11;
+				if (width !== this._size.width || height !== this._size.height) this._size = {
+					width,
+					height
+				};
+			});
+			this.#resizeObserver.observe(this);
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#modelUnsubscribe?.();
+		this.#modelUnsubscribe = void 0;
+		for (const aborter of this.#aborters.values()) aborter.abort();
+		this.#aborters.clear();
+		this.#pendingIds.clear();
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+		if (this.#raf !== void 0) cancelAnimationFrame(this.#raf);
+		this.#raf = void 0;
+		if (this.#transition) this.#displayed = settleTransition(this.#transition);
+		this.#transition = void 0;
+		if (this.#ownedRegistry) {
+			for (const id of [
+				`select-all`,
+				`deselect-all`,
+				`zoom-up`
+			]) this.#ownedRegistry.unregister(id);
+			this.#ownedRegistry = void 0;
+			this.registry = void 0;
+		}
+	}
+	#effectiveSearchModes() {
+		const raw = this.searchModes?.trim();
+		if (raw === void 0) return [...LIST_SEARCH_MODES];
+		const requested = new Set(raw.split(/\s+/));
+		return LIST_SEARCH_MODES.filter((m) => requested.has(m));
+	}
+	#syncSearchCommands() {
+		if (!this.#ownedRegistry) return;
+		this.search.setModes(this.#effectiveSearchModes());
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = registerListSearchCommands(this.#ownedRegistry, this.search);
+	}
+	willUpdate(changed) {
+		if (changed.has(`root`) && changed.get(`root`) !== void 0) this.#remapSelection();
+		if (changed.has(`interactionMode`) && changed.get(`interactionMode`) !== void 0) {
+			this.#anchorIndex = void 0;
+			this.#clearSelectionInternal();
+		}
+		if (this._layoutDirty) {
+			this._layoutDirty = false;
+			this.#retarget();
+		}
+	}
+	updated(changed) {
+		if (changed.has(`model`)) {
+			this.#modelUnsubscribe?.();
+			this.#modelUnsubscribe = this.model?._subscribe(() => this.requestUpdate());
+		}
+		if (changed.has(`searchModes`)) this.#syncSearchCommands();
+		this.#ensureVisibleChildren();
+	}
+	#outerRadius() {
+		const width = this._size.width || FALLBACK_SIZE;
+		const height = this._size.height || FALLBACK_SIZE;
+		return Math.max(0, Math.min(width, height) / 2 - 2);
+	}
+	/** Recompute the layout and start animating towards it (if anything changed). */
+	#retarget() {
+		const root = this.#effectiveRoot;
+		const prevLayout = this.#layout;
+		const prevView = this.#view;
+		const maxDepth = Math.max(1, Math.floor(this.maxDepth));
+		const zoomDepth = this._zoomId === void 0 ? 0 : sunburstIdToPath(this._zoomId).length - 1;
+		const layout = computeSunburstLayout(root, {
+			valueAccessor: this.valueAccessor,
+			maxDepth: Math.max(zoomDepth, prevView.depth) + maxDepth
+		});
+		if (this._zoomId !== void 0 && !layout.has(this._zoomId)) this._zoomId = void 0;
+		const zoomId = this.#zoomEntryId;
+		const view = sunburstViewFor(zoomId === void 0 ? void 0 : layout.get(zoomId));
+		const rings = computeRings(this.#outerRadius(), maxDepth, this.centerRatio);
+		const targets = this.#computeTargets(layout, view, rings, zoomId, maxDepth);
+		this.#layout = layout;
+		this.#view = view;
+		this.#rings = rings;
+		if (sameTargets(targets, this.#targets)) return;
+		this.#targets = targets;
+		const transition = planTransition({
+			current: this.#displayed,
+			targets,
+			enter: (id, target) => {
+				const before = prevLayout.get(id);
+				if (before) {
+					const p = projectArc(before, prevView);
+					return {
+						...target,
+						...p,
+						opacity: 0
+					};
+				}
+				return {
+					...target,
+					a1: target.a0
+				};
+			},
+			exit: (id, shown) => {
+				const now = layout.get(id);
+				if (now) return {
+					...shown,
+					...projectArc(now, view),
+					opacity: 0
+				};
+				const mid = (shown.a0 + shown.a1) / 2;
+				return {
+					...shown,
+					a0: mid,
+					a1: mid,
+					opacity: 0
+				};
+			}
+		});
+		this.#startTransition(transition);
+	}
+	#computeTargets(layout, view, rings, zoomId, maxDepth) {
+		const targets = /* @__PURE__ */ new Map();
+		if (zoomId === void 0) return targets;
+		const hues = targetHues(layout, view, zoomId);
+		for (const entry of layout.values()) {
+			const p = projectArc(entry, view);
+			if (p.depth < -1 || p.depth >= maxDepth) continue;
+			if (p.depth === -1 ? entry.id !== zoomId : !hues.has(entry.id)) continue;
+			if (p.depth >= 0 && arcLength(p.a0, p.a1, arcRadii(p.depth, rings).outer) < this.minArcLength) continue;
+			targets.set(entry.id, {
+				...p,
+				hue: hues.get(entry.id) ?? this.#displayed.get(entry.id)?.hue ?? 0,
+				shade: siblingShade(entry.index, entry.setSize),
+				opacity: 1
+			});
+		}
+		return targets;
+	}
+	#startTransition(transition) {
+		if ((prefersReducedMotion() ? 0 : this.animationDuration) <= 0 || !this.isConnected) {
+			this.#transition = void 0;
+			this.#displayed = settleTransition(transition);
+			return;
+		}
+		this.#easing = this.#transition ? easeOutCubic : easeInOutCubic;
+		this.#transition = transition;
+		this.#displayed = sampleTransition(transition, 0);
+		this.#animStart = performance.now();
+		this.#raf ??= requestAnimationFrame(this.#tick);
+	}
+	#tick;
+	/** After `root` is replaced, carry the selection over by key path. */
+	#remapSelection() {
+		if (this._selectedNodes.size === 0) return;
+		const idOf = /* @__PURE__ */ new Map();
+		for (const entry of this.#layout.values()) idOf.set(entry.node, entry.id);
+		const root = this.#effectiveRoot;
+		const remap = (node) => {
+			const id = node === void 0 ? void 0 : idOf.get(node);
+			return id === void 0 ? void 0 : findSunburstNodeById(root, id);
+		};
+		this._selectedNodes = new Set([...this._selectedNodes].map(remap).filter((n) => n !== void 0));
+		this.selectedNode = remap(this.selectedNode) ?? [...this._selectedNodes].at(-1);
+		this.#anchorIndex = void 0;
+	}
+	#ensureVisibleChildren() {
+		if (!this.model && !this.loadChildren) return;
+		for (const id of this.#targets.keys()) {
+			const entry = this.#layout.get(id);
+			if (!entry || entry.node.children !== void 0 || entry.node.item.isLeaf === true || this.#pendingIds.has(id)) continue;
+			this.#loadChildren(entry);
+		}
+	}
+	async #loadChildren(entry) {
+		const { id, node } = entry;
+		const depth = entry.depth - 1;
+		this.#pendingIds.add(id);
+		const controller = new AbortController();
+		this.#aborters.set(id, controller);
+		try {
+			const children = this.model ? await this.model.getChildren(node, depth, controller.signal) : [...await collectDataResult(this.loadChildren({
+				node,
+				depth
+			}, controller.signal), controller.signal)];
+			if (controller.signal.aborted) return;
+			node.children = children;
+		} catch {
+			if (controller.signal.aborted) return;
+			node.children = [];
+		} finally {
+			this.#pendingIds.delete(id);
+			this.#aborters.delete(id);
+			if (!controller.signal.aborted) this.requestUpdate();
+		}
+	}
+	#canSelect(node) {
+		if (this.selectionFilter === `none`) return false;
+		if (this.selectionFilter === `leaf`) return node.item.isLeaf === true;
+		if (this.selectionFilter === `branch`) return node.item.isLeaf === false || node.children !== void 0 && node.children.length > 0;
+		return true;
+	}
+	#clearSelectionInternal() {
+		this._selectedNodes = /* @__PURE__ */ new Set();
+		this.selectedNode = void 0;
+	}
+	#commitSelection(next, primary = [...next].at(-1)) {
+		const previous = this._selectedNodes;
+		this._selectedNodes = next;
+		this.selectedNode = primary;
+		this.dispatchEvent(new CustomEvent(`select`, {
+			detail: {
+				selected: new Set(next),
+				previous
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	select(node) {
+		if (this.#canSelect(node)) this.#commitSelection(/* @__PURE__ */ new Set([node]), node);
+	}
+	deselect(node) {
+		if (!this._selectedNodes.has(node)) return;
+		const next = new Set(this._selectedNodes);
+		next.delete(node);
+		this.#commitSelection(next, this.selectedNode === node ? [...next].at(-1) : this.selectedNode);
+	}
+	clearSelection() {
+		if (this._selectedNodes.size > 0) this.#commitSelection(/* @__PURE__ */ new Set());
+	}
+	selectAll() {
+		this.#commitSelection(/* @__PURE__ */ new Set([...this._selectedNodes, ...this.#visibleArcs().map((a) => a.node).filter((n) => this.#canSelect(n))]));
+	}
+	deselectAll() {
+		this.#commitSelection(/* @__PURE__ */ new Set());
+	}
+	selectMany(nodes) {
+		this.#commitSelection(new Set([...nodes].filter((n) => this.#canSelect(n))));
+	}
+	#idOf(node) {
+		for (const entry of this.#layout.values()) if (entry.node === node) return entry.id;
+		return findSunburstId(this.#effectiveRoot, (n) => n === node);
+	}
+	#setZoom(id) {
+		const zoomId = id === this.#effectiveRoot?.item.key ? void 0 : id;
+		if (zoomId === this._zoomId) return;
+		const previousId = this._zoomId;
+		const previous = this.focusedNode;
+		this._zoomId = zoomId;
+		this.tickled.clearTickled();
+		const node = this.focusedNode;
+		const depthOf = (key) => key === void 0 ? -1 : sunburstIdToPath(key).length - 2;
+		this.dispatchEvent(new CustomEvent(`zoom`, {
+			detail: {
+				node,
+				depth: depthOf(zoomId)
+			},
+			bubbles: true,
+			composed: true
+		}));
+		if (zoomId !== void 0 && (previousId === void 0 || isSunburstAncestorId(previousId, zoomId)) && node) this.dispatchEvent(new CustomEvent(`expand`, {
+			detail: {
+				node,
+				depth: depthOf(zoomId)
+			},
+			bubbles: true,
+			composed: true
+		}));
+		else if (previous) this.dispatchEvent(new CustomEvent(`collapse`, {
+			detail: {
+				node: previous,
+				depth: depthOf(previousId)
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/**
+	* Zoom so `node` becomes the centre, its children the first ring. Fires
+	* `zoom` and `expand` (or `collapse` when `node` is an ancestor of the
+	* current centre). Pure view-state — `root` is never mutated.
+	*/
+	zoomTo(node) {
+		const id = this.#idOf(node);
+		if (id !== void 0) this.#setZoom(id);
+	}
+	/** Zoom out one level: the centre's parent becomes the centre. */
+	zoomUp() {
+		if (this._zoomId !== void 0) this.#setZoom(sunburstParentId(this._zoomId));
+	}
+	/** Zoom all the way out to the full tree. */
+	zoomOut() {
+		this.#setZoom(void 0);
+	}
+	#canZoom(entry) {
+		if (entry.x1 - entry.x0 <= 0 || entry.node.item.isLeaf === true) return false;
+		if (entry.node.children !== void 0) return entry.node.children.length > 0;
+		return this.model !== void 0 || this.loadChildren !== void 0;
+	}
+	/** Zoom so `id` is in the first ring (its parent at the centre). */
+	#reveal(id) {
+		const root = this.#effectiveRoot;
+		const node = findSunburstNodeById(root, id);
+		if (!node) return void 0;
+		const parent = sunburstParentId(id);
+		if (parent !== void 0) this.#setZoom(parent);
+		this.tickled.setTickled(id);
+		return node;
+	}
+	/** Zoom to reveal the node at `keys` (path from the root's children), then select it. */
+	navigateTo(keys) {
+		const root = this.#effectiveRoot;
+		if (!root || keys.length === 0) return false;
+		const node = this.#reveal(sunburstPathToId([root.item.key, ...keys]));
+		if (!node) return false;
+		this.select(node);
+		return true;
+	}
+	/** Zoom + select the first node (depth-first) matching `predicate`. */
+	navigateToNode(predicate) {
+		const root = this.#effectiveRoot;
+		const id = findSunburstId(root, (n) => n !== root && predicate(n));
+		if (id === void 0) return false;
+		return this.navigateTo(sunburstIdToPath(id).slice(1));
+	}
+	/** Zoom to reveal the first node with `key` and move the cursor to it, without selecting. */
+	revealKey(key) {
+		const root = this.#effectiveRoot;
+		const id = findSunburstId(root, (n) => n !== root && n.item.key === key);
+		return id !== void 0 && this.#reveal(id) !== void 0;
+	}
+	/** Arcs currently drawn (centre excluded), ring-major, depth from the root's children. */
+	getNodes() {
+		return this.#visibleArcs().map((a) => ({
+			node: a.node,
+			depth: a.depth - 1
+		}));
+	}
+	#isFilteredOut(id) {
+		const predicate = this.filterPredicate;
+		if (!predicate) return false;
+		if (this.#filtered?.predicate !== predicate || this.#filtered.layout !== this.#layout) {
+			const matches = (node, depth) => predicate(node, depth) || (node.children?.some((c) => matches(c, depth + 1)) ?? false);
+			const ids = /* @__PURE__ */ new Set();
+			for (const entry of this.#layout.values()) if (entry.depth > 0 && !matches(entry.node, entry.depth - 1)) ids.add(entry.id);
+			this.#filtered = {
+				predicate,
+				layout: this.#layout,
+				ids
+			};
+		}
+		return this.#filtered.ids.has(id);
+	}
+	#handleArcClick(entry, event) {
+		this.dispatchEvent(new CustomEvent(`item-click`, {
+			detail: {
+				node: entry.node,
+				depth: entry.depth - 1
+			},
+			bubbles: true,
+			composed: true
+		}));
+		const { node } = entry;
+		const arcs = this.#visibleArcs();
+		const index = arcs.findIndex((a) => a.id === entry.id);
+		if (this.interactionMode === `standard` && (event.ctrlKey || event.metaKey)) {
+			if (this._selectedNodes.has(node)) this.deselect(node);
+			else if (this.#canSelect(node)) this.#commitSelection(/* @__PURE__ */ new Set([...this._selectedNodes, node]), node);
+			this.#anchorIndex = index;
+			return;
+		}
+		if (this.interactionMode === `standard` && event.shiftKey && this.#anchorIndex !== void 0) {
+			const from = Math.min(this.#anchorIndex, index);
+			const to = Math.max(this.#anchorIndex, index);
+			this.#commitSelection(new Set(arcs.slice(from, to + 1).map((a) => a.node).filter((n) => this.#canSelect(n))));
+			return;
+		}
+		if (this.interactionMode !== `manual`) {
+			this.select(node);
+			this.#anchorIndex = index;
+		}
+		if (this.#canZoom(entry)) this.#setZoom(entry.id);
+		else this.tickled.setTickled(entry.id);
+	}
+	#handleArcDblClick(entry) {
+		const detail = {
+			node: entry.node,
+			depth: entry.depth - 1
+		};
+		this.dispatchEvent(new CustomEvent(`item-dblclick`, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new CustomEvent(`activate`, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#handleKeyDown(event) {
+		if (this.disableKeyboardNavigation) return;
+		if (event.key === `Escape` || event.key === `Backspace`) {
+			if (this._zoomId !== void 0) {
+				event.preventDefault();
+				this.zoomUp();
+			}
+			return;
+		}
+		const arcs = this.#visibleArcs();
+		const current = this.tickled.tickledId;
+		if (event.key === `Enter`) {
+			const entry = current === void 0 ? void 0 : this.#layout.get(current);
+			if (!entry) return;
+			event.preventDefault();
+			if (this.interactionMode !== `manual`) this.select(entry.node);
+			this.dispatchEvent(new CustomEvent(`activate`, {
+				detail: {
+					node: entry.node,
+					depth: entry.depth - 1
+				},
+				bubbles: true,
+				composed: true
+			}));
+			if (this.#canZoom(entry)) this.#setZoom(entry.id);
+			return;
+		}
+		const target = sunburstKeyTarget(arcs, current, event.key);
+		if (target === void 0) return;
+		event.preventDefault();
+		this.tickled.setInputMode(`keyboard`);
+		this.tickled.setTickled(target);
+		const entry = this.#layout.get(target);
+		if (entry && this.interactionMode === `implicit`) this.select(entry.node);
+	}
+	#renderArc(id, visual, zoomId) {
+		const entry = this.#layout.get(id);
+		const { inner, outer } = arcRadii(visual.depth, this.#rings);
+		const d = arcPath(visual.a0, visual.a1, inner, outer);
+		const exiting = !this.#targets.has(id);
+		const centre = id === zoomId;
+		const style = `--arc-hue:${visual.hue.toFixed(2)};--arc-depth:${Math.max(0, visual.depth).toFixed(3)};--arc-shade:${visual.shade.toFixed(3)};--arc-centre:${Math.min(1, Math.max(0, -visual.depth)).toFixed(3)};opacity:${visual.opacity.toFixed(3)}`;
+		if (!entry || exiting) return svg`<path class="arc exiting" d=${d} style=${style} aria-hidden="true"></path>`;
+		if (centre) {
+			const canGoUp = this._zoomId !== void 0;
+			return svg`<path
+        class="arc center ${canGoUp ? `` : `leaf`}"
+        part="center"
+        d=${d}
+        style=${style}
+        role=${canGoUp ? `button` : `presentation`}
+        aria-label=${canGoUp ? `Zoom out from ${entry.node.item.label}` : nothing}
+        @click=${() => this.zoomUp()}
+        @pointerenter=${() => this.tickled.clearTickled()}
+      ></path>`;
+		}
+		const { node } = entry;
+		const selected = this._selectedNodes.has(node);
+		const tickled = this.tickled.isTickled(id);
+		const classes = [
+			`arc`,
+			selected ? `selected` : ``,
+			tickled ? `tickled` : ``,
+			this.#isFilteredOut(id) ? `filtered` : ``,
+			this.#pendingIds.has(id) ? `loading` : ``
+		].join(` `);
+		return svg`<path
+      class=${classes}
+      part="arc"
+      d=${d}
+      style=${style}
+      data-id=${id}
+      data-key=${node.item.key}
+      role="treeitem"
+      aria-level=${entry.depth}
+      aria-selected=${selected}
+      aria-setsize=${entry.setSize}
+      aria-posinset=${entry.index + 1}
+      aria-label=${node.item.label}
+      @click=${(e) => this.#handleArcClick(entry, e)}
+      @dblclick=${() => this.#handleArcDblClick(entry)}
+      @pointerenter=${() => this.tickled.handlePointerEnter(id)}
+    ></path>`;
+	}
+	#renderLabels() {
+		if (this.disableLabels) return nothing;
+		const labels = [];
+		const guides = [];
+		for (const [id, visual] of this.#displayed) {
+			const entry = this.#layout.get(id);
+			if (!entry || visual.opacity < .05) continue;
+			const place = labelPlacement(visual, entry.node.item.label, this.#rings, this.#fontSize, { curved: this.curvedLabels });
+			if (!place) continue;
+			const style = `--arc-hue:${visual.hue.toFixed(2)};opacity:${visual.opacity.toFixed(3)}`;
+			if (place.kind === `curved`) {
+				const guideId = `${this.#labelIdPrefix}${guides.length}`;
+				guides.push(svg`<path id=${guideId} d=${place.path}></path>`);
+				labels.push(svg`<text class="sunburst-label curved" part="label" style=${style}
+          ><textPath href="#${guideId}" startOffset="50%">${place.text}</textPath></text>`);
+			} else labels.push(svg`<text
+          class="sunburst-label"
+          part="label"
+          transform="translate(${place.x.toFixed(2)} ${place.y.toFixed(2)}) rotate(${place.rotate.toFixed(2)})"
+          style=${style}
+        >${place.text}</text>`);
+		}
+		return svg`<defs>${guides}</defs>${labels}`;
+	}
+	/** Label, value and share of the centre (or of the tickled arc). */
+	#renderReadout(zoomId) {
+		const zoom = zoomId === void 0 ? void 0 : this.#layout.get(zoomId);
+		if (!zoom) return nothing;
+		const tickledId = this.tickled.tickledId;
+		const tickled = tickledId === void 0 ? void 0 : this.#layout.get(tickledId);
+		const shown = tickled ?? zoom;
+		const maxChars = Math.max(4, Math.floor(this.#rings.center * 1.7 / (this.#fontSize * .6)));
+		const label = shown.node.item.label;
+		const text = label.length <= maxChars ? label : `${label.slice(0, maxChars - 1)}…`;
+		const share = tickled && zoom.value > 0 ? ` · ${(tickled.value / zoom.value * 100).toFixed(tickled.value / zoom.value < .1 ? 1 : 0)}%` : ``;
+		const line = this.#fontSize * 1.3;
+		return svg`<g class="center-readout" part="center-readout" aria-hidden="true">
+      <text class="center-label" y=${(-line / 2).toFixed(2)}>${text}</text>
+      <text class="center-meta" y=${(line / 2).toFixed(2)}>${this.valueFormatter(shown.value, shown.node)}${share}</text>
+    </g>`;
+	}
+	render() {
+		if (!this.#effectiveRoot) return html`<div class="empty-state">No data</div>${this.search.renderField()}`;
+		const width = this._size.width || FALLBACK_SIZE;
+		const height = this._size.height || FALLBACK_SIZE;
+		const zoomId = this.#zoomEntryId;
+		return html`
+      <svg
+        class="sunburst"
+        viewBox="${-width / 2} ${-height / 2} ${width} ${height}"
+        role="tree"
+        tabindex="0"
+        aria-label=${this.#effectiveRoot.item.label}
+        data-input-mode=${this.tickled.inputMode}
+        @keydown=${(e) => this.#handleKeyDown(e)}
+        @pointerleave=${() => this.tickled.clearTickled()}
+      >
+        <g class="arcs">${repeat(this.#displayed, ([id]) => id, ([id, visual]) => this.#renderArc(id, visual, zoomId))}</g>
+        <g class="labels">${this.#renderLabels()}</g>
+        ${this.#renderReadout(zoomId)}
+      </svg>
+      ${this.search.renderField()}
+    `;
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			listSearchStyles,
+			sunburstTreeStyles
+		];
+	}
+};
+__decorate([property({ type: Object })], SunburstTreeListElement.prototype, "root", void 0);
+__decorate([property({ attribute: false })], SunburstTreeListElement.prototype, "model", void 0);
+__decorate([property({ attribute: false })], SunburstTreeListElement.prototype, "loadChildren", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: `exclusivity`
+})], SunburstTreeListElement.prototype, "exclusivity", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: `selection-filter`
+})], SunburstTreeListElement.prototype, "selectionFilter", void 0);
+__decorate([property({
+	type: String,
+	attribute: `interaction-mode`
+})], SunburstTreeListElement.prototype, "interactionMode", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `max-depth`
+})], SunburstTreeListElement.prototype, "maxDepth", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `center-ratio`
+})], SunburstTreeListElement.prototype, "centerRatio", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `min-arc-length`
+})], SunburstTreeListElement.prototype, "minArcLength", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `disable-labels`
+})], SunburstTreeListElement.prototype, "disableLabels", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `curved-labels`,
+	reflect: true
+})], SunburstTreeListElement.prototype, "curvedLabels", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `animation-duration`
+})], SunburstTreeListElement.prototype, "animationDuration", void 0);
+__decorate([property({ attribute: false })], SunburstTreeListElement.prototype, "valueAccessor", void 0);
+__decorate([property({ attribute: false })], SunburstTreeListElement.prototype, "valueFormatter", void 0);
+__decorate([property({ attribute: false })], SunburstTreeListElement.prototype, "selectedNode", void 0);
+__decorate([state()], SunburstTreeListElement.prototype, "_selectedNodes", void 0);
+__decorate([property({ attribute: false })], SunburstTreeListElement.prototype, "filterPredicate", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `disable-keyboard-navigation`
+})], SunburstTreeListElement.prototype, "disableKeyboardNavigation", void 0);
+__decorate([property({ attribute: false })], SunburstTreeListElement.prototype, "registry", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-modes`,
+	reflect: true
+})], SunburstTreeListElement.prototype, "searchModes", void 0);
+__decorate([state()], SunburstTreeListElement.prototype, "_zoomId", void 0);
+__decorate([state()], SunburstTreeListElement.prototype, "_size", void 0);
+SunburstTreeListElement = __decorate([safeCustomElement(`ixfx-sunbursttree-list`)], SunburstTreeListElement);
+//#endregion
+export { findSunburstId as a, sunburstChildId as c, sunburstParentId as d, sunburstPathToId as f, defaultSunburstValueAccessor as i, sunburstHasChildren as l, computeSunburstLayout as n, findSunburstNodeById as o, SUNBURST_PATH_SEPARATOR as p, createValueResolver as r, isSunburstAncestorId as s, SunburstTreeListElement as t, sunburstIdToPath as u };