@ixfx/components 0.10.1 → 0.10.3

package/dist/index.js

@@ -5,14 +5,14 @@ import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { t as popupSurfaceStyles } from "./popup-D80sj2QC.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { a as iconBus, c as setIconFont, i as hasIcon, l as svgToDataUri, n as getIconEntry, o as registerFontIcon, r as getIconFont, s as registerIcon, t as getIcon } from "./registry-BEtb8_wB.js";
-import { t as IxfxIconElement } from "./icon-BCJJYEpm.js";
+import { t as IxfxIconElement } from "./icon-1gpwtPx8.js";
 import { AcTextElement } from "./ac-text.js";
 import { t as DataController } from "./data-controller-DOlmqNKb.js";
-import { a as LIST_SEARCH_COMMAND_IDS, c as createElementListSearchAdapter, d as createDataListSearchAdapter, f as IncrSearchTreeController, h as createFuzzySearch, i as ListSearchController, l as KeyedElementIndex, m as createAcCompletionProvider, n as listSearchStyles, o as registerListSearchCommands, p as createIncrSearch, r as LIST_SEARCH_MODES, s as createElementIncrSearch, t as createTreeListSearchAdapter, u as keyForElement } from "./incr-search-C05WjbZh.js";
+import { a as LIST_SEARCH_COMMAND_IDS, c as createElementListSearchAdapter, d as createDataListSearchAdapter, f as IncrSearchTreeController, h as createFuzzySearch, i as ListSearchController, l as KeyedElementIndex, m as createAcCompletionProvider, n as listSearchStyles, o as registerListSearchCommands, p as createIncrSearch, r as LIST_SEARCH_MODES, s as createElementIncrSearch, t as createTreeListSearchAdapter, u as keyForElement } from "./incr-search-D91M4Ozq.js";
 import { AcTokenElement } from "./ac-token.js";
-import { t as handleStyles } from "./handle-BPOxBOKf.js";
+import { t as handleStyles } from "./handle-DAXs7kbJ.js";
 import { TitlebarElement } from "./titlebar.js";
-import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CARET_RIGHT } from "./defaults-BJwDsMH4.js";
+import { i as ICON_CLOSE, n as ICON_CHECK, r as ICON_CHEVRON_DOWN, t as ICON_CARET_RIGHT } from "./defaults-kVl1t2tT.js";
 import "./icons.js";
 import { t as prominenceStyles } from "./prominence-DlFShic3.js";
 import { n as buttonStyles, t as ButtonElement } from "./button-DsFbV4XD.js";
