@ixfx/components 0.13.9 → 0.14.1

package/dist/index.js

@@ -9449,6 +9449,28 @@ __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/categories.ts
+/** A group node only organises the picker menu; it is not a selectable category. */
+function isGroup(category) {
+	return category.children !== void 0 && category.children.length > 0;
+}
+/** All selectable categories (leaves) of a category tree, depth-first. */
+function flattenCategories(categories) {
+	return categories.flatMap((c) => isGroup(c) ? flattenCategories(c.children) : [c]);
+}
+/** Finds any node (group or leaf) by key, searching the whole tree depth-first. */
+function findCategory(categories, key) {
+	for (const category of categories) {
+		if (category.key === key) return category;
+		const nested = category.children ? findCategory(category.children, key) : void 0;
+		if (nested) return nested;
+	}
+}
+/** Like `findCategory`, but only resolves selectable leaves (never a group node). */
+function findLeafCategory(categories, key) {
+	return flattenCategories(categories).find((c) => c.key === key);
+}
+//#endregion
 //#region src/multicol-list/types.ts
 const ALL_KEY = `__all__`;
 //#endregion
@@ -9820,6 +9842,9 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 
         display: block;
         overflow: hidden;
+        /* A sideways trackpad swipe over the component must never pan it
+           (or the page behind it, or trigger history navigation) */
+        overscroll-behavior-x: none;
         background: var(--multicol-list-bg);
         color: var(--surface-3-text);
         font-family: var(--font-family);
@@ -9829,6 +9854,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
         flex-direction: row;
         align-items: stretch;
         overflow: hidden;
+        overscroll-behavior-x: none;
         position: relative;
         height: 100%;
       }
@@ -9945,6 +9971,10 @@ let MulticolListElement = class MulticolListElement extends LitElement {
         flex: 1;
         overflow-y: auto;
         overflow-x: hidden;
+        /* Vertical scrolling only: horizontal deltas are swallowed here
+           instead of chaining up and panning the whole component */
+        overscroll-behavior-x: none;
+        touch-action: pan-y;
         position: relative;
         display: flex;
         flex-direction: column;
@@ -10002,7 +10032,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 			const existing = existingMap.get(colState.id);
 			if (existing) {
 				if (existing.categoryKey !== colState.categoryKey) {
-					const newCategory = this.categories.find((c) => c.key === colState.categoryKey);
+					const newCategory = findLeafCategory(this.categories, colState.categoryKey);
 					if (newCategory) existing.setCategory(newCategory);
 				}
 				existing.updateState(colState);
@@ -10010,7 +10040,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 				existingMap.delete(colState.id);
 				continue;
 			}
-			const category = this.categories.find((c) => c.key === colState.categoryKey);
+			const category = findLeafCategory(this.categories, colState.categoryKey);
 			if (!category) continue;
 			const controller = this.#createController(colState.id, category);
 			controller.updateState(colState);
@@ -10025,7 +10055,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 	}
 	addColumn(categoryKey, position) {
 		if (this.maxColumns > 0 && this._columns.length >= this.maxColumns) return;
-		const category = this.categories.find((c) => c.key === categoryKey);
+		const category = findLeafCategory(this.categories, categoryKey);
 		if (!category) return;
 		const id = `col-${++this._idCounter}`;
 		const controller = this.#createController(id, category);
@@ -10067,9 +10097,10 @@ let MulticolListElement = class MulticolListElement extends LitElement {
     `;
 	}
 	updated(changedProperties) {
-		if (!this._autoSeeded && this._columns.length === 0 && this.categories.length > 0) {
+		const seedCategory = flattenCategories(this.categories)[0];
+		if (!this._autoSeeded && this._columns.length === 0 && seedCategory) {
 			this._autoSeeded = true;
-			this.addColumn(this.categories[0].key);
+			this.addColumn(seedCategory.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);
@@ -10130,11 +10161,11 @@ let MulticolListElement = class MulticolListElement extends LitElement {
     `;
 	}
 	_getCategoryLabel(key) {
-		return this.categories.find((c) => c.key === key)?.label ?? key;
+		return findCategory(this.categories, key)?.label ?? key;
 	}
 	/** Category description if present, else the default 'Change category' hint. */
 	_getCategoryTooltip(key) {
-		return this.categories.find((c) => c.key === key)?.description ?? `Change category`;
+		return findCategory(this.categories, key)?.description ?? `Change category`;
 	}
 	#createController(id, category) {
 		return new MulticolColumnController({
@@ -10305,7 +10336,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 			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 unused = flattenCategories(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`);
@@ -10349,7 +10380,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 		this.addColumn(categoryKey, position);
 	}
 	_changeColumnCategory(col, categoryKey) {
-		const category = this.categories.find((c) => c.key === categoryKey);
+		const category = findLeafCategory(this.categories, categoryKey);
 		if (!category) return;
 		col.setCategory(category);
 		this._emitColumnsChange(`category`);
@@ -10385,10 +10416,11 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 	}
 	_syncColumnsWithCategories() {
 		let changed = false;
+		const leaves = flattenCategories(this.categories);
 		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]);
+			if (leaves.some((c) => c.key === col.categoryKey)) continue;
+			if (leaves.length === 0) continue;
+			col.setCategory(leaves[0]);
 			changed = true;
 		}
 		if (changed) this._emitColumnsChange(`category`);

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.13.9",
-  "generated": "2026-10-09T19:37:11.157Z",
+  "version": "0.14.1",
+  "generated": "2026-10-09T22:40:55.145Z",
   "components": [
     {
       "name": "ac-text",

package/docs-user/multicol-list.md

@@ -17,7 +17,7 @@ provider returns that column's choices; items may carry a `count` for display.
 
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
-| `categories` | `readonly MulticolCategory[]` | `[]` | Facet definitions (tree, shown in the header picker menu). Each may carry `description` (shown as a tooltip on the column header label) and `defaults`: `grouped`, `groupBy`, `allLabel`, `sort`. |
+| `categories` | `readonly MulticolCategory[]` | `[]` | Facet definitions (tree, shown in the header picker menu). Only leaves are selectable as a column's category; a node with `children` is just a menu group. Keys are resolved across the whole tree. Each may carry `description` (shown as a tooltip on the column header label) and `defaults`: `grouped`, `groupBy`, `allLabel`, `sort`. |
 | `dataProvider` | `IDataProvider<MulticolQuery, MulticolItem>` \| `undefined` | — | Called per column whenever that column's inputs change. Sync arrays, Promises and async-iterables are supported; the `AbortSignal` is honoured. |
 | `selectionMode` | `ListSelectionMode` | `'multiple'` | `'none'`, `'single'` or `'multiple'` selection within a column. |
 | `minColumns` | `number` | `1` | Floor for column removal. |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.13.9",
+  "version": "0.14.1",
   "packageManager": "pnpm@10.0.0",
   "description": "Web components for ixfx — Lit-based UI toolkit",
   "author": "Clint Heyer",