@ixfx/components 0.10.0 → 0.10.1

package/bundle/index.js

@@ -5707,14 +5707,12 @@ function fontOf(style) {
 	} catch {}
 	return `12px system-ui, sans-serif`;
 }
-/** Caption for a drag entry — element labels win, then string items, then common object fields, then the key. */
+/** Caption for a drag entry — explicit element labels win, then data values, then generic element text, then the key. */
 function captionForEntry(entry) {
 	const el = entry.element ?? (entry.item instanceof Element ? entry.item : void 0);
 	if (el) {
 		const labelled = el.getAttribute(`data-label`) ?? el.querySelector(`[data-grid-list-caption]`)?.textContent?.trim() ?? el.getAttribute(`data-search-label`) ?? el.querySelector(`.cell`)?.textContent?.trim();
 		if (labelled) return labelled.slice(0, 80);
-		const text = el.textContent?.trim();
-		if (text) return text.slice(0, 80);
 	}
 	const item = entry.item;
 	if (typeof item === `string` && item.length > 0) return item.slice(0, 80);
@@ -5730,6 +5728,10 @@ function captionForEntry(entry) {
 			if (typeof value === `string` && value.length > 0) return value.slice(0, 80);
 		}
 	}
+	if (el) {
+		const text = el.textContent?.trim();
+		if (text) return text.slice(0, 80);
+	}
 	return entry.key;
 }
 function glyphFor(caption) {
@@ -23784,6 +23786,10 @@ let GridListElement = class GridListElement extends i {
 	#postDragSuppressTimer;
 	#nativeDrag;
 	/** Origin rule + display-ordered entry resolution for native drag-out (both modes). */
+	#renderedCellForKey(key) {
+		const selector = `.cell[data-key="${CSS.escape(key)}"]`;
+		return this.renderRoot.querySelector(selector) ?? void 0;
+	}
 	#prepareNativeDrag(originKey) {
 		const index = this.#source.indexOfKey(originKey);
 		if (index < 0 || !this.#source.isSelectable(index)) return void 0;
@@ -23794,14 +23800,15 @@ let GridListElement = class GridListElement extends i {
 			const entryIndex = this.#source.indexOfKey(key);
 			if (entryIndex < 0) continue;
 			const data = this.#source.resolveKeyToData(key);
-			const element = this.#source.resolveKeyToElement(key);
-			const item = data ?? element;
+			const sourceElement = this.#source.resolveKeyToElement(key);
+			const renderedElement = sourceElement ?? (this.#source instanceof DataGridListSource ? this.#renderedCellForKey(key) : void 0);
+			const item = data ?? sourceElement;
 			if (item === void 0) continue;
 			selected.push({
 				key,
 				index: entryIndex,
 				item,
-				...element ? { element } : {}
+				...renderedElement ? { element: renderedElement } : {}
 			});
 		}
 		const origin = selected.find((entry) => entry.key === originKey);
@@ -45932,12 +45939,16 @@ function subdivide(box, weights, method, relativeDepth) {
 */
 function computeTreemapLayout(root, options = {}) {
 	if (!root?.children?.length) return [];
-	const { maxDepth = Number.POSITIVE_INFINITY, valueAccessor = () => 1, zoomKey, tilingMethod = `squarify` } = options;
+	const { maxDepth = Number.POSITIVE_INFINITY, valueAccessor = () => 1, zoomKey, tilingMethod = `squarify`, hideLeaves = false } = options;
 	if (maxDepth <= 0) return [];
+	const visibleChildren = (node) => {
+		const children = node.children ?? [];
+		return hideLeaves ? children.filter((n) => n.item.isLeaf !== true) : children;
+	};
 	const zoomNode = zoomKey === void 0 ? root : findTreemapNode(root, zoomKey) ?? root;
 	const zoomPath = findTreemapPath(root, zoomNode.item.key);
 	const zoomDepth = zoomPath ? zoomPath.length - 2 : -1;
-	const siblings = zoomNode.children ?? [];
+	const siblings = visibleChildren(zoomNode);
 	if (siblings.length === 0) return [];
 	const rects = [];
 	const layoutLevel = (nodes, box, depth, relativeDepth, parentKey) => {
@@ -45946,7 +45957,7 @@ function computeTreemapLayout(root, options = {}) {
 		const setSize = nodes.length;
 		nodes.forEach((node, index) => {
 			const childBox = boxes[index];
-			const children = node.children ?? [];
+			const children = visibleChildren(node);
 			rects.push({
 				node,
 				depth,
@@ -45981,8 +45992,11 @@ let TreemapListElement = class TreemapListElement extends i {
 		this.interactionMode = `standard`;
 		this.tilingMethod = `squarify`;
 		this.maxDepth = 4;
+		this.hideLeaves = false;
 		this.minLabelArea = 1600;
+		this.minTileWidth = 24;
 		this.padding = 4;
+		this.minChildArea = 400;
 		this.valueAccessor = () => 1;
 		this._selectedNodes = /* @__PURE__ */ new Set();
 		this.disableKeyboardNavigation = false;
@@ -46016,6 +46030,7 @@ let TreemapListElement = class TreemapListElement extends i {
 		});
 		this.#pendingKeys = /* @__PURE__ */ new Set();
 		this.#aborters = /* @__PURE__ */ new Map();
+		this.#wheelCooldownUntil = 0;
 	}
 	get selectedNodes() {
 		return this._selectedNodes;
@@ -46032,15 +46047,22 @@ let TreemapListElement = class TreemapListElement extends i {
 	#ownedRegistry;
 	#unregisterSearchCommands;
 	#resizeObserver;
+	#pendingFlip;
+	/** `performance.now()` timestamp before which further Cmd+wheel zoom steps are ignored. */
+	#wheelCooldownUntil;
 	get #effectiveRoot() {
 		return this.model?.root ?? this.root;
 	}
 	#rects() {
+		return this.#rectsForZoom(this._zoomKey);
+	}
+	#rectsForZoom(zoomKey) {
 		return computeTreemapLayout(this.#effectiveRoot, {
 			valueAccessor: this.valueAccessor,
 			maxDepth: this.maxDepth,
-			zoomKey: this._zoomKey,
-			tilingMethod: this.tilingMethod
+			zoomKey,
+			tilingMethod: this.tilingMethod,
+			hideLeaves: this.hideLeaves
 		});
 	}
 	connectedCallback() {
@@ -46116,8 +46138,14 @@ let TreemapListElement = class TreemapListElement extends i {
 		if (changedProps.has(`searchModes`)) this.#syncSearchCommands();
 		if (this._zoomKey !== void 0 && !findTreemapNode(this.#effectiveRoot, this._zoomKey)) this._zoomKey = void 0;
 		this.#ensureVisibleChildren();
+		if (this.#pendingFlip) {
+			const flip = this.#pendingFlip;
+			this.#pendingFlip = void 0;
+			this.#applyFlip(flip);
+		}
 	}
 	#resetViewState() {
+		this.#pendingFlip = void 0;
 		this.#clearSelectionInternal();
 		this.tickled.clearTickled();
 		this._zoomKey = void 0;
@@ -46230,6 +46258,7 @@ let TreemapListElement = class TreemapListElement extends i {
 	*/
 	zoomTo(node) {
 		if (this._zoomKey === node.item.key) return;
+		this.#pendingFlip = this.#planFlip(node.item.key);
 		this._zoomKey = node.item.key;
 		this.tickled.clearTickled();
 		const depth = findTreemapPath(this.#effectiveRoot, node.item.key)?.length;
@@ -46258,6 +46287,7 @@ let TreemapListElement = class TreemapListElement extends i {
 	*/
 	zoomOut() {
 		if (this._zoomKey === void 0) return;
+		this.#pendingFlip = this.#planFlip(void 0);
 		const previous = this.focusedNode;
 		const path = this._zoomKey === void 0 ? void 0 : findTreemapPath(this.#effectiveRoot, this._zoomKey);
 		const absoluteDepth = path === void 0 ? -1 : path.length - 2;
@@ -46281,9 +46311,66 @@ let TreemapListElement = class TreemapListElement extends i {
 		}));
 		this.requestUpdate();
 	}
+	/**
+	* Work out (before `_zoomKey` changes) whether the upcoming zoom should
+	* animate, and how — see `FlipPlan`. Returns `undefined` to skip the
+	* animation: reduced-motion is requested, or the node needed to anchor it
+	* isn't in either the old or new layout's visible window.
+	*/
+	#planFlip(targetKey) {
+		if (typeof matchMedia === `function` && matchMedia(`(prefers-reduced-motion: reduce)`).matches) return void 0;
+		if (targetKey !== void 0) {
+			const visible = this.#rects().find((r) => r.node.item.key === targetKey);
+			if (visible) return {
+				direction: `in`,
+				rect: {
+					x: visible.x,
+					y: visible.y,
+					width: visible.width,
+					height: visible.height
+				}
+			};
+		}
+		const fromKey = this._zoomKey;
+		if (fromKey === void 0) return void 0;
+		const landing = this.#rectsForZoom(targetKey).find((r) => r.node.item.key === fromKey);
+		if (!landing) return void 0;
+		return {
+			direction: `out`,
+			rect: {
+				x: landing.x,
+				y: landing.y,
+				width: landing.width,
+				height: landing.height
+			}
+		};
+	}
+	/** Apply a planned FLIP animation once the new layout has rendered — see `FlipPlan`. */
+	#applyFlip(flip) {
+		const inner = this.renderRoot.querySelector(`.viewport-inner`);
+		const viewport = this.renderRoot.querySelector(`.viewport`);
+		if (!(inner instanceof HTMLElement) || !(viewport instanceof HTMLElement)) return;
+		const vw = viewport.clientWidth;
+		const vh = viewport.clientHeight;
+		if (vw <= 0 || vh <= 0) return;
+		const { rect, direction } = flip;
+		const startTransform = direction === `in` ? `translate(${rect.x * vw}px, ${rect.y * vh}px) scale(${Math.max(rect.width, 1e-4)}, ${Math.max(rect.height, 1e-4)})` : (() => {
+			const sx = rect.width > 0 ? 1 / rect.width : 1;
+			const sy = rect.height > 0 ? 1 / rect.height : 1;
+			return `translate(${-rect.x * sx * vw}px, ${-rect.y * sy * vh}px) scale(${sx}, ${sy})`;
+		})();
+		inner.classList.remove(`flipping`);
+		inner.style.transform = startTransform;
+		inner.offsetWidth;
+		requestAnimationFrame(() => {
+			inner.classList.add(`flipping`);
+			inner.style.transform = `none`;
+		});
+		inner.addEventListener(`transitionend`, () => inner.classList.remove(`flipping`), { once: true });
+	}
 	#canZoom(node) {
 		if (node.item.isLeaf === true) return false;
-		if (node.children !== void 0) return node.children.length > 0;
+		if (node.children !== void 0) return this.hideLeaves ? node.children.some((n) => n.item.isLeaf !== true) : node.children.length > 0;
 		return this.model !== void 0 || this.loadChildren !== void 0;
 	}
 	/**
@@ -46510,6 +46597,39 @@ let TreemapListElement = class TreemapListElement extends i {
 			}
 		}
 	}
+	/**
+	* Cmd+wheel zooms: scrolling backward (deltaY < 0, towards the user) zooms
+	* into the tile under the pointer — the same as clicking it; scrolling
+	* forward (deltaY > 0, away from the user) zooms out one level at a time
+	* (see `#zoomOutOneStep`), not straight to the root. Plain wheel (no Cmd)
+	* is left alone for normal page scroll. A short cooldown after each step
+	* keeps a single trackpad gesture (which fires many small wheel events)
+	* from firing a cascade of zoom steps.
+	*/
+	#handleWheel(event) {
+		if (!event.metaKey || event.deltaY === 0) return;
+		event.preventDefault();
+		if (performance.now() < this.#wheelCooldownUntil) return;
+		if (event.deltaY > 0) {
+			if (this._zoomKey === void 0) return;
+			this.#wheelCooldownUntil = performance.now() + 260;
+			this.#zoomOutOneStep();
+			return;
+		}
+		const key = (event.target?.closest(`.tile`))?.getAttribute(`data-key`) ?? void 0;
+		if (key === void 0) return;
+		const rect = this.#rects().find((r) => r.node.item.key === key);
+		if (!rect || !this.#canZoom(rect.node)) return;
+		this.#wheelCooldownUntil = performance.now() + 260;
+		this.zoomTo(rect.node);
+	}
+	/** Zoom to the current zoom node's parent, or fully out when it's a direct child of the root. */
+	#zoomOutOneStep() {
+		const path = this._zoomKey === void 0 ? void 0 : findTreemapPath(this.#effectiveRoot, this._zoomKey);
+		const parent = path && path.length > 2 ? path[path.length - 2] : void 0;
+		if (parent) this.zoomTo(parent);
+		else this.zoomOut();
+	}
 	#renderBreadcrumb() {
 		const zoomNode = this.focusedNode;
 		if (zoomNode === void 0) return A;
@@ -46539,25 +46659,60 @@ let TreemapListElement = class TreemapListElement extends i {
 		if (node.item.key === this.#effectiveRoot?.item.key) this.zoomOut();
 		else this.zoomTo(node);
 	}
-	#hideLabel(rect) {
+	/** On-screen size (px) of `rect`, or `undefined` before the host has been measured. */
+	#pixelSize(rect) {
 		const hostWidth = this.clientWidth || 0;
 		const hostHeight = this.clientHeight || 0;
-		if (hostWidth <= 0 || hostHeight <= 0) return false;
-		return rect.width * hostWidth * rect.height * hostHeight < this.minLabelArea;
+		if (hostWidth <= 0 || hostHeight <= 0) return void 0;
+		return {
+			width: rect.width * hostWidth,
+			height: rect.height * hostHeight
+		};
+	}
+	/** Hide when too small by area, or too narrow to fit any readable text even truncated. */
+	#hideLabel(rect) {
+		const size = this.#pixelSize(rect);
+		if (size === void 0) return false;
+		return size.width * size.height < this.minLabelArea || size.width < this.minTileWidth;
+	}
+	/** Whether `rect` is large enough on-screen for its own children to be subdivided and drawn. */
+	#canDescend(rect) {
+		const size = this.#pixelSize(rect);
+		if (size === void 0) return true;
+		return size.width * size.height >= this.minChildArea && size.width >= this.minTileWidth;
+	}
+	/** Slugify a category name into a CSS custom-property-safe token. */
+	#categorySlug(category) {
+		return category.replace(/[^\w-]/g, `-`);
 	}
-	#renderTile(rect, positionStyle, children, byParent, nested) {
+	/**
+	* Inline colour overrides for `node`'s category, or `undefined` for none.
+	* Set as real `background-color`/`color` (not custom properties) so they
+	* simply win over `.tile`'s CSS-variable-driven defaults by specificity —
+	* no risk of an unresolvable `var()` chain leaving the property invalid.
+	*/
+	#categoryStyle(node) {
+		const category = this.categoryAccessor?.(node.item);
+		if (!category) return void 0;
+		const slug = this.#categorySlug(category);
+		return `background-color:var(--treemap-category-${slug}-bg, var(--treemap-tile-bg));color:var(--treemap-category-${slug}-text, var(--treemap-tile-text));`;
+	}
+	#renderTileBox(rect, positionStyle, hasVisibleChildren, childrenContent) {
 		const { node } = rect;
 		const selected = this._selectedNodes.has(node);
 		const tickled = this.tickled.isTickled(node.item.key);
 		const filtered = !this.#matchesFilter(node, rect.depth);
 		const pending = this.#pendingKeys.has(node.item.key);
 		const hideLabel = this.#hideLabel(rect);
-		const showHeader = children.length > 0 && !hideLabel;
+		const showHeader = hasVisibleChildren && !hideLabel;
+		const category = this.categoryAccessor?.(node.item);
+		const categoryStyle = this.#categoryStyle(node);
 		return b`
       <div
-        class="item tile ${nested ? `nested` : ``} ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${filtered ? `filtered` : ``} ${pending ? `loading` : ``} ${rect.width <= 0 || rect.height <= 0 ? `empty` : ``}"
+        class="item tile ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${filtered ? `filtered` : ``} ${pending ? `loading` : ``} ${rect.width <= 0 || rect.height <= 0 ? `empty` : ``}"
         data-key=${node.item.key}
         data-depth=${rect.relativeDepth}
+        data-category=${category ?? A}
         role="treeitem"
         tabindex="-1"
         aria-level=${rect.depth + 1}
@@ -46567,7 +46722,7 @@ let TreemapListElement = class TreemapListElement extends i {
         aria-label=${node.item.label}
         title=${node.item.label}
         part="tile"
-        style=${positionStyle}
+        style=${categoryStyle ? `${positionStyle};${categoryStyle}` : positionStyle}
         @click=${(e) => {
 			e.stopPropagation();
 			this.#handleItemClick(rect, this.#rects().findIndex((r) => r.node.item.key === node.item.key), e);
@@ -46579,23 +46734,46 @@ let TreemapListElement = class TreemapListElement extends i {
         @pointerenter=${() => this.tickled.handlePointerEnter(node.item.key)}
       >
         ${showHeader ? b`<div class="tile-header" part="tile-header"><span class="treemap-label" part="label">${node.item.label}</span></div>` : b`<span class="treemap-label ${hideLabel ? `hide-label` : ``}" part="label">${node.item.label}</span>`}
-        ${children.length > 0 ? b`
-            <div class="tile-children" role="group">
-              ${repeat(children, (r) => r.node.item.key, (r) => this.#renderNestedTile(r, rect, byParent))}
-            </div>
-          ` : A}
+        ${childrenContent}
       </div>
     `;
 	}
+	/**
+	* Render `rect` plus (if it's large enough to descend into — see
+	* `#canDescend`) a `.tile-children` holding its own children, each
+	* positioned relative to `rect` itself and recursing the same way.
+	*
+	* Each level gets its own real `.tile-header` + `.tile-children` box, so a
+	* header reserves its own space via normal box-model layout (flex column:
+	* header, then the remaining space for children) at *every* level — not
+	* just the top one. That matters because layout rects are purely
+	* geometric (no allowance for header height), so a folder whose one child
+	* fills ~100% of its area gets a child rect nearly identical to its own;
+	* positioning that child against its direct parent (not some flattened
+	* shared ancestor) is what keeps the parent's header from being painted
+	* over by an opaque, near-identically-sized child box.
+	*/
+	#renderTile(rect, positionStyle, byParent) {
+		const children = rect.hasChildren && this.#canDescend(rect) ? byParent.get(rect.node.item.key) ?? [] : [];
+		const childrenContent = children.length > 0 ? b`
+        <div class="tile-children" role="group">
+          ${repeat(children, (r) => r.node.item.key, (r) => this.#renderNestedTile(r, rect, byParent))}
+        </div>
+      ` : A;
+		return this.#renderTileBox(rect, positionStyle, children.length > 0, childrenContent);
+	}
+	/** A child tile, positioned as a percentage of `parent`'s own box. */
 	#renderNestedTile(rect, parent, byParent) {
 		const relX = parent.width > 0 ? (rect.x - parent.x) / parent.width : 0;
 		const relY = parent.height > 0 ? (rect.y - parent.y) / parent.height : 0;
 		const relW = parent.width > 0 ? rect.width / parent.width : 0;
 		const relH = parent.height > 0 ? rect.height / parent.height : 0;
-		return this.#renderTile(rect, `left:${(relX * 100).toFixed(4)}%;top:${(relY * 100).toFixed(4)}%;width:${(relW * 100).toFixed(4)}%;height:${(relH * 100).toFixed(4)}%`, byParent.get(rect.node.item.key) ?? [], byParent, true);
+		const style = `left:${(relX * 100).toFixed(4)}%;top:${(relY * 100).toFixed(4)}%;width:${(relW * 100).toFixed(4)}%;height:${(relH * 100).toFixed(4)}%`;
+		return this.#renderTile(rect, style, byParent);
 	}
 	#renderTopTile(rect, byParent) {
-		return this.#renderTile(rect, `left:${(rect.x * 100).toFixed(4)}%;top:${(rect.y * 100).toFixed(4)}%;width:${(rect.width * 100).toFixed(4)}%;height:${(rect.height * 100).toFixed(4)}%`, byParent.get(rect.node.item.key) ?? [], byParent, false);
+		const style = `left:${(rect.x * 100).toFixed(4)}%;top:${(rect.y * 100).toFixed(4)}%;width:${(rect.width * 100).toFixed(4)}%;height:${(rect.height * 100).toFixed(4)}%`;
+		return this.#renderTile(rect, style, byParent);
 	}
 	render() {
 		const rects = this.#rects();
@@ -46617,11 +46795,14 @@ let TreemapListElement = class TreemapListElement extends i {
         style=${`--treemap-padding:${this.padding}px`}
         @keydown=${(e) => this.#handleKeyDown(e)}
         @pointerleave=${() => this.tickled.clearTickled()}
+        @wheel=${(e) => this.#handleWheel(e)}
       >
         ${this.#renderBreadcrumb()}
         ${rects.length === 0 ? b`<div class="empty-state">No data</div>` : b`
             <div class="viewport" part="viewport">
-              ${repeat(topLevel, (r) => r.node.item.key, (r) => this.#renderTopTile(r, byParent))}
+              <div class="viewport-inner">
+                ${repeat(topLevel, (r) => r.node.item.key, (r) => this.#renderTopTile(r, byParent))}
+              </div>
             </div>
           `}
       </div>
@@ -46644,11 +46825,18 @@ let TreemapListElement = class TreemapListElement extends i {
         --treemap-tile-border: var(--border-subtle);
         --treemap-header-bg: rgb(0 0 0 / 0.12);
         --treemap-font-size: var(--text-s);
+        --treemap-zoom-duration: 220ms;
 
         display: block;
-        overflow: auto;
+        overflow: hidden;
       }
 
+      /* Per-category tile colours (set categoryAccessor to opt in): define
+         --treemap-category-SLUG-bg / -text at whatever scope suits (:host
+         here, or globally) for each category your accessor can return —
+         e.g. --treemap-category-urgent-bg: oklch(55% 0.18 25). A category
+         with no matching pair falls back to --treemap-tile-bg/-text. */
+
       .treemap {
         display: flex;
         flex-direction: column;
@@ -46677,18 +46865,44 @@ let TreemapListElement = class TreemapListElement extends i {
       .viewport {
         position: relative;
         width: 100%;
-        height: var(--treemap-height);
-        flex-shrink: 0;
+        /* flex-basis of --treemap-height (its size when nothing forces a
+           different one — the common case of an auto-height host) but
+           allowed to grow/shrink like any flex item, so it shares the
+           .treemap column's height with the breadcrumb instead of a plain
+           fixed height always claiming that full amount regardless of what
+           else needs space — which is what let the breadcrumb push the
+           host past its own height and scroll once a zoom made it appear. */
+        flex: 1 1 var(--treemap-height);
+        min-height: 0;
         overflow: hidden;
         border-radius: var(--radius-m);
       }
 
+      /* Transform target for the zoom-in/zoom-out FLIP animation (see
+         #planFlip/#applyFlip) — kept separate from .viewport so the
+         transform never fights that element's own sizing/overflow. */
+      .viewport-inner {
+        position: absolute;
+        inset: 0;
+        transform-origin: 0 0;
+      }
+
+      .viewport-inner.flipping {
+        transition: transform var(--treemap-zoom-duration, 220ms) ease-out;
+      }
+
       .tile {
         position: absolute;
         box-sizing: border-box;
         overflow: hidden;
         display: flex;
         flex-direction: column;
+        /* Override the shared .item class's align-items:center (built for
+           icon+label rows) — tiles need their flex children to stretch to
+           full width, or .tile-children collapses to its (empty) content
+           width and every nested tile collapses with it. */
+        align-items: stretch;
+        white-space: normal;
         background: var(--treemap-tile-bg);
         color: var(--treemap-tile-text);
         border: var(--treemap-tile-border);
@@ -46781,12 +46995,25 @@ __decorate([property({
 	type: Number,
 	attribute: `max-depth`
 })], TreemapListElement.prototype, "maxDepth", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-leaves`
+})], TreemapListElement.prototype, "hideLeaves", void 0);
 __decorate([property({
 	type: Number,
 	attribute: `min-label-area`
 })], TreemapListElement.prototype, "minLabelArea", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `min-tile-width`
+})], TreemapListElement.prototype, "minTileWidth", void 0);
 __decorate([property({ type: Number })], TreemapListElement.prototype, "padding", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `min-child-area`
+})], TreemapListElement.prototype, "minChildArea", void 0);
 __decorate([property({ attribute: false })], TreemapListElement.prototype, "valueAccessor", void 0);
+__decorate([property({ attribute: false })], TreemapListElement.prototype, "categoryAccessor", void 0);
 __decorate([property({ attribute: false })], TreemapListElement.prototype, "selectedNode", void 0);
 __decorate([state()], TreemapListElement.prototype, "_selectedNodes", void 0);
 __decorate([property({ attribute: false })], TreemapListElement.prototype, "filterPredicate", void 0);