@ixfx/components 0.12.0 → 0.13.1

package/docs-user/flat-list.md

@@ -0,0 +1,110 @@
+# `ixfx-flat-list`
+
+Navigate a tree inside one flat list. Each level shows its branches and leaves together; entering a branch replaces the list with that branch's children. An [`ixfx-crumb-navigation`](../crumbs/README.md) above the scroll area shows the path and jumps to any ancestor.
+
+It wraps [`ixfx-vertical-list`](../vertical-list/README.md), so selection modes, interaction modes, keyboard shortcuts, incremental search, drag-out and drag-select behave as they do there. The data model is the same `TreeNode` / `TreeDataModel` that `ixfx-crumb-navigation` and `ixfx-tree-list` use.
+
+```html
+<ixfx-flat-list style="height: 280px"></ixfx-flat-list>
+```
+
+```typescript
+const list = document.querySelector('ixfx-flat-list')!;
+list.root = { item: { key: 'root', label: 'Home' }, children: [/* … */] };
+list.addEventListener('flat-list-activate', ({ detail }) => open(detail.node));
+```
+
+## Properties
+
+| Property / attribute | Type | Default | Description |
+|---|---|---|---|
+| `root` | `TreeNode` | | Root of the tree |
+| `model` | `TreeDataModel` | | Alternative to `root` (and `loadChildren`); stays in sync with model changes |
+| `path` | `readonly string[]` | `[]` | Keys from the root (excluded) to the level shown |
+| `loadChildren` | `LoadChildrenCallback` | | Loads a branch whose `children` is `undefined`. Results are written back to `node.children`, as in crumb-navigation |
+| `filterPredicate` | `(node, depth) => boolean` | | Hides non-matching nodes |
+| `sort` | `(a, b) => number` | | Orders nodes within a level |
+| `branchOrder` / `branch-order` | `'first' \| 'mixed'` | `'first'` | `first`: branches then leaves. `mixed`: one list in `sort` / source order |
+| `selectionMode` / `selection-mode` | | `'single'` | As `ixfx-vertical-list` |
+| `interactionMode` / `interaction-mode` | | `'standard'` | As `ixfx-vertical-list` |
+| `itemWrap`, `searchModes`, `itemsDraggable` | | | Passed to the inner list |
+| `itemsDroppable` / `items-droppable` | `boolean` | `false` | Rows and empty space accept native drops. See [Drops](#drops) |
+| `canDrop` | `(node, dataTransfer) => boolean` | | Refuse a drag up front. `node` is the row, or the current level's node over empty space |
+| `validateEdit` | `(value, node) => boolean` | | Opts in to [rename](#rename) and validates the typed text |
+| `markedKey` / `marked-key` | `string` | | Keep this node's row visibly marked across level changes. Not a selection |
+| `virtualize`, `itemHeight` / `item-height` | `boolean`, `number` | `false`, `0` | Render only visible rows; needs a fixed row height. See [virtualisation](../vertical-list/README.md#virtualisation) |
+| `withUp` / `with-up` | `boolean` | `true` | Up button in the crumb bar |
+| `hideRoot` / `hide-root` | `boolean` | `false` | Hide the root crumb |
+| `emptyText` / `empty-text` | `string` | `'Empty'` | Shown for a level with no children |
+
+A node counts as a branch unless `item.isLeaf` is `true` or its `children` is `[]`. Set `item.isLeaf: false` to force a branch even when `children` is `[]`: an empty folder that can still be entered, showing `emptyText`. `item.icon`, `iconColor`, `textColor` and `badge` are honoured.
+
+## Methods
+
+| Method | Description |
+|---|---|
+| `navigateTo(keys)` | Show the level at this key path. `false` if it does not resolve |
+| `navigateInto(key)` | Enter a child branch |
+| `navigateUp()` | Go to the parent. `false` at the root |
+| `currentNode` | Node whose children are listed |
+| `selectedNodes` | Selected `TreeNode`s in the current level |
+| `beginEdit(key)` | Rename a row in place. Needs `validateEdit` and `item.editable`; `false` otherwise |
+| `registry` / `dispatch(id, args)` | The inner list's command registry, e.g. `dispatch('list.search.filter')` |
+| `list` | The inner `ixfx-vertical-list` |
+
+## Events
+
+| Event | Detail | When |
+|---|---|---|
+| `flat-list-navigate` | `{ path, previousPath, node, direction }` | The level changed. `direction` is `into`, `up` or `jump` |
+| `flat-list-select` | `{ selected, selectedKeys, previous }` | Selection changed (nodes, not elements) |
+| `flat-list-activate` | `{ node }` | A **leaf** was double-clicked or Enter was pressed |
+| `flat-list-drop` | `{ node, dataTransfer }` | Something was dropped. See [Drops](#drops) |
+| `flat-list-context-menu` | `{ node, nodes, x, y }` | Cancelable. See [Context menu](#context-menu) |
+| `flat-list-edit-commit` | `{ node, value }` | A rename was committed |
+| `flat-list-edit-cancel` | `{ node }` | A rename ended without a change |
+
+The inner list's `list-*` events also cross the shadow boundary, with row elements as their `item`.
+
+## Navigation
+
+| Gesture | Action |
+|---|---|
+| Click the chevron, double-click, `Enter`, `Arrow Right` on a branch | Enter it |
+| `Arrow Left`, `Backspace` | Go up. The cursor lands on the branch you came from |
+| Crumb, caret menu, Up button | Jump to that node. Choosing a leaf from a caret menu shows its level and selects it |
+| Everything else | See [vertical-list keyboard navigation](../vertical-list/README.md#keyboard-navigation) |
+
+Selection is cleared on every level change. Arrow Left and Backspace are ignored while the search field is focused.
+
+## Drops
+
+With `items-droppable`, a drag over a row, or over empty space, is accepted unless `canDrop` refuses it. A drop fires `flat-list-drop` with that row's node, or the **current level's node** for empty space. Dropping on a branch row reports it and does **not** enter it. Native OS drags work: `dataTransfer` carries `files`, `text/uri-list` and any custom MIME type the source wrote. The row under the drag gets the vertical-list [drop highlight](../vertical-list/README.md#drop-targets).
+
+## Context menu
+
+`flat-list-context-menu` fires on right-click or the menu key. The row is selected first, so `nodes` is the selection to act on and `node` is the row clicked. Open your own `ixfx-menu-container` at `x, y`. Call `preventDefault()` to suppress the native menu.
+
+## Rename
+
+Rename is **opt-in**: set `validateEdit = (value, node) => boolean`, and mark the rows that may be renamed with `item.editable: true`. Without both, rows are plain text and `beginEdit` returns `false`. Returning `false` from the validator rejects the text and the edit ends as a cancel.
+
+```typescript
+list.validateEdit = (value, node) => value.trim() !== '' && !names.has(value);
+list.addEventListener('flat-list-edit-commit', ({ detail }) => rename(detail.node.item.key, detail.value));
+list.beginEdit('set:2');   // e.g. from your own context menu
+```
+
+`beginEdit(key)` starts the edit. Commit and cancel arrive as `flat-list-edit-commit` / `flat-list-edit-cancel`. The label is not rewritten for you: change `item.label` in your tree in response, and the level refreshes.
+
+## Incremental search
+
+Navigate / select / filter search works over the current level, as in [`ixfx-vertical-list`](../vertical-list/README.md#incremental-search) — see [`docs/infra-incremental.md`](../../docs/infra-incremental.md). `search-modes` limits the modes. There is no default shortcut: bind a key or button to `dispatch('list.search.filter')` (or `.navigate` / `.select`). The highlight rule is built in, so no page-level `::highlight()` rule is needed. The search is closed when the level changes.
+
+## CSS variables
+
+`--flat-list-bg`, `--flat-list-text`, `--flat-list-border`, `--flat-list-radius`, `--flat-list-crumb-padding`, `--flat-list-crumb-font-size` (default `--text-s`), `--flat-list-chevron-gap`, `--flat-list-marked-bg`, `--flat-list-marked-bar`, `--flat-list-empty-text`. Each falls back to the matching `--list-*` variable. Other `--list-*` variables (e.g. `--list-item-height`) reach the inner list.
+
+## CSS parts
+
+`crumbs` (the bar above the list), `empty`.

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.11.9",
-  "generated": "2026-10-01T18:46:24.117Z",
+  "version": "0.13.1",
+  "generated": "2026-10-01T20:18:51.052Z",
   "components": [
     {
       "name": "ac-text",
@@ -73,6 +73,11 @@
       "summary": "Inline editable text components. `ixfx-editable-number` extends `ixfx-editable-label` with drag-to-adjust and fill-bar visualization.",
       "path": "docs-user/editable-label.md"
     },
+    {
+      "name": "flat-list",
+      "summary": "Navigate a tree inside one flat list. Each level shows its branches and leaves together; entering a branch replaces the list with that branch's children. An [`ixfx-crumb-navigation`](../crumbs/README.",
+      "path": "docs-user/flat-list.md"
+    },
     {
       "name": "form",
       "summary": "Primitives for typical form layout with responsive label positioning and data binding.",

package/docs-user/llms.txt

@@ -25,6 +25,7 @@ import '@ixfx/components/data-grid';
 - [detail-list](docs-user/detail-list.md): A list that scales horizontally, not vertically. Items are laid out in equal-width columns; they flow top→bottom down a column, then wrap to the top of the next column to the right. The component has 
 - [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.
+- [flat-list](docs-user/flat-list.md): Navigate a tree inside one flat list. Each level shows its branches and leaves together; entering a branch replaces the list with that branch's children. An [`ixfx-crumb-navigation`](../crumbs/README.
 - [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

package/docs-user/vertical-list.md

@@ -16,9 +16,12 @@ A scrollable vertical list of items with selection, keyboard navigation, and inc
 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)
+11. [Drop targets](#drop-targets)
+12. [Context menu](#context-menu)
+13. [In-place rename](#in-place-rename)
+14. [Virtualisation](#virtualisation)
+15. [CSS variables](#css-variables)
+16. [CSS parts](#css-parts)
 
 ---
 
@@ -120,6 +123,9 @@ To reflect selection state inside the custom element's shadow DOM, target the `:
 | `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 |
+| `itemsDroppable` / `items-droppable` | `boolean` | `false` | Rows and empty space accept native drops. See [Drop targets](#drop-targets) |
+| `editValidator` | `((value, key) => boolean) \| undefined` | `undefined` | Opts in to [in-place rename](#in-place-rename) and validates the typed text. Unset ⇒ rows are plain text |
+| `canDrop` | `((item, dataTransfer) => boolean) \| undefined` | `undefined` | Refuse a drag before any event or highlight |
 | `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) |
 | `formatter` | `((item: unknown, index: number) => unknown) \| undefined` | `undefined` | Renders one `items` entry into its row. See [Adapter items](#adapter-items) |
@@ -645,6 +651,56 @@ list.filterPredicate = undefined;
 
 ---
 
+## Drop targets
+
+Set `items-droppable` to make rows — and the empty space around them — accept native drags, including OS drags carrying files (`dataTransfer.files`, `text/uri-list`, custom MIME types).
+
+| Event | Detail | Notes |
+|---|---|---|
+| `list-drag-over` | `{ key, item, dataTransfer }` | Cancelable. **`preventDefault()` accepts the drop**; without it the drag is refused. Fires repeatedly while the drag moves |
+| `list-drop` | `{ key, item, dataTransfer }` | The drop landed |
+| `list-drag-leave` | `{ key }` | The drag left its last target (also when it is cancelled) |
+
+`key` / `item` are `undefined` over empty list space. The list sets `dropEffect` to `copy` when you accept without choosing one — set `dataTransfer.dropEffect` in the `list-drag-over` handler to override.
+
+The row under the drag gets `data-drop-target` (the host does, over empty space). Style it with `--list-drop-target-bg` and `--list-drop-target-outline`.
+
+`canDrop = (item, dataTransfer) => boolean` refuses a drag up front — no events, no highlight — e.g. to let a leaf row refuse what a folder row accepts.
+
+```typescript
+list.itemsDroppable = true;
+list.canDrop = (item, dt) => item?.hasAttribute('data-folder') ?? false;
+list.addEventListener('list-drag-over', e => e.preventDefault());
+list.addEventListener('list-drop', ({ detail }) => addFiles(detail.key, detail.dataTransfer.files));
+```
+
+---
+
+## Context menu
+
+`list-context-menu` `{ key, item, x, y, selectedKeys }` fires on right-click, and for the menu key (or Shift+F10) on the cursor row. A row that is not selected is selected first, as dragging does, so `selectedKeys` is what the menu acts on. Open your own `ixfx-menu-container` at `x, y` (viewport coordinates).
+
+The event is cancelable: call `preventDefault()` to suppress the browser's native menu. The menu key never shows the native menu; it only fires this event. Right-clicking empty space fires nothing.
+
+---
+
+## In-place rename
+
+Rename is **opt-in**: set `editValidator = (value, key) => boolean` first. Without it `beginEdit` returns `false` and rows stay plain text. The validator runs on commit; returning `false` rejects the text and the edit ends as a cancel.
+
+`list.beginEdit(key)` swaps an [`ixfx-editable-label`](../editable-label/README.md) into the row, selects its text and focuses it. It returns `false` if there is no `editValidator`, or the row is unknown or not rendered.
+
+The editor replaces the row's `[data-edit-label]` element, or the whole row if there is none. Mark the text element in rows that carry icons or badges, and set `data-edit-value` there if the editable text differs from its content.
+
+| Event | Detail | When |
+|---|---|---|
+| `list-edit-commit` | `{ key, value }` | Enter or blur with a changed value |
+| `list-edit-cancel` | `{ key }` | Escape, an unchanged value, or one the label rejects |
+
+The list never rewrites the label itself; the original row content returns when editing ends. Update your data in response to `list-edit-commit`. `editingKey` reports the row being edited. Keys typed in the editor do not reach the list.
+
+---
+
 ## 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.

package/llms.txt

@@ -25,6 +25,7 @@ import '@ixfx/components/data-grid';
 - [detail-list](docs-user/detail-list.md): A list that scales horizontally, not vertically. Items are laid out in equal-width columns; they flow top→bottom down a column, then wrap to the top of the next column to the right. The component has 
 - [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.
+- [flat-list](docs-user/flat-list.md): Navigate a tree inside one flat list. Each level shows its branches and leaves together; entering a branch replaces the list with that branch's children. An [`ixfx-crumb-navigation`](../crumbs/README.
 - [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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "packageManager": "pnpm@10.0.0",
   "description": "Web components for ixfx — Lit-based UI toolkit",
   "author": "Clint Heyer",
@@ -48,6 +48,10 @@
       "types": "./dist/editable-label.d.ts",
       "import": "./dist/editable-label.js"
     },
+    "./flat-list": {
+      "types": "./dist/flat-list.d.ts",
+      "import": "./dist/flat-list.js"
+    },
     "./hex": {
       "types": "./dist/hex.d.ts",
       "import": "./dist/hex.js"

package/dist/icon-CDGprSdE.d.ts.map

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

package/dist/narrowed-text.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"narrowed-text.d.ts","names":[],"sources":["../src/narrowed-text/types.ts","../src/narrowed-text/narrowed-text.ts"],"mappings":";;;KAAY,mBAAmB;EAC7B;EACA;EACA;EACA;EACA;;KAGU;WACD,MAAM;WACN;WACA,mBAAmB;;KAGlB,0BAA0B,YAAY;KAEtC;KAEA;KAEA;EACV,MAAM;EACN,WAAW;EACX;;;;cCEW,4BAA4B;;EACkB,eAAe;EACV;EACR,aAAa;EACjB;EACE;EACJ;EACC;EACU;EAC/B;EAG5B,UAAU;UAEO;UACA;UACA;UACA;UACM;UAEf;UACA;UACA;UAIA;UACA;UAGA;MAqBJ;MAQA,SAAS;EAgBb;EA0BA;EAmBS;EA+BA;YAcU;YAIA,QAAQ,mBAAmB;UAWtC;UAiBA;UAeA;UAIA;EAiJR;EAUA;EASA,YAAY,UAAU;EA4BtB,WAAW;UAuCH;UAmCA;YA4BW,wBAAM;UAqCjB;SAWQ,sBAAM;;QA6IhB;YACI;IACR,sBAAsB"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"tickled-controller-Dh1Uh_vG.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   * When this returns `true`, pointer hover no longer drives the cursor:\n   * `handlePointerEnter` / `handlePointerLeave` become no-ops and hover never\n   * switches the input mode to `mouse`. Keyboard navigation, programmatic\n   * `focus()` / `setTickled()`, and click handling are unaffected. Read on every\n   * hover event, so a host can flip it via a reactive property. Default: `false`.\n   */\n  hoverDisabled?: () => boolean;\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  private hoverDisabled: () => boolean;\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    this.hoverDisabled = config.hoverDisabled ?? (() => false);\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   * The item currently under the cursor, or `undefined`. Alias of `tickledId`\n   * for parity with other controllers.\n   */\n  get current(): T | undefined {\n    return this._tickledId;\n  }\n\n  /**\n   * Move the cursor programmatically (e.g. to reveal a match or re-seat it\n   * after the item set changed). Does not change the input mode. Alias of\n   * `setTickled`.\n   */\n  focus(id: T | undefined): void {\n    this.setTickled(id);\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 (this.hoverDisabled()) {\n      return;\n    }\n\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 (this.hoverDisabled()) {\n      return;\n    }\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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"}

package/dist/types-D-kYF16b.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types-D-kYF16b.d.ts","names":[],"sources":["../src/common/types.ts"],"mappings":";;KAQY;;EAEV;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;EAMA;;;;;;EAMA;;;;;;;;EAQA;;EAEA;;EAEA;;;;;;;EAOA;;;KAIU;EACV,MAAM;;;;;;;EAON,WAAW;;;;;;;KAQD,uBAAuB;EAAgB,MAAM;EAAU;GAAiB;;;;;;KAOxE,uBAAuB,MAAM,UAAU;;;;;;;KAQvC;;;;;;;;;KAUA;;;;;;;;;KAUA"}

package/dist/vertical-list-DTp-UIUE.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"vertical-list-DTp-UIUE.d.ts","names":[],"sources":["../src/vertical-list/vertical-list.ts"],"mappings":";;;;;;;UA4DiB;EACf,WAAW;EACX;EACA;;UAGe;;;;;;EAMf;;cAkCW,4BAA4B;;EAEvC,eAAe;EAGf,iBAAiB;EAGjB,mBAAmB,IAAI;;;;;;EAQvB;;;;;;;;;;;;;;;;;;;EAqBA,oBAAoB,gCAAgC;;;;;;EAQpD;;;;;;EAQA;;;;;EAOA,qBAAqB,wBAAwB;EAG7C,mBAAmB,8BAA8B;;;;;;;;;;;EAajD;;;;;EAOA;;;;;;;;;EAWA,aAAa,eAAe;;;;;;;EAS5B,QAAQ,eAAe;;;;;EAOvB,aAAa,eAAe;;;;;EAO5B,aAAa,eAAe;;;;;;EAQ5B,SAAS,eAAe;;;;;;;;;;;;;;;;;;EAoBxB;;;;;;EAQA;mBAyCiB;UAeT;UA6EA;;WA6EC,QAAM,qBAAA;;MAYX,YAAY;EA2BP;EAsBA;;;;;;YA4BU;EAwDV,QAAQ,SAAS;;MAgFtB,gBAAgB;;MAKhB,iBAAiB,YAAY;EAIjC,QAAQ,MAAM,kBAAkB,UAAU;;;;;;;EA4B1C,WAAW,MAAM,UAAU;;EA2B3B,YAAY,OAAO,SAAS,WAAW;EAIvC;;;;;;EAmBA,SAAS,gBAAgB;;;;;;EAwBzB,SAAS,WAAW,WAAW,OAAO;EAItC,OAAO,MAAM;EAIb,WAAW,OAAO,SAAS;EAI3B,SAAS,MAAM;EAIf;EAIA;;MAQI,gBAAgB;;MAKhB;;EAMJ,WAAW,MAAM;;EAKjB,gBAAgB,MAAM;;EAKtB,mBAAmB,MAAM;;;;;;EASzB,SAAS;;EAgCT,aAAa,cAAc;;;;;;;;EAW3B;;;;;;;EAuBA;EAsBE,eAAe,0CAA0C,UAAU;;;;;EA2CrE,YAAY,MAAM;;;;;;;;;;;EAclB,WAAW,aAAa;UAmiBhB;UAgBA;UAOA;UAiBA;;;;;;;UA4GA;;;;;UAuBA;UAcA;UAYA;UAQA;UAWA;UAMA;UAIA;UAwDA;UAUA;UAMA;SAUQ,sBAAM;EA2Kb,wBAAM;;QAeT;YACI;IACR,sBAAsB;;YAGd,4BAA4B;;UAGvB,oCAAoC;EACnD,iCAAiC;EACjC,0BAA0B,yBAAyB"}