@ixfx/components 0.7.3 → 0.7.4

package/docs-user/data-grid.md

@@ -65,6 +65,30 @@ grid.getRowKey = (row, i) => row.key ?? row.id ?? String(i);
 
 Reassign `rows` to update. Sorting is derived from `sortState`.
 
+When the row set changes without a wholesale replace — rows spliced in, rows
+filtered out — the new rows fade in and, for ~0.3s afterwards, every row slides
+to its new position instead of snapping (so an inserted row's neighbours make
+room and a removed row's gap closes). Skipped under `prefers-reduced-motion:
+reduce`; timing is `--data-grid-row-move-duration` (default `200ms`).
+
+### Streaming appends — `appendRows()`
+
+Reassigning `rows` re-runs `_applySort([...rows])` + `_rebuildFlat()` every
+time — O(n log n) per batch, quadratic over a full load. When feeding the grid
+from a stream (paged fetch, incremental scan), use `appendRows()` instead:
+
+```ts
+for await (const batch of stream) {
+  grid.appendRows(batch);
+}
+```
+
+It still sets `rows` to a new array reference (reactivity preserved) but
+**bypasses the `rows` setter's full rebuild** — the derived arrays are extended
+over the appended slice only. When a sort is active the new rows show unsorted
+for one frame, then a single coalesced re-sort runs. Scroll position, selection
+and cursor are preserved across the append.
+
 ---
 
 ## Selection & interaction
@@ -76,7 +100,19 @@ Reassign `rows` to update. Sorting is derived from `sortState`.
 
 See `ixfx-vertical-list` README for mode table. Data-grid adds checkbox column in `checked` mode.
 
-Programmatic: selection is `Set<string>` of row keys (`_selectedKeys` private, read via events).
+### Programmatic selection & cursor
+
+```ts
+grid.selectedKeys;                 // ReadonlySet<string> of selected row keys
+grid.selectedKeys = ['r3', 'r7'];  // replace (clamped to known rows, single-mode keeps the last)
+grid.selectKeys(['r3', 'r7']);     // alias of the setter
+
+grid.tickleRow('r7');              // move the row cursor + scroll it into view
+grid.tickledKey;                   // row key under the cursor, or undefined
+```
+
+The setter fires `datagrid-select` `{ selectedKeys, previous }` only when the
+selection actually changes.
 
 ---
 
@@ -194,6 +230,10 @@ Demo: `Score` is random float `0–100` with 0–3 decimals, `align:'right'`, `f
 
 Gear menu (`ixfx-menu-trigger` placement `bottom-end`, `inset-area: block-end span-inline-end`) lists `Columns` (check-items) and `Group by` (radio). Toggle visibility via `col.visible=false` or menu. Event: `datagrid-column-visibility` `{key, visible}`.
 
+`column-menu` attribute: `auto` (default) renders the gear menu; `none`
+suppresses it entirely. `col.visible` + `datagrid-column-visibility` still give
+full external control, so `none` lets a host own the column-visibility UI.
+
 Other events: `datagrid-column-reorder` `{from,to,columns}`, `datagrid-column-resize` `{key,width}`, `datagrid-cell-click` `{rowKey,colKey,rowIndex,colIndex}`, `datagrid-cell-edit` `{rowKey,colKey,oldValue,newValue}`.
 
 ---
@@ -218,6 +258,7 @@ Grid is focusable (`tabindex=0`). When not editing:
 | Variable | Default | Description |
 |---|---|---|
 | `--data-grid-row-height` | `28px` | Row height |
+| `--data-grid-row-move-duration` | `200ms` | Insertion / removal animation duration |
 | `--data-grid-header-height` | `32px` | Header height |
 | `--data-grid-bg` | `var(--surface-3)` | Grid background |
 | `--data-grid-header-bg` | `var(--surface-2)` | Header background |
@@ -239,10 +280,18 @@ No `::part` exports yet (header/row/cell are shadow-internal).
 | `startRowEdit` | `(rowKey)` | Open row editors |
 | `stopEdit` | `()` | Cancel editors |
 | `getVisibleRange` | `()=>{startRow,endRow,startCol,endCol}` | Virtual window |
+| `appendRows` | `(rows)` | Add rows without a full re-sort/rebuild — for streaming |
+| `selectKeys` / `set selectedKeys` | `(keys)` | Replace the selection by row key |
+| `tickleRow` | `(key)` | Move the row cursor and scroll it into view |
+
+| Getter | Type | |
+|---|---|---|
+| `selectedKeys` | `ReadonlySet<string>` | Selected row keys |
+| `tickledKey` | `string \| undefined` | Row key under the cursor |
 
 ---
 
 ## Demo
 
-`demo/data-grid.html` + `demo/data-grid.ts`: 200 rows, `Department` random, `Score` float, `Name`/`Department` editable (`user` mode, slow double-click; `Tab`/`Up`/`Down` navigation; `Enter` from tickled row). Controls: Selection/Interaction/Group by/Editability + `Edit first row` (manual).
+`demo/data-grid.html` + `demo/data-grid.ts`: 200 rows, `Department` random, `Score` float, `Name`/`Department` editable (`user` mode, slow double-click; `Tab`/`Up`/`Down` navigation; `Enter` from tickled row). Controls: Selection/Interaction/Group by/Editability/`column-menu` + `Edit first row` (manual), a `Stream +5,000 rows` button (`appendRows`), and `selectKeys` / `tickleRow` buttons.
 

package/docs-user/detail-list.md

@@ -87,8 +87,17 @@ list.addItem('Image 01.png');
 const li = document.createElement('li');
 li.textContent = 'Custom item';
 list.addItem(li);
+
+// removeItem / removeItems return a Promise that resolves once the row is gone
+list.removeItems(list.selectedItems);
 ```
 
+Rows added mid-list collapse + fade in; `removeItem` / `removeItems` collapse +
+fade them out before detaching, so the rows around them slide to make or close
+the gap. A bulk populate isn't animated, and it's all skipped under
+`prefers-reduced-motion: reduce` (`--ixfx-list-item-move-duration`, default
+`200ms`).
+
 ---
 
 ## Item types
@@ -191,6 +200,35 @@ list.clearSelection();     // Clear all selections
 list.selectAll();          // Select all visible items (if permitted)
 ```
 
+### Key-based selection
+
+`Element` references die when the item set is rebuilt (re-fetch, re-sort,
+filter). Drive selection by a stable **`data-key`** (or `data-value`) instead —
+the Element API is unchanged, the key API is additive. Object items built from
+`items` / a provider get their key stamped automatically from `keyProperty`.
+
+```typescript
+list.selectKeys(['row-3', 'row-7']);   // replace selection; unknown keys ignored
+list.addSelectedKeys(['row-9']);       // multi-select modes only
+list.removeSelectedKeys(['row-3']);
+list.selectedKeys;                     // ReadonlySet<string>
+
+list.focusKey('row-7');                // move cursor to an item + scroll into view
+list.tickledKey;                       // key under the cursor, or undefined
+
+list.addEventListener('list-select', ({ detail }) => {
+  console.log([...detail.selectedKeys]);   // carried alongside detail.selected
+});
+```
+
+Restore a selection across a data reload:
+
+```typescript
+const keep = [...list.selectedKeys];
+list.items = await fetchRows();         // Element refs are stale...
+list.selectKeys(keep);                  // ...keys still resolve
+```
+
 ---
 
 ## Interaction modes

package/docs-user/grid-list.md

@@ -0,0 +1,274 @@
+# `ixfx-grid-list`
+
+A virtualised grid of items — thumbnails, cards, or arbitrary slotted markup —
+with selection, keyboard navigation, and captions. Windowed rendering keeps the
+DOM small regardless of item count; the same component does a wrapping grid, a
+single vertical column, or a horizontally-scrolling strip.
+
+---
+
+## Contents
+
+1. [Quick start](#quick-start)
+2. [Items & keys](#items--keys)
+3. [Sizing & layout](#sizing--layout)
+4. [Captions](#captions)
+5. [Orientation](#orientation)
+6. [Selection](#selection)
+7. [Cursor](#cursor)
+8. [Events](#events)
+9. [Keyboard](#keyboard)
+10. [Virtualisation](#virtualisation)
+11. [CSS parts](#css-parts)
+12. [Choosing a list component](#choosing-a-list-component)
+
+---
+
+## Quick start
+
+```html
+<ixfx-grid-list id="grid" selection-mode="single" item-size="120" gap="8">
+  <div class="tile" data-key="a" data-label="Apple">🍎</div>
+  <div class="tile" data-key="b" data-label="Banana">🍌</div>
+  <div class="tile" data-key="c" data-label="Cherry">🍒</div>
+</ixfx-grid-list>
+
+<script type="module">
+  import '@ixfx/components/grid-list';
+
+  const grid = document.querySelector('#grid');
+  grid.addEventListener('list-select', ({ detail }) => {
+    console.log([...detail.selectedKeys]);
+  });
+</script>
+```
+
+Items are **light-DOM children**. Each is projected into its own virtualised
+cell via a named `<slot>`. Add or remove children at any time — a
+`MutationObserver` picks the change up and re-renders.
+
+```typescript
+import type { GridListElement } from '@ixfx/components/grid-list';
+
+const grid = document.querySelector<GridListElement>('#grid')!;
+for (const item of data) {
+  const el = document.createElement('div');
+  el.className = 'tile';
+  el.dataset.key = item.id;
+  el.dataset.label = item.name;
+  el.textContent = item.glyph;
+  grid.appendChild(el);
+}
+```
+
+---
+
+## Items & keys
+
+| Item attribute | Purpose |
+|---|---|
+| `data-key` (or `data-value`) | Stable identity — for key-based selection, `focusKey`, and `visibleKeys()`. Recommended on every item. |
+| `data-label` | Caption text (see [Captions](#captions)). Alternatively put the text in a `[data-grid-list-caption]` descendant. |
+| `not-checked` | Item can't be tickled / checked (skipped by the cursor). |
+| `hidden` | Item is excluded from layout and navigation. |
+
+---
+
+## Sizing & layout
+
+| Property / attribute | Default | Description |
+|---|---|---|
+| `itemSize` / `item-size` | `160` | Cell width in px. Also the square's height for `separate` / `under` / `overlaid` / `hidden`. |
+| `gap` | `8` | Gap between cells, px. |
+| `captionHeight` / `caption-height` | `24` | Height reserved for the caption band in `separate` / `under`. |
+
+Values are clamped and rounded. Changing `item-size` / `gap` re-anchors the
+scroll on the item nearest the viewport centre (zoom stays put rather than
+jumping to the top-left corner).
+
+---
+
+## Captions
+
+`caption-style` — how the caption relates to the content:
+
+| value | layout |
+|---|---|
+| `hidden` | No caption. Cell height = `item-size`. |
+| `separate` | Content in a square; caption a **detached** label below it. Square and caption highlight independently (macOS Finder icon view). |
+| `under` (default) | One box: content on top, caption strip **inside** it below. One selection outline. |
+| `overlaid` | Caption floats over the content. |
+
+`caption-align` — `left` \| `middle` (default) \| `right`. Text alignment; also
+positions the pill in `separate`.
+
+`overlaid` only:
+
+- `caption-position` — `top` \| `middle` \| `bottom` (default).
+- `caption-backdrop` — `scrim` (default, flat translucent panel) \| `gradient`
+  (fades away from the caption edge) \| `blur` (frosted) \| `none` (text +
+  shadow, no panel).
+
+```html
+<ixfx-grid-list caption-style="separate" caption-align="left"></ixfx-grid-list>
+<ixfx-grid-list caption-style="overlaid" caption-position="top" caption-backdrop="gradient"></ixfx-grid-list>
+```
+
+---
+
+## Orientation
+
+`orientation`:
+
+| value | layout | scrolls |
+|---|---|---|
+| `grid` (default) | wraps across as many columns as fit | vertically |
+| `row` | a single row of items | **horizontally** |
+| `column` | a single column of items | vertically |
+
+`row` is the virtualised horizontal strip; `column` is the recommended
+large-list replacement for `ixfx-vertical-list`.
+
+---
+
+## Selection
+
+`selection-mode` (`none` \| `single` \| `multiple`) and `interaction-mode`
+(`standard` \| `implicit` \| `manual` \| `checked` \| `sticky` \| `vscode`) match
+the other list components — see the `ixfx-vertical-list` README for the mode
+table.
+
+### Element API
+
+```typescript
+grid.select(el);              // replace with one item
+grid.selectMany([a, b]);      // selection-mode="multiple" only
+grid.deselect(el);
+grid.clearSelection();
+grid.selectAll();
+grid.selectedItems;           // ReadonlySet<Element>
+```
+
+### Key-based selection
+
+`Element` references die when the item set is rebuilt. With a `data-key` on each
+item, drive selection by key instead — additive, the Element API is unchanged.
+
+```typescript
+grid.selectKeys(['a', 'c']);        // replace; unknown keys ignored
+grid.addSelectedKeys(['b']);        // multi-select modes only
+grid.removeSelectedKeys(['a']);
+grid.selectedKeys;                  // ReadonlySet<string>
+
+grid.addEventListener('list-select', ({ detail }) => {
+  console.log([...detail.selectedKeys]);   // alongside detail.selected
+});
+```
+
+Restore across a reload:
+
+```typescript
+const keep = [...grid.selectedKeys];
+grid.replaceChildren(...(await fetchTiles()));
+grid.selectKeys(keep);
+```
+
+---
+
+## Cursor
+
+The "tickled" cursor follows hover (mouse) or arrow keys (keyboard).
+
+```typescript
+grid.focusKey('b');      // move the cursor to an item and scroll it into view
+grid.tickledKey;         // key under the cursor, or undefined
+```
+
+---
+
+## Events
+
+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 |
+
+---
+
+## Keyboard
+
+| Key | `grid` | `row` / `column` |
+|---|---|---|
+| `ArrowLeft` / `ArrowRight` | ∓1 item | ∓1 item |
+| `ArrowUp` / `ArrowDown` | ∓/± one row | ∓1 item |
+| `Home` / `End` | first / last | first / last |
+| `PageUp` / `PageDown` | ± one screen of rows | ± one screen of items |
+| `Enter` | activate | activate |
+| `Space` | toggle selection | toggle selection |
+| `Escape` | clear selection | clear selection |
+| `Ctrl` / `Cmd` + `A` | select all (multi modes) | select all (multi modes) |
+
+---
+
+## Virtualisation
+
+Only the cells in (or near) the viewport are in the DOM.
+
+```typescript
+grid.count;             // total items
+grid.renderedCount;     // cells currently in the shadow DOM
+grid.visibleKeys();     // data-key of items in the current window
+```
+
+`grid-list` handles tens of thousands of children in every orientation.
+
+---
+
+## Scroll fade & insertion animation
+
+The scrollable edge is fade-masked whenever there's more content that way — a
+zero-JS `scroll-timeline` mask (`scroll-fade-y` for `grid` / `column`,
+`scroll-fade-x` for `row`). See `docs/infra-theming.md` → *Scroll Fade*; tune the
+reach with `--scroll-fade-width` (default `30px`).
+
+When the child list changes **mid-list** (not a first populate or a wholesale
+`replaceChildren`), the cells slide to their new position rather than snapping —
+so an inserted item's neighbours make room and a removed item's gap closes — and
+a freshly inserted cell also fades in. The transition is confined to a short
+window after the mutation, so it never fires during scroll virtualisation, and
+it's suppressed under `prefers-reduced-motion: reduce`. Duration:
+`--grid-list-item-move-duration` (default `200ms`).
+
+---
+
+## CSS parts
+
+| Part | Element |
+|---|---|
+| `viewport` | The scroll container |
+| `item` | A cell |
+| `thumb` | The square holding the slotted content |
+| `caption` | The caption element (absent for `caption-style="hidden"`) |
+
+Host CSS custom properties: `--grid-list-item-bg`, `--grid-list-radius`,
+`--grid-list-gap`, `--grid-list-item-move-duration` (insertion animation,
+default `200ms`), `--scroll-fade-width` (edge fade reach, default `30px`), plus
+the shared `--item-bg-*` / `--accent` theme tokens.
+
+---
+
+## Choosing a list component
+
+- **Large lists** — prefer `ixfx-grid-list` with `orientation="column"` over
+  `ixfx-vertical-list`. `vertical-list` renders every child; `grid-list` is
+  windowed.
+- **Small, declarative, richly-slotted lists** — `ixfx-vertical-list` stays the
+  simpler choice.
+- **Horizontal virtualised strip** — `ixfx-grid-list` with `orientation="row"`.
+- **Tabular data with columns / sort / grouping / inline edit** —
+  `ixfx-data-grid`.

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.7.3",
-  "generated": "2026-09-06T18:27:10.873Z",
+  "version": "0.7.4",
+  "generated": "2026-09-08T16:59:30.569Z",
   "components": [
     {
       "name": "ac-text",
@@ -63,6 +63,11 @@
       "summary": "Primitives for typical form layout with responsive label positioning and data binding.",
       "path": "docs-user/form.md"
     },
+    {
+      "name": "grid-list",
+      "summary": "A virtualised grid of items — thumbnails, cards, or arbitrary slotted markup —",
+      "path": "docs-user/grid-list.md"
+    },
     {
       "name": "grouped-item-lister",
       "summary": "A meta-component that renders a typed item list using any sub-component you supply. Items can be displayed in a single sub-component (_ungrouped_ mode) or split into labelled groups, each with its own",

package/docs-user/llms.txt

@@ -23,6 +23,7 @@ import '@ixfx/components/data-grid';
 - [dock](docs-user/dock.md): Dockable, movable panels like VS Code / Photoshop. Drag a panel by its
 - [editable-label](docs-user/editable-label.md): Inline editable text components. `ixfx-editable-number` extends `ixfx-editable-label` with drag-to-adjust and fill-bar visualization.
 - [form](docs-user/form.md): Primitives for typical form layout with responsive label positioning and data binding.
+- [grid-list](docs-user/grid-list.md): A virtualised grid of items — thumbnails, cards, or arbitrary slotted markup —
 - [grouped-item-lister](docs-user/grouped-item-lister.md): A meta-component that renders a typed item list using any sub-component you supply. Items can be displayed in a single sub-component (_ungrouped_ mode) or split into labelled groups, each with its own
 - [icons](docs-user/icons.md): A centralized SVG icon system for `@ixfx/components`. Icons are stored by name, can be overridden globally, and all components that use a given icon re-render automatically when it changes.
 - [incr-search](docs-user/incr-search.md): Utilities for incremental (type-ahead) search over data collections or DOM-backed lists.

package/docs-user/tree.md

@@ -463,6 +463,18 @@ Each column is a separate `role="listbox"` with `aria-label` showing the parent
 
 ---
 
+## Row animation
+
+Rows that appear — a branch expanded, a node added to `root` / the model —
+collapse + fade in, and the rows below slide down to make room. Rows that
+disappear — a branch collapsed, a node removed — are kept as fading "ghost" rows
+until they've collapsed out, so the gap closes smoothly. Above ~50 rows changing
+at once the animation is skipped, as it is entirely under
+`prefers-reduced-motion: reduce`. Duration: `--ixfx-list-item-move-duration`
+(default `200ms`).
+
+---
+
 ## CSS variables
 
 ### Shared / themed
@@ -493,6 +505,7 @@ These are set by the global theme and inherited by all tree components.
 | `--tree-indent` | `20px` | Indentation per depth level |
 | `--tree-item-height` | `28px` | Height of each row |
 | `--tree-caret-size` | `10px` | Expand/collapse caret size |
+| `--ixfx-list-item-move-duration` | `200ms` | Row enter / leave animation duration |
 
 ### `ixfx-miller-list` specific
 

package/docs-user/vertical-list.md

@@ -313,13 +313,21 @@ list.addItem(myElement);
 // In checked mode, add a row that shows no checkbox and can't be checked
 list.addItem('Header', { notChecked: true });
 
-// Remove a specific element
+// Remove a specific element (returns a Promise that resolves once it's gone)
 list.removeItem(element);
+list.removeItems(list.selectedItems);
 
 // Remove all items and clear selection
 list.clearItems();
 ```
 
+Items added mid-list — via `addItem`, a direct `appendChild`, or a framework
+binding — collapse + fade in, and the rows below slide down to make room.
+`removeItem` / `removeItems` play the reverse (collapse + fade out) and then
+detach, so the gap closes smoothly. A bulk populate isn't animated, and
+everything is skipped under `prefers-reduced-motion: reduce`. Tune the timing
+with the `--ixfx-list-item-move-duration` custom property (default `200ms`).
+
 ### Reading the selection
 
 ```typescript
@@ -341,6 +349,48 @@ list.addEventListener('list-select', ({ detail }) => {
 });
 ```
 
+### Key-based selection
+
+`Element` references die the moment you rebuild the item set (re-fetch, external
+re-sort, filter). Give each item a **`data-key`** (or `data-value`) and drive
+selection by that stable string instead. The Element API keeps working
+unchanged — the key API is additive.
+
+```html
+<ixfx-vertical-list selection-mode="multiple">
+  <li data-key="a">Apple</li>
+  <li data-key="b">Banana</li>
+  <li data-key="c">Cherry</li>
+</ixfx-vertical-list>
+```
+
+```typescript
+list.selectKeys(['a', 'c']);          // replace selection; unknown keys ignored
+list.addSelectedKeys(['b']);          // multi-select modes only
+list.removeSelectedKeys(['a']);
+list.selectedKeys;                    // ReadonlySet<string>, e.g. Set { 'b', 'c' }
+
+list.focusKey('b');                   // move the cursor to an item + scroll it into view
+list.tickledKey;                      // key under the cursor, or undefined
+
+// list-select carries keys too
+list.addEventListener('list-select', ({ detail }) => {
+  console.log([...detail.selectedKeys]);
+});
+```
+
+Restore a selection across a data reload:
+
+```typescript
+const keep = [...list.selectedKeys];
+list.setItems(await fetchRows());     // Element refs are now stale
+list.selectKeys(keep);               // ...but the keys still resolve
+```
+
+The `data-key` requirement is documented, not enforced: items without a key
+simply never appear in `selectedKeys` and can't be targeted by `selectKeys` /
+`focusKey`.
+
 ### Filtering by state
 
 Use `selectedFilter()` to iterate over items based on their selection or checked state. Pass `'selected'`, `'checked'`, or `'either'` to filter accordingly:

package/llms.txt

@@ -23,6 +23,7 @@ import '@ixfx/components/data-grid';
 - [dock](docs-user/dock.md): Dockable, movable panels like VS Code / Photoshop. Drag a panel by its
 - [editable-label](docs-user/editable-label.md): Inline editable text components. `ixfx-editable-number` extends `ixfx-editable-label` with drag-to-adjust and fill-bar visualization.
 - [form](docs-user/form.md): Primitives for typical form layout with responsive label positioning and data binding.
+- [grid-list](docs-user/grid-list.md): A virtualised grid of items — thumbnails, cards, or arbitrary slotted markup —
 - [grouped-item-lister](docs-user/grouped-item-lister.md): A meta-component that renders a typed item list using any sub-component you supply. Items can be displayed in a single sub-component (_ungrouped_ mode) or split into labelled groups, each with its own
 - [icons](docs-user/icons.md): A centralized SVG icon system for `@ixfx/components`. Icons are stored by name, can be overridden globally, and all components that use a given icon re-render automatically when it changes.
 - [incr-search](docs-user/incr-search.md): Utilities for incremental (type-ahead) search over data collections or DOM-backed lists.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "packageManager": "pnpm@10.0.0",
   "description": "Web components for ixfx — Lit-based UI toolkit",
   "author": "Clint Heyer",
@@ -20,6 +20,18 @@
       "types": "./dist/incr-search.d.ts",
       "import": "./dist/incr-search.js"
     },
+    "./grid-list": {
+      "types": "./dist/grid-list.d.ts",
+      "import": "./dist/grid-list.js"
+    },
+    "./detail-list": {
+      "types": "./dist/detail-list.d.ts",
+      "import": "./dist/detail-list.js"
+    },
+    "./vertical-list": {
+      "types": "./dist/vertical-list.d.ts",
+      "import": "./dist/vertical-list.js"
+    },
     "./*.js": {
       "types": "./dist/*.d.ts",
       "import": "./dist/*.js"
@@ -35,6 +47,7 @@
   "engines": { "node": ">=20" },
   "scripts": {
     "typecheck": "tsc --noEmit",
+    "test": "vitest run",
     "start": "vite serve",
     "dev": "vite serve",
     "lint": "eslint",
@@ -76,11 +89,13 @@
     "eslint": "10.8.1",
     "eslint-plugin-format": "2.0.1",
     "globals": "17.9.0",
+    "happy-dom": "^20.14.0",
     "knip": "6.32.0",
     "lit": "3.3.3",
     "tsdown": "0.22.14",
     "typescript": "npm:@typescript/typescript6@6.0.2",
     "typescript-eslint": "8.66.0",
-    "vite": "8.2.1"
+    "vite": "8.2.1",
+    "vitest": "^5.0.0"
   }
 }

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

@@ -1 +0,0 @@
-{"version":3,"file":"data-grid-Db4QpnII.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;;;KClCxC;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;EAoFK,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;EAChD,kBAAkB;UAC1C;UAES;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UAEW;UACK;UAEzB;UAKA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;EAEC;EAQA;UAOD;YAgBW;YAaA,QAAQ,SAAS;YAmBjB,WAAW,SAAS;UAmB/B;UAQA;UAiCA;UAOA;UAoBA;UAYA;UAcA;UA0BA;UAKA;UAMA;UAsFA;UAYA;UAEA;UAcA;UAKA;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;;QAsMnB;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/icon-DR_3rSyZ.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-DR_3rSyZ.d.ts","names":[],"sources":["../src/icons/icon.ts"],"mappings":";;cAUa,wBAAwB;;EACvB;EACgB;EAChB;EAC0C;EACU;EAevD;EAMA;YAMU,wBAAM,2BAAA;YA4BN,QAAQ,SAAS;SAWpB,sBAAM;;QAiDhB;YACI;IACR,aAAa"}

package/dist/interaction-D5XdKzbR.js

@@ -1,2 +0,0 @@
-import "./tickled-controller-h9GmJ_bU.js";
-import "./tickled-styles-BrAHEj1q.js";

package/dist/list-selection-types-DSuRNWpx.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"list-selection-types-DSuRNWpx.d.ts","names":[],"sources":["../src/interaction/list-selection-types.ts"],"mappings":";;;;;;;;;KASY;;;;;;;;;;;;;KAcA;KAEA;WACD,UAAU,YAAY;WACtB,UAAU,YAAY;;KAGrB;WACD,MAAM;;KAGL;WACD,MAAM;;KAGL;WACD,MAAM;;KAGL,kBAAkB,YAAY;KAC9B,kBAAkB,YAAY;KAC9B,oBAAoB,YAAY;KAChC,qBAAqB,YAAY;UAE5B;EACf,eAAe;EACf,eAAe;EACf,iBAAiB;EACjB,mBAAmB"}

package/dist/tickled-controller-h9GmJ_bU.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tickled-controller-h9GmJ_bU.js","names":[],"sources":["../src/interaction/tickled-controller.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\n/**\n * Represents an item that can be tickled (highlighted via hover or keyboard navigation)\n */\nexport type TickledItem<T = unknown> = {\n  /**\n   * Unique identifier for the item (e.g., index, id, path)\n   */\n  readonly id: T;\n\n  /**\n   * Whether the item is currently enabled/interactive\n   */\n  readonly enabled?: boolean;\n};\n\n/**\n * Input mode determines which mechanism controls the tickled state\n */\nexport type InputMode = `keyboard` | `mouse`;\n\n/**\n * Configuration for TickledController\n */\nexport type TickledControllerConfig<T> = {\n  /**\n   * Function to retrieve all items that can be tickled\n   */\n  getItems: () => ReadonlyArray<TickledItem<T>>;\n\n  /**\n   * Optional callback when an item becomes tickled\n   * Use this for side effects like opening submenus\n   * @param id - The id of the newly tickled item, or undefined if nothing is tickled\n   */\n  onTickle?: (id: T | undefined) => void;\n\n  /**\n   * Optional callback fired after any state change (tickled id or input mode)\n   * Use this to sync DOM attributes for slotted content that can't use reactive rendering\n   *\n   * For components that render items directly, this is usually not needed as\n   * Lit's reactive rendering will handle updates automatically via requestUpdate()\n   *\n   * @example\n   * ```ts\n   * onStateChange: () => {\n   *   // Sync data-tickled attributes for slotted items\n   *   const items = this.getItems();\n   *   items.forEach((item, i) => {\n   *     if (this.tickled.isTickled(i)) {\n   *       item.setAttribute('data-tickled', '');\n   *     } else {\n   *       item.removeAttribute('data-tickled');\n   *     }\n   *   });\n   * }\n   * ```\n   */\n  onStateChange?: () => void;\n\n  /**\n   * Optional initial input mode (defaults to 'mouse')\n   */\n  initialInputMode?: InputMode;\n\n  /**\n   * Whether keyboard navigation wraps from last to first and vice versa.\n   * - 'stop' (default): navigation stops at the boundary\n   * - 'wrap': navigation wraps around\n   */\n  itemWrap?: `stop` | `wrap`;\n};\n\n/**\n * ReactiveController that manages \"tickled\" state for interactive lists.\n *\n * A \"tickled\" item is one that is under active attention via hover (mouse mode)\n * or keyboard focus (keyboard mode). Only one item can be tickled at a time.\n *\n * The input mode determines which mechanism controls tickled state:\n * - Mouse mode: hover controls tickled, keyboard navigation ignored\n * - Keyboard mode: keyboard navigation controls tickled, hover ignored\n *\n * Last interaction wins - any mouse hover switches to mouse mode, any keyboard\n * navigation switches to keyboard mode.\n *\n * ## Global Mouse Tracking\n *\n * This controller uses a single, ref-counted global `pointermove` listener (shared\n * across all instances) to track actual mouse movement. This prevents `pointerenter`\n * events caused by content scrolling from incorrectly switching to mouse mode when\n * the user is actually using keyboard navigation. The listener is attached when the\n * first host connects and removed once the last host disconnects.\n *\n * @example\n * ```ts\n * class MyList extends LitElement {\n *   private tickled = new TickledController(this, {\n *     getItems: () => this.items.map((item, i) => ({ id: i, enabled: !item.disabled })),\n *     onTickle: (id) => {\n *       // Optional: perform side effect when item is tickled\n *       console.log('Tickled item:', id);\n *     }\n *   });\n *\n *   render() {\n *     return html`\n *       <ul @pointerleave=${(e) => this.tickled.handlePointerLeave(e)}>\n *         ${this.items.map((item, i) => html`\n *           <li\n *             class=\"item ${this.tickled.isTickled(i) ? 'tickled' : ''}\"\n *             @pointerenter=${() => this.tickled.handlePointerEnter(i)}\n *           >${item.label}</li>\n *         `)}\n *       </ul>\n *     `;\n *   }\n *\n *   private handleKeyDown(e: KeyboardEvent) {\n *     if (e.key === 'ArrowDown') {\n *       this.tickled.handleKeyboardNavigation('next');\n *     } else if (e.key === 'ArrowUp') {\n *       this.tickled.handleKeyboardNavigation('previous');\n *     }\n *   }\n * }\n * ```\n */\nexport class TickledController<T = number> implements ReactiveController {\n  private host: ReactiveControllerHost;\n  private config: TickledControllerConfig<T>;\n  private _tickledId: T | undefined = undefined;\n  private _inputMode: InputMode;\n\n  private static _lastMouseClientX: number = Number.NaN;\n  private static _lastMouseClientY: number = Number.NaN;\n  private static _mouseMovedSinceKeyboard: boolean = true;\n  private static _listenerRefCount: number = 0;\n\n  private static readonly _onGlobalPointerMove = (e: PointerEvent): void => {\n    TickledController.handleGlobalPointerMove(e.clientX, e.clientY);\n  };\n\n  constructor(host: ReactiveControllerHost, config: TickledControllerConfig<T>) {\n    this.host = host;\n    this.config = config;\n    this._inputMode = config.initialInputMode ?? `mouse`;\n    host.addController(this);\n  }\n\n  hostConnected(): void {\n    if (TickledController._listenerRefCount === 0) {\n      document.addEventListener(`pointermove`, TickledController._onGlobalPointerMove, { passive: true });\n    }\n    TickledController._listenerRefCount++;\n  }\n\n  hostDisconnected(): void {\n    TickledController._listenerRefCount--;\n    if (TickledController._listenerRefCount === 0) {\n      document.removeEventListener(`pointermove`, TickledController._onGlobalPointerMove);\n    }\n  }\n\n  /**\n   * Get the current input mode\n   */\n  get inputMode(): InputMode {\n    return this._inputMode;\n  }\n\n  /**\n   * Get the currently tickled item id\n   */\n  get tickledId(): T | undefined {\n    return this._tickledId;\n  }\n\n  /**\n   * Check if a specific item is tickled\n   */\n  isTickled(id: T): boolean {\n    return this._tickledId === id;\n  }\n\n  /**\n   * Handle global pointer move event.\n   * Called automatically by the global listener.\n   * Tracks mouse movement to distinguish real hover from content scrolling.\n   */\n  private static handleGlobalPointerMove(clientX: number, clientY: number): void {\n    if (!Number.isNaN(TickledController._lastMouseClientX)) {\n      if (\n        clientX !== TickledController._lastMouseClientX\n        || clientY !== TickledController._lastMouseClientY\n      ) {\n        TickledController._mouseMovedSinceKeyboard = true;\n      }\n    }\n    TickledController._lastMouseClientX = clientX;\n    TickledController._lastMouseClientY = clientY;\n  }\n\n  /**\n   * Check if actual mouse movement has occurred since last keyboard interaction.\n   * Used to distinguish real hover/leave from content-scrolling-induced events.\n   */\n  static get hasMouseMovedSinceKeyboard(): boolean {\n    return TickledController._mouseMovedSinceKeyboard;\n  }\n\n  /**\n   * Handle pointer enter event on an item (mouse hover).\n   * Only processes if actual mouse movement is detected (not content scrolling).\n   * Switches to mouse mode and tickles the item.\n   */\n  handlePointerEnter(id: T): void {\n    if (!TickledController._mouseMovedSinceKeyboard) {\n      return;\n    }\n\n    const items = this.config.getItems();\n    const item = items.find(item => item.id === id);\n    if (item && item.enabled === false) {\n      return;\n    }\n\n    const modeChanged = this._inputMode !== `mouse`;\n    this._inputMode = `mouse`;\n\n    const previousId = this._tickledId;\n    this._tickledId = id;\n\n    this.host.requestUpdate();\n\n    if (previousId !== id && this.config.onTickle) {\n      this.config.onTickle(id);\n    }\n\n    if ((previousId !== id || modeChanged) && this.config.onStateChange) {\n      this.config.onStateChange();\n    }\n  }\n\n  /**\n   * Handle pointer leave event on an item.\n   * Only clears tickled state if actual mouse movement is detected.\n   * @param _e The pointer event (not used, but kept for API compatibility)\n   */\n  handlePointerLeave(_e: PointerEvent): void {\n    if (TickledController._mouseMovedSinceKeyboard) {\n      this.clearTickled();\n    }\n  }\n\n  /**\n   * Handle keyboard navigation.\n   * Switches to keyboard mode and moves tickled state.\n   *\n   * @param direction - 'next', 'previous', 'first', 'last', or specific id\n   */\n  handleKeyboardNavigation(direction: `next` | `previous` | `first` | `last` | T): void {\n    const modeChanged = this._inputMode !== `keyboard`;\n    this._inputMode = `keyboard`;\n\n    const items = this.config.getItems();\n    const enabledItems = items.filter(item => item.enabled !== false);\n\n    if (enabledItems.length === 0) {\n      return;\n    }\n\n    let newId: T | undefined;\n\n    if (direction === `first`) {\n      newId = enabledItems[0].id;\n    } else if (direction === `last`) {\n      newId = enabledItems.at(-1)?.id;\n    } else if (direction === `next` || direction === `previous`) {\n      const currentIndex = enabledItems.findIndex(item => item.id === this._tickledId);\n      const wrap = this.config.itemWrap === `wrap`;\n\n      if (currentIndex === -1) {\n        newId = direction === `next` ? enabledItems[0].id : enabledItems.at(-1)?.id;\n      } else {\n        const delta = direction === `next` ? 1 : -1;\n        let newIndex = currentIndex + delta;\n\n        if (newIndex >= 0 && newIndex < enabledItems.length) {\n          newId = enabledItems[newIndex].id;\n        } else if (wrap) {\n          // Wrap around\n          if (newIndex < 0) {\n            newIndex = enabledItems.length - 1;\n          } else {\n            newIndex = 0;\n          }\n          newId = enabledItems[newIndex].id;\n        }\n        // If newIndex is out of bounds and wrap is disabled, keep current tickled item\n      }\n    } else {\n      const item = enabledItems.find(item => item.id === direction);\n      if (item) {\n        newId = item.id;\n      }\n    }\n\n    if (newId !== undefined) {\n      const previousId = this._tickledId;\n      this._tickledId = newId;\n      this.host.requestUpdate();\n\n      if (previousId !== newId && this.config.onTickle) {\n        this.config.onTickle(newId);\n      }\n\n      if ((previousId !== newId || modeChanged) && this.config.onStateChange) {\n        this.config.onStateChange();\n      }\n    }\n  }\n\n  /**\n   * Manually set the tickled item (useful for programmatic control).\n   * Does NOT change input mode.\n   */\n  setTickled(id: T | undefined): void {\n    const previousId = this._tickledId;\n    this._tickledId = id;\n    this.host.requestUpdate();\n\n    if (previousId !== id && this.config.onTickle) {\n      this.config.onTickle(id);\n    }\n\n    if (previousId !== id && this.config.onStateChange) {\n      this.config.onStateChange();\n    }\n  }\n\n  /**\n   * Clear the tickled state (e.g., on pointer leave).\n   * Note: For pointer leave events, prefer using handlePointerLeave() which\n   * checks for actual mouse movement.\n   */\n  clearTickled(): void {\n    if (this._tickledId !== undefined) {\n      this._tickledId = undefined;\n      this.host.requestUpdate();\n\n      if (this.config.onTickle) {\n        this.config.onTickle(undefined);\n      }\n\n      if (this.config.onStateChange) {\n        this.config.onStateChange();\n      }\n    }\n  }\n\n  /**\n   * Manually set the input mode.\n   * When switching to keyboard mode, resets the mouse movement tracking.\n   */\n  setInputMode(mode: InputMode): void {\n    if (this._inputMode !== mode) {\n      this._inputMode = mode;\n      this.host.requestUpdate();\n\n      if (mode === `keyboard`) {\n        TickledController._mouseMovedSinceKeyboard = false;\n      }\n\n      if (this.config.onStateChange) {\n        this.config.onStateChange();\n      }\n    }\n  }\n}\n"],"mappings":"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"}