@ixfx/components 0.15.4 → 0.15.5

package/dist/{tab-list-wC0xNz1b.d.ts → tab-list-Df371rqw.d.ts}

@@ -1,4 +1,4 @@
-import "./icon-DR_3rSyZ.js";
+import "./icon-CDGprSdE.js";
 import { LitElement, PropertyValues } from "lit";
 import { CommandRegistry } from "@clinth/ui-commands";
 //#region src/tabs/tab-list-item.d.ts

package/dist/tabs.d.ts

@@ -1,2 +1,2 @@
-import { a as TabListReorderDetail, i as TabListElement, n as TabListChangeEvent, o as TabListReorderEvent, r as TabListDragMode, t as TabListChangeDetail } from "./tab-list-wC0xNz1b.js";
+import { a as TabListReorderDetail, i as TabListElement, n as TabListChangeEvent, o as TabListReorderEvent, r as TabListDragMode, t as TabListChangeDetail } from "./tab-list-Df371rqw.js";
 export { TabListChangeDetail, TabListChangeEvent, TabListDragMode, TabListElement, TabListReorderDetail, TabListReorderEvent };

package/dist/{titlebar-B5zSTZnF.d.ts → titlebar-Tqu-VvMU.d.ts}

@@ -1,4 +1,4 @@
-import "./icon-DR_3rSyZ.js";
+import "./icon-CDGprSdE.js";
 import { LitElement } from "lit";
 //#region src/titlebar/titlebar.d.ts
 type TitlebarOrientation = `horizontal` | `vertical`;

package/dist/titlebar.d.ts

@@ -1,2 +1,2 @@
-import { a as TitlebarToggleDetail, c as TitlebarVariant, i as TitlebarOrientation, n as TitlebarElement, o as TitlebarToggleEvent, r as TitlebarElementEventMap, s as TitlebarToggleInteraction, t as TitlebarCloseEvent } from "./titlebar-B5zSTZnF.js";
+import { a as TitlebarToggleDetail, c as TitlebarVariant, i as TitlebarOrientation, n as TitlebarElement, o as TitlebarToggleEvent, r as TitlebarElementEventMap, s as TitlebarToggleInteraction, t as TitlebarCloseEvent } from "./titlebar-Tqu-VvMU.js";
 export { TitlebarCloseEvent, TitlebarElement, TitlebarElementEventMap, TitlebarOrientation, TitlebarToggleDetail, TitlebarToggleEvent, TitlebarToggleInteraction, TitlebarVariant };

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-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 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-BAuqR9El.js";
+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/{vertical-list-B8FoU-pU.d.ts → vertical-list-D8MksoTp.d.ts}

@@ -1,6 +1,6 @@
 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-BPTuCRGb.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-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-B8FoU-pU.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/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.15.4",
-  "generated": "2026-10-19T01:39:50.334Z",
+  "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 = {

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.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.15.4",
+  "version": "0.15.5",
   "packageManager": "pnpm@10.0.0",
   "description": "Web components for ixfx — Lit-based UI toolkit",
   "author": "Clint Heyer",
@@ -141,6 +141,10 @@
       "types": "./dist/tabs.d.ts",
       "import": "./dist/tabs.js"
     },
+    "./sunburst-tree": {
+      "types": "./dist/sunburst-tree.d.ts",
+      "import": "./dist/sunburst-tree.js"
+    },
     "./timeline": {
       "types": "./dist/timeline.d.ts",
       "import": "./dist/timeline.js"