@ixfx/components 0.10.0 → 0.10.2

package/dist/vertical-list.d.ts

@@ -1,4 +1,4 @@
-import { I as ListDragSource, L as ListNativeDragStartDetail, M as ListDragPreview, N as ListDragPreviewContext, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent, j as ListDragEntry } from "./tree-component-mw8x-n2Y.js";
+import { I as ListDragSource, L as ListNativeDragStartDetail, M as ListDragPreview, N as ListDragPreviewContext, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent, j as ListDragEntry } from "./tree-component-DGmKBbpy.js";
 import { a as ListItemClickDetail, c as ListSelectEvent, d as ListTickleEvent, i as ListInteractionMode, l as ListSelectionMode, n as ListActivateEvent, o as ListItemClickEvent, r as ListElementEventMap, s as ListSelectDetail, t as ListActivateDetail, u as ListTickleDetail } from "./list-selection-types-B5ioL-dG.js";
-import { i as VerticalListElementEventMap, n as CustomCheckboxOptions, r as VerticalListElement, t as AddItemOptions } from "./vertical-list--tFanQwM.js";
+import { i as VerticalListElementEventMap, n as CustomCheckboxOptions, r as VerticalListElement, t as AddItemOptions } from "./vertical-list-BWLqy3PJ.js";
 export { AddItemOptions, CustomCheckboxOptions, type ListActivateDetail, type ListActivateEvent, type ListDragEntry, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListSelectDetail, type ListSelectEvent, type ListSelectionMode, type ListTickleDetail, type ListTickleEvent, VerticalListElement, VerticalListElementEventMap };

package/dist/vertical-list.js

