@ixfx/components 0.15.3 → 0.15.5

package/dist/{tree-2_TRrLAV.js → tree-D8VxvR9u.js}

@@ -3,7 +3,7 @@ import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrA
 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 { i as animateListItemOut, r as animateListItemIn, t as ListNativeDragController } from "./list-native-drag-controller-CcXoS0YX.js";
+import { i as animateListItemOut, o as prefersReducedMotion, r as animateListItemIn, t as ListNativeDragController } from "./list-native-drag-controller-CcXoS0YX.js";
 import "./interaction-E-uMGHkJ.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import { LitElement, css, html, nothing } from "lit";
@@ -1211,6 +1211,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this.stickyHeaders = true;
 		this.virtualize = `auto`;
 		this.virtualizeThreshold = 200;
+		this.animation = `auto`;
 		this.applyInternalDrop = true;
 		this._expandedKeys = /* @__PURE__ */ new Set();
 		this.#structureVersion = 0;
@@ -1650,6 +1651,12 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	#leaving;
 	#leavingAnimations;
 	#treeAnimReady;
+	/**
+	* Per-call animation override. When set (by methods like `expandAll` with `animate: false`),
+	* it takes precedence over the `animation` property for one update cycle.
+	* Cleared after each update.
+	*/
+	#animationOverride;
 	#dragSourceId;
 	#postDragSuppressTimer;
 	#dropState;
@@ -1901,6 +1908,11 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		return false;
 	}
 	#runItemAnimations() {
