@ixfx/components 0.7.4 → 0.8.0

package/docs-user/detail-list.md

@@ -313,7 +313,7 @@ With wrapping:
 
 ## Incremental search
 
-Press Ctrl+F (or Cmd+F on Mac) to open the search overlay. Type to filter items in real-time using fuzzy matching.
+A built-in type-ahead popover with **navigate** / **select** / **filter** modes — see [`docs/infra-incremental.md`](../../docs/infra-incremental.md). No default shortcut; open it with `list.registry.invoke('list.search.filter')` (or `.navigate` / `.select`). A filter change re-runs the column geometry automatically.
 
 Search matches against `data-search-label` (or `textContent` as fallback). Use `data-search-label` to match against a different string than what's displayed:
 

package/docs-user/grid-list.md

@@ -192,11 +192,13 @@ All bubble and are `composed`.
 
 | Event | Detail | When |
 |---|---|---|
-| `list-select` | `{ selected, previous, selectedKeys }` | Selection changes by any means |
-| `list-activate` | `{ item }` | Double-click or `Enter` on an item |
-| `list-item-click` | `{ item }` | Single click / `Enter` |
-| `list-tickle` | `{ item }` | Cursor moves onto an item |
-| `grid-list-viewport-change` | `{ visibleKeys }` | Scroll, resize, or content change — the rendered window moved |
+| `list-select` | `{ selectedKeys, previousKeys, selected, previous }` | Selection changes by any means |
+| `list-activate` | `{ key, index, item, element }` | Double-click or `Enter` on an item |
+| `list-item-click` | `{ key, index, item, element }` | Single click / `Enter` |
+| `list-tickle` | `{ key, index, item, element }` | Cursor moves onto an item |
+| `grid-list-viewport-change` | `{ renderedKeys, visibleKeys }` | Scroll, resize, filter, content change, or `refreshLayout()` — the rendered window moved |
+
+`key` / `index` are the stable contract in both modes. `item` is backward-compatible: the light-DOM `Element` in element mode, the data value in data mode. `element` is the DOM node when there is one (`undefined` in data mode). `selected` / `previous` (Element sets) are populated in element mode only; use `selectedKeys` / `previousKeys` everywhere.
 
 ---
 
@@ -215,17 +217,101 @@ All bubble and are `composed`.
 
 ---
 
+## Incremental search
+
+A built-in type-ahead popover with **navigate** / **select** / **filter** modes.
+No default shortcut — open it via a command on `grid.registry`:
+
+```typescript
+grid.registry.invoke('list.search.filter');   // or .navigate / .select
+```
+
+Search matches `data-label` (or `[data-grid-list-caption]` text, then
+`data-search-label`, then `textContent`). Filter mode genuinely removes items
+from the virtualised layout. Add a page-level highlight rule to see matched
+characters:
+
+```css
+::highlight(grid-list-search) { background: var(--accent); color: var(--accent-text); }
+```
+
+`filterPredicate` (an `(el: Element) => boolean` property) filters element-mode
+items directly, independent of search; the data-mode equivalent is
+`itemFilterPredicate` (`(item, index) => boolean`). Filtering removes items from
+layout and navigation without materialising anything in data mode. Limit modes
+with `search-modes="navigate filter"`. Full model:
+[`docs/infra-incremental.md`](../../docs/infra-incremental.md).
+
+---
+
+## Data-backed mode
+
+For very large collections (a directory of 100k files), give the grid an
+**ordered array plus an adapter** instead of one light-DOM element per item.
+Only the visible window plus overscan is ever rendered — item content DOM is
+created and torn down as the window moves.
+
+```typescript
+import type { GridListElement, GridListDataAdapter } from '@ixfx/components/grid-list';
+
+const grid = document.querySelector<GridListElement<FileRecord>>('#grid')!;
+
+grid.itemAdapter = {
+  key:  f => f.path,                         // stable identity (required)
+  label: f => f.name,                        // caption text
+  render: f => html`<img src=${f.thumb} loading="lazy" decoding="async">`,
+  disabled: f => f.locked,                   // optional — not selectable / tickle-able
+  searchableText: f => `${f.name} ${f.ext}`, // optional — search haystack
+};
+grid.items = files;                          // readonly FileRecord[]
+```
+
+`render` returns anything Lit can render — a `TemplateResult`, a DOM `Node`, or a
+string. It runs only for items in the rendered window.
+
+| Method | Effect |
+|---|---|
+| `setItems(items)` | Replace the collection. Selection / cursor keep any key still present. |
+| `appendItems(items)` | Add to the end. Scroll, selection and cursor untouched; no reflow animation. |
+| `updateItem(key, item)` | Replace one item. A visible cell re-renders in place; an offscreen one updates when scrolled in. |
+| `removeItems(keys)` | Remove items. Removed keys drop out of selection / cursor. |
+| `clearItems()` | Drop everything. Resets selection / cursor and emits one empty `list-select`. |
+
+Selection, cursor, keyboard nav, search, filtering, `count`, `renderedCount`,
+`renderedKeys()` and `visibleKeys()` behave identically to element mode — all
+key-based. Data-mode events carry the data value as `detail.item` and
+`detail.element` is `undefined`; read `detail.selectedKeys` for selection.
+`selectedItems` (an Element set) is element-mode only.
+
+Duplicate keys are warned about once; the first occurrence wins for key-based
+operations.
+
+---
+
 ## Virtualisation
 