@@ -1,8 +1,8 @@
 import { t as TickledController } from "./tickled-controller-Dh1Uh_vG.js";
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import { c as createElementListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-C05WjbZh.js";
-import { t as ListNativeDragController } from "./list-native-drag-controller-D97TYjn1.js";
+import { c as createElementListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-D91M4Ozq.js";
+import { t as ListNativeDragController } from "./list-native-drag-controller-B9xO0XWn.js";
 import { r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-SA4piSBi.js";
 import { n as animateListItemIn, r as animateListItemOut } from "./list-item-animation-BUoEKi5s.js";
 import { LitElement, css, html, render } from "lit";

package/docs-user/README.md

@@ -28,6 +28,7 @@ This directory contains documentation for each component and some architectural
 - [led](./led.md)
 - [menu](./menu.md)
 - [miller](./miller.md)
+- [multicol-list](./multicol-list.md)
 - [narrowed-text](./narrowed-text.md)
 - [notifier](./notifier.md)
 - [pan-text](./pan-text.md)

package/docs-user/icons.md

@@ -4,15 +4,27 @@ A centralized SVG icon system for `@ixfx/components`. Icons are stored by name,
 
 ## Built-in icons
 
-| Name | Used by | Fill |
+All built-ins are [Lucide](https://lucide.dev/icons/) icons (stroke-based, `viewBox 0 0 24 24`, `fill="none"`, colored via `currentColor`), registered in `src/icons/defaults.ts`.
+
+| Name | Lucide icon | Used by |
 |---|---|---|
-| `chevron-down` | `<ixfx-split-button>`, `<ixfx-panel>` | `currentColor` |
-| `check` | Available for use | `currentColor` |
-| `close` | `<ixfx-panel>`, `<ixfx-split-button>` | `currentColor` |
-| `add` | Available for use | `currentColor` |
-| `file` | Available for use | `currentColor` |
-| `folder` | Available for use | `currentColor` |
-| `search` | Available for use | `currentColor` |
+| `chevron-down` | [chevron-down](https://lucide.dev/icons/chevron-down) | `<ixfx-split-button>`, `<ixfx-panel>` |
+| `chevron-right` | [chevron-right](https://lucide.dev/icons/chevron-right) | `<ixfx-split-button>` |
+| `chevron-up` | [chevron-up](https://lucide.dev/icons/chevron-up) | `<ixfx-data-grid>` sort indicator |
+| `chevron-left` | [chevron-left](https://lucide.dev/icons/chevron-left) | `<ixfx-incr-search>` prev-match |
+| `caret-right` | [chevron-right](https://lucide.dev/icons/chevron-right) (CSS mask) | tree-basic expand indicator |
+| `check` | [check](https://lucide.dev/icons/check) | `<ixfx-menu-check-item>` |
+| `close` | [x](https://lucide.dev/icons/x) | `<ixfx-panel>`, `<ixfx-split-button>`, `<ixfx-incr-search>` |
+| `add` | [plus](https://lucide.dev/icons/plus) | Available for use |
+| `error` | [circle-alert](https://lucide.dev/icons/circle-alert) | Available for use |
+| `info` | [info](https://lucide.dev/icons/info) | Available for use |
+| `warning` | [triangle-alert](https://lucide.dev/icons/triangle-alert) | Available for use |
+| `file` | [file](https://lucide.dev/icons/file) | Available for use |
+| `folder` | [folder](https://lucide.dev/icons/folder) | Available for use |
+| `folder-up` | [folder-up](https://lucide.dev/icons/folder-up) | Available for use |
+| `search` | [search](https://lucide.dev/icons/search) | Available for use |
+| `menu` | [menu](https://lucide.dev/icons/menu) | `<ixfx-multicol-list>` column options |
+| `ellipsis-vertical` | [ellipsis-vertical](https://lucide.dev/icons/ellipsis-vertical) | `<ixfx-menu-trigger>` default glyph |
 
 ## Overriding a built-in icon
 
@@ -161,10 +173,12 @@ iconBus: EventTarget
 
 ## SVG format conventions for custom icons
 
+Match [Lucide](https://lucide.dev/icons/)'s style so custom icons sit consistently alongside the built-ins:
+
 - `viewBox="0 0 24 24"` — consistent with built-ins
 - No `width` or `height` attributes on `<svg>` — let CSS control sizing
-- `fill="currentColor"` for inline icons — inherits CSS `color`
-- `fill="black"` for CSS mask icons — color comes from `background-color`
+- `fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"` for inline icons — inherits CSS `color`
+- `stroke="black"` (same attributes otherwise) for CSS mask icons — color comes from `background-color`
 - `aria-hidden="true"` on the `<svg>` itself — the `<ixfx-icon>` wrapper handles accessibility
 
 ## Subscribing to icon changes

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.9.8",
-  "generated": "2026-09-13T18:31:56.491Z",
+  "version": "0.10.2",
+  "generated": "2026-09-14T20:28:42.876Z",
   "components": [
     {
       "name": "ac-text",
@@ -123,6 +123,11 @@
       "summary": "A Miller column component displays hierarchical data as multiple vertical columns, like macOS Finder or email clients. Each column shows the children of the selected item in the previous column.",
       "path": "docs-user/miller.md"
     },
+    {
+      "name": "multicol-list",
+      "summary": "A faceted-filtering component: each column shows one property (facet) of the *same*",
+      "path": "docs-user/multicol-list.md"
+    },
     {
       "name": "narrowed-text",
       "summary": "A filtered text selection component with inline search. Shows slotted items filtered by a query string as the user types.",
@@ -250,7 +255,7 @@
     },
     {
       "name": "vertical-list",
-      "summary": "A scrollable vertical list of items with selection, keyboard navigation, and incremental search. Items can be plain `<li>` elements declared in HTML or rich custom elements added programmatically.",
+      "summary": "A scrollable vertical list of items with selection, keyboard navigation, and incremental search. Items can be plain `<li>` elements declared in HTML or rich custom elements added programmatically. Lar",
       "path": "docs-user/vertical-list.md"
     },
     {

package/docs-user/llms.txt

@@ -35,6 +35,7 @@ import '@ixfx/components/data-grid';
 - [led](docs-user/led.md): An LED indicator component with color mixing and brightness, blink, and pulse modes.
 - [menu](docs-user/menu.md): A custom menu system built on native HTML popovers with keyboard navigation, tickled focus management, and command routing.
 - [miller](docs-user/miller.md): A Miller column component displays hierarchical data as multiple vertical columns, like macOS Finder or email clients. Each column shows the children of the selected item in the previous column.
+- [multicol-list](docs-user/multicol-list.md): A faceted-filtering component: each column shows one property (facet) of the *same*
 - [narrowed-text](docs-user/narrowed-text.md): A filtered text selection component with inline search. Shows slotted items filtered by a query string as the user types.
 - [notifier](docs-user/notifier.md): A "lookless" app-wide notification system. `NotificationManager` is a singleton that owns notification state, queueing, and timing — it doesn't know how to draw anything. A `NotificationRenderer` (the
 - [pan-text](docs-user/pan-text.md): Pans overflowing text on hover or continuously in a loop. Use when a label is too long for its container and you want to reveal the full text without truncation.
@@ -60,7 +61,7 @@ import '@ixfx/components/data-grid';
 - [tree](docs-user/tree.md): Three components share a common `TreeComponent` interface: **`ixfx-tree-list`**, **`ixfx-miller-list`**, and **`ixfx-crumb-navigation`**. This document describes the shared API, plus component-specifi
 - [twosplit-layout](docs-user/twosplit-layout.md): A Lit web component that lays out two elements within a container with a split bar to adjust their proportions.
 - [util](docs-user/util.md): A tooltip component that renders a value with optional icon and formatted number display. Uses native render root (no shadow DOM).
-- [vertical-list](docs-user/vertical-list.md): A scrollable vertical list of items with selection, keyboard navigation, and incremental search. Items can be plain `<li>` elements declared in HTML or rich custom elements added programmatically.
+- [vertical-list](docs-user/vertical-list.md): A scrollable vertical list of items with selection, keyboard navigation, and incremental search. Items can be plain `<li>` elements declared in HTML or rich custom elements added programmatically. Lar
 - [xy-pad](docs-user/xy-pad.md): A 2D touch-friendly XY pad for controlling two parameters simultaneously. Each axis supports independent linear/logarithmic scaling.
 
 ## Overviews

package/docs-user/multicol-list.md

@@ -0,0 +1,128 @@
+# Multicol List
+
+A faceted-filtering component: each column shows one property (facet) of the *same*
+dataset, and selections narrow every other column (Lightroom-style cross-filtering).
+Despite the miller-style appearance it is not a hierarchy — see `plans/multicol-list-impl.md`
+for the design rationale.
+
+The component does **not** own the data. For each column it hands a query (the column's
+facet plus every *other* column's current choices) to a data provider you supply. The
+provider returns that column's choices; items may carry a `count` for display.
+
+---
+
+## ixfx-multicol-list
+
+### Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `categories` | `readonly MulticolCategory[]` | `[]` | Facet definitions (tree, shown in the header picker menu). Each may carry `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. |
+| `maxColumns` | `number` | `5` | Ceiling for column addition; `0` = unlimited. |
+| `columns` | `readonly MulticolColumnState[]` (getter) | — | Current per-column config: `id`, `categoryKey`, `sort`, `grouped`, `width`. Persist this to restore a layout. |
+
+### Methods
+
+```typescript
+// Restore a saved layout. Matching ids re-use live columns; unknown categories are skipped.
+// A first assignment suppresses the default auto-seeded column.
+setColumns(states: readonly MulticolColumnState[]): void
+
+// Add a column for a category key, optionally at a position.
+addColumn(categoryKey: string, position?: number): void
+
+// Remove a column by id (respects minColumns).
+removeColumn(columnId: string): void
+
+// One MulticolColumnSelection per column, in display order.
+// `values: []` means the column is at 'All' (contributes no filter).
+getSelection(): readonly MulticolColumnSelection[]
+
+// Every column back to 'All'. Fires multicol-select for each column that changed.
+clearSelection(): void
+```
+
+Without `setColumns`, the element auto-seeds one column (the first category) once
+`categories` is assigned.
+
+### Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `multicol-select` | `{ columnId, columns }` | A column's selection changed. `columns` is a full snapshot (see `getSelection`). |
+| `multicol-columns-change` | `{ columns, reason }` | Column layout changed. `reason` is one of `'add' \| 'remove' \| 'reorder' \| 'category' \| 'sort' \| 'grouping' \| 'resize'`. Resize fires **once on pointer-up** with the final width — never during the drag. |
+
+---
+
+## Data flow
+
+1. A selection change in column *i* re-queries **every other** column; column *i*'s list
+   is left untouched so the user keeps their place.
+2. Adding, removing or changing a column's category re-queries all columns (a category
+   swap resets that column to 'All' and applies the new category's `defaults`).
+3. Sort, grouping toggle and reorder are client-side only — no re-query.
+4. Each column keeps one in-flight request; a newer request aborts the older one and
+   late results are dropped.
+5. Selections that disappear from a column's data are pruned; an empty selection falls
+   back to 'All' (a column is never left with nothing).
+
+Every column injects an 'All' row (label from the category's `allLabel`, default `'All'`)
+at the top, selected by default. Choosing values clears All; choosing All clears values.
+
+---
+
+## Header interactions
+
+- **Category label** — opens a menu of all categories; the current one is disabled.
+- **Burger** (visible on column hover) — remove column, add column (left/right),
+  sort ascending/descending, grouping toggle.
+- **Header drag** — reorder columns; a caret marks the drop gap.
+- **Right edge** — drag to resize (80–480 px, default 220).
+
+---
+
+## CSS variables
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--multicol-list-bg` | `var(--surface-3)` | Column background |
+| `--multicol-list-header-bg` | `var(--surface-2)` | Header background |
+| `--multicol-list-header-text` | `var(--surface-3-text)` | Header text colour |
+| `--multicol-list-border` | `var(--border)` | Column separator |
+| `--multicol-list-min-column-width` | `80px` | Resize floor |
+| `--multicol-list-max-column-width` | `480px` | Resize ceiling |
+
+Inherited from the theme: `--font-family`, `--text-s`/`--text-m`, `--space-*`,
+`--radius-s`, `--accent`, `--transition`.
+
+---
+
+## Example
+
+```typescript
+import type { MulticolItem, MulticolQuery } from '@ixfx/components/multicol-list.js';
+
+el.categories = [
+  { key: `year`, label: `Year`, defaults: { allLabel: `Any year` } },
+  { key: `camera`, label: `Camera`, defaults: {
+    grouped: true,
+    groupBy: (item: MulticolItem) => (item.data as { brand?: string }).brand ?? `?`,
+  } },
+];
+
+el.dataProvider = (query: MulticolQuery, signal) => {
+  // query.categoryKey — which facet to enumerate
+  // query.otherSelections — Map<columnId, string[]> of every OTHER column's
+  //                         choices ([] = that column is at 'All')
+  return computeFacet(query.categoryKey, query.otherSelections);
+};
+
+el.addEventListener(`multicol-select`, (event) => {
+  saveLayout(event.detail.columns);
+});
+```
+
+See `demo/multicol-list.html` for a full in-memory example with counts.

package/docs-user/tree.md

@@ -141,6 +141,7 @@ These properties are present on all three components (`ixfx-tree-list`, `ixfx-mi
 | `selectionFilter` | `'none' \| 'leaf' \| 'branch'` | `'leaf'` | Which node kinds can be selected (reflected attribute) |
 | `filterPredicate` | `TreeFilterPredicate \| undefined` | `undefined` | Filter; only nodes returning `true` are shown |
 | `exclusivity` | `'none' \| 'depth' \| 'global'` | `'none'` | Expansion exclusivity (reflected attribute) |
+| `stickyHeaders` (`sticky-headers`) | `boolean` | `true` | VS Code-style sticky headers; set `sticky-headers="false"` to opt out (`ixfx-tree-list` only) |
 
 ### `interactionMode` (`ixfx-tree-list` / `ixfx-miller-list`)
 
@@ -210,6 +211,14 @@ Controls how expansion of one branch affects others.
 
 `exclusivity="depth"` replaces the old `accordion` boolean attribute. To migrate: `accordion` → `exclusivity="depth"`.
 
+### Sticky headers (`ixfx-tree-list`)
+
+On by default: while scrolling vertically, the ancestors of the top-visible row stick to the top of the list (VS Code-style sticky scroll), showing the full chain. Set `sticky-headers="false"` to opt out.
+
+- Clicking a stuck header selects that ancestor and scrolls its real row into view; clicking its caret toggles expansion. Keyboard interaction stays in the real list.
+- An ancestor that is itself still visible is never duplicated in the header.
+- Style via `--tree-sticky-bg`, `--tree-sticky-border`, `--tree-sticky-shadow`, and the `sticky-headers` / `sticky-header` parts.
+
 ---
 
 ## Selection
@@ -600,6 +609,9 @@ These are set by the global theme and inherited by all tree components.
 | `--tree-drop-nub-size` | `5px` | Diameter of the insertion-line nub |
 | `--tree-drop-into-outline` | `2px solid var(--accent)` | Outline of a row that is a reparent (`inside`) drop target |
 | `--tree-drop-into-bg` | `color-mix(...)` | Background tint of a reparent drop target |
+| `--tree-sticky-bg` | `var(--tree-bg)` | Sticky header background (opaque so rows slide underneath) |
+| `--tree-sticky-border` | `var(--border, transparent)` | Bottom border of the sticky header stack |
+| `--tree-sticky-shadow` | `0 2px 6px rgba(0,0,0,0.25)` | Shadow under the sticky header stack |
 
 `part`s: `drop-target` (the highlighted row), `drop-indicator` (the
 before/after line).

package/docs-user/vertical-list.md

@@ -1,6 +1,6 @@
 # `ixfx-vertical-list`
 
-A scrollable vertical list of items with selection, keyboard navigation, and incremental search. Items can be plain `<li>` elements declared in HTML or rich custom elements added programmatically.
+A scrollable vertical list of items with selection, keyboard navigation, and incremental search. Items can be plain `<li>` elements declared in HTML or rich custom elements added programmatically. Large lists can be [virtualized](#virtualisation) so only the visible rows exist in the DOM.
 
 ---
 
@@ -11,13 +11,14 @@ A scrollable vertical list of items with selection, keyboard navigation, and inc
 3. [Properties](#properties)
 4. [Sticky mode](#sticky-mode)
 5. [Custom checkbox](#custom-checkbox)
-5. [Selection](#selection)
-6. [Events](#events)
-7. [Native drag-out](#native-drag-out)
-8. [Keyboard navigation](#keyboard-navigation)
-8. [Incremental search](#incremental-search)
-9. [CSS variables](#css-variables)
-10. [CSS parts](#css-parts)
+6. [Selection](#selection)
+7. [Events](#events)
+8. [Native drag-out](#native-drag-out)
+9. [Keyboard navigation](#keyboard-navigation)
+10. [Incremental search](#incremental-search)
+11. [Virtualisation](#virtualisation)
+12. [CSS variables](#css-variables)
+13. [CSS parts](#css-parts)
 
 ---
 
@@ -117,6 +118,8 @@ To reflect selection state inside the custom element's shadow DOM, target the `:
 |---|---|---|---|
 | `selectionMode` / `selection-mode` | `'none' \| 'single' \| 'multiple'` | `'single'` | Which items can be selected simultaneously |
 | `interactionMode` / `interaction-mode` | `ListInteractionMode` | `'standard'` | How gestures map to selection changes (see table below) |
+| `virtualize` / `virtualize` | `boolean` | `false` | Only render the viewport window (+ overscan) into the DOM; pool and recycle the rest. See [Virtualisation](#virtualisation) |
+| `itemHeight` / `item-height` | `number` | `0` | Fixed row height in px. Required for `virtualize` — every row must be exactly this tall |
 | `filterPredicate` | `((el: Element) => boolean) \| undefined` | `undefined` | External filter; only items returning `true` are shown |
 | `checkboxRenderer` | `((checked: boolean) => unknown) \| CustomCheckboxOptions \| undefined` | `undefined` | Custom content for the checkbox in `checked` mode. See [Custom checkbox](#custom-checkbox) |
 
@@ -581,6 +584,59 @@ list.filterPredicate = undefined;
 
 ---
 
+## Virtualisation
+
+Set `virtualize` to window the list: only the rows near the viewport (plus an overscan of 3 rows) ever exist in the DOM. Everything else is pooled off-DOM and recycled **by identity** as you scroll, so a list of tens of thousands of rows keeps a tiny, fast DOM. Works for hand-supplied `<li>` / `data-list-item` elements **and** adapter (`items`) rows.
+
+Offscreen space is held by two `data-virtual-spacer` rows bracketing the rendered window. If you query items yourself, exclude them (`li:not([data-virtual-spacer])`) — `querySelectorAll` with the plain `li` selector won't resolve pooled rows because they have no DOM node at all.
+
+### Enabling it
+
+```html
+<ixfx-vertical-list virtualize item-height="30" selection-mode="multiple"
+    style="height: 300px; --list-item-height: 30px">
+</ixfx-vertical-list>
+```
+
+- **`item-height` is required.** The window math is pure fixed-stride arithmetic (no DOM measurement), mirroring `ixfx-grid-list`'s `itemSize`. Every row must be exactly that tall — set `--list-item-height` to the same value and keep row content single-line.
+- With `item-height` at `0` the component warns and runs non-virtualized.
+- It can be toggled at runtime: entering snapshots the current DOM order as the row registry; leaving reattaches every row in order and drops the spacers and pool. Selection and cursor survive both directions.
+
+```typescript
+list.virtualize = true;
+list.itemHeight = 30;
+```
+
+### What works while virtualized
+
+- **Selection and cursor survive scrolling.** Rows are detached/reattached, never recreated, and pooled rows hold live element refs — `selectAll()`, `Cmd/Ctrl+A`, and range operations span them too.
+- **`data-key`s** are required for the key APIs (`selectKeys`, `focusKey`, `getItemByKey`, `renderedKeys`); selection by reference (click, `select()`) works regardless.
+- **Mutations reconcile.** `addItem` / `setItems` / direct `appendChild` / `removeItem` / `clearItems` all keep working; appends beyond the window land in the pool.
+- **Adapter mode** (`items` + `formatter`) virtualizes the same way, and `updateItem` writes through to pooled rows.
+
+### Reading the window
+
+```typescript
+// Keys of the rendered window (viewport + overscan) — the priority set for
+// prefetching, mirroring ixfx-grid-list.renderedKeys()
+list.renderedKeys();
+
+// Keys strictly intersecting the viewport (rect test) — for
+// viewport-first work like thumbnail fetches
+list.visibleKeys();
+
+// Resolves pooled (off-DOM) rows too
+list.getItemByKey('r4321');
+```
+
+### Limitations while active
+
+- **Drag-select is disabled** — the window shifts under a drag, so the marquee band can't be tracked reliably.
+- **Incremental-search `filter` mode is excluded** — it collapses rows via `hidden`, corrupting the fixed-stride geometry. `navigate` and `select` modes still work.
+- **Keyboard navigation stays within the rendered window** — scroll first.
+
+---
+
 ## CSS variables
 
 | Variable | Default | Description |
@@ -589,7 +645,7 @@ list.filterPredicate = undefined;
 | `--list-text` | `var(--surface-3-text)` | Default text colour |
 | `--list-border` | `var(--border)` | Border colour |
 | `--list-radius` | `var(--radius-s)` | Border radius |
-| `--list-item-height` | `28px` | Minimum row height for `<li>` items |
+| `--list-item-height` | `28px` | Minimum row height for `<li>` items; set it to match `item-height` when virtualizing |
 | `--list-item-padding` | `4px var(--space-m, 8px)` | Padding for `<li>` items |
 | `--item-bg-tickled` | `rgba(0,0,0,0.06)` | Row background when cursor is on it |
 | `--item-bg-selected` | `rgba(25,118,210,1)` | Selected row background |

package/llms.txt

@@ -35,6 +35,7 @@ import '@ixfx/components/data-grid';
 - [led](docs-user/led.md): An LED indicator component with color mixing and brightness, blink, and pulse modes.
 - [menu](docs-user/menu.md): A custom menu system built on native HTML popovers with keyboard navigation, tickled focus management, and command routing.
 - [miller](docs-user/miller.md): A Miller column component displays hierarchical data as multiple vertical columns, like macOS Finder or email clients. Each column shows the children of the selected item in the previous column.
+- [multicol-list](docs-user/multicol-list.md): A faceted-filtering component: each column shows one property (facet) of the *same*
 - [narrowed-text](docs-user/narrowed-text.md): A filtered text selection component with inline search. Shows slotted items filtered by a query string as the user types.
 - [notifier](docs-user/notifier.md): A "lookless" app-wide notification system. `NotificationManager` is a singleton that owns notification state, queueing, and timing — it doesn't know how to draw anything. A `NotificationRenderer` (the
 - [pan-text](docs-user/pan-text.md): Pans overflowing text on hover or continuously in a loop. Use when a label is too long for its container and you want to reveal the full text without truncation.
@@ -60,7 +61,7 @@ import '@ixfx/components/data-grid';
 - [tree](docs-user/tree.md): Three components share a common `TreeComponent` interface: **`ixfx-tree-list`**, **`ixfx-miller-list`**, and **`ixfx-crumb-navigation`**. This document describes the shared API, plus component-specifi
 - [twosplit-layout](docs-user/twosplit-layout.md): A Lit web component that lays out two elements within a container with a split bar to adjust their proportions.
 - [util](docs-user/util.md): A tooltip component that renders a value with optional icon and formatted number display. Uses native render root (no shadow DOM).
-- [vertical-list](docs-user/vertical-list.md): A scrollable vertical list of items with selection, keyboard navigation, and incremental search. Items can be plain `<li>` elements declared in HTML or rich custom elements added programmatically.
+- [vertical-list](docs-user/vertical-list.md): A scrollable vertical list of items with selection, keyboard navigation, and incremental search. Items can be plain `<li>` elements declared in HTML or rich custom elements added programmatically. Lar
 - [xy-pad](docs-user/xy-pad.md): A 2D touch-friendly XY pad for controlling two parameters simultaneously. Each axis supports independent linear/logarithmic scaling.
 
 ## Overviews

package/package.json

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

package/dist/data-grid-C5hk_pzK.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"data-grid-C5hk_pzK.d.ts","names":[],"sources":["../src/data-grid/types.ts","../src/data-grid/data-grid.ts"],"mappings":"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"}

package/dist/defaults-BJwDsMH4.js

@@ -1,86 +0,0 @@
-import { s as registerIcon } from "./registry-BEtb8_wB.js";
-//#region src/icons/defaults.ts
-/**
-* Chevron pointing down. Used for split-button dropdown toggle.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_CHEVRON_DOWN = `<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/></svg>`;
-/**
-* Caret pointing right. Used for tree-basic expand indicator as a CSS mask.
-* fill="black" is correct for CSS mask-image use (shape only, color comes from background-color).
-*/
-const ICON_CARET_RIGHT = `<svg viewBox="0 0 24 24" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M10 7l6 5-6 5V7z"/></svg>`;
-/**
-* Checkmark. Useful for menu-check-item or confirmation states.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_CHECK = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>`;
-/**
-* Close / X icon. Useful for dialogs, notifications, dismissible elements.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_CLOSE = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>`;
-/**
-* Plus / add icon. Pairs with `close` for add/remove actions.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_ADD = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>`;
-/**
-* Error / warning icon. Useful for error notifications.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_ERROR = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>`;
-/**
-* Info icon. Useful for info notifications.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_INFO = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>`;
-/**
-* Warning icon. Useful for warning notifications.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_WARNING = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>`;
-/**
-* Chevron pointing right. Used for split-button switcher toggle.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_CHEVRON_RIGHT = `<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/></svg>`;
-/**
-* Folder with up arrow. Angled line style for navigating up one level.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_FOLDER_UP = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 4L4 12h5v8h6v-8h5L12 4z"/></svg>`;
-/**
-* Folder. Useful for file explorers and sidebars.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_FOLDER = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 1.99-.9 1.99-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>`;
-/**
-* Document / file page. Useful for file lists and document tabs.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_FILE = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>`;
-/**
-* Magnifying glass. Useful for search panels and inputs.
-* fill="currentColor" so it inherits CSS color.
-*/
-const ICON_SEARCH = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>`;
-function registerDefaults() {
-	registerIcon(`chevron-down`, ICON_CHEVRON_DOWN);
-	registerIcon(`chevron-right`, ICON_CHEVRON_RIGHT);
-	registerIcon(`caret-right`, ICON_CARET_RIGHT);
-	registerIcon(`check`, ICON_CHECK);
-	registerIcon(`close`, ICON_CLOSE);
-	registerIcon(`file`, ICON_FILE);
-	registerIcon(`folder`, ICON_FOLDER);
-	registerIcon(`search`, ICON_SEARCH);
-	registerIcon(`add`, ICON_ADD);
-	registerIcon(`error`, ICON_ERROR);
-	registerIcon(`folder-up`, ICON_FOLDER_UP);
-	registerIcon(`info`, ICON_INFO);
-	registerIcon(`warning`, ICON_WARNING);
-}
-//#endregion
-export { registerDefaults as a, ICON_CLOSE as i, ICON_CHECK as n, ICON_CHEVRON_DOWN as r, ICON_CARET_RIGHT as t };
-
-//# sourceMappingURL=defaults-BJwDsMH4.js.map

package/dist/defaults-BJwDsMH4.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"defaults-BJwDsMH4.js","names":[],"sources":["../src/icons/defaults.ts"],"sourcesContent":["import { registerIcon } from './registry.js';\n\n/**\n * Chevron pointing down. Used for split-button dropdown toggle.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CHEVRON_DOWN = `<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"/></svg>`;\n\n/**\n * Caret pointing right. Used for tree-basic expand indicator as a CSS mask.\n * fill=\"black\" is correct for CSS mask-image use (shape only, color comes from background-color).\n */\nexport const ICON_CARET_RIGHT = `<svg viewBox=\"0 0 24 24\" fill=\"black\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 7l6 5-6 5V7z\"/></svg>`;\n\n/**\n * Checkmark. Useful for menu-check-item or confirmation states.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CHECK = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z\"/></svg>`;\n\n/**\n * Close / X icon. Useful for dialogs, notifications, dismissible elements.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CLOSE = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"/></svg>`;\n\n/**\n * Plus / add icon. Pairs with `close` for add/remove actions.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_ADD = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\"/></svg>`;\n\n/**\n * Error / warning icon. Useful for error notifications.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_ERROR = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"/></svg>`;\n\n/**\n * Info icon. Useful for info notifications.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_INFO = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"/></svg>`;\n\n/**\n * Warning icon. Useful for warning notifications.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_WARNING = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/></svg>`;\n\n/**\n * Chevron pointing right. Used for split-button switcher toggle.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_CHEVRON_RIGHT = `<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"/></svg>`;\n\n/**\n * Folder with up arrow. Angled line style for navigating up one level.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_FOLDER_UP = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 4L4 12h5v8h6v-8h5L12 4z\"/></svg>`;\n\n/**\n * Folder. Useful for file explorers and sidebars.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_FOLDER = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 1.99-.9 1.99-2V8c0-1.1-.9-2-2-2h-8l-2-2z\"/></svg>`;\n\n/**\n * Document / file page. Useful for file lists and document tabs.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_FILE = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z\"/></svg>`;\n\n/**\n * Magnifying glass. Useful for search panels and inputs.\n * fill=\"currentColor\" so it inherits CSS color.\n */\nexport const ICON_SEARCH = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>`;\n\nexport function registerDefaults(): void {\n  registerIcon(`chevron-down`, ICON_CHEVRON_DOWN);\n  registerIcon(`chevron-right`, ICON_CHEVRON_RIGHT);\n  registerIcon(`caret-right`, ICON_CARET_RIGHT);\n  registerIcon(`check`, ICON_CHECK);\n  registerIcon(`close`, ICON_CLOSE);\n  registerIcon(`file`, ICON_FILE);\n  registerIcon(`folder`, ICON_FOLDER);\n  registerIcon(`search`, ICON_SEARCH);\n  registerIcon(`add`, ICON_ADD);\n  registerIcon(`error`, ICON_ERROR);\n  registerIcon(`folder-up`, ICON_FOLDER_UP);\n  registerIcon(`info`, ICON_INFO);\n  registerIcon(`warning`, ICON_WARNING);\n}\n"],"mappings":";;;;;;AAMA,MAAa,oBAAoB;;;;;AAMjC,MAAa,mBAAmB;;;;;AAMhC,MAAa,aAAa;;;;;AAM1B,MAAa,aAAa;;;;;AAM1B,MAAa,WAAW;;;;;AAMxB,MAAa,aAAa;;;;;AAM1B,MAAa,YAAY;;;;;AAMzB,MAAa,eAAe;;;;;AAM5B,MAAa,qBAAqB;;;;;AAMlC,MAAa,iBAAiB;;;;;AAM9B,MAAa,cAAc;;;;;AAM3B,MAAa,YAAY;;;;;AAMzB,MAAa,cAAc;AAE3B,SAAgB,mBAAyB;CACvC,aAAa,gBAAgB,iBAAiB;CAC9C,aAAa,iBAAiB,kBAAkB;CAChD,aAAa,eAAe,gBAAgB;CAC5C,aAAa,SAAS,UAAU;CAChC,aAAa,SAAS,UAAU;CAChC,aAAa,QAAQ,SAAS;CAC9B,aAAa,UAAU,WAAW;CAClC,aAAa,UAAU,WAAW;CAClC,aAAa,OAAO,QAAQ;CAC5B,aAAa,SAAS,UAAU;CAChC,aAAa,aAAa,cAAc;CACxC,aAAa,QAAQ,SAAS;CAC9B,aAAa,WAAW,YAAY;AACtC"}