@@ -20,27 +20,27 @@ import { n as captionForEntry, r as createDefaultListDragPreview, t as ListNativ
 import { n as isMultiMode, r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-SA4piSBi.js";
 import { a as prefersReducedMotion, i as listItemFadeKeyframes, n as animateListItemIn, o as startListItemOutAnimation, r as animateListItemOut, t as LIST_ITEM_MOTION_MS } from "./list-item-animation-BUoEKi5s.js";
 import "./interaction-BskmlA9t.js";
-import "./menu-item-DzizkMH-.js";
+import "./menu-item-Woc8jJc1.js";
 import { Checkbox } from "./checkbox.js";
-import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-R73i0QTP.js";
+import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-WDrPuqoO.js";
 import { LabelledRangeInput } from "./labelled-range-input.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
-import { a as TreeDataModel, c as pruneDraggedDescendants, i as TreeDropController, n as TreeListElement, o as applyTreeDrop, r as TreeBaseElement, s as dropTargetFor, t as TreeController } from "./tree-BuzWn18_.js";
-import { t as scrollFadeStyles } from "./scroll-fade-CAs1EabA.js";
+import { a as TreeDataModel, c as pruneDraggedDescendants, i as TreeDropController, n as TreeListElement, o as applyTreeDrop, r as TreeBaseElement, s as dropTargetFor, t as TreeController } from "./tree-Bm2TzTfe.js";
+import { t as scrollFadeStyles } from "./scroll-fade-BrNUIYnm.js";
 import { NarrowedTextElement } from "./narrowed-text.js";
 import { CrumbNavigationElement } from "./crumbs.js";
 import { DataDisplayComponent } from "./data-display.js";
 import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
-import { t as menu_exports } from "./menu-C8a-84S5.js";
+import { a as menuFromTreeToElements, t as menu_exports } from "./menu-B2Qv3Oiz.js";
 import { t as PanTextElement } from "./pan-text-CqtvjPyK.js";
 import { DataGridElement } from "./data-grid.js";
 import { DetailListElement } from "./detail-list.js";
-import { a as distribute, c as toSnapshot, i as buildModel, l as walk, n as SplitPanelElement, o as normalise, r as applySnapshot, s as resolveTracks, t as SplitLayoutElement } from "./split-layout-3yBOEVZW.js";
+import { a as distribute, c as toSnapshot, i as buildModel, l as walk, n as SplitPanelElement, o as normalise, r as applySnapshot, s as resolveTracks, t as SplitLayoutElement } from "./split-layout-BJEU1W0d.js";
 import { TabListElement } from "./tabs.js";
 import { EditableLabel } from "./editable-label.js";
 import { n as EditableNumber, t as LabelledSliderInput } from "./labelled-slider-input-CF2RtzgG.js";
 import { t as FormElement } from "./form-CsXJX15p.js";
-import { t as GridListElement } from "./grid-list-DLfw5HI4.js";
+import { t as GridListElement } from "./grid-list-WE92nfX5.js";
 import { PanelElement } from "./panel.js";
 import { GroupedItemListerElement } from "./grouped-item-lister.js";
 import { VerticalListElement } from "./vertical-list.js";
@@ -60,7 +60,7 @@ import { SelectHorizElement } from "./select-horiz.js";
 import { SnackbarElement } from "./snackbar.js";
 import { SnapContainer } from "./snap-container.js";
 import { SwipeElement } from "./swipe.js";
-import { a as resolveCssVars, i as attachTimelineInteractions, n as TimelineTrackTabElement, o as resolveGrid, r as timelineStyles, s as TimelineController, t as IxfxTimelineElement } from "./timeline-CFlBFFGZ.js";
+import { a as resolveCssVars, i as attachTimelineInteractions, n as TimelineTrackTabElement, o as resolveGrid, r as timelineStyles, s as TimelineController, t as IxfxTimelineElement } from "./timeline-BP1Ux2EV.js";
 import { TransitoryLabelElement } from "./transitory-label.js";
 import { XyPad } from "./xy-pad.js";
 import { LitElement, css, html, nothing } from "lit";
@@ -6487,6 +6487,974 @@ __decorate([state()], IcicleTreeListElement.prototype, "_zoomKey", void 0);
 __decorate([query(`#icicle-tooltip`)], IcicleTreeListElement.prototype, "_tooltipEl", void 0);
 IcicleTreeListElement = __decorate([safeCustomElement(`ixfx-icicletree-list`)], IcicleTreeListElement);
 //#endregion
+//#region src/multicol-list/types.ts
+const ALL_KEY = `__all__`;
+//#endregion
+//#region src/multicol-list/column.ts
+/** Sorts by label, honouring direction. 'All' lives outside the list, so it is not special-cased. */
+function sortItems(items, direction) {
+	const dir = direction === `desc` ? -1 : 1;
+	return [...items].sort((a, b) => dir * a.label.localeCompare(b.label, void 0, {
+		sensitivity: `base`,
+		numeric: true
+	}));
+}
+/**
+* Nearest-gap math for header drag-reorder (per data-grid's `_beginHeaderDrag`).
+*
+* `offsets` is a prefix-sum of column widths (length = count + 1). `x` is the
+* pointer position in content space (already adjusted for scroll). Returns the
+* final insertion index once the source column is removed (`insert`), plus the
+* un-normalised gap offset for the drop caret (`caretOffset`).
+*/
+function computeDropGap(offsets, x, count, from) {
+	if (count === 0) return {
+		insert: 0,
+		caretOffset: 0
+	};
+	let bestDist = Number.MAX_SAFE_INTEGER;
+	let caretGap = from;
+	for (let i = 0; i < count; i++) {
+		if (i === from) continue;
+		const left = offsets[i];
+		const right = offsets[i + 1] ?? offsets[offsets.length - 1];
+		const mid = (left + right) / 2;
+		const dist = Math.abs(x - (x < mid ? left : right));
+		if (dist < bestDist) {
+			bestDist = dist;
+			caretGap = x < mid ? i : i + 1;
+		}
+	}
+	const insert = caretGap > from ? caretGap - 1 : caretGap;
+	return {
+		insert: Math.max(0, Math.min(count - 1, insert)),
+		caretOffset: offsets[caretGap] ?? offsets[offsets.length - 1]
+	};
+}
+var MulticolColumnController = class {
+	#category;
+	#categoryDefaults;
+	#selectionMode;
+	#dataProvider;
+	#onSelectionChange;
+	#onRequestData;
+	#abortController = void 0;
+	#host;
+	#allRow;
+	#listerEl;
+	#selectedValues = [];
+	#allSelected = true;
+	#lastItems = [];
+	#syncingSelection = false;
+	#state;
+	constructor(options) {
+		this.id = options.id;
+		this.#category = options.category;
+		this.#categoryDefaults = options.categoryDefaults;
+		this.#selectionMode = options.selectionMode;
+		this.#dataProvider = options.dataProvider;
+		this.#onSelectionChange = options.onSelectionChange;
+		this.#onRequestData = options.onRequestData;
+		this.#state = {
+			id: options.id,
+			categoryKey: options.category.key,
+			sort: options.categoryDefaults?.sort ?? `asc`,
+			grouped: options.categoryDefaults?.grouped ?? false,
+			width: 220
+		};
+	}
+	get state() {
+		return this.getState();
+	}
+	/** Always derived from the live category so a swap is visible everywhere. */
+	get categoryKey() {
+		return this.#category.key;
+	}
+	getState() {
+		return { ...this.#state };
+	}
+	updateState(partial) {
+		const sortChanged = partial.sort !== void 0 && partial.sort !== this.#state.sort;
+		const groupedChanged = partial.grouped !== void 0 && partial.grouped !== this.#state.grouped;
+		this.#state = {
+			...this.#state,
+			...partial
+		};
+		if (sortChanged) this.#repush();
+		if (groupedChanged) this.#syncGrouping();
+	}
+	setWidth(width) {
+		this.#state = {
+			...this.#state,
+			width: Math.max(80, Math.min(480, Math.round(width)))
+		};
+	}
+	setSort(sort) {
+		if (sort === this.#state.sort) return;
+		this.#state = {
+			...this.#state,
+			sort
+		};
+		this.#repush();
+	}
+	setGrouped(grouped) {
+		if (grouped === this.#state.grouped) return;
+		this.#state = {
+			...this.#state,
+			grouped
+		};
+		this.#syncGrouping();
+	}
+	setSelectionMode(mode) {
+		if (mode === this.#selectionMode) return;
+		this.#selectionMode = mode;
+		for (const sub of this.#subComponents()) sub.selectionMode = mode;
+	}
+	setCategory(category) {
+		this.#category = category;
+		this.#categoryDefaults = category.defaults;
+		this.#state = {
+			...this.#state,
+			categoryKey: category.key,
+			sort: category.defaults?.sort ?? `asc`,
+			grouped: category.defaults?.grouped ?? false
+		};
+		this.clearSelection();
+		this.#syncGrouping();
+	}
+	get listerHost() {
+		return this.#host;
+	}
+	get isMounted() {
+		return this.#host !== void 0;
+	}
+	setDataProvider(provider) {
+		this.#dataProvider = provider;
+	}
+	mount(host) {
+		if (this.#host) return;
+		this.#host = host;
+		const allRow = document.createElement(`div`);
+		allRow.className = `all-row`;
+		allRow.dataset.key = ALL_KEY;
+		allRow.setAttribute(`role`, `button`);
+		allRow.setAttribute(`tabindex`, `0`);
+		const allLabel = document.createElement(`span`);
+		allLabel.className = `all-label`;
+		allRow.appendChild(allLabel);
+		const applyAll = () => {
+			if (this.#allSelected) return;
+			this.#setAllSelection();
+		};
+		allRow.addEventListener(`click`, applyAll);
+		allRow.addEventListener(`keydown`, (e) => {
+			if (e.key === `Enter` || e.key === ` `) {
+				e.preventDefault();
+				applyAll();
+			}
+		});
+		this.#allRow = allRow;
+		const lister = document.createElement(`ixfx-grouped-item-lister`);
+		lister.crossGroupSelection = true;
+		lister.factory = () => createVerticalListAdapter(renderItem, {
+			selectionMode: this.#selectionMode,
+			interactionMode: `standard`
+		});
+		lister.addEventListener(`select`, this.#handleSelect);
+		this.#listerEl = lister;
+		this.#syncGrouping();
+		this.#syncAllRow();
+		host.append(allRow, lister);
+		if (this.#lastItems.length > 0) {
+			this.#pushItems();
+			this.#restoreAfterSync();
+		}
+	}
+	unmount() {
+		this.#abortPending();
+		this.#allRow?.remove();
+		this.#listerEl?.remove();
+		this.#allRow = void 0;
+		this.#listerEl = void 0;
+		this.#host = void 0;
+	}
+	requestData(query) {
+		if (!this.#dataProvider) return;
+		this.#abortPending();
+		const controller = new AbortController();
+		this.#abortController = controller;
+		const { signal } = controller;
+		this.#onRequestData(this.id, query, signal);
+		Promise.resolve().then(async () => {
+			const result = this.#dataProvider(query, signal);
+			const items = await collectDataResult(result, signal);
+			if (signal.aborted) return;
+			this.#applyItems(items);
+		}).catch(() => {});
+	}
+	#applyItems(items) {
+		this.#lastItems = items;
+		const valid = this.#selectedValues.filter((v) => items.some((i) => i.key === v));
+		const changed = valid.length !== this.#selectedValues.length;
+		this.#selectedValues = valid;
+		if (valid.length === 0) this.#allSelected = true;
+		if (!this.#listerEl) {
+			if (changed) this.#onSelectionChange(this.id, valid);
+			return;
+		}
+		this.#pushItems();
+		this.#restoreAfterSync();
+		if (changed) this.#onSelectionChange(this.id, valid);
+	}
+	#pushItems() {
+		if (!this.#listerEl) return;
+		const sorted = sortItems(this.#lastItems, this.#state.sort);
+		this.#listerEl.provider = () => sorted;
+	}
+	#repush() {
+		if (!this.#listerEl || this.#lastItems.length === 0) return;
+		this.#pushItems();
+		this.#restoreAfterSync();
+	}
+	/** Grouping config from category defaults; grouping without groupBy is a no-op. */
+	#syncGrouping() {
+		if (!this.#listerEl) return;
+		const groupBy = this.#categoryDefaults?.groupBy;
+		this.#listerEl.groupBy = groupBy;
+		this.#listerEl.grouped = this.#state.grouped && groupBy !== void 0;
+		if (this.#lastItems.length > 0) this.#restoreAfterSync();
+	}
+	#subComponents() {
+		if (!this.#listerEl) return [];
+		return this.#listerEl.querySelectorAll(`:scope > .ungrouped-host > *, :scope > ixfx-panel > *`);
+	}
+	#handleSelect = () => {
+		if (this.#syncingSelection) return;
+		const values = [...this.#listerEl?.selectedItems ?? []].map((i) => i.key).filter((k) => k !== ALL_KEY);
+		if (values.length === this.#selectedValues.length && values.every((v) => this.#selectedValues.includes(v))) {
+			this.#syncAllRow();
+			return;
+		}
+		this.#selectedValues = values;
+		this.#allSelected = values.length === 0;
+		this.#syncAllRow();
+		this.#onSelectionChange(this.id, values);
+	};
+	#setAllSelection() {
+		const previous = this.#selectedValues;
+		this.#syncingSelection = true;
+		try {
+			this.#selectedValues = [];
+			this.#allSelected = true;
+			for (const sub of this.#subComponents()) sub.clearSelection();
+		} finally {
+			this.#syncingSelection = false;
+		}
+		this.#syncAllRow();
+		if (previous.length > 0) this.#onSelectionChange(this.id, []);
+	}
+	clearSelection() {
+		this.#setAllSelection();
+	}
+	get selectedValues() {
+		return this.#selectedValues;
+	}
+	#restoreAfterSync() {
+		if (!this.#listerEl) return;
+		this.#listerEl.updateComplete.then(() => {
+			if (!this.#listerEl || !this.#host) return;
+			this.#syncingSelection = true;
+			try {
+				const wanted = this.#selectedValues;
+				for (const list of this.#listerEl.querySelectorAll(`ixfx-vertical-list`)) list.selectKeys(wanted);
+				const selected = [...this.#listerEl.selectedItems].map((i) => i.key).filter((k) => k !== ALL_KEY);
+				this.#selectedValues = selected;
+				this.#allSelected = selected.length === 0;
+			} finally {
+				this.#syncingSelection = false;
+			}
+			this.#syncAllRow();
+		});
+	}
+	#syncAllRow() {
+		if (!this.#allRow) return;
+		const label = this.#categoryDefaults?.allLabel ?? `All`;
+		const labelEl = this.#allRow.querySelector(`.all-label`);
+		if (labelEl) labelEl.textContent = label;
+		this.#allRow.toggleAttribute(`data-selected`, this.#allSelected);
+	}
+	#abortPending() {
+		if (this.#abortController) {
+			this.#abortController.abort();
+			this.#abortController = void 0;
+		}
+	}
+};
+function renderItem(item) {
+	const li = document.createElement(`li`);
+	li.dataset.key = item.key;
+	const labelSpan = document.createElement(`span`);
+	labelSpan.className = `item-label`;
+	labelSpan.textContent = item.label;
+	li.appendChild(labelSpan);
+	if (item.count !== void 0) {
+		const countSpan = document.createElement(`span`);
+		countSpan.className = `count`;
+		countSpan.textContent = String(item.count);
+		li.appendChild(countSpan);
+	}
+	return li;
+}
+//#endregion
+//#region src/multicol-list/multicol-list.ts
+registerIcon(`menu`, `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16"/><path d="M4 18h16"/><path d="M4 6h16"/></svg>`);
+const DEFAULT_COLUMN_WIDTH = 220;
+const MIN_COLUMN_WIDTH = 80;
+const MAX_COLUMN_WIDTH = 480;
+const DRAG_THRESHOLD = 5;
+let MulticolListElement = class MulticolListElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.categories = [];
+		this.selectionMode = `multiple`;
+		this.minColumns = 1;
+		this.maxColumns = 5;
+		this._columns = [];
+		this._colOffsets = [0];
+		this._resizingColumnId = void 0;
+		this._draggingColumnId = void 0;
+		this._dropCaretX = void 0;
+		this._idCounter = 0;
+		this._autoSeeded = false;
+		this._drag = {
+			pointerId: -1,
+			from: -1,
+			startX: 0,
+			startY: 0,
+			active: false,
+			ghost: null,
+			insert: -1
+		};
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			handleStyles,
+			css`
+      :host {
+        --multicol-list-bg: var(--surface-3);
+        --multicol-list-header-bg: var(--surface-2);
+        --multicol-list-header-text: var(--surface-3-text);
+        --multicol-list-border: var(--border);
+        --multicol-list-min-column-width: ${MIN_COLUMN_WIDTH}px;
+        --multicol-list-max-column-width: ${MAX_COLUMN_WIDTH}px;
+
+        display: block;
+        overflow: hidden;
+        background: var(--multicol-list-bg);
+        color: var(--surface-3-text);
+        font-family: var(--font-family);
+      }
+      #container {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        overflow-x: auto;
+        overflow-y: hidden;
+        position: relative;
+        height: 100%;
+      }
+      .column {
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        border-right: var(--multicol-list-border);
+        min-width: var(--multicol-list-min-column-width);
+        max-width: var(--multicol-list-max-column-width);
+        background: var(--surface-3);
+      }
+      .column-header {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        height: 32px;
+        background: var(--multicol-list-header-bg);
+        color: var(--multicol-list-header-text);
+        border-bottom: var(--border);
+        position: relative;
+        user-select: none;
+        min-width: var(--multicol-list-min-column-width);
+        box-sizing: border-box;
+      }
+      .column-header[data-dragging] {
+        opacity: 0.4;
+      }
+      .reorder-handle {
+        cursor: grab;
+        opacity: 0;
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+        padding-left: var(--space-xs);
+        touch-action: none;
+        transition: opacity var(--transition, 0.15s ease-out);
+      }
+      .column-header:hover .reorder-handle, .column-header:focus-within .reorder-handle, .column-header[data-dragging] .reorder-handle { opacity: var(--ixfx-handle-opacity, 0.5); }
+      .reorder-handle:active {
+        cursor: grabbing;
+      }
+      .reorder-handle .ixfx-handle {
+        --ixfx-handle-length: 14px;
+        --ixfx-handle-thickness: var(--multicol-list-reorder-handle-width, 10px);
+        --ixfx-handle-dot-size: 3px;
+      }
+      .column-label {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding: 0 var(--space-s);
+        font-size: var(--text-m);
+        font-weight: 600;
+        background: transparent;
+        border: none;
+        color: inherit;
+        cursor: pointer;
+        text-align: left;
+        min-width: 0;
+      }
+      .column-label:hover {
+        text-decoration: underline;
+      }
+      .burger-btn {
+        flex-shrink: 0;
+        width: 28px;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        color: var(--surface-3-text);
+        opacity: 0;
+        transition: opacity var(--transition);
+        border-radius: var(--radius-s);
+      }
+      .column:hover .burger-btn,
+      .column-header:focus-within .burger-btn {
+        opacity: 1;
+      }
+      .burger-btn:hover {
+        background: var(--surface-4);
+      }
+      .resize-handle {
+        position: absolute;
+        right: -4px;
+        top: 0;
+        bottom: 0;
+        width: 8px;
+        cursor: col-resize;
+        z-index: 1;
+        display: flex;
+        align-items: stretch;
+        justify-content: center;
+        touch-action: none;
+      }
+      .resize-handle::before {
+        content: '';
+        width: 2px;
+        margin: 2px 0;
+        border-radius: 1px;
+        background: transparent;
+        transition: background-color var(--transition);
+      }
+      .resize-handle:hover::before,
+      .resize-handle[data-active]::before {
+        background: var(--accent);
+      }
+      .lister-host {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+      }
+      .all-row {
+        display: flex;
+        align-items: center;
+        padding: var(--space-xs) var(--space-s);
+        cursor: pointer;
+        user-select: none;
+        min-height: 28px;
+        box-sizing: border-box;
+        outline: 1px solid transparent;
+        background: var(--surface-3);
+      }
+      .all-row:hover,
+      .all-row[data-selected] {
+        background: var(--surface-5);
+      }
+      .all-row[data-selected] {
+        outline-color: var(--accent);
+        font-weight: 600;
+      }
+      ixfx-grouped-item-lister {
+        display: block;
+      }
+      .drop-caret {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        background: var(--accent);
+        border-radius: 1px;
+        pointer-events: none;
+        z-index: 10;
+      }
+      .item-label {
+        flex: 1;
+      }
+      .count {
+        opacity: 0.6;
+        margin-left: var(--space-s);
+        font-size: var(--text-s);
+      }
+    `
+		];
+	}
+	get columns() {
+		return this._columns.map((c) => c.getState());
+	}
+	setColumns(states) {
+		const existingMap = new Map(this._columns.map((c) => [c.id, c]));
+		const newColumns = [];
+		for (const colState of states) {
+			const existing = existingMap.get(colState.id);
+			if (existing) {
+				if (existing.categoryKey !== colState.categoryKey) {
+					const newCategory = this.categories.find((c) => c.key === colState.categoryKey);
+					if (newCategory) existing.setCategory(newCategory);
+				}
+				existing.updateState(colState);
+				newColumns.push(existing);
+				existingMap.delete(colState.id);
+				continue;
+			}
+			const category = this.categories.find((c) => c.key === colState.categoryKey);
+			if (!category) continue;
+			const controller = this.#createController(colState.id, category);
+			controller.updateState(colState);
+			newColumns.push(controller);
+		}
+		for (const col of existingMap.values()) col.unmount();
+		this._columns = newColumns;
+		this._updateColOffsets();
+		this._emitColumnsChange(`add`);
+		this._requeryAllColumns();
+		this.requestUpdate();
+	}
+	addColumn(categoryKey, position) {
+		if (this.maxColumns > 0 && this._columns.length >= this.maxColumns) return;
+		const category = this.categories.find((c) => c.key === categoryKey);
+		if (!category) return;
+		const id = `col-${++this._idCounter}`;
+		const controller = this.#createController(id, category);
+		if (position !== void 0 && position >= 0 && position < this._columns.length) this._columns.splice(position, 0, controller);
+		else this._columns.push(controller);
+		this._updateColOffsets();
+		this._emitColumnsChange(`add`);
+		this._requeryAllColumns();
+		this.requestUpdate();
+	}
+	removeColumn(columnId) {
+		if (this._columns.length <= this.minColumns) return;
+		const idx = this._columns.findIndex((c) => c.id === columnId);
+		if (idx < 0) return;
+		this._columns[idx].unmount();
+		this._columns.splice(idx, 1);
+		this._updateColOffsets();
+		this._emitColumnsChange(`remove`);
+		this._requeryAllColumns();
+		this.requestUpdate();
+	}
+	getSelection() {
+		return this._columns.map((c) => ({
+			columnId: c.id,
+			categoryKey: c.categoryKey,
+			values: c.selectedValues
+		}));
+	}
+	clearSelection() {
+		for (const col of this._columns) col.clearSelection();
+		this.requestUpdate();
+	}
+	render() {
+		return html`
+      <div id="container">
+        ${repeat(this._columns, (col) => col.id, (col, idx) => this._renderColumn(col, idx))}
+        ${this._dropCaretX !== void 0 ? html`<div class="drop-caret" style="left: ${this._dropCaretX}px"></div>` : nothing}
+      </div>
+    `;
+	}
+	updated(changedProperties) {
+		if (!this._autoSeeded && this._columns.length === 0 && this.categories.length > 0) {
+			this._autoSeeded = true;
+			this.addColumn(this.categories[0].key);
+		}
+		if (changedProperties.has(`selectionMode`)) for (const col of this._columns) col.setSelectionMode(this.selectionMode);
+		if (changedProperties.has(`dataProvider`)) for (const col of this._columns) col.setDataProvider(this.dataProvider);
+		for (const col of this._columns) if (!col.isMounted) {
+			const hostEl = this.shadowRoot?.querySelector(`[data-col-id="${col.id}"] .lister-host`);
+			if (hostEl) col.mount(hostEl);
+		}
+		if (changedProperties.has(`categories`)) this._syncColumnsWithCategories();
+		if (changedProperties.has(`categories`) || changedProperties.has(`dataProvider`)) this._requeryAllColumns();
+		this._updateColOffsets();
+	}
+	_renderColumn(col, idx) {
+		const width = col.getState().width ?? DEFAULT_COLUMN_WIDTH;
+		return html`
+      <div
+        class="column"
+        data-col-id="${col.id}"
+        style="width: ${width}px"
+      >
+        <div
+          class="column-header"
+          ?data-dragging=${this._draggingColumnId === col.id}
+          data-col-idx=${idx}
+        >
+          <span
+            class="reorder-handle"
+            data-tooltip="Drag to reorder"
+            @pointerdown=${(e) => this._onHeaderPointerDown(e, col, idx)}
+          ><span class="ixfx-handle" data-handle="dotted" data-shape="vertical" part="reorder-handle"></span></span>
+          <button
+            class="column-label"
+            data-tooltip="Change category"
+            @click=${(e) => {
+			e.stopPropagation();
+			this._openCategoryPicker(col, e.currentTarget);
+		}}
+          >${this._getCategoryLabel(col.categoryKey)}</button>
+          <button
+            class="burger-btn"
+            data-tooltip="Column options"
+            @click=${(e) => {
+			e.stopPropagation();
+			this._openBurgerMenu(col, e.currentTarget);
+		}}
+          >
+            <ixfx-icon name="menu" size="14"></ixfx-icon>
+          </button>
+          <span
+            class="resize-handle"
+            ?data-active=${this._resizingColumnId === col.id}
+            @pointerdown=${(e) => this._onResizePointerDown(e, col)}
+            @click=${(e) => e.stopPropagation()}
+          ></span>
+        </div>
+        <div class="lister-host"></div>
+      </div>
+    `;
+	}
+	_getCategoryLabel(key) {
+		return this.categories.find((c) => c.key === key)?.label ?? key;
+	}
+	#createController(id, category) {
+		return new MulticolColumnController({
+			id,
+			category,
+			categoryDefaults: category.defaults,
+			selectionMode: this.selectionMode,
+			dataProvider: this.dataProvider,
+			onSelectionChange: this._onColumnSelectionChange.bind(this),
+			onRequestData: this._onColumnRequestData.bind(this)
+		});
+	}
+	_onHeaderPointerDown(e, col, idx) {
+		e.stopPropagation();
+		this._drag = {
+			pointerId: e.pointerId,
+			from: idx,
+			startX: e.clientX,
+			startY: e.clientY,
+			active: false,
+			ghost: null,
+			insert: idx
+		};
+		const onMove = (ev) => {
+			if (ev.pointerId !== this._drag.pointerId) return;
+			const dx = ev.clientX - this._drag.startX;
+			const dy = ev.clientY - this._drag.startY;
+			if (!this._drag.active) {
+				if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+				this._drag.active = true;
+				this._draggingColumnId = col.id;
+				const headerEl = this.shadowRoot?.querySelector(`[data-col-id="${col.id}"] .column-header`);
+				const content = document.createElement(`span`);
+				content.textContent = this._getCategoryLabel(col.categoryKey);
+				try {
+					if (headerEl) {
+						this._drag.ghost = createDragGhost({
+							anchor: headerEl,
+							content
+						});
+						this._drag.ghost.move(ev.clientX, ev.clientY);
+					}
+				} catch {}
+				try {
+					this._containerEl?.setPointerCapture(ev.pointerId);
+				} catch {}
+			}
+			this._drag.ghost?.move(ev.clientX, ev.clientY);
+			const containerEl = this._containerEl;
+			if (!containerEl) return;
+			const rect = containerEl.getBoundingClientRect();
+			const x = ev.clientX - rect.left + containerEl.scrollLeft;
+			const gap = computeDropGap(this._colOffsets, x, this._columns.length, this._drag.from);
+			this._drag.insert = gap.insert;
+			this._dropCaretX = gap.caretOffset;
+			this.requestUpdate();
+		};
+		const finish = (ev) => {
+			if (ev.pointerId !== this._drag.pointerId) return;
+			const wasActive = this._drag.active;
+			const from = this._drag.from;
+			const insert = this._drag.insert;
+			this._drag.ghost?.destroy();
+			this._drag.ghost = null;
+			this._draggingColumnId = void 0;
+			this._dropCaretX = void 0;
+			try {
+				this._containerEl?.releasePointerCapture(ev.pointerId);
+			} catch {}
+			window.removeEventListener(`pointermove`, onMove);
+			window.removeEventListener(`pointerup`, finish);
+			window.removeEventListener(`pointercancel`, finish);
+			if (wasActive && insert !== from) {
+				const [moved] = this._columns.splice(from, 1);
+				this._columns.splice(insert, 0, moved);
+				this._updateColOffsets();
+				this._emitColumnsChange(`reorder`);
+				this.requestUpdate();
+			}
+		};
+		window.addEventListener(`pointermove`, onMove);
+		window.addEventListener(`pointerup`, finish);
+		window.addEventListener(`pointercancel`, finish);
+	}
+	_onResizePointerDown(e, col) {
+		e.preventDefault();
+		e.stopPropagation();
+		const startX = e.clientX;
+		const startW = col.getState().width ?? DEFAULT_COLUMN_WIDTH;
+		this._resizingColumnId = col.id;
+		const applyWidth = (clientX) => {
+			const w = Math.max(MIN_COLUMN_WIDTH, Math.min(MAX_COLUMN_WIDTH, startW + clientX - startX));
+			col.setWidth(w);
+			return w;
+		};
+		const onMove = (ev) => {
+			if (ev.pointerId !== e.pointerId) return;
+			applyWidth(ev.clientX);
+			this._updateColOffsets();
+			this.requestUpdate();
+		};
+		const finish = (ev) => {
+			window.removeEventListener(`pointermove`, onMove);
+			window.removeEventListener(`pointerup`, finish);
+			window.removeEventListener(`pointercancel`, finish);
+			applyWidth(ev.type === `pointercancel` ? startX : ev.clientX);
+			this._resizingColumnId = void 0;
+			this._updateColOffsets();
+			this._emitColumnsChange(`resize`);
+			this.requestUpdate();
+		};
+		window.addEventListener(`pointermove`, onMove);
+		window.addEventListener(`pointerup`, finish);
+		window.addEventListener(`pointercancel`, finish);
+	}
+	/** Floats a dropdown menu trigger over `anchorEl` and opens it immediately. */
+	#openMenuAt(anchorEl, placement, buildMenu) {
+		const rect = anchorEl.getBoundingClientRect();
+		const trigger = document.createElement(`ixfx-menu-trigger`);
+		trigger.mode = `dropdown`;
+		trigger.tabStop = false;
+		trigger.placement = placement;
+		trigger.style.position = `fixed`;
+		trigger.style.left = `${rect.left}px`;
+		trigger.style.top = `${rect.bottom}px`;
+		const container = document.createElement(`ixfx-menu-container`);
+		container.setAttribute(`slot`, `menu`);
+		buildMenu(container);
+		trigger.appendChild(container);
+		trigger.addEventListener(`menu-trigger-close`, () => trigger.remove(), { once: true });
+		document.body.appendChild(trigger);
+		trigger.updateComplete.then(() => trigger.openMenu());
+	}
+	#categoryToNode(cat) {
+		return {
+			item: {
+				key: cat.key,
+				label: cat.label
+			},
+			children: cat.children && cat.children.length > 0 ? cat.children.map((c) => this.#categoryToNode(c)) : void 0
+		};
+	}
+	_openCategoryPicker(col, anchorEl) {
+		this.#openMenuAt(anchorEl, `bottom-start`, (container) => {
+			const items = menuFromTreeToElements(this.categories.map((c) => this.#categoryToNode(c)), { onCommand: (detail) => {
+				if (detail.command === void 0) return;
+				this._changeColumnCategory(col, detail.command);
+			} });
+			for (const el of items) container.appendChild(el);
+			for (const item of container.querySelectorAll(`ixfx-menu-item`)) if (item.getAttribute(`command`) === col.categoryKey) item.setAttribute(`disabled`, ``);
+		});
+	}
+	#menuItem(label, command, onCommand, iconName) {
+		const el = document.createElement(`ixfx-menu-item`);
+		el.setAttribute(`command`, command);
+		el.setAttribute(`label`, label);
+		if (iconName) el.setAttribute(`icon-name`, iconName);
+		if (onCommand) el.addEventListener(`command`, () => onCommand());
+		return el;
+	}
+	_openBurgerMenu(col, anchorEl) {
+		this.#openMenuAt(anchorEl, `bottom-end`, (container) => {
+			const removeItem = this.#menuItem(`Remove this column`, `remove`, () => this.removeColumn(col.id));
+			removeItem.toggleAttribute(`disabled`, this._columns.length <= this.minColumns);
+			container.appendChild(removeItem);
+			const separator = document.createElement(`ixfx-menu-separator`);
+			container.appendChild(separator);
+			const atMax = this.maxColumns > 0 && this._columns.length >= this.maxColumns;
+			const usedCats = new Set(this._columns.map((c) => c.categoryKey));
+			const unused = this.categories.filter((c) => !usedCats.has(c.key));
+			const canAdd = !atMax && unused.length > 0;
+			const addSub = document.createElement(`ixfx-menu-sub-trigger`);
+			addSub.setAttribute(`label`, `Add column`);
+			const addContainer = document.createElement(`ixfx-menu-container`);
+			addContainer.setAttribute(`slot`, `submenu`);
+			const idx = this._columns.findIndex((c) => c.id === col.id);
+			for (const [label, offset] of [[`Left`, -1], [`Right`, 1]]) {
+				const item = this.#menuItem(label, `add-${label.toLowerCase()}`, () => {
+					this.#insertColumn(unused[0].key, Math.max(0, idx + Math.max(0, offset)));
+				});
+				item.toggleAttribute(`disabled`, !canAdd);
+				addContainer.appendChild(item);
+			}
+			addSub.appendChild(addContainer);
+			container.appendChild(addSub);
+			const sortSub = document.createElement(`ixfx-menu-sub-trigger`);
+			sortSub.setAttribute(`label`, `Sort`);
+			const sortContainer = document.createElement(`ixfx-menu-container`);
+			sortContainer.setAttribute(`slot`, `submenu`);
+			sortContainer.appendChild(this.#menuItem(`Ascending`, `sort-asc`, () => {
+				col.setSort(`asc`);
+				this._emitColumnsChange(`sort`);
+				this.requestUpdate();
+			}, col.getState().sort === `asc` ? `check` : void 0));
+			sortContainer.appendChild(this.#menuItem(`Descending`, `sort-desc`, () => {
+				col.setSort(`desc`);
+				this._emitColumnsChange(`sort`);
+				this.requestUpdate();
+			}, col.getState().sort === `desc` ? `check` : void 0));
+			sortSub.appendChild(sortContainer);
+			container.appendChild(sortSub);
+			const grouped = col.getState().grouped;
+			container.appendChild(this.#menuItem(grouped ? `Ungroup` : `Group`, `toggle-group`, () => {
+				col.setGrouped(!grouped);
+				this._emitColumnsChange(`grouping`);
+				this.requestUpdate();
+			}, grouped ? `check` : void 0));
+		});
+	}
+	#insertColumn(categoryKey, position) {
+		this.addColumn(categoryKey, position);
+	}
+	_changeColumnCategory(col, categoryKey) {
+		const category = this.categories.find((c) => c.key === categoryKey);
+		if (!category) return;
+		col.setCategory(category);
+		this._emitColumnsChange(`category`);
+		this._requeryAllColumns();
+		this.requestUpdate();
+	}
+	_onColumnSelectionChange(columnId, _values) {
+		if (!this._columns.find((c) => c.id === columnId)) return;
+		for (const otherCol of this._columns) if (otherCol.id !== columnId) otherCol.requestData(this._buildQuery(otherCol));
+		const detail = {
+			columnId,
+			columns: this.getSelection()
+		};
+		this.dispatchEvent(new CustomEvent(`multicol-select`, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+		this.requestUpdate();
+	}
+	_onColumnRequestData(_columnId, _query, _signal) {}
+	_buildQuery(col) {
+		const otherSelections = /* @__PURE__ */ new Map();
+		for (const c of this._columns) if (c.id !== col.id) otherSelections.set(c.id, c.selectedValues);
+		return {
+			columnId: col.id,
+			categoryKey: col.categoryKey,
+			otherSelections
+		};
+	}
+	_requeryAllColumns() {
+		for (const col of this._columns) col.requestData(this._buildQuery(col));
+	}
+	_syncColumnsWithCategories() {
+		let changed = false;
+		for (const col of this._columns) {
+			if (this.categories.some((c) => c.key === col.categoryKey)) continue;
+			if (this.categories.length === 0) continue;
+			col.setCategory(this.categories[0]);
+			changed = true;
+		}
+		if (changed) this._emitColumnsChange(`category`);
+	}
+	_updateColOffsets() {
+		const offsets = [0];
+		let sum = 0;
+		for (const col of this._columns) {
+			sum += col.getState().width ?? DEFAULT_COLUMN_WIDTH;
+			offsets.push(sum);
+		}
+		if (!(offsets.length === this._colOffsets.length && offsets.every((v, i) => v === this._colOffsets[i]))) this._colOffsets = offsets;
+	}
+	_emitColumnsChange(reason) {
+		this.dispatchEvent(new CustomEvent(`multicol-columns-change`, {
+			detail: {
+				columns: this.columns,
+				reason
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([property({ attribute: false })], MulticolListElement.prototype, "categories", void 0);
+__decorate([property({ attribute: false })], MulticolListElement.prototype, "dataProvider", void 0);
+__decorate([property({
+	type: String,
+	attribute: `selection-mode`
+})], MulticolListElement.prototype, "selectionMode", void 0);
+__decorate([property({ type: Number })], MulticolListElement.prototype, "minColumns", void 0);
+__decorate([property({ type: Number })], MulticolListElement.prototype, "maxColumns", void 0);
+__decorate([state()], MulticolListElement.prototype, "_columns", void 0);
+__decorate([state()], MulticolListElement.prototype, "_colOffsets", void 0);
+__decorate([state()], MulticolListElement.prototype, "_resizingColumnId", void 0);
+__decorate([state()], MulticolListElement.prototype, "_draggingColumnId", void 0);
+__decorate([state()], MulticolListElement.prototype, "_dropCaretX", void 0);
+__decorate([query(`#container`)], MulticolListElement.prototype, "_containerEl", void 0);
+MulticolListElement = __decorate([customElement(`ixfx-multicol-list`)], MulticolListElement);
+//#endregion
 //#region src/notifier/pill-renderer.ts
 const ROW_SPACING = 8;
 const DEFAULT_ROW_HEIGHT = 40;
@@ -9655,12 +10623,25 @@ function squarifyInto(items, box) {
 	}
 	return out;
 }
+/** Clamp a raw cascade offset fraction to a sane range. */
+function normaliseOffset(raw) {
+	return typeof raw === `number` && Number.isFinite(raw) && raw > 0 ? Math.min(raw, 1) : 0;
+}
 /**
 * Subdivide `box` among `weights` (same length as the child list) using
 * `method` at `relativeDepth`. Returns one absolute box per weight, in order.
 * Zero-share children get degenerate (zero-area) boxes at the box origin.
+* Degenerate (zero/negative-extent) containers also yield zero-area boxes
+* rather than `NaN` — this matters for cascaded layouts where deep insets
+* can consume the whole box.
 */
 function subdivide(box, weights, method, relativeDepth) {
+	if (box.width <= 0 || box.height <= 0) return weights.map(() => ({
+		x: box.x,
+		y: box.y,
+		width: 0,
+		height: 0
+	}));
 	const total = weights.reduce((a, b) => a + b, 0);
 	const shares = total > 0 ? weights.map((w) => w / total) : weights.map(() => 1 / weights.length);
 	const dice = method === `dice` || method === `slice-dice` && relativeDepth % 2 === 0;
@@ -9727,12 +10708,16 @@ function subdivide(box, weights, method, relativeDepth) {
 * @param options `valueAccessor` (default equal weights), `maxDepth` (nesting
 *   levels, default unlimited), `zoomKey` (visual root, default true root;
 *   unknown keys fall back to the true root), `tilingMethod` (default
-*   `'squarify'`).
+*   `'squarify'`), `presentation` (default `'nested'`) plus `cascadeOffsetX/Y`
+*   (per-level shift as a viewport fraction, cascaded only).
 */
 function computeTreemapLayout(root, options = {}) {
 	if (!root?.children?.length) return [];
-	const { maxDepth = Number.POSITIVE_INFINITY, valueAccessor = () => 1, zoomKey, tilingMethod = `squarify`, hideLeaves = false } = options;
+	const { maxDepth = Number.POSITIVE_INFINITY, valueAccessor = () => 1, zoomKey, tilingMethod = `squarify`, hideLeaves = false, presentation = `nested`, cascadeOffsetX: rawOx, cascadeOffsetY: rawOy } = options;
 	if (maxDepth <= 0) return [];
+	const cascaded = presentation === `cascaded`;
+	const ox = cascaded ? normaliseOffset(rawOx) : 0;
+	const oy = cascaded ? normaliseOffset(rawOy) : 0;
 	const visibleChildren = (node) => {
 		const children = node.children ?? [];
 		return hideLeaves ? children.filter((n) => n.item.isLeaf !== true) : children;
@@ -9763,7 +10748,15 @@ function computeTreemapLayout(root, options = {}) {
 				setSize,
 				hasChildren: children.length > 0 || node.children === void 0 && node.item.isLeaf !== true
 			});
-			if (children.length > 0) layoutLevel(children, childBox, depth + 1, relativeDepth + 1, node.item.key);
+			if (children.length > 0) {
+				const contentBox = ox <= 0 && oy <= 0 ? childBox : {
+					x: childBox.x + ox,
+					y: childBox.y + oy,
+					width: Math.max(0, childBox.width - ox),
+					height: Math.max(0, childBox.height - oy)
+				};
+				layoutLevel(children, contentBox, depth + 1, relativeDepth + 1, node.item.key);
+			}
 		});
 	};
 	layoutLevel(siblings, {
@@ -9783,6 +10776,8 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 		this.selectionFilter = `all`;
 		this.interactionMode = `standard`;
 		this.tilingMethod = `squarify`;
+		this.presentation = `nested`;
+		this.cascadeOffset = 6;
 		this.maxDepth = 4;
 		this.hideLeaves = false;
 		this.minLabelArea = 1600;
@@ -9854,9 +10849,28 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 			maxDepth: this.maxDepth,
 			zoomKey,
 			tilingMethod: this.tilingMethod,
-			hideLeaves: this.hideLeaves
+			hideLeaves: this.hideLeaves,
+			presentation: this.presentation,
+			...this.#cascadeFractions()
 		});
 	}
+	/**
+	* Pixel `cascadeOffset` as viewport fractions for the current host size.
+	* Returns `{}` when nested, unmeasured, or non-positive — layout then falls
+	* back to classic nesting for that pass (the `ResizeObserver` re-renders
+	* once measured).
+	*/
+	#cascadeFractions() {
+		if (this.presentation !== `cascaded`) return {};
+		if (!Number.isFinite(this.cascadeOffset) || this.cascadeOffset <= 0) return {};
+		const w = this.clientWidth || 0;
+		const h = this.clientHeight || 0;
+		if (w <= 0 || h <= 0) return {};
+		return {
+			cascadeOffsetX: this.cascadeOffset / w,
+			cascadeOffsetY: this.cascadeOffset / h
+		};
+	}
 	connectedCallback() {
 		super.connectedCallback();
 		this.setAttribute(`data-input-mode`, `mouse`);
@@ -10471,7 +11485,11 @@ let TreemapListElement = class TreemapListElement extends LitElement {
 	#canDescend(rect) {
 		const size = this.#pixelSize(rect);
 		if (size === void 0) return true;
-		return size.width * size.height >= this.minChildArea && size.width >= this.minTileWidth;
+		const offset = this.presentation === `cascaded` && Number.isFinite(this.cascadeOffset) && this.cascadeOffset > 0 ? this.cascadeOffset : 0;
+		const w = size.width - offset;
+		const h = size.height - offset;
+		if (w <= 0 || h <= 0) return false;
+		return w * h >= this.minChildArea && w >= this.minTileWidth;
 	}
 	/** Slugify a category name into a CSS custom-property-safe token. */
 	#categorySlug(category) {
@@ -10583,6 +11601,7 @@ let TreemapListElement = class TreemapListElement extends LitElement {
         class="treemap"
         role="tree"
         tabindex="0"
+        data-presentation=${this.presentation}
         data-input-mode=${this.tickled.inputMode}
         style=${`--treemap-padding:${this.padding}px`}
         @keydown=${(e) => this.#handleKeyDown(e)}
@@ -10713,6 +11732,14 @@ let TreemapListElement = class TreemapListElement extends LitElement {
         margin-top: 0;
       }
 
+      /* Cascaded presentation (Lü & Fogarty 2008): the geometric inset is
+         already in the layout rects — this adds the stack-of-cards depth
+         cue on top. Parent tiles read as cards sitting behind their
+         children. */
+      .treemap[data-presentation="cascaded"] .tile {
+        box-shadow: 2px 2px 0 rgb(0 0 0 / 0.25);
+      }
+
       .tile-header {
         flex-shrink: 0;
         padding: 1px var(--space-xs);
@@ -10783,6 +11810,14 @@ __decorate([property({
 	type: String,
 	attribute: `tiling-method`
 })], TreemapListElement.prototype, "tilingMethod", void 0);
+__decorate([property({
+	type: String,
+	attribute: `presentation`
+})], TreemapListElement.prototype, "presentation", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `cascade-offset`
+})], TreemapListElement.prototype, "cascadeOffset", void 0);
 __decorate([property({
 	type: Number,
 	attribute: `max-depth`
@@ -11464,6 +12499,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, dropTargetFor, extractStack, findIcicleNode, findIciclePath, findNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, toolbarGapIndex, walk, wrapRoot };
+export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, dropTargetFor, extractStack, findIcicleNode, findIciclePath, findNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, toolbarGapIndex, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map