-Only the cells in (or near) the viewport are in the DOM.
+Only the cells in (or near) the viewport are in the DOM — in both element and
+data mode.
 
 ```typescript
-grid.count;             // total items
+grid.count;             // total items (after filtering)
 grid.renderedCount;     // cells currently in the shadow DOM
-grid.visibleKeys();     // data-key of items in the current window
+grid.renderedKeys();    // keys of the rendered window — viewport + overscan (prefetch set)
+grid.visibleKeys();     // keys strictly intersecting the viewport (no overscan)
 ```
 
-`grid-list` handles tens of thousands of children in every orientation.
+`grid-list` handles hundreds of thousands of items in every orientation. Keys of
+keyless light-DOM items (auto-assigned internally) are omitted from
+`renderedKeys()` / `visibleKeys()` / `selectedKeys`.
+
+### Hidden containers
+
+`refreshLayout()` re-reads the viewport after an ancestor's visibility or size
+changed — e.g. a dock tab being re-activated. It is safe to call while hidden
+(a zero-sized measurement never replaces the last usable geometry) and forces a
+repaint of the virtual window even when the size is unchanged. Scroll position,
+zoom anchoring and selection survive a hide/show cycle. `remeasure()` is an
+alias.
 
 ---
 
@@ -251,8 +337,9 @@ it's suppressed under `prefers-reduced-motion: reduce`. Duration:
 | Part | Element |
 |---|---|
 | `viewport` | The scroll container |
-| `item` | A cell |
-| `thumb` | The square holding the slotted content |
+| `item` | A cell. Also carries the state tokens `selected` / `tickled`, e.g. `::part(item selected)` |
+| `content` | The rendered content wrapper (data mode) |
+| `thumb` | The square holding the slotted content (element mode) |
 | `caption` | The caption element (absent for `caption-style="hidden"`) |
 
 Host CSS custom properties: `--grid-list-item-bg`, `--grid-list-radius`,
@@ -260,6 +347,28 @@ Host CSS custom properties: `--grid-list-item-bg`, `--grid-list-radius`,
 default `200ms`), `--scroll-fade-width` (edge fade reach, default `30px`), plus
 the shared `--item-bg-*` / `--accent` theme tokens.
 
+### Scrollbar
+
+The scroll container maps three variables straight onto the standard scrollbar
+properties (both orientations):
+
+| Variable | Default | Maps to |
+|---|---|---|
+| `--grid-list-scrollbar-width` | `auto` | `scrollbar-width` — `auto` \| `thin` \| `none` (hide it) |
+| `--grid-list-scrollbar-gutter` | `auto` | `scrollbar-gutter` — `auto` \| `stable` \| `stable both-edges` |
+| `--grid-list-scrollbar-color` | `auto` | `scrollbar-color` — `auto` or a `thumb track` colour pair |
+
+```css
+ixfx-grid-list {
+  --grid-list-scrollbar-width: none;               /* suppress entirely */
+  /* or: --grid-list-scrollbar-width: thin;
+         --grid-list-scrollbar-color: var(--accent) transparent; */
+}
+```
+
+For finer control, style `::part(viewport)` directly (including
+`::part(viewport)::-webkit-scrollbar` in Blink/WebKit).
+
 ---
 
 ## Choosing a list component

package/docs-user/incr-search.md

@@ -1,8 +1,18 @@
 # Incremental Search
 
 Utilities for incremental (type-ahead) search over data collections or DOM-backed lists.
