@ixfx/components 0.14.0 → 0.14.2

package/dist/index.d.ts

@@ -2442,6 +2442,7 @@ type MulticolCategoryDefaults = {
   groupBy?: (item: MulticolItem) => string;
   allLabel?: string;
   sort?: SortDirection;
+  menu?: boolean;
 };
 type MulticolCategory = {
   readonly key: string;
@@ -2456,6 +2457,7 @@ type MulticolColumnState = {
   readonly categoryKey: string;
   readonly sort: SortDirection;
   readonly grouped: boolean;
+  readonly menu: boolean;
   readonly width?: number;
 };
 type MulticolColumnsChangeReason = `add` | `remove` | `reorder` | `category` | `sort` | `grouping` | `resize`;

package/dist/index.js

@@ -27,7 +27,7 @@ import { t as CheckedSelect } from "./checked-select-lDgAQQ7v.js";
 import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-BCMU7W7R.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-9Hs7VxuX.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-BM2CY6uu.js";
 import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
 import { NarrowedTextElement } from "./narrowed-text.js";
 import { CrumbNavigationElement } from "./crumbs.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
@@ -9522,6 +9544,7 @@ var MulticolColumnController = class {
 			categoryKey: options.category.key,
 			sort: options.categoryDefaults?.sort ?? `asc`,
 			grouped: options.categoryDefaults?.grouped ?? false,
+			menu: options.categoryDefaults?.menu ?? true,
 			width: 220
 		};
 	}
@@ -9532,6 +9555,9 @@ var MulticolColumnController = class {
 	get categoryKey() {
 		return this.#category.key;
 	}
+	get menu() {
+		return this.#state.menu;
+	}
 	getState() {
 		return { ...this.#state };
 	}
@@ -9585,7 +9611,8 @@ var MulticolColumnController = class {
 			...this.#state,
 			categoryKey: category.key,
 			sort: category.defaults?.sort ?? `asc`,
-			grouped: category.defaults?.grouped ?? false
+			grouped: category.defaults?.grouped ?? false,
+			menu: category.defaults?.menu ?? true
 		};
 		this.clearSelection();
 		this.#syncGrouping();
@@ -9775,7 +9802,7 @@ function renderItem(item) {
 }
 //#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>`);
+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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>`);
 const DEFAULT_COLUMN_WIDTH = 220;
 const MIN_COLUMN_WIDTH = 80;
 const MAX_COLUMN_WIDTH = 480;
@@ -9877,7 +9904,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
       }
       .reorder-handle .ixfx-handle {
         --ixfx-handle-length: 14px;
-        --ixfx-handle-thickness: var(--multicol-list-reorder-handle-width, 10px);
+        --ixfx-handle-thickness: var(--multicol-list-reorder-handle-width, 6px);
         --ixfx-handle-dot-size: 3px;
       }
       .column-label {
@@ -9956,6 +9983,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
         position: relative;
         display: flex;
         flex-direction: column;
+        --list-gutter: 0;
       }
       .all-row {
         display: flex;
@@ -10010,7 +10038,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);
@@ -10018,7 +10046,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);
@@ -10033,7 +10061,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);
@@ -10075,9 +10103,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);
@@ -10116,6 +10145,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 			this._openCategoryPicker(col, e.currentTarget);
 		}}
           >${this._getCategoryLabel(col.categoryKey)}</button>
+          ${col.menu ? html`
           <button
             class="burger-btn"
             data-tooltip="Column options"
@@ -10125,7 +10155,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 		}}
           >
             <ixfx-icon name="menu" size="14"></ixfx-icon>