+		if (!this.#shouldAnimate()) {
+			this.#enteringKeys.clear();
+			this.#cancelAllLeavingAnimations();
+			this.#leaving.clear();
+		}
 		if (this.#enteringKeys.size > 0) {
 			for (const el of this.renderRoot.querySelectorAll(`.item`)) {
 				const key = el.dataset.key;
@@ -1944,6 +1956,17 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		for (const entry of visible) this.#lastNodeByKey.set(entry.node.item.key, entry);
 		this.#treeAnimReady = true;
 	}
+	/**
+	* Determines whether row enter/leave animations should run for this update.
+	* Checks the per-call `#animationOverride` first, then the `animation` property,
+	* and finally `prefersReducedMotion()`.
+	*/
+	#shouldAnimate() {
+		if (this.#animationOverride !== void 0) return this.#animationOverride;
+		if (this.animation === `never`) return false;
+		if (this.animation === `always`) return true;
+		return !prefersReducedMotion();
+	}
 	updated(changedProps) {
 		this.#rowsCache = void 0;
 		this.#syncVirtualObservers();
@@ -1994,6 +2017,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			if (this.#measureMetrics()) queueMicrotask(() => this.requestUpdate());
 			this.#repaintSearchHighlights();
 		} else this.#runItemAnimations();
+		this.#animationOverride = void 0;
 	}
 	/** Highlights are painted on rendered labels, so they move with the window. */
 	#repaintSearchHighlights() {
@@ -2496,8 +2520,12 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	* have loaded to expand further. Bulk expansion ignores `exclusivity`. Fires
 	* one `expand` event per branch that actually opens — none for branches that
 	* were already expanded, including ones opened by filter auto-expansion.
+	*
+	* @param maxDepth - Maximum depth to expand to
+	* @param animate - Whether to animate row enter/leave. When omitted, uses the `animation` property value.
 	*/
-	expandAll(maxDepth) {
+	expandAll(maxDepth, animate) {
+		this.#animationOverride = animate;
 		this.#bulkExpand(true, maxDepth);
 	}
 	/**
@@ -2505,8 +2533,12 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	* branches at depth >= `maxDepth` are collapsed, leaving the tree open down
 	* to depth `maxDepth - 1` (`collapseAll(0)` is a full collapse). Fires one
 	* `collapse` event per branch that actually closes.
+	*
+	* @param maxDepth - Maximum depth to collapse from
+	* @param animate - Whether to animate row enter/leave. When omitted, uses the `animation` property value.
 	*/
-	collapseAll(maxDepth) {
+	collapseAll(maxDepth, animate) {
+		this.#animationOverride = animate;
 		this.#bulkExpand(false, maxDepth);
 	}
 	/** Shared bulk expand / collapse: one `_expandedKeys` write, per-node events for real changes only. */
@@ -2556,6 +2588,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		const prevSilent = this.#selectSilent;
 		this.#selectOrigin = `programmatic`;
 		this.#selectSilent = options.silent === true;
+		if (options.animate !== void 0) this.#animationOverride = options.animate;
 		try {
 			return this.#navigateTo(keys, options.reveal ?? `edge`);
 		} finally {
@@ -2587,15 +2620,17 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this.#scrollKeyIntoView(keys.at(-1), reveal);
 		return true;
 	}
-	navigateToNode(predicate) {
+	navigateToNode(predicate, animate) {
 		if (!this.root?.children) return false;
+		if (animate !== void 0) this.#animationOverride = animate;
 		const keyPath = this.#findNodePath(this.root.children, predicate);
 		if (!keyPath) return false;
 		return this.navigateTo(keyPath);
 	}
 	/** Expand ancestors + move the cursor to `key`, without touching the selection (search "navigate" mode). */
-	revealKey(key) {
+	revealKey(key, animate) {
 		if (!this.root?.children) return false;
+		if (animate !== void 0) this.#animationOverride = animate;
 		const path = this.#findNodePath(this.root.children, (n) => n.item.key === key);
 		if (!path) return false;
 		for (let i = 0; i < path.length - 1; i++) {
@@ -3542,6 +3577,10 @@ __decorate([property({
 	type: Number,
 	attribute: `virtualize-threshold`
 })], TreeBaseElement.prototype, "virtualizeThreshold", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: `animation`
+})], TreeBaseElement.prototype, "animation", void 0);
 __decorate([property({ attribute: false })], TreeBaseElement.prototype, "dragPreviewRenderer", void 0);
 __decorate([property({ attribute: false })], TreeBaseElement.prototype, "dragPreviewSource", void 0);
 __decorate([property({ attribute: false })], TreeBaseElement.prototype, "canDrag", void 0);

package/dist/{tree-component-CDsYTBDi.d.ts → tree-component-C6UHO-w9.d.ts}

@@ -220,6 +220,11 @@ type TreeNavigateOptions = {
   reveal?: TreeRevealMode;
   /** Suppress the `select` event this navigation would otherwise fire. */
   silent?: boolean;
+  /**
+   * Whether to animate row enter/leave for this operation.
+   * When omitted, uses the `animation` property value (`'auto'` by default).
+   */
+  animate?: boolean;
 };
 /**
  * Fired when the selection set changes by any means (click, keyboard, programmatic).
@@ -385,18 +390,22 @@ interface TreeComponent extends EventTarget {
    * Expand ancestors and select the node reached by following `keys` from the root's children.
    * Returns `true` if the path was found and applied.
    */
-  navigateTo: (keys: readonly string[]) => boolean;
+  navigateTo: (keys: readonly string[], options?: TreeNavigateOptions) => boolean;
   /**
    * Expand ancestors and select the first node for which `predicate` returns `true`.
    * Returns `true` if a matching node was found.
+   * @param predicate - Function to find the target node
+   * @param animate - Whether to animate row enter/leave. When omitted, uses the `animation` property value.
    */
-  navigateToNode: (predicate: (node: TreeNode) => boolean) => boolean;
+  navigateToNode: (predicate: (node: TreeNode) => boolean, animate?: boolean) => boolean;
   /**
    * Expand ancestors of the node with `key` and move the keyboard cursor to it,
    * scrolling it into view — **without** changing the selection. Returns `true`
    * if the node was found. Used by incremental-search "navigate" mode.
+   * @param key - Key of the node to reveal
+   * @param animate - Whether to animate row enter/leave. When omitted, uses the `animation` property value.
    */
-  revealKey: (key: string) => boolean;
+  revealKey: (key: string, animate?: boolean) => boolean;
   /** Replace the selection with `nodes` (subject to `selectionFilter`). Used by incremental-search "select" mode. */
   selectMany: (nodes: Iterable<TreeNode>) => void;
   /**

package/dist/tree.d.ts

@@ -1,4 +1,4 @@
-import { A as TreeTickleEvent, D as TreeSelectDetail, M as TreeDataModelOptions, O as TreeSelectEvent, T as TreeRevealMode, _ as TreeDropTarget, b as TreeItemClickDetail, c as TreeDragContext, d as TreeDragStartEvent, g as TreeDropPosition, h as TreeDropEvent, i as TreeCollapseEvent, j as TreeDataModel, k as TreeTickleDetail, l as TreeDragEndEvent, m as TreeDropDetail, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeDropContext, r as TreeCollapseDetail, s as TreeDndMode, t as TreeActivateDetail, u as TreeDragOverEvent, v as TreeExpandDetail, w as TreeNavigateOptions, x as TreeItemClickEvent, y as TreeExpandEvent } from "./tree-component-CDsYTBDi.js";
+import { A as TreeTickleEvent, D as TreeSelectDetail, M as TreeDataModelOptions, O as TreeSelectEvent, T as TreeRevealMode, _ as TreeDropTarget, b as TreeItemClickDetail, c as TreeDragContext, d as TreeDragStartEvent, g as TreeDropPosition, h as TreeDropEvent, i as TreeCollapseEvent, j as TreeDataModel, k as TreeTickleDetail, l as TreeDragEndEvent, m as TreeDropDetail, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeDropContext, r as TreeCollapseDetail, s as TreeDndMode, t as TreeActivateDetail, u as TreeDragOverEvent, v as TreeExpandDetail, w as TreeNavigateOptions, x as TreeItemClickEvent, y as TreeExpandEvent } from "./tree-component-C6UHO-w9.js";
 import { a as TreeItem, n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-Jky6oNAp.js";
-import { a as TreeDropVisibleRow, c as TreeListElement, d as TreeBaseElementEventMap, f as TreeVirtualize, i as TreeDropRowInfo, l as TreeCheckboxState, n as TreeDropControllerConfig, o as TreeController, p as TreeConfig, r as TreeDropResolvedDrag, s as TreeControllerOptions, t as TreeDropController, u as TreeBaseElement } from "./index-DuhzWWTr.js";
-export { type LoadChildrenCallback, type TreeActivateDetail, type TreeActivateEvent, TreeBaseElement, TreeBaseElementEventMap, type TreeCheckboxState, type TreeCollapseDetail, type TreeCollapseEvent, type TreeComponentEventMap, TreeConfig, TreeController, TreeControllerOptions, TreeDataModel, type TreeDataModelOptions, type TreeDndMode, type TreeDragContext, type TreeDragEndEvent, type TreeDragOverEvent, type TreeDragStartEvent, type TreeDropContext, TreeDropController, TreeDropControllerConfig, type TreeDropDetail, type TreeDropEvent, type TreeDropPosition, TreeDropResolvedDrag, TreeDropRowInfo, type TreeDropTarget, TreeDropVisibleRow, type TreeExclusivity, type TreeExpandDetail, type TreeExpandEvent, type TreeFilterPredicate, type TreeItem, type TreeItemClickDetail, type TreeItemClickEvent, TreeListElement, type TreeNavigateOptions, type TreeNode, type TreeRevealMode, type TreeSelectDetail, type TreeSelectEvent, type TreeSelectionFilter, type TreeTickleDetail, type TreeTickleEvent, TreeVirtualize };
+import { a as TreeDropVisibleRow, c as TreeListElement, d as TreeBaseElement, f as TreeBaseElementEventMap, i as TreeDropRowInfo, l as TreeCheckboxState, m as TreeConfig, n as TreeDropControllerConfig, o as TreeController, p as TreeVirtualize, r as TreeDropResolvedDrag, s as TreeControllerOptions, t as TreeDropController, u as TreeAnimation } from "./index-DEVyVIn8.js";
+export { type LoadChildrenCallback, type TreeActivateDetail, type TreeActivateEvent, TreeAnimation, TreeBaseElement, TreeBaseElementEventMap, type TreeCheckboxState, type TreeCollapseDetail, type TreeCollapseEvent, type TreeComponentEventMap, TreeConfig, TreeController, TreeControllerOptions, TreeDataModel, type TreeDataModelOptions, type TreeDndMode, type TreeDragContext, type TreeDragEndEvent, type TreeDragOverEvent, type TreeDragStartEvent, type TreeDropContext, TreeDropController, TreeDropControllerConfig, type TreeDropDetail, type TreeDropEvent, type TreeDropPosition, TreeDropResolvedDrag, TreeDropRowInfo, type TreeDropTarget, TreeDropVisibleRow, type TreeExclusivity, type TreeExpandDetail, type TreeExpandEvent, type TreeFilterPredicate, type TreeItem, type TreeItemClickDetail, type TreeItemClickEvent, TreeListElement, type TreeNavigateOptions, type TreeNode, type TreeRevealMode, type TreeSelectDetail, type TreeSelectEvent, type TreeSelectionFilter, type TreeTickleDetail, type TreeTickleEvent, TreeVirtualize };

package/dist/tree.js

@@ -1,2 +1,2 @@
-import { a as TreeDataModel, i as TreeDropController, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-2_TRrLAV.js";
+import { a as TreeDataModel, i as TreeDropController, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-D8VxvR9u.js";
 export { TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeListElement };

package/dist/{vertical-list-ztrdFvyT.d.ts → vertical-list-D8MksoTp.d.ts}

@@ -1,6 +1,6 @@
-import { B as ListNativeDragStartEvent, I as ListDragPreviewRenderer, L as ListDragPreviewSourceResolver } from "./tree-component-CDsYTBDi.js";
+import { B as ListNativeDragStartEvent, I as ListDragPreviewRenderer, L as ListDragPreviewSourceResolver } from "./tree-component-C6UHO-w9.js";
 import { n as ListViewportChangeEvent } from "./list-viewport-types-BRZsLcvp.js";
-import { S as ListSearchController } from "./index-BvoXLnBf.js";
+import { S as ListSearchController } from "./index-KN2MW_xD.js";
 import { i as ListInteractionMode, l as ListSelectionMode, r as ListElementEventMap } from "./list-selection-types-PjKdhF-a.js";
 import "./editable-label-rzXkjf1H.js";
 import { LitElement, PropertyValues } from "lit";

package/dist/vertical-list.d.ts

@@ -1,5 +1,5 @@
-import { B as ListNativeDragStartEvent, F as ListDragPreviewContext, I as ListDragPreviewRenderer, N as ListDragEntry, P as ListDragPreview, R as ListDragSource, z as ListNativeDragStartDetail } from "./tree-component-CDsYTBDi.js";
+import { B as ListNativeDragStartEvent, F as ListDragPreviewContext, I as ListDragPreviewRenderer, N as ListDragEntry, P as ListDragPreview, R as ListDragSource, z as ListNativeDragStartDetail } from "./tree-component-C6UHO-w9.js";
 import { n as ListViewportChangeEvent, t as ListViewportChangeDetail } from "./list-viewport-types-BRZsLcvp.js";
 import { a as ListItemClickDetail, c as ListSelectEvent, d as ListTickleEvent, i as ListInteractionMode, l as ListSelectionMode, n as ListActivateEvent, o as ListItemClickEvent, r as ListElementEventMap, s as ListSelectDetail, t as ListActivateDetail, u as ListTickleDetail } from "./list-selection-types-PjKdhF-a.js";
-import { a as ListContextMenuDetail, c as ListDragLeaveEvent, d as ListDropEvent, f as ListEditCancelDetail, h as ListEditCommitEvent, i as VerticalListElementEventMap, l as ListDragOverEvent, m as ListEditCommitDetail, n as CustomCheckboxOptions, o as ListContextMenuEvent, p as ListEditCancelEvent, r as VerticalListElement, s as ListDragLeaveDetail, t as AddItemOptions, u as ListDropDetail } from "./vertical-list-ztrdFvyT.js";
+import { a as ListContextMenuDetail, c as ListDragLeaveEvent, d as ListDropEvent, f as ListEditCancelDetail, h as ListEditCommitEvent, i as VerticalListElementEventMap, l as ListDragOverEvent, m as ListEditCommitDetail, n as CustomCheckboxOptions, o as ListContextMenuEvent, p as ListEditCancelEvent, r as VerticalListElement, s as ListDragLeaveDetail, t as AddItemOptions, u as ListDropDetail } from "./vertical-list-D8MksoTp.js";
 export { AddItemOptions, CustomCheckboxOptions, type ListActivateDetail, type ListActivateEvent, type ListContextMenuDetail, type ListContextMenuEvent, type ListDragEntry, type ListDragLeaveDetail, type ListDragLeaveEvent, type ListDragOverEvent, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListDropDetail, type ListDropEvent, type ListEditCancelDetail, type ListEditCancelEvent, type ListEditCommitDetail, type ListEditCommitEvent, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListSelectDetail, type ListSelectEvent, type ListSelectionMode, type ListTickleDetail, type ListTickleEvent, type ListViewportChangeDetail, type ListViewportChangeEvent, VerticalListElement, VerticalListElementEventMap };

package/docs-user/README.md

@@ -49,6 +49,7 @@ This directory contains documentation for each component and some architectural
 - [snackbar](./snackbar.md)
 - [snap-container](./snap-container.md)
 - [split-layout](./split-layout.md)
+- [sunburst-tree](./sunburst-tree.md)
 - [swipe](./swipe.md)
 - [tabs](./tabs.md)
 - [text-shimmer](./text-shimmer.md)

package/docs-user/data-grid.md

@@ -306,9 +306,12 @@ for plain text columns. It returns `false` and does nothing for:
 
 - an unknown column key,
 - a column with `resizable: false`,
-- a column with a `renderer` — its rendered output (icons, badges, custom
-  markup, etc.) can't be reliably measured from the raw value, so sizing to
-  it would be a guess.
+- a column with a `renderer` that gives no hint of its size — its rendered
+  output (icons, badges, custom markup, etc.) can't be reliably measured from
+  the raw value. Opt in with either:
+  - `fixedExtraWidth: n` — pixels added to the measured text width (e.g. a
+    thumbnail beside the text), or
+  - `measure: (row, col) => px` — your own content-width measure per row.
 
 `--data-grid-column-resize-duration` (default `180ms`) controls the
 transition speed.
@@ -459,6 +462,10 @@ Demo: `Score` is random float `0–100` with 0–3 decimals, `align:'right'`, `f
 
 Gear menu (`ixfx-menu-trigger` placement `bottom-end`, `inset-area: block-end span-inline-end`) lists `Columns` (check-items) and `Group by` (radio). Toggle visibility via `col.visible=false` or menu. Event: `datagrid-column-visibility` `{key, visible}`.
 
+Set `col.group` to a heading (e.g. the facet a column came from) and the menu
+lists columns sharing that group in one submenu; ungrouped columns stay at the
+top level.
+
 `column-menu` attribute: `none` (default) hides the gear menu; `auto` opts in to
 rendering it. `col.visible` + `datagrid-column-visibility` give full external
 control, so a host can own the column-visibility UI.
@@ -542,7 +549,7 @@ still shadow-internal.
 | `appendRows` | `(rows)` | Add rows without a full re-sort/rebuild — for streaming |
 | `selectKeys` / `set selectedKeys` | `(keys)` | Replace the selection by row key |
 | `tickleRow` | `(key)` | Move the row cursor and scroll it into view |
-| `autoSizeColumn` | `(key)=>boolean` | Resize a column to fit its contents, animating the width. Returns `false` (no-op) for an unknown column, `resizable: false`, or a column with a `renderer` — see [Auto-sizing a column](#auto-sizing-a-column). |
+| `autoSizeColumn` | `(key)=>boolean` | Resize a column to fit its contents, animating the width. Returns `false` (no-op) for an unknown column, `resizable: false`, or a `renderer` column without `measure`/`fixedExtraWidth` — see [Auto-sizing a column](#auto-sizing-a-column). |
 
 | Getter | Type | |
 |---|---|---|

package/docs-user/dock.md

@@ -127,6 +127,22 @@ split resizes, and host resizes; handles are hidden during dock drags.
   stored policy; `clearLeafPlacementPolicy(name)` resets. `getLeafPlacementPolicy(name)`
   returns the resolved `{ allowKinds, denyKinds, allowEdgeSplit }`.
 
+- Host `isolated` attribute: panels can be rearranged freely *inside* this
+  host but cannot be dragged **out** to another host. It is checked on the
+  **source** host only — it does not stop other hosts dropping panels *into*
+  an isolated host. To keep unrelated docks from exchanging panels in both
+  directions use `family` (below).
+- Host `family` attribute (default `""`): two hosts exchange panels by drag
+  only when their families are equal. Give an inner dock its own family and
+  it neither receives outer-dock panels nor lets its own leave.
+- Host `accepts-kinds` attribute / `acceptsKinds` property (space-separated
+  panel kinds; default unrestricted): panels arriving from **other** hosts, or
+  from another window via `queryDropTarget` / `acceptExternalPanel`, must be of
+  one of these kinds. Panels already in the host are unaffected. Combine with
+  `family` and `isolated` for a closed two-way exchange of one kind.
+- A host whose `accepts` allows no splits (e.g. `accepts="tabs"`) treats the
+  whole leaf as the tabs drop zone, instead of leaving the edge bands inert.
+
 A zone lights up only if every applicable rule allows it; disallowed zones
 are inert. Content rules govern tabbing *into* a leaf (`tabs` drops,
 `addPanel`, re-homing). Edge splits beside a leaf stay allowed **unless** that
@@ -138,11 +154,56 @@ propagated to it. Programmatic fallbacks (`addPanel` without a target,
 external panels, leaf-close re-homing) use the first stack admitting the
 panel's kind.
 
+## Hiding the strip of a lone tab
+
+`hide-single-tab-strip` (host attribute, `hideSingleTabStrip` property) drops
+a leaf's tab strip while it holds exactly one panel; the strip appears when a
+second panel arrives and goes again when one leaves. `DockStackNode.hideSingleTabStrip`
+overrides it per stack (serialized with the layout). The leaf's outer box is
+fixed by its split, so only the body shifts by one tab height when the strip
+appears — the strip never reserves height while hidden.
+
+While hidden:
+
+- **Drops.** During a drag the host overlays a compact stand-in strip (part
+  `drop-hint`) on the leaf — only if that leaf would accept the dragged panel —
+  with a caret showing the insertion gap. It takes no layout space. Dropping on
+  it, or on the leaf centre, adds a tab; the real strip then appears.
+- **Dragging the lone panel.** There is no tab to grab, so call
+  `host.beginPanelDrag(panelId, pointerEvent)` from your own handle's
+  `pointerdown`. It returns `false` for an unknown panel or non-primary press.
+  The drag starts after a few pixels of movement and is identical to a tab
+  drag (ghost, drop zones, `dock-panel-drag-*`, cross-host adoption,
+  tear-out). Prefer `touch-action: none` and `user-select: none` on the handle.
+- **Toolbars.** Panel toolbars and `toolbar-<name>` slots live in the strip, so
+  they are not shown while it is hidden.
+
 ## Events
 
 `ixfx-dock-host`: `dock-change` (`{ layout }` after structural mutations),
 `dock-panel-added`, `dock-panel-removed`, `dock-panel-activated`,
-`dock-panel-drag-start`.
+`dock-panel-drag-start`, `dock-panel-moved`, `dock-stack-empty`,
+`dock-tab-contextmenu`.
+
+- `dock-panel-added` — `{ panelId, sourceHost, targetHost }`. `sourceHost` is
+  the host the panel came from (`null` when new or from another window).
+- `dock-panel-removed` — `{ panelId, sourceHost, targetHost }`. `targetHost` is
+  the host it moved to, `null` when it is gone (closed, detached, torn out).
+- `dock-panel-moved` — `{ panelId, sourceHost, targetHost }`, fired on the
+  target host once a cross-host drop completes. A move therefore fires
+  `removed` (source), `added` (target), then `moved` (target), and the source
+  now also emits `dock-change`.
+- `dock-stack-empty` — `{ name, hostEmpty }` when a stack loses its last panel
+  (`name` is the container name or `null`). `hostEmpty` is true when the host
+  holds no panels at all — the cue to close an owning group. Fires before the
+  matching `dock-change`; not fired by `loadLayout()`.
+- `dock-tab-contextmenu` — `{ panelId, clientX, clientY }`, cancelable
+  (`preventDefault()` suppresses the native menu). Visible tabs only; with a
+  hidden strip handle `contextmenu` on your own element.
+
+All of these bubble and are composed, so a nested host's events also reach
+outer hosts and their listeners — compare `targetHost` / `sourceHost` to the
+host you care about. A nested host's drags are owned by the nearest host only.
 
 Cross-window (see [Cross-window docking](#cross-window-docking-electron-etc)):
 `dock-panel-drag-out` / `dock-panel-drag-in`

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.15.3",
-  "generated": "2026-10-18T19:35:32.045Z",
+  "version": "0.15.5",
+  "generated": "2026-10-23T07:10:01.881Z",
   "components": [
     {
       "name": "ac-text",
@@ -228,6 +228,11 @@
       "summary": "A Lit web component that lays out any number of panels along one axis with draggable gutters between them.",
       "path": "docs-user/split-layout.md"
     },
+    {
+      "name": "sunburst-tree",
+      "summary": "`<ixfx-sunbursttree-list>` — a zoomable sunburst over weighted tree data. The zoom node is the centre disc; each ring outward is one generation, and each arc's angle is its share of its parent's value",
+      "path": "docs-user/sunburst-tree.md"
+    },
     {
       "name": "swipe",
       "summary": "A touch-friendly swipe/nudge component. User taps and drags to generate a value in range [-1, 1]. Value is emitted only on pointer release.",

package/docs-user/llms.txt

@@ -56,6 +56,7 @@ import '@ixfx/components/data-grid';
 - [snackbar](docs-user/snackbar.md): A small floating toolbar anchored in visual proximity to another element on the page (the "target"), built on the native Popover and CSS Anchor Positioning APIs.
 - [snap-container](docs-user/snap-container.md): A container that positions its child element at configurable snap positions along an axis. The child can be dragged, clicked to snap, or controlled via keyboard.
 - [split-layout](docs-user/split-layout.md): A Lit web component that lays out any number of panels along one axis with draggable gutters between them.
+- [sunburst-tree](docs-user/sunburst-tree.md): `<ixfx-sunbursttree-list>` — a zoomable sunburst over weighted tree data. The zoom node is the centre disc; each ring outward is one generation, and each arc's angle is its share of its parent's value
 - [swipe](docs-user/swipe.md): A touch-friendly swipe/nudge component. User taps and drags to generate a value in range [-1, 1]. Value is emitted only on pointer release.
 - [tabs](docs-user/tabs.md): A complete tabbed interface system using several coordinated components:
 - [text-shimmer](docs-user/text-shimmer.md): A label with a sweeping highlight band across the text. Useful as a lightweight "still working…" or "loading…" indicator.

package/docs-user/sunburst-tree.md

@@ -0,0 +1,193 @@
+# Sunburst Tree
+
+`<ixfx-sunbursttree-list>` — a zoomable sunburst over weighted tree data. The zoom node is the centre disc; each ring outward is one generation, and each arc's angle is its share of its parent's value. Every change — data arriving, a different weighting, a zoom — animates from what's on screen to the new layout.
+
+It implements the shared `TreeComponent` interface (see [`src/tree/README.md`](../tree/README.md)), so `TreeDataModel`, `IncrSearchTreeController`, and `TreeComponent`-typed code work unmodified. Geometrically it is a polar [icicle](../icicle-tree/), and shares its API shape.
+
+---
+
+## Contents
+
+1. [Differences from `ixfx-tree-list`](#differences-from-ixfx-tree-list)
+2. [Data model](#data-model)
+3. [Values and weighting](#values-and-weighting)
+4. [Progressive data](#progressive-data)
+5. [Colour](#colour)
+6. [Properties](#properties)
+7. [Zoom, selection, navigation](#zoom-selection-navigation)
+8. [Events](#events)
+9. [Keyboard / pointer interaction](#keyboard--pointer-interaction)
+10. [CSS variables and parts](#css-variables-and-parts)
+
+---
+
+## Differences from `ixfx-tree-list`
+
+- **Expand/collapse is reinterpreted as zoom.** `expand` fires on zoom-in, `collapse` on zoom-out.
+- **`interactionMode` drops `'checked'`**; **`exclusivity` is accepted but ignored**.
+- **`filterPredicate` dims** non-matching arcs instead of hiding them.
+- **Reassigning `root` keeps zoom and selection** wherever the same key paths still exist (the icicle and treemap reset instead). See [Progressive data](#progressive-data).
+- Drag-and-drop is out of scope.
+
+## Data model
+
+Same `TreeNode` / `TreeItem` shapes as the rest of the tree family, including `root`, `model` and `loadChildren` for lazy loading (children are fetched for every visible arc).
+
+Keys only need to be unique **among siblings**: arcs are identified by their key *path* from the root, so file-system data — where `readme.md` recurs in many folders — works. Lookups that only have a bare key (`revealKey`) match the first node, depth-first, carrying it.
+
+## Values and weighting
+
+Every node — branches included — has a value. A child's arc is its share of its parent's:
+
+```
+childAngle = parentAngle × child / max(parent, Σ siblings)
+```
+
+- Children summing to **less** than their parent leave an unfilled gap — "unaccounted for" space (unscanned disk, an unknown remainder).
+- Children summing to **more** are scaled down to fit.
+
+Give values as a plain number on `item.weight` (the default accessor reads it), or as a function:
+
+```typescript
+el.root = {
+  item: { key: 'hd', label: 'Disk', weight: 500e9 },
+  children: [
+    { item: { key: 'apps', label: 'Applications', weight: 120e9 }, children: [] },
+    { item: { key: 'users', label: 'Users', weight: 300e9 }, children: [] },
+  ],
+};
+
+// Swap weighting scheme: no DOM is rebuilt, the chart animates to the new layout.
+el.valueAccessor = (item, node) => (item.data as Stats).fileCount;
+```
+
+`valueAccessor` is `(item, node) => number | undefined`. When it returns `undefined` (or a negative / non-finite number) the node falls back to the **sum of its loaded children**, or `1` for a leaf or not-yet-loaded node. So unweighted data shows descendant counts, and an accessor can value only leaves and let branches sum:
+
+```typescript
+el.valueAccessor = (item, node) => node.children ? undefined : Math.log2(bytes(item) + 1);
+```
+
+`valueFormatter` (`(value, node) => string`) formats the value in the centre readout:
+
+```typescript
+el.valueFormatter = v => `${(v / 1e9).toFixed(1)} GB`;
+```
+
+## Progressive data
+
+Any update re-lays out and animates: new arcs grow from zero width, removed ones shrink away, the rest slide to their new angles. An update arriving mid-animation retargets from wherever things currently are.
+
+Either rebuild the tree immutably and reassign it:
+
+```typescript
+el.root = snapshotOfScanSoFar(); // zoom + selection carry over by key path
+```
+
+or mutate in place and nudge the element — or let a `TreeDataModel` notify it:
+
+```typescript
+folder.children.push(newFile);
+el.requestUpdate();
+```
+
+## Colour
+
+Hue is set by the ring around the centre: each first-ring arc takes the hue at its angular midpoint (so the ring spans the colour wheel), and every descendant takes a tone of that hue — lighter and less saturated each ring out, with a small per-sibling shift so neighbours stay distinct. Zooming re-anchors hues to the new first ring, cross-fading as it goes. The centre disc mixes towards `--sunbursttree-center-color`.
+
+All of it is computed in CSS from per-arc custom properties, so the palette is themeable:
+
+| Per-arc property | Value |
+|---|---|
+| `--arc-hue` | Degrees, added to `--sunbursttree-hue-start` |
+| `--arc-depth` | Ring index from the centre (`0` = first ring) |
+| `--arc-shade` | Sibling-position offset, `-0.5..0.5` |
+| `--arc-centre` | `0..1`, how far the arc has become the centre disc |
+
+## Properties
+
+| Property (attribute) | Type | Default | Description |
+|---|---|---|---|
+| `root` | `TreeNode \| undefined` | `undefined` | Root node of the tree |
+| `model` | `TreeDataModel \| undefined` | `undefined` | Shared data model; takes precedence over `loadChildren` |
+| `loadChildren` | `LoadChildrenCallback \| undefined` | `undefined` | Callback for lazy child loading |
+| `valueAccessor` | `SunburstValueAccessor` | `item => item.weight` | Node value. See [Values and weighting](#values-and-weighting) |
+| `valueFormatter` | `SunburstValueFormatter` | locale number | Formats the centre readout's value |
+| `interactionMode` (`interaction-mode`) | `'implicit' \| 'standard' \| 'manual'` | `'standard'` | Gesture mapping |
+| `selectionFilter` (`selection-filter`) | `'none' \| 'leaf' \| 'branch' \| 'all'` | `'all'` | Which node kinds can be selected |
+| `maxDepth` (`max-depth`) | `number` | `5` | Rings drawn around the centre |
+| `centerRatio` (`center-ratio`) | `number` | `0.22` | Centre disc radius as a fraction of the overall radius |
+| `minArcLength` (`min-arc-length`) | `number` | `1.5` | Arcs whose outer edge is shorter than this (px) aren't drawn — bounds DOM size for big trees |
+| `disableLabels` (`disable-labels`) | `boolean` | `false` | Hide in-arc labels (the centre readout remains) |
+| `curvedLabels` (`curved-labels`) | `boolean` | `false` | Curve labels along their ring instead of drawing them straight. See below |
+| `animationDuration` (`animation-duration`) | `number` | `600` | Transition length in ms; `0` snaps. Respects `prefers-reduced-motion` |
+| `filterPredicate` | `TreeFilterPredicate \| undefined` | `undefined` | Non-matching arcs (with no matching descendant) are dimmed |
+| `disableKeyboardNavigation` (`disable-keyboard-navigation`) | `boolean` | `false` | Turn off keyboard handling |
+| `searchModes` (`search-modes`) | `string \| undefined` | `undefined` | Subset of `navigate select filter` — see [`docs/infra-incremental.md`](../../docs/infra-incremental.md) |
+| `exclusivity` | `TreeExclusivity` | `'none'` | Accepted for interface compatibility, ignored |
+| `selectedNode` / `selectedNodes` | | | Same contract as `ixfx-tree-list` |
+| `focusedNode` | `TreeNode \| undefined` (read-only) | `undefined` | Current zoom node; `undefined` when showing the full tree |
+
+In-arc labels run along the ring when the arc is long enough, otherwise radially (truncated to the ring width); both flip to stay upright. With `curved-labels`, ring-following labels bend to the arc (an SVG `<textPath>` along the ring's middle, reversed in the bottom half so it reads upright). Since the whole arc length is usable, long labels are truncated with `…` rather than dropped; arcs too narrow for a few characters still fall back to straight radial text. Arcs too thin for either are unlabelled — hover or keyboard-cursor them and the centre readout shows their label, value and share of the centre.
+
+## Zoom, selection, navigation
+
+```typescript
+el.zoomTo(node);   // node becomes the centre
+el.zoomUp();       // centre's parent becomes the centre
+el.zoomOut();      // back to the full tree
+
+el.select(node); el.deselect(node); el.clearSelection(); el.selectAll(); el.deselectAll();
+
+// Zooms so the target sits in the first ring (its parent at the centre), then selects it.
+el.navigateTo(['users', 'me', 'photos']);
+el.navigateToNode(n => n.item.key === 'photos');
+
+el.getNodes(); // visible arcs (centre excluded), ring-major
+```
+
+## Events
+
+All events **bubble** and are **composed**. `depth` counts from the root's children (`0`).
+
+| Event | Detail | When |
+|---|---|---|
+| `zoom` | `SunburstZoomDetail` — `{ node: TreeNode \| undefined; depth }` | Zoom node changes (`node` undefined = full tree) |
+| `expand` / `collapse` | `{ node; depth }` | Zoomed into a descendant / out of the previous centre |
+| `select` | `TreeSelectDetail` | Selection changes |
+| `tickle` | `TreeTickleDetail` | Pointer or keyboard cursor enters an arc |
+| `activate` | `TreeActivateDetail` | Enter or double-click |
+| `item-click` / `item-dblclick` | `{ node; depth }` | Raw pointer clicks on an arc |
+
+## Keyboard / pointer interaction
+
+| Input | Action |
+|---|---|
+| Click an arc | Select (per `interactionMode`) and zoom in, if it has children |
+| Ctrl/⌘-click, Shift-click | Toggle / range-select (`standard` mode), without zooming |
+| Click the centre | Zoom up one level |
+| `←` / `→` | Previous / next sibling (wraps) |
+| `↑` / `↓` | Parent (inward) / first child (outward) |
+| `Home` / `End` | First / last visible arc |
+| `Enter` | Select, activate and zoom in |
+| `Escape` / `Backspace` | Zoom up one level |
+
+## CSS variables and parts
+
+| Variable | Default | Description |
+|---|---|---|
+| `--sunbursttree-hue-start` | `250` | Hue at 12 o'clock |
+| `--sunbursttree-chroma` | `0.14` | First-ring chroma |
+| `--sunbursttree-chroma-step` | `0.015` | Chroma lost per ring outward |
+| `--sunbursttree-lightness` | `60%` | First-ring lightness |
+| `--sunbursttree-lightness-step` | `5%` | Lightness gained per ring outward |
+| `--sunbursttree-shade-step` | `10%` | Lightness spread across siblings |
+| `--sunbursttree-center-color` | `var(--surface-4)` | Centre disc fill |
+| `--sunbursttree-center-text` | `var(--surface-4-text)` | Centre readout text |
+| `--sunbursttree-gap-color` | `var(--surface-2)` | Stroke between arcs — match it to the background |
+| `--sunbursttree-gap` | `1px` | Width of that stroke |
+| `--sunbursttree-font-size` | `11px` | Label size (px; read for label fitting) |
+| `--sunbursttree-label-lightness` | `22%` | Label lightness (hue follows the arc) |
+
+Parts: `arc`, `center`, `label`, `center-readout`.
+
+The host defaults to `aspect-ratio: 1` with a `200px` minimum height; give it a width (or both dimensions) to size it.

package/docs-user/tree.md

@@ -37,7 +37,7 @@ type TreeItem = {
   icon?: string;      // Icon name (passed to <ixfx-icon>)
   tooltip?: string;   // Tooltip content
   value?: string;     // Optional machine-readable value
-  weight?: number;    // Relative importance/magnitude; only ixfx-hyperbolictree-list uses it today
+  weight?: number;    // Relative importance/magnitude; used by ixfx-hyperbolictree-list and ixfx-sunbursttree-list
 };
 
 type TreeNode = {
@@ -153,6 +153,7 @@ These properties are present on all three components (`ixfx-tree-list`, `ixfx-mi
 | `stickyHeaders` (`sticky-headers`) | `boolean` | `true` | VS Code-style sticky headers; set `sticky-headers="false"` to opt out (`ixfx-tree-list` only) |
 | `virtualize` | `'auto' \| 'on' \| 'off'` | `'auto'` | Render only the rows near the viewport; `auto` switches on above `virtualizeThreshold` visible rows (`ixfx-tree-list` only). See [Virtualisation](#virtualisation-ixfx-tree-list) |
 | `virtualizeThreshold` (`virtualize-threshold`) | `number` | `200` | Visible-row count above which `virtualize="auto"` windows the list |
+| `animation` | `'auto' \| 'always' \| 'never'` | `'auto'` | Controls row enter/leave animations. `'auto'` respects `prefers-reduced-motion`; `'always'` always animates; `'never'` skips all animations. Can be overridden per-call on `expandAll`, `collapseAll`, `navigateTo`, `revealKey`, and `navigateToNode` |
 
 ### Replacing `root`
 
@@ -280,6 +281,44 @@ On by default: while scrolling vertically, the ancestors of the top-visible row
 - An ancestor that is itself still visible is never duplicated in the header.
 - Style via `--tree-sticky-bg`, `--tree-sticky-border`, `--tree-sticky-shadow`, and the `sticky-headers` / `sticky-header` parts.
 
+### Animation control
+
+Row enter/leave animations are controlled by the `animation` property:
+
+| Value | Behaviour |
+|-------|-----------|
+| `'auto'` (default) | Animate normally, respecting `prefers-reduced-motion` and the `MAX_ANIMATED_ROWS` (50) threshold |
+| `'always'` | Always animate, even when many rows change at once |
+| `'never'` | Skip all row enter/leave animations |
+
+```html
+<ixfx-tree-list animation="never"></ixfx-tree-list>
+```
+
+**Per-call override**: Methods that change the tree structure accept an optional `animate` parameter to override the property for that single call:
+
+```typescript
+// Expand with animation (default)
+tree.expandAll();
+
+// Expand without animation
+tree.expandAll(undefined, false);
+
+// Collapse without animation
+tree.collapseAll(0, false);
+
+// Navigate with animation
+tree.navigateTo(['root', 'child']);
+
+// Navigate without animation
+tree.navigateTo(['root', 'child'], { animate: false });
+
+// Reveal without animation
+tree.revealKey('some-key', false);
+```
+
+This is useful when populating a tree initially or when performance matters more than visual polish.
+
 ### Virtualisation (`ixfx-tree-list`)
 
 A node with 10,000 children needs only about 25 `<li>` elements in the DOM. When

package/llms.txt

@@ -56,6 +56,7 @@ import '@ixfx/components/data-grid';
 - [snackbar](docs-user/snackbar.md): A small floating toolbar anchored in visual proximity to another element on the page (the "target"), built on the native Popover and CSS Anchor Positioning APIs.
 - [snap-container](docs-user/snap-container.md): A container that positions its child element at configurable snap positions along an axis. The child can be dragged, clicked to snap, or controlled via keyboard.
 - [split-layout](docs-user/split-layout.md): A Lit web component that lays out any number of panels along one axis with draggable gutters between them.
+- [sunburst-tree](docs-user/sunburst-tree.md): `<ixfx-sunbursttree-list>` — a zoomable sunburst over weighted tree data. The zoom node is the centre disc; each ring outward is one generation, and each arc's angle is its share of its parent's value
 - [swipe](docs-user/swipe.md): A touch-friendly swipe/nudge component. User taps and drags to generate a value in range [-1, 1]. Value is emitted only on pointer release.
 - [tabs](docs-user/tabs.md): A complete tabbed interface system using several coordinated components:
 - [text-shimmer](docs-user/text-shimmer.md): A label with a sweeping highlight band across the text. Useful as a lightweight "still working…" or "loading…" indicator.