-You can use the low-level `createIncrSearch` for data, `createElementIncrSearch` for
-DOM elements, or `IncrSearchTreeController` for tree and Miller list components.
+
+- **`ListSearchController`** — the shared brain behind the built-in search
+  popover in `ixfx-grid-list` / `ixfx-vertical-list` / `ixfx-detail-list` /
+  `ixfx-data-grid` / `ixfx-tree-list` / `ixfx-miller-list`. Three modes
+  (navigate / select / filter), driven by `list.search.*` commands. See
+  [`docs/infra-incremental.md`](../../docs/infra-incremental.md) — start there
+  for anything component-facing.
+- **`createIncrSearch`** — the low-level fuzzy engine (fzf) both the controller
+  and the helpers below are built on.
+- **`createElementIncrSearch`** / **`IncrSearchTreeController`** — *deprecated*
+  filter-only controllers driven by an external `<input>`. Kept for standalone
+  use; components now use `ListSearchController`.
 
 ## Plain UL list
 

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.7.4",
-  "generated": "2026-09-08T16:59:30.569Z",
+  "version": "0.8.0",
+  "generated": "2026-09-08T21:01:02.526Z",
   "components": [
     {
       "name": "ac-text",
@@ -100,7 +100,7 @@
     },
     {
       "name": "led",
-      "summary": "An LED indicator component with color mixing and optional blinking animation.",
+      "summary": "An LED indicator component with color mixing and brightness, blink, and pulse modes.",
       "path": "docs-user/led.md"
     },
     {

package/docs-user/led.md

@@ -1,29 +1,50 @@
 # `ixfx-led`
 
-An LED indicator component with color mixing and optional blinking animation.
+An LED indicator component with color mixing and brightness, blink, and pulse modes.
 
 ```html
 <ixfx-led></ixfx-led>
 <ixfx-led lit color="oklch(60% 0.2 120)"></ixfx-led>
-<ixfx-led blinking rate="300"></ixfx-led>
+<ixfx-led glow lit color="oklch(60% 0.2 120)"></ixfx-led>
+<ixfx-led mode="blink" rate="300"></ixfx-led>
+<ixfx-led mode="pulse" value="1" attack-time="40" release-time="400"></ixfx-led>
 ```
 
 ### Properties / attributes
 
 | Attribute / Property | Type     | Default                  | Description                            |
 |----------------------|----------|--------------------------|----------------------------------------|
-| `lit`                | `boolean`| `false`                  | Whether the LED is illuminated         |
-| `value`              | `number` | `0`                      | Value 0-1 used for brightness calculation |
+| `mode`               | `'brightness' \| 'blink' \| 'pulse'` | `'brightness'` | Operating mode (see below) |
+| `lit`                | `boolean`| `false`                  | Whether the LED is illuminated (shortcut for `value` 0/1) |
+| `value`              | `number` | `0`                      | Value 0-1. In `brightness` mode sets brightness directly; in `pulse` mode it is the envelope peak |
 | `color`              | `string` | `'oklch(50% 0.15 25)'`   | LED color (oklch recommended)          |
-| `blinking`           | `boolean`| `false`                  | Enable blinking animation              |
-| `rate`               | `number` | `500`                    | Blinking interval in milliseconds      |
+| `glow`               | `boolean`| `false`                  | Render a domed LED with a specular highlight and a coloured bloom that grows with `value` |
+| `blinking`           | `boolean`| `false`                  | Legacy alias for `mode="blink"`        |
+| `rate`               | `number` | `500`                    | `blink` mode interval in milliseconds  |
+| `attackTime` / `attack-time`   | `number` | `40`  | `pulse` mode rise time in milliseconds (0 → instant) |
+| `releaseTime` / `release-time` | `number` | `400` | `pulse` mode decay time in milliseconds (0 → instant) |
+| `pulseRetrigger` / `pulse-retrigger` | `boolean` | `false` | When set, a re-`pulse()` restarts the envelope from 0; when unset, the attack ramps from the envelope's current level |
+
+### Modes
+
+- **`brightness`** (default) — `value` sets the brightness.
+- **`blink`** — the LED toggles on/off every `rate` ms. Setting the legacy `blinking` attribute selects this mode.
+- **`pulse`** — the LED sits unlit until `pulse()` is called. Each call runs a linear attack/release envelope up to `value` (over `attack-time`) and back down to 0 (over `release-time`). Calling `pulse()` again restarts the envelope: from 0 if `pulse-retrigger` is set, otherwise the attack ramps up from wherever the envelope currently sits (a seamless retrigger mid-decay).
+
+### Methods
+
+| Method    | Description |
+|-----------|-------------|
+| `pulse()` | Trigger the `pulse`-mode envelope. No-op unless `mode` is `pulse`. |
 
 ### CSS custom properties
 
 | Property | Default | Description       |
 |----------|---------|-------------------|
 | `--size` | `1ex`   | LED diameter      |
-| `--colour` | `oklch(50% 0.15 25)` | LED colour (overrides `color` attribute) |
+| `--colour` | `oklch(50% 0.15 25)` | LED colour (overrides the `color` attribute) |
+
+Colour resolves as `--colour` → `color` attribute → default. The `glow` bloom uses the same resolved colour.
 
 ### Usage notes
 
@@ -34,7 +55,16 @@ For blinking, setting `rate` below 300ms adjusts the transition duration automat
 ### TypeScript types
 
 ```ts
+import type { LedMode } from './led.js';
+
 // LED color is a CSS color string
 led.color = 'oklch(70% 0.15 200)';
 led.value = 0.75; // 75% lit
+
+// Pulse mode
+led.mode = 'pulse';
+led.value = 1;
+led.attackTime = 20;
+led.releaseTime = 600;
+led.pulse(); // fire the envelope
 ```

package/docs-user/llms.txt

@@ -30,7 +30,7 @@ import '@ixfx/components/data-grid';
 - [labelled-radial-input](docs-user/labelled-radial-input.md): A composite radial input that pairs an editable label (`ixfx-editable-number`) with a rotary dial (`ixfx-radial-input`). The two controls are always in sync — turning the dial updates the number, and 
 - [labelled-range-input](docs-user/labelled-range-input.md): A composite range input that pairs an editable label (`ixfx-editable-number`) with a slider (`ixfx-range-input`). The two controls are always in sync — dragging the slider updates the number, and edit
 - [labelled-slider-input](docs-user/labelled-slider-input.md): A composite slider input that pairs an editable label (`ixfx-editable-number`) with a slider (`ixfx-slider-input`). The two controls are always in sync — dragging the slider updates the number, and ed
-- [led](docs-user/led.md): An LED indicator component with color mixing and optional blinking animation.
+- [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.
 - [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.

package/docs-user/panel.md

@@ -24,8 +24,9 @@ The header chrome is an `ixfx-titlebar` (see [`ixfx-titlebar`](../titlebar/READM
 | `title`                  | string                                            | `''`          | Panel title text                                |
 | `icon-name`              | string                                            | `''`          | Icon name from the registry                      |
 | `closable`              | boolean                                           | `false`       | Shows a close button that removes the panel     |
+| `keep-toolbar`          | boolean                                           | `false`       | Keep the toolbar visible even when collapsed     |
 | `toggle-interaction`     | `'implicit'` \| `'explicit'` \| `'disabled'`       | `'implicit'`   | How users can toggle the panel (see below)      |
-| `variant`                | `'titlebar'` \| `'midline'`                       | `'titlebar'`  | Visual style of the panel                       |
+| `variant`                | `'titlebar'` \| `'midline'` \| `'tree'`            | `'titlebar'`  | Visual style of the panel                       |
 
 ### Toggle interaction modes
 
@@ -49,10 +50,10 @@ Set `collapsible` to `false` (via property binding or JS — `collapsible` defau
 
 ### Slots
 
-| Slot        | Description                                      |
-|-------------|--------------------------------------------------|
-| default     | Panel content (shown when expanded)              |
-| `toolbar`   | Buttons or other elements in the title bar toolbar |
+| Slot        | Description                                                     |
+|-------------|-----------------------------------------------------------------|
+| default     | Panel content (shown when expanded)                             |
+| `toolbar`   | Buttons or other elements in the title bar toolbar (hidden when collapsed by default; set `keep-toolbar` to always show) |
 
 ### Events
 
@@ -113,6 +114,20 @@ A lightweight, minimal style with a horizontal line running through the title te
 - The line is visible between the title text and toolbar buttons
 - Useful for section headers or metadata display
 
+### `tree` variant
+
+A VS Code explorer / Outline style with a minimal inline title bar:
+
+```html
+<ixfx-panel title="Explorer" variant="tree" icon-name="folder">
+  <p>Content here</p>
+</ixfx-panel>
+```
+
+- Caret is shown first, followed by the icon and title inline (no debossed line)
+- Transparent background and border; minimal padding
+- Toolbar is hidden when the panel is collapsed — set `keep-toolbar` to always show it
+
 ---
 
 ## Vertical orientation
@@ -189,18 +204,19 @@ Use the `collapsed` attribute to start the panel in collapsed state:
 
 ## `ixfx-panel-group`
 
-A container component that manages multiple panels with exclusive open behavior (accordion style).
+A container component that manages multiple panels with flexible open behavior.
 
 ### Properties / attributes
 
 | Attribute / Property   | Type                                              | Default        | Description                                                   |
 |------------------------|---------------------------------------------------|----------------|---------------------------------------------------------------|
+| `accordion`            | boolean                                           | `false`        | Restrict to one open panel at a time                         |
+| `allow-reorder`        | boolean                                           | `false`        | Enable drag-and-drop reordering of panels via their titlebars |
+| `collapsible`          | boolean                                           | `true`         | Collapse behaviour propagated to child panels                |
+| `gap`                  | string                                            | (unset)        | Explicit gap between panels; sets `--group-gap` when provided |
 | `orientation`          | `'horizontal'` \| `'vertical'`                   | `'horizontal'` | Layout direction of the group                                 |
-| `variant`              | `'titlebar'` \| `'midline'`                       | `'titlebar'`   | Visual style applied to all child panels                     |
 | `toggle-interaction`   | `'implicit'` \| `'explicit'` \| `'disabled'`     | `'implicit'`   | Toggle behavior applied to all child panels                   |
-| `allow-multiple`       | boolean                                           | `false`        | Allow multiple panels to be open simultaneously              |
-| `collapsible`          | boolean                                           | `true`         | Collapse behaviour propagated to child panels                |
-| `gap`                  | string                                            | `'var(--space-m)'` | CSS gap between panels                                     |
+| `variant`              | `'titlebar'` \| `'midline'` \| `'tree'`          | `'titlebar'`   | Visual style applied to all child panels                     |
 
 ### Group orientation vs child panel orientation
 
@@ -231,14 +247,53 @@ Explicit attributes on child panels take precedence over group-propagated values
 </ixfx-panel-group>
 ```
 
-By default, only one panel can be open at a time. Set `allow-multiple` to allow multiple panels to be open:
+By default, multiple panels can be open at the same time. Add `accordion` to restrict it to one open panel at a time:
 
 ```html
-<ixfx-panel-group orientation="horizontal" allow-multiple>
+<ixfx-panel-group orientation="horizontal" accordion>
   <!-- panels -->
 </ixfx-panel-group>
 ```
 
+### Reordering
+
+Set `allow-reorder` to let users rearrange panels by dragging their titlebars (pointer-only in v1; keyboard reorder is not included):
+
+```html
+<ixfx-panel-group orientation="vertical" allow-reorder>
+  <ixfx-panel title="Panel 1">...</ixfx-panel>
+  <ixfx-panel title="Panel 2">...</ixfx-panel>
+</ixfx-panel-group>
+```
+
+Dragging starts anywhere on the titlebar except interactive chrome (buttons, toolbar slot, caret/close) — those controls always win over dragging. A drop-caret marks the insertion point and a floating ghost styled like the titlebar follows the pointer. Text selection is suppressed for the duration of the drag. Press <kbd>Esc</kbd> to abort a drag. The trailing click after a real reorder is swallowed so the panel doesn't also collapse/expand.
+
+#### Events
+
+| Event     | Detail                                          | Description                          |
+|-----------|-------------------------------------------------|--------------------------------------|
+| `reorder` | `{ fromIndex, toIndex, panel }`                 | Fired after panels are reordered     |
+
+`fromIndex` / `toIndex` are positions in the group's real light-DOM `children` (which may include non-panel elements), not positions in the filtered panel list.
+
+```js
+group.addEventListener('reorder', e => {
+  console.log('Moved from', e.detail.fromIndex, 'to', e.detail.toIndex);
+});
+```
+
+### Group gap
+
+The space between panels is controlled by the `--group-gap` CSS custom property, falling back to `var(--space-l)` when unset:
+
+```css
+ixfx-panel-group {
+  --group-gap: var(--space-xl);
+}
+```
+
+Alternatively set the `gap` property/attribute for the same effect (it mirrors its value into `--group-gap`).
+
 ### Group-propagated properties
 
 When you set `variant`, `toggle-interaction` or `collapsible` on the group, those values are automatically applied to all child panels that don't have an explicit value set. This simplifies declaration when all panels in a group share the same styling:
@@ -256,7 +311,7 @@ When you set `variant`, `toggle-interaction` or `collapsible` on the group, thos
 ## TypeScript types
 
 ```ts
-import type { PanelOrientation, PanelVariant, PanelToggleInteraction, PanelToggleDetail, PanelGroupOrientation } from 'ixfxfun-components';
+import type { PanelOrientation, PanelVariant, PanelToggleInteraction, PanelToggleDetail, PanelGroupOrientation, PanelGroupReorderDetail } from 'ixfxfun-components';
 // Canonical titlebar types (Panel* are aliases):
 import type { TitlebarOrientation, TitlebarVariant, TitlebarToggleInteraction, TitlebarToggleDetail } from 'ixfxfun-components';
 ```

package/docs-user/titlebar.md

@@ -23,7 +23,7 @@ Standalone titlebar chrome extracted from `ixfx-panel`: title text, icon, toolba
 | `title`                  | string                                            | `''`           | Title text                                                      |
 | `icon-name`              | string                                            | `''`           | Icon name from the registry                                     |
 | `orientation`            | `'horizontal'` \| `'vertical'`                    | `'horizontal'` | Layout direction of the bar                                     |
-| `variant`                | `'titlebar'` \| `'midline'`                       | `'titlebar'`   | Visual style (same variants as `ixfx-panel`)                    |
+| `variant`                | `'titlebar'` \| `'midline'` \| `'tree'`             | `'titlebar'`   | Visual style (same variants as `ixfx-panel`)                    |
 | `closable`               | boolean                                           | `false`        | Shows a close button that fires `close`                         |
 | `collapsible`            | boolean                                           | `false`        | Shows the caret and enables toggle behaviour (opt-in)           |
 | `collapsed`              | boolean                                           | `false`        | Collapsed state (controls caret rotation / label)               |
@@ -79,11 +79,10 @@ Built-in icon names: `check`, `chevron-down`, `chevron-right`, `close`.
 
 ## Visual variants
 
-Same `titlebar` (default) and `midline` styles as `ixfx-panel`, including vertical orientation support:
+Same `titlebar` (default) and `midline` styles as `ixfx-panel`, including vertical orientation support. The `tree` variant renders caret, icon and title in a compact inline layout with transparent chrome, matching VS Code explorer / Outline style:
 
 ```html
-<ixfx-titlebar title="Settings" variant="midline" icon-name="settings" collapsible></ixfx-titlebar>
-<ixfx-titlebar title="Device" orientation="vertical" icon-name="server" collapsible></ixfx-titlebar>
+<ixfx-titlebar title="Explorer" variant="tree" icon-name="folder" collapsible></ixfx-titlebar>
 ```
 
 ---

package/docs-user/tree.md

@@ -367,7 +367,28 @@ Keyboard navigation follows the crumb path. Arrow keys move between breadcrumb s
 
 ## Incremental search
 
-Wire up a text input to filter and highlight matching nodes using `IncrSearchTreeController`:
+`ixfx-tree-list` and `ixfx-miller-list` have a **built-in type-ahead popover**
+with three modes:
+
+- **navigate** — expands the match's ancestors and moves the cursor to it; ↑/↓
+  cycle between matches; Enter activates and closes.
+- **select** — the selection becomes the set of matching nodes.
+- **filter** — non-matching nodes (and branches with no matching descendant) are
+  hidden; branches with a match auto-expand so the match is visible.
+
+No default shortcut — open it via a command on `el.registry`:
+
+```typescript
+el.registry.invoke('list.search.navigate'); // or .select / .filter
+```
+
+Limit the offered modes with the `search-modes` attribute
+(`search-modes="navigate filter"`). Full model: [`docs/infra-incremental.md`](../../docs/infra-incremental.md).
+
+### Deprecated: `IncrSearchTreeController`
+
+The external-`<input>` filter-only controller still works but is superseded by
+the built-in popover.
 
 ```typescript
 import { IncrSearchTreeController } from '@ixfx/components';

package/docs-user/vertical-list.md

@@ -504,7 +504,13 @@ The element must be focused (click it or tab to it) before keyboard navigation w
 
 ## Incremental search
 
-Press **Ctrl+F** (or **Cmd+F**) to open the search overlay. Typing filters items in real time using fuzzy matching. Matched text in plain `<li>` items is highlighted via the [CSS Highlight API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API).
+A built-in type-ahead popover with three modes — **navigate** (cursor jumps to the best match, ↑/↓ cycle), **select** (matches become the selection), **filter** (non-matches hidden). See [`docs/infra-incremental.md`](../../docs/infra-incremental.md) for the full model, conversions between modes, and the `search-modes` attribute.
+
+There is **no default shortcut**. Open it by invoking one of the commands on `list.registry`:
+
+```typescript
+list.registry.invoke('list.search.filter');   // or .navigate / .select
+```
 
 ### Adding the page-level highlight rule
 

package/llms.txt

@@ -30,7 +30,7 @@ import '@ixfx/components/data-grid';
 - [labelled-radial-input](docs-user/labelled-radial-input.md): A composite radial input that pairs an editable label (`ixfx-editable-number`) with a rotary dial (`ixfx-radial-input`). The two controls are always in sync — turning the dial updates the number, and 
 - [labelled-range-input](docs-user/labelled-range-input.md): A composite range input that pairs an editable label (`ixfx-editable-number`) with a slider (`ixfx-range-input`). The two controls are always in sync — dragging the slider updates the number, and edit
 - [labelled-slider-input](docs-user/labelled-slider-input.md): A composite slider input that pairs an editable label (`ixfx-editable-number`) with a slider (`ixfx-slider-input`). The two controls are always in sync — dragging the slider updates the number, and ed
-- [led](docs-user/led.md): An LED indicator component with color mixing and optional blinking animation.
+- [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.
 - [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.

package/package.json

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"data-grid-BddUjAti.d.ts","names":[],"sources":["../src/data-grid/types.ts","../src/data-grid/data-grid.ts"],"mappings":";;;KAAY;KACA;KACA;KACA;WAA+B;WAAsB,WAAW;;KAChE;KAEA,sBAAsB;WACvB,KAAK;WACL,QAAQ,eAAe;WACvB;WACA;WACA;EACT,SAAS;EACT;;KAEU,sBAAsB,gBAAgB,KAAK,sBAAsB;KAEjE,eAAe;EACzB;EACA;EACA;EACA;EACA;EACA;EACA;EACA,UAAU,GAAG,GAAG,GAAG;EACnB;EACA;EACA;EACA,YAAY,KAAK,GAAG,KAAK,eAAe,IAAI;EAC5C;EACA;EACA;EACA,SAAS,qBAAqB,sBAAsB;EACpD,gBAAgB;IAAyB;IAAe;;EACxD,aAAa,gBAAgB,KAAK,GAAG,KAAK,eAAe;;KAG/C,mBAAmB,gBAAgB,oBAAoB;KAEvD;KAEA;KACA;EAA4B;;KAE5B,kBAAkB,MAAM,KAAK,GAAG;KAChC,gBAAgB,gBAAgB,KAAK;KACrC,sBAAsB,kBAAkB;;KAGxC;;;KCrCA;WAAgC,MAAM;WAA4B,UAAU;;KAC5E,oBAAoB,YAAY;KAChC;WAAkC,cAAc;WAA8B,UAAU;;KACxF,sBAAsB,YAAY;KAClC;WAAyC;WAAuB;WAAqB,kBAAkB;;KACvG,6BAA6B,YAAY;KACzC;WAAwC;WAAsB;;KAC9D,4BAA4B,YAAY;KACxC;WAA4C;WAAsB;;KAClE,gCAAgC,YAAY;KAC5C;WAAqC;WAAyB;WAAyB;WAA2B;;KAClH,yBAAyB,YAAY;KACrC;WAAoC;WAAyB;WAAyB;WAA4B;;KAClH,wBAAwB,YAAY;KAEpC;WAAuC,SAAS;;KAChD,2BAA2B,YAAY;UAClC;EACf,iBAAiB;EACjB,mBAAmB;EACnB,2BAA2B;EAC3B,0BAA0B;EAC1B,8BAA8B;EAC9B,uBAAuB;EACvB,sBAAsB;EACtB,yBAAyB;;cAId,wBAAwB;;SACnB,sBAAM;EAoGK,SAAS;EACT;EAC8B,eAAe;EACb,iBAAiB;EAC5C,WAAW;EACU;EACrB,WAAW;EACX,oBAAoB;EACpB,sBAAsB,cAAc,KAAK;EAC9B,aAAa;EAExB,SAAS;EACiB;EAC1B,YAAY;;EAEZ;EACgD;;;;;;EAM1B,YAAY;EAClC,kBAAkB;UAC1C;UAES;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UAEW;UACK;UAEzB;UAKA;UACA;UACA;UAMA;UACA;UACA;UACA;UAGA;EAEC;EAQA;UAWD;YAgBW;YAaA,QAAQ,SAAS;YAmBjB,WAAW,SAAS;UA4D/B;UAQA;UAiCA;UAOA;UAoBA;UAYA;UAcA;UA0BA;UAKA;UAMA;UAsFA;UAYA;UAEA;UAcA;;MAQJ,gBAAgB;;MAKhB,aAAa,MAAM;;;;;;;EAUvB,WAAW,MAAM;;MA0Bb;;EAKJ,UAAU;;;;;;;;EAcV,WAAW;UA8CH;UAiBA;UAsBA;UAmCA;UAsKA;UAUA;UAKA;UAQA;;EAeR,UAAU,gBAAgB;;EAK1B,aAAa;EAWb;EAIA,mBAAmB,mBAAmB,aAAa,8BAA8B,6BAA6B,UAAU;UAkBhH;UAWA;UAYA;UAyBA;UACA;UA2BA;UAYA;UAkCA;EAoBR;IAAqB;IAAkB;IAAgB;IAAkB;;UASjE;UAaA;YAQW,wBAAM;;QAyMnB;YACI;IAAwB,kBAAkB;;;UAErC;EACf,oBAAoB,gBAAgB,yBAAyB,MAAM,GAAG,WAAW,MAAM,iBAAiB,OAAO,wBAAwB,aAAa,oBAAoB,sCAAsC,cAAc,UAAU,oCAAoC,oBAAoB;EAC9R,uBAAuB,gBAAgB,yBAAyB,MAAM,GAAG,WAAW,MAAM,iBAAiB,OAAO,wBAAwB,aAAa,oBAAoB,mCAAmC,cAAc,UAAU,oCAAoC,oBAAoB"}

package/dist/detail-list-Br0WAnry.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"detail-list-Br0WAnry.d.ts","names":[],"sources":["../src/detail-list/types.ts","../src/detail-list/detail-list.ts"],"mappings":";;;;;;;;KACY;;KAGA;WACD,SAAS;WACT;WACA;;;KAIC,wBAAwB,GAAG,gBAAgB,GAAG;;KAG9C,mBAAmB,eAAe,2BAA2B;;;;;;;;;;;;;;;;;;;;cCqD5D,0BAA0B;;EAErC,eAAe;EAGf,iBAAiB;EAGjB,MAAM;EAGN;EAGA,gBAAgB;EAGhB;EAGA,UAAU;EAGV;EAGA,WAAW;EAGX;EAGA;EAGA,mBAAmB,IAAI;;;;;;EAQvB;;EAIA,oBAAoB,gCAAgC;UAEnC;UACA;UAGT;UAGA;mBAgBS;UAeT;EAcC;EA0DA;EAgBA;EAmBA,QAAQ,SAAS;;MAkCtB,gBAAgB;;MAKhB,iBAAiB,YAAY;;;;;;EASjC;EAIA,QAAQ,MAAM,kBAAkB,UAAU;;;;;EAuB1C,WAAW,MAAM,UAAU;;EAW3B,YAAY,OAAO,SAAS,WAAW;EAIvC;;;;;EAYA,SAAS,gBAAgB;;;;;EAgBzB,YAAY,MAAM;;EAKlB,SAAS,YAAY,WAAW,QAAQ;EAExC,OAAO,MAAM;EAIb,WAAW,OAAO,SAAS;EAI3B,SAAS,MAAM;EAIf;EAIA;;MAQI,gBAAgB;;MAKhB;;EAMJ,WAAW,MAAM;;EAKjB,gBAAgB,MAAM;;EAKtB,mBAAmB,MAAM;;EAKzB,SAAS;EAgBP,eAAe,0CAA0C,UAAU;UAoa7D;;;;;;;;;EAkBF,kBAAkB;UAwBhB;UAMA;UAgCA;UAiBA;;;;;;;UA2DA;;UAoBA;UAcA;UAYA;UAQA;UAKA;UASA;UAMA;UAIA;UAuFA;UASA;UAMA;UAKA;UAQA;UAMA;SA0CQ,sBAAM;EAuKb,wBAAM;;QAiCT;YACI;IACR,oBAAoB;;YAGZ,4BAA4B"}