-          </button>
+          </button>` : nothing}
           <span
             class="resize-handle"
             ?data-active=${this._resizingColumnId === col.id}
@@ -10138,11 +10168,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({
@@ -10313,7 +10343,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`);
@@ -10357,7 +10387,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`);
@@ -10393,10 +10423,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/dist/{tree-9Hs7VxuX.js → tree-BM2CY6uu.js}

@@ -2578,6 +2578,10 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	_handleItemClick(node, depth, event) {
 		if (this.#drop?.isDragging || this.#nativeDrag?.isDragging || this.#postDragSuppressTimer !== void 0) return;
 		if (event && event.detail >= 2) return;
+		if (this.interactionMode === `checked` && event && !(event.target instanceof Element && event.target.closest(`.tree-label`))) {
+			this._handleCheckboxClick(event, node, depth);
+			return;
+		}
 		if (this.#pendingNode && this._expandedKeys.has(this.#pendingNode.item.key)) this.#abortPending();
 		this.tickled.handlePointerEnter(node.item.key);
 		this._focusedDepth = depth;

package/dist/tree.js

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

package/dist/vertical-list.js

@@ -1543,6 +1543,8 @@ let VerticalListElement = class VerticalListElement extends LitElement {
       box-sizing: border-box;
       outline: none;
       --ixfx-list-item-padding: var(--ixfx-list-item-padding, var(--list-item-padding, 4px var(--space-m, 8px)));
+      --_item-padding:
+        var(--ixfx-list-item-padding, var(--list-item-padding, 0 var(--space-xs, 3px)));
     }
 
     :host(:focus-visible) {
@@ -1579,7 +1581,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
     ::slotted(li) {
       display: flex;
       align-items: center;
-      padding: var(--ixfx-list-item-padding);
+      padding: var(--_item-padding);
       /* Inset each row from the scroll container's edges (margin, not padding:
          padding is inside the border box, so the tickle/selection outlines
          would still sit flush against the edge and be clipped). */
@@ -1701,6 +1703,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
       background: transparent;
       color: inherit;
       outline: 1px solid transparent;
+      padding: var(--space-s);
     }
 
     :host([interaction-mode="checked"]) ::slotted([data-selected][data-tickled]) {

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.14.0",
-  "generated": "2026-10-09T22:14:37.194Z",
+  "version": "0.14.2",
+  "generated": "2026-10-13T12:04:47.321Z",
   "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/docs-user/tree.md

@@ -160,7 +160,7 @@ Controls how pointer and keyboard gestures translate to selection changes.
 | `'implicit'` | Single selection follows every click; click also toggles expand/collapse |
 | `'standard'` | Plain click selects + toggles expand; Ctrl/Cmd+click toggles item; Shift+click range-selects |
 | `'manual'` | Component never auto-selects; use `select()` / `deselect()` / `clearSelection()` to drive state |
-| `'checked'` | Checkboxes on every row; checkbox click recursively selects/deselects loaded descendants; row click only expands/collapses |
+| `'checked'` | Checkboxes on every row; clicking the checkbox — or anywhere left of the label (indent, caret, icon) — recursively selects/deselects loaded descendants; label click only expands/collapses |
 | `'vscode'` | Like `standard` for clicks; Shift+Up/Down uses snapshot-based toggle-range (VS Code file-explorer style) |
 
 Switching `interactionMode` clears the current selection.
@@ -190,6 +190,8 @@ tree.checkboxRenderer = (state) => state === `unchecked`
 
 When `checkboxRenderer` is set, the checkbox becomes a `<span class="tree-checkbox" role="checkbox" part="checkbox">` holding your template, with `aria-checked` set to `"true"`, `"false"`, or `"mixed"` to match the tri-state. The span owns the click (same as the native input), so clicking anywhere in it — including empty space when you render nothing for `unchecked` — toggles the row.
 
+To keep the checkbox easy to aim at, the entire row region left of the label — indent gutter, checkbox, caret and icon — acts as one checkbox hit target in `checked` mode. Only clicks on the label itself expand/collapse.
+
 Both the native input and the custom span expose the `checkbox` CSS part for external styling:
 
 ```css

package/package.json

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