@ixfx/components 0.8.5 → 0.8.7

package/dist/tree.d.ts

@@ -1,6 +1,6 @@
 import { a as TreeItem, i as TreeInteractionMode, n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-Bc23SI94.js";
-import { _ as TreeDataModelOptions, a as TreeComponent, c as TreeExpandEvent, d as TreeSearchHost, f as TreeSelectDetail, g as TreeDataModel, h as TreeTickleEvent, i as TreeCollapseEvent, l as TreeItemClickDetail, m as TreeTickleDetail, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeSelectEvent, r as TreeCollapseDetail, s as TreeExpandDetail, t as TreeActivateDetail, u as TreeItemClickEvent } from "./tree-component-F6qZ0Gdv.js";
-import { S as ListSearchController } from "./index-h6gxtfHH.js";
+import { _ as TreeTickleEvent, a as TreeComponent, c as TreeExpandEvent, f as TreeItemDblClickEvent, g as TreeTickleDetail, h as TreeSelectEvent, i as TreeCollapseEvent, l as TreeItemClickDetail, m as TreeSelectDetail, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeSearchHost, r as TreeCollapseDetail, s as TreeExpandDetail, t as TreeActivateDetail, u as TreeItemClickEvent, v as TreeDataModel, y as TreeDataModelOptions } from "./tree-component-BMpxpdTi.js";
+import { S as ListSearchController } from "./index-DDREWqMm.js";
 import { n as TickledController } from "./tickled-controller-C1ZsHpyg.js";
 import { LitElement, PropertyValues, TemplateResult, nothing } from "lit";
 import { CommandRegistry } from "@clinth/ui-commands";
@@ -89,6 +89,7 @@ declare global {
 }
 interface TreeBaseElementEventMap extends TreeComponentEventMap {
   'item-click': TreeItemClickEvent;
+  'item-dblclick': TreeItemDblClickEvent;
   'expand': TreeExpandEvent;
   'collapse': TreeCollapseEvent;
   'select': TreeSelectEvent;

package/dist/tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree.d.ts","names":[],"sources":["../src/tree/types.ts","../src/tree/tree-base.ts","../src/tree/tree-list.ts","../src/tree/tree-controller.ts"],"mappings":";;;;;;;;;KAqCY;EACV;;;;cCgBW,wBAAwB,sBAAsB,eAAe;;EAExE,MAAM;EAGN,OAAO;;EAIP,cAAc;EAGd,aAAa;EAGb,iBAAiB;;EAIjB,iBAAiB;EAGjB,cAAc;YAGJ,gBAAc,IAAA;MAEpB,iBAAiB,YAAY;EAKjC,iBAAiB;EAGjB;EAGA,UAAU;;;;;;EAQV;YAGU,eAAa;YAEb,SAAO;YAWP;;WAGD,QAAM;IAAoC,MAAA;IAAiB;;EAgD3D,WAAW,cAAc;;YAyCxB,WAAW,MAAM;;;;;YAQjB,eAAe,MAAM,UAAU;EAuDhC,QAAQ,cAAc;EA8CtB;EAoBA;EAcT,aAAa;EAIb,UAAU,QAAQ,QAAQ;EAO1B,OAAO,MAAM;EAWb,SAAS,MAAM;EAYf;EASA;EAoBA;EAiBA,WAAW;EAoCX,eAAe,YAAY,MAAM;;EAUjC,UAAU;;EAiBV,WAAW,OAAO,SAAS;EAQ3B,YAAY;IAAgB,MAAM;IAAU;;YA6DlC,kBAAkB,MAAM,UAAU,gBAAgB,wBAAwB;YAW1E,iBAAiB,MAAM,UAAU,eAAe,QAAQ;YAuJxD,qBAAqB,OAAO,YAAY,MAAM,UAAU;YAsJxD,YAAY,MAAM;YAIlB,WAAW,MAAM;YAIjB,YAAY,MAAM,UAAU;gBAiBxB,gBAAgB;YA4RpB,0BAA0B,wBAAwB;YAIzC,UAAM;YA4Df,YAAY,MAAM,UAAU,gBAAgB;SAmCtC,sBAAM;;QA0HhB;YACI;IACR,kBAAkB;;;UAIL,gCAAgC;EAC/C,cAAc;EACd,UAAU;EACV,YAAY;EACZ,UAAU;EACV,UAAU;EACV,YAAY;;UAGG;EACf,oBAAoB,gBAAgB,yBAClC,MAAM,GACN,WAAW,MAAM,iBAAiB,OAAO,wBAAwB,aACjE,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB;EAEtB,uBAAuB,gBAAgB,yBACrC,MAAM,GACN,WAAW,MAAM,iBAAiB,OAAO,wBAAwB,aACjE,oBAAoB,mCAEpB,cACA,UAAU,oCACV,oBAAoB;;;;;KCl5CZ;cAiBC,wBAAwB;;;;;;;;;;;;;;;;;;;;;EAqBnC,oBAAoB,OAAO;YAIR,UAAM;YAuBN,kBAAkB,MAAM,UAAU,gBAAgB;YAsDlD,YAAY,MAAM,UAAU,gBAAgB;SA6B/C,sBAAM;;QAqFhB;YACI;IACR,kBAAkB;;;UAIL;EACf,oBAAoB,gBAAgB,yBAClC,MAAM,GACN,WAAW,MAAM,iBAAiB,OAAO,wBAAwB,aACjE,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB;;;;KC9PZ,sBAAsB;EAChC,cAAc,OAAO,GAAG,MAAM,gBAAgB,OAAO;;cAG1C,eAAe;;EAWxB,YAAA,MAAM,gBAAgB,IACtB,SAAS,iBACT,SAAS,sBAAsB;EAOjC;EAwBA;EAKA,gBAAgB,YAAY,OAAO"}
+{"version":3,"file":"tree.d.ts","names":[],"sources":["../src/tree/types.ts","../src/tree/tree-base.ts","../src/tree/tree-list.ts","../src/tree/tree-controller.ts"],"mappings":";;;;;;;;;KAqCY;EACV;;;;cCkBW,wBAAwB,sBAAsB,eAAe;;EAExE,MAAM;EAGN,OAAO;;EAIP,cAAc;EAGd,aAAa;EAGb,iBAAiB;;EAIjB,iBAAiB;EAGjB,cAAc;YAGJ,gBAAc,IAAA;MAEpB,iBAAiB,YAAY;EAKjC,iBAAiB;EAGjB;EAGA,UAAU;;;;;;EAQV;YAGU,eAAa;YAEb,SAAO;YAWP;;WAGD,QAAM;IAAoC,MAAA;IAAiB;;EAgD3D,WAAW,cAAc;;YAyCxB,WAAW,MAAM;;;;;YAQjB,eAAe,MAAM,UAAU;EAuDhC,QAAQ,cAAc;EA8CtB;EAoBA;EAcT,aAAa;EAIb,UAAU,QAAQ,QAAQ;EAO1B,OAAO,MAAM;EAWb,SAAS,MAAM;EAYf;EASA;EAoBA;EAiBA,WAAW;EAoCX,eAAe,YAAY,MAAM;;EAUjC,UAAU;;EAiBV,WAAW,OAAO,SAAS;EAQ3B,YAAY;IAAgB,MAAM;IAAU;;YA6DlC,kBAAkB,MAAM,UAAU,gBAAgB,wBAAwB;YAW1E,iBAAiB,MAAM,UAAU,eAAe,QAAQ;YAgLxD,qBAAqB,OAAO,YAAY,MAAM,UAAU;YAsJxD,YAAY,MAAM;YAIlB,WAAW,MAAM;YAIjB,YAAY,MAAM,UAAU;gBAiBxB,gBAAgB;YA4RpB,0BAA0B,wBAAwB;YAIzC,UAAM;YAmEf,YAAY,MAAM,UAAU,gBAAgB;SAmCtC,sBAAM;;QA8HhB;YACI;IACR,kBAAkB;;;UAIL,gCAAgC;EAC/C,cAAc;EACd,iBAAiB;EACjB,UAAU;EACV,YAAY;EACZ,UAAU;EACV,UAAU;EACV,YAAY;;UAGG;EACf,oBAAoB,gBAAgB,yBAClC,MAAM,GACN,WAAW,MAAM,iBAAiB,OAAO,wBAAwB,aACjE,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB;EAEtB,uBAAuB,gBAAgB,yBACrC,MAAM,GACN,WAAW,MAAM,iBAAiB,OAAO,wBAAwB,aACjE,oBAAoB,mCAEpB,cACA,UAAU,oCACV,oBAAoB;;;;;KCz7CZ;cAiBC,wBAAwB;;;;;;;;;;;;;;;;;;;;;EAqBnC,oBAAoB,OAAO;YAIR,UAAM;YAuBN,kBAAkB,MAAM,UAAU,gBAAgB;YAsDlD,YAAY,MAAM,UAAU,gBAAgB;SA6B/C,sBAAM;;QAyFhB;YACI;IACR,kBAAkB;;;UAIL;EACf,oBAAoB,gBAAgB,yBAClC,MAAM,GACN,WAAW,MAAM,iBAAiB,OAAO,wBAAwB,aACjE,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB;;;;KClQZ,sBAAsB;EAChC,cAAc,OAAO,GAAG,MAAM,gBAAgB,OAAO;;cAG1C,eAAe;;EAWxB,YAAA,MAAM,gBAAgB,IACtB,SAAS,iBACT,SAAS,sBAAsB;EAOjC;EAwBA;EAKA,gBAAgB,YAAY,OAAO"}

package/dist/tree.js

@@ -1,2 +1,2 @@
-import { i as TreeDataModel, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-DTQon838.js";
+import { i as TreeDataModel, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-CozQj01a.js";
 export { TreeBaseElement, TreeController, TreeDataModel, TreeListElement };

package/dist/{vertical-list-CFuFDygi.d.ts → vertical-list-BGn9nyKh.d.ts}

@@ -1,4 +1,4 @@
-import { S as ListSearchController } from "./index-h6gxtfHH.js";
+import { S as ListSearchController } from "./index-DDREWqMm.js";
 import { i as ListInteractionMode, l as ListSelectionMode, r as ListElementEventMap } from "./list-selection-types-B5ioL-dG.js";
 import { LitElement, PropertyValues } from "lit";
 import { CommandId, CommandRegistry } from "@clinth/ui-commands";
@@ -140,4 +140,4 @@ declare global {
 }
 //#endregion
 export { CustomCheckboxOptions as n, VerticalListElement as r, AddItemOptions as t };
-//# sourceMappingURL=vertical-list-CFuFDygi.d.ts.map
+//# sourceMappingURL=vertical-list-BGn9nyKh.d.ts.map

package/dist/{vertical-list-CFuFDygi.d.ts.map → vertical-list-BGn9nyKh.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"vertical-list-CFuFDygi.d.ts","names":[],"sources":["../src/vertical-list/vertical-list.ts"],"mappings":";;;;;UA6CiB;EACf,WAAW;EACX;EACA;;UAGe;;;;;;EAMf;;cAMW,4BAA4B;;EAEvC,eAAe;EAGf,iBAAiB;EAGjB,mBAAmB,IAAI;;;;;;EAQvB;;;;;;;;;;;;;;;;;;;EAqBA,oBAAoB,gCAAgC;;;;;;EAQpD;mBAUiB;UAeT;;WAwEC,QAAM,qBAAA;;MAYX,YAAY;EAoBP;EAmBA;EA4CA,QAAQ,SAAS;;MAmCtB,gBAAgB;;MAKhB,iBAAiB,YAAY;EAIjC,QAAQ,MAAM,kBAAkB,UAAU;;;;;;EAqB1C,WAAW,MAAM,UAAU;;EAW3B,YAAY,OAAO,SAAS,WAAW;EAIvC;;;;;;EAYA,SAAS,gBAAgB;;;;;;EAczB,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;;EAKzB,SAAS;EAkBP,eAAe,0CAA0C,UAAU;UAqB7D;UAgBA;UAOA;UAiBA;;;;;;;UA6FA;;;;;UAuBA;UAcA;UAYA;UAUA;UAMA;UAIA;UAwDA;UAUA;UAMA;SAUQ,sBAAM;EA+Ib,wBAAM;;QAeT;YACI;IACR,sBAAsB;;YAGd,4BAA4B"}
+{"version":3,"file":"vertical-list-BGn9nyKh.d.ts","names":[],"sources":["../src/vertical-list/vertical-list.ts"],"mappings":";;;;;UA6CiB;EACf,WAAW;EACX;EACA;;UAGe;;;;;;EAMf;;cAMW,4BAA4B;;EAEvC,eAAe;EAGf,iBAAiB;EAGjB,mBAAmB,IAAI;;;;;;EAQvB;;;;;;;;;;;;;;;;;;;EAqBA,oBAAoB,gCAAgC;;;;;;EAQpD;mBAUiB;UAeT;;WAwEC,QAAM,qBAAA;;MAYX,YAAY;EAoBP;EAmBA;EA4CA,QAAQ,SAAS;;MAmCtB,gBAAgB;;MAKhB,iBAAiB,YAAY;EAIjC,QAAQ,MAAM,kBAAkB,UAAU;;;;;;EAqB1C,WAAW,MAAM,UAAU;;EAW3B,YAAY,OAAO,SAAS,WAAW;EAIvC;;;;;;EAYA,SAAS,gBAAgB;;;;;;EAczB,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;;EAKzB,SAAS;EAkBP,eAAe,0CAA0C,UAAU;UAqB7D;UAgBA;UAOA;UAiBA;;;;;;;UA6FA;;;;;UAuBA;UAcA;UAYA;UAUA;UAMA;UAIA;UAwDA;UAUA;UAMA;SAUQ,sBAAM;EA+Ib,wBAAM;;QAeT;YACI;IACR,sBAAsB;;YAGd,4BAA4B"}

package/dist/vertical-list.d.ts

@@ -1,3 +1,3 @@
 import { a as ListItemClickDetail, c as ListSelectEvent, d as ListTickleEvent, i as ListInteractionMode, l as ListSelectionMode, n as ListActivateEvent, o as ListItemClickEvent, r as ListElementEventMap, s as ListSelectDetail, t as ListActivateDetail, u as ListTickleDetail } from "./list-selection-types-B5ioL-dG.js";
-import { n as CustomCheckboxOptions, r as VerticalListElement, t as AddItemOptions } from "./vertical-list-CFuFDygi.js";
+import { n as CustomCheckboxOptions, r as VerticalListElement, t as AddItemOptions } from "./vertical-list-BGn9nyKh.js";
 export { AddItemOptions, CustomCheckboxOptions, type ListActivateDetail, type ListActivateEvent, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListSelectDetail, type ListSelectEvent, type ListSelectionMode, type ListTickleDetail, type ListTickleEvent, VerticalListElement };

package/docs-user/README.md

@@ -6,12 +6,14 @@ This directory contains documentation for each component and some architectural
 
 - [ac-text](./ac-text.md)
 - [ac-token](./ac-token.md)
+- [bottom-drawer](./bottom-drawer.md)
 - [button](./button.md)
 - [checkbox](./checkbox.md)
 - [colour-picker](./colour-picker.md)
 - [crumbs](./crumbs.md)
 - [data-display](./data-display.md)
 - [data-grid](./data-grid.md)
+- [data-table](./data-table.md)
 - [detail-list](./detail-list.md)
 - [dock](./dock.md)
 - [editable-label](./editable-label.md)
@@ -28,6 +30,7 @@ This directory contains documentation for each component and some architectural
 - [miller](./miller.md)
 - [narrowed-text](./narrowed-text.md)
 - [notifier](./notifier.md)
+- [pan-text](./pan-text.md)
 - [panel](./panel.md)
 - [plots](./plots.md)
 - [polar-pad](./polar-pad.md)
@@ -42,6 +45,7 @@ This directory contains documentation for each component and some architectural
 - [split-layout](./split-layout.md)
 - [swipe](./swipe.md)
 - [tabs](./tabs.md)
+- [text-shimmer](./text-shimmer.md)
 - [timeline](./timeline.md)
 - [titlebar](./titlebar.md)
 - [toolbar](./toolbar.md)

package/docs-user/bottom-drawer.md

@@ -0,0 +1,150 @@
+# Bottom Drawer
+
+A slide-up drawer panel that slides over the bottom of its container. Place it as a **sibling** of the content it covers, inside a positioned container — the element stretches to fill that container and slides the drawer up over it. The drawer can be resized from its top edge and supports a floating handle mode.
+
+```html
+<div class="panel" style="position: relative; overflow: hidden">
+  <div>Main content behind the drawer</div>
+  <ixfx-bottom-drawer label="Inspector" open>
+    Drawer content here
+  </ixfx-bottom-drawer>
+</div>
+```
+
+The container must establish a positioning context (`position: relative`, `absolute`, or `fixed`) and should set `overflow: hidden` so the drawer is clipped while closed or animating. The element itself is `pointer-events: none` except over the drawer, so the sibling content underneath stays interactive.
+
+---
+
+## `ixfx-bottom-drawer`
+
+### Properties / attributes
+
+| Attribute / Property     | Type               | Default       | Description                                              |
+|------------------------|--------------------|---------------|----------------------------------------------------------|
+| `open`                 | boolean            | `false`       | Whether the drawer is visible                            |
+| `height`               | number             | `320`         | Drawer height in px                                      |
+| `min-height`           | number             | `160`         | Minimum height before fade-out begins                     |
+| `dismiss-threshold`    | number             | `96`          | Drag below this height to close the drawer               |
+| `max-height-ratio`     | number             | `0.85`        | Max height as a fraction of host height                  |
+| `label`                | string             | `Drawer`      | Header title and accessible label                        |
+| `icon-name`            | string             | `''`          | Header icon from the icon registry                       |
+| `closable`             | boolean            | `true`        | Show the header close button                             |
+| `collapsible`          | boolean            | `true`        | Show the expand/collapse caret                           |
+| `maintain-handle`      | boolean            | `false`       | Keep a drag handle docked to the bottom when collapsed   |
+| `name`                 | string             | `''`          | Command namespace (see Commands section)                 |
+| `registry`             | CommandRegistry    | —             | `@clinth/ui-commands` registry for named commands        |
+
+### Slots
+
+| Slot       | Description                                    |
+|------------|-----------------------------------------------|
+| default    | Drawer body content                            |
+| `toolbar`  | Header toolbar items (forwarded to titlebar)  |
+
+### Events
+
+| Event            | Detail                        | Description                          |
+|------------------|-------------------------------|--------------------------------------|
+| `drawer-close`   | —                             | Fired when drawer is closed          |
+| `drawer-resize`  | `{ height: number }`          | Fired when drawer is resized         |
+
+### Commands
+
+When a `name` is set, the drawer registers commands as `<name>.<command>`:
+
+| Command      | Description                              |
+|--------------|------------------------------------------|
+| `expand`     | Open the drawer                          |
+| `collapse`   | Close the drawer (fires `drawer-close`)  |
+| `toggle`     | Toggle open/closed state                  |
+
+```js
+// Invoke commands via the registry
+drawer.registry?.invoke('inspector.expand');
+drawer.registry?.invoke('inspector.toggle');
+```
+
+Share a registry across multiple drawers to control them globally:
+
+```js
+const shared = createCommandRegistry();
+firstDrawer.registry = shared;
+secondDrawer.registry = shared;
+```
+
+---
+
+## Resizing
+
+The drawer's top edge is a resize handle. Drag it up or down to resize. Keyboard users can focus the handle and use:
+
+- `Arrow Up` / `Arrow Down` — resize by 16px (64px with Shift)
+- `Home` — resize to minimum height
+- `End` — resize to maximum height
+
+When closed, keyboard resize on the handle opens the drawer.
+
+---
+
+## Maintain handle mode
+
+When `maintain-handle` is `true`, a small draggable tab remains docked at the bottom edge when the drawer is closed. Drag it up to reopen.
+
+```html
+<div class="panel" style="position: relative; overflow: hidden">
+  <div>Main content</div>
+  <ixfx-bottom-drawer label="Inspector" maintain-handle>
+    Inspector content
+  </ixfx-bottom-drawer>
+</div>
+```
+
+---
+
+## With toolbar
+
+Toolbar items slotted into `toolbar` are forwarded into the `ixfx-titlebar` toolbar:
+
+```html
+<div class="panel" style="position: relative; overflow: hidden">
+  <div>Main content</div>
+  <ixfx-bottom-drawer label="Inspector" open>
+    <div slot="toolbar">
+      <button type="button" data-tooltip="Refresh">
+        <ixfx-icon name="refresh"></ixfx-icon>
+      </button>
+    </div>
+    Inspector content
+  </ixfx-bottom-drawer>
+</div>
+```
+
+---
+
+## CSS custom properties
+
+| Property                               | Default                                      | Description                              |
+|----------------------------------------|----------------------------------------------|------------------------------------------|
+| `--bottom-drawer-background`           | `color-mix(in srgb, var(--surface-2) 84%, transparent)` | Drawer fill                     |
+| `--bottom-drawer-border`               | `1px solid color-mix(in srgb, var(--surface-2-text) 14%, transparent)` | Drawer border |
+| `--bottom-drawer-radius`               | `var(--radius-l)`                            | Top corner radius                        |
+| `--bottom-drawer-blur`                 | `18px`                                       | Backdrop blur amount                     |
+| `--bottom-drawer-shadow`               | `var(--shadow-l)`                            | Drop shadow                              |
+| `--bottom-drawer-collapsed-width`      | `96px`                                       | Width of floating pill (maintain-handle) |
+| `--bottom-drawer-title-background`     | `transparent`                                | Header fill                              |
+| `--ixfx-handle-*`                     | (see handle docs)                            | Resize grip styling                      |
+
+---
+
+## TypeScript types
+
+```ts
+import type { BottomDrawerElement, BottomDrawerResizeDetail, BottomDrawerCloseEvent } from 'ixfxfun-components';
+```
+
+---
+
+## See also
+
+- [`ixfx-titlebar`](../titlebar/README.md) — Header component used by the drawer
+- [`ixfx-icon`](../icons/README.md) — Icon component for header icons

package/docs-user/data-table.md

@@ -0,0 +1,104 @@
+# `ixfx-data-table`
+
+A key/value data table with responsive layout, hover details, and keyboard/tickle navigation.
+
+---
+
+## Quick start
+
+```html
+<ixfx-data-table id="table"></ixfx-data-table>
+
+<script type="module">
+  import '@ixfx/components/data-table';
+
+  const table = document.querySelector('#table');
+  table.rows = [
+    { label: `Name`, value: `Ada` },
+    { label: `Age`, value: 30 },
+    { label: `Active`, value: true, detail: `Account was active since 2020` },
+  ];
+</script>
+```
+
+Import via bundle: `import '@ixfx/components';` or per-component `import '@ixfx/components/data-table';`.
+
+---
+
+## Rows
+
+```ts
+type DataTableRow = {
+  label: string;
+  value: string | number | boolean | Node | TemplateResult;
+  fullWidth?: boolean;  // spans entire row width
+  detail?: string | TemplateResult;  // hover/click reveals this
+  id?: string;
+};
+```
+
+---
+
+## Layout
+
+| `layout` | Description |
+|---|---|
+| `auto` (default) | Responsive — widens to 2–3 pair columns on wide containers, stacks on narrow |
+| `rows` | Always stacked (key above value) |
+| `columns` | Always two-column grid regardless of width |
+
+Switch to stacked at a custom breakpoint:
+
+```html
+<ixfx-data-table narrow-breakpoint="620"></ixfx-data-table>
+```
+
+---
+
+## Selection & tickle
+
+Clicking a row selects it and reveals its detail panel. `selectedIndex` tracks the selection:
+
+```ts
+table.selectedIndex = 0;  // select first row
+table.addEventListener(`data-table-row-click`, (e) => {
+  console.log(e.detail.row, e.detail.index, e.detail.selected);
+});
+```
+
+Hover reveals the detail panel after `tickle-delay` ms (default 400). Clicking reveals immediately.
+
+---
+
+## CSS variables
+
+| Variable | Default | Description |
+|---|---|---|
+| `--data-table-name-width` | `max-content` | Column width for labels |
+| `--data-table-value-width` | `minmax(0, 1fr)` | Column width for values |
+| `--data-table-cell-align` | `baseline` | Cell vertical alignment |
+| `--data-table-row-padding` | `0.35em` | Row padding |
+| `--data-table-name-align` | `left` | Label text alignment |
+
+---
+
+## Methods
+
+| Method | Signature | Description |
+|---|---|---|
+| `rows` | `readonly DataTableRow[]` | Row data |
+
+| Property | Type | Description |
+|---|---|---|
+| `selectedIndex` | `number \| undefined` | Currently selected row index |
+| `layout` | `'auto' \| 'rows' \| 'columns'` | Layout mode |
+| `narrowBreakpoint` | `number` | Breakpoint for stacking (px) |
+| `tickleDelay` | `number` | Hover detail delay (ms) |
+
+---
+
+## Events
+
+| Event | Detail | Description |
+|---|---|---|
+| `data-table-row-click` | `{ row, index, selected }` | Fired on row click |

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.8.4",
-  "generated": "2026-09-09T19:06:27.918Z",
+  "version": "0.8.7",
+  "generated": "2026-09-09T21:12:58.854Z",
   "components": [
     {
       "name": "ac-text",
@@ -13,6 +13,11 @@
       "summary": "Token/tag input with per-token autocomplete. Looks like a text box — committed tokens appear as inline chips, and a suggestion popup follows the typing cursor. Typical use cases are email To: fields a",
       "path": "docs-user/ac-token.md"
     },
+    {
+      "name": "bottom-drawer",
+      "summary": "A slide-up drawer panel that slides over the bottom of its container. Place it as a **sibling** of the content it covers, inside a positioned container — the element stretches to fill that container a",
+      "path": "docs-user/bottom-drawer.md"
+    },
     {
       "name": "button",
       "summary": "Three related button components:",
@@ -43,6 +48,11 @@
       "summary": "A virtualised data grid with sortable/resizable/reorderable columns, single/multi selection, grouping, and inline cell editing. Handles 200+ rows with windowed rendering and keyboard navigation.",
       "path": "docs-user/data-grid.md"
     },
+    {
+      "name": "data-table",
+      "summary": "A key/value data table with responsive layout, hover details, and keyboard/tickle navigation.",
+      "path": "docs-user/data-table.md"
+    },
     {
       "name": "detail-list",
       "summary": "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 ",
@@ -123,6 +133,11 @@
       "summary": "A \"lookless\" app-wide notification system. `NotificationManager` is a singleton that owns notification state, queueing, and timing — it doesn't know how to draw anything. A `NotificationRenderer` (the",
       "path": "docs-user/notifier.md"
     },
+    {
+      "name": "pan-text",
+      "summary": "Pans overflowing text on hover or continuously in a loop. Use when a label is too long for its container and you want to reveal the full text without truncation.",
+      "path": "docs-user/pan-text.md"
+    },
     {
       "name": "panel",
       "summary": "An collapsible panel component with support for titles, icons, toolbars, and multiple visual variants.",
@@ -193,6 +208,11 @@
       "summary": "A complete tabbed interface system using several coordinated components:",
       "path": "docs-user/tabs.md"
     },
+    {
+      "name": "text-shimmer",
+      "summary": "A label with a sweeping highlight band across the text. Useful as a lightweight \"still working…\" or \"loading…\" indicator.",
+      "path": "docs-user/text-shimmer.md"
+    },
     {
       "name": "timeline",
       "summary": "A canvas-based timeline component with tracks, events, zoom/pan, and vertical track resizing. Suitable for visualizing time-series data, event logs, or scheduling.",

package/docs-user/llms.txt

@@ -13,12 +13,14 @@ import '@ixfx/components/data-grid';
 ## Components
 - [ac-text](docs-user/ac-text.md): VS Code command-palette style autocomplete text input. Shows a popup with matching results as the user types.
 - [ac-token](docs-user/ac-token.md): Token/tag input with per-token autocomplete. Looks like a text box — committed tokens appear as inline chips, and a suggestion popup follows the typing cursor. Typical use cases are email To: fields a
+- [bottom-drawer](docs-user/bottom-drawer.md): A slide-up drawer panel that slides over the bottom of its container. Place it as a **sibling** of the content it covers, inside a positioned container — the element stretches to fill that container a
 - [button](docs-user/button.md): Three related button components:
 - [checkbox](docs-user/checkbox.md): A custom checkbox with a diagonal line indicator and indeterminate state support. Uses shadow DOM with CSS variables for full appearance customization.
 - [colour-picker](docs-user/colour-picker.md): Two components for picking OKLCH colours. Use `ixfx-colour-picker` when you need a full inline picker; use `ixfx-colour-picker-popup` when you need a compact swatch that opens a picker in a popover.
 - [crumbs](docs-user/crumbs.md): Breadcrumb navigation with lazy-loading child support. Uses the same `TreeNode` / `TreeItem` data model as `ixfx-tree-list`, allowing easy swapping between the two components.
 - [data-display](docs-user/data-display.md): A debug data display component that renders key-value pairs from a plain object. Supports 7 inline render modes (`led`, `plot`, `plot-xy`, `plot-heat`, `plot-histogram`, `time-elapsed`, `hide`) via `c
 - [data-grid](docs-user/data-grid.md): A virtualised data grid with sortable/resizable/reorderable columns, single/multi selection, grouping, and inline cell editing. Handles 200+ rows with windowed rendering and keyboard navigation.
+- [data-table](docs-user/data-table.md): A key/value data table with responsive layout, hover details, and keyboard/tickle navigation.
 - [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.
@@ -35,6 +37,7 @@ import '@ixfx/components/data-grid';
 - [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.
 - [notifier](docs-user/notifier.md): A "lookless" app-wide notification system. `NotificationManager` is a singleton that owns notification state, queueing, and timing — it doesn't know how to draw anything. A `NotificationRenderer` (the
+- [pan-text](docs-user/pan-text.md): Pans overflowing text on hover or continuously in a loop. Use when a label is too long for its container and you want to reveal the full text without truncation.
 - [panel](docs-user/panel.md): An collapsible panel component with support for titles, icons, toolbars, and multiple visual variants.
 - [plots](docs-user/plots.md): SVG-based plotting components for visualising data streams.
 - [polar-pad](docs-user/polar-pad.md): A circular pad for setting polar coordinates (angle + radius). The user clicks or drags within a circle to position a marker. The marker's position encodes an angle (degrees, 0 = right, clockwise) and
@@ -49,6 +52,7 @@ import '@ixfx/components/data-grid';
 - [split-layout](docs-user/split-layout.md): A Lit web component that lays out any number of panels along one axis with draggable gutters between them.
 - [swipe](docs-user/swipe.md): A touch-friendly swipe/nudge component. User taps and drags to generate a value in range [-1, 1]. Value is emitted only on pointer release.
 - [tabs](docs-user/tabs.md): A complete tabbed interface system using several coordinated components:
+- [text-shimmer](docs-user/text-shimmer.md): A label with a sweeping highlight band across the text. Useful as a lightweight "still working…" or "loading…" indicator.
 - [timeline](docs-user/timeline.md): A canvas-based timeline component with tracks, events, zoom/pan, and vertical track resizing. Suitable for visualizing time-series data, event logs, or scheduling.
 - [titlebar](docs-user/titlebar.md): Standalone titlebar chrome extracted from `ixfx-panel`: title text, icon, toolbar slot, close button and an optional collapse/expand caret. Use it when you need a panel-style header without the collap
 - [toolbar](docs-user/toolbar.md): Two components for building toolbars:

package/docs-user/pan-text.md

@@ -0,0 +1,103 @@
+# `ixfx-pan-text`
+
+Pans overflowing text on hover or continuously in a loop. Use when a label is too long for its container and you want to reveal the full text without truncation.
+
+```html
+<span style="max-width: 120px; display: inline-block; overflow: hidden;">
+  <ixfx-pan-text direction="end">A very long label that overflows</ixfx-pan-text>
+</span>
+```
+
+---
+
+## Modes
+
+### `hover` (default)
+
+Pans once while the cursor is over the element. Rests at the starting position when the cursor leaves.
+
+```html
+<ixfx-pan-text mode="hover">Long notification text goes here</ixfx-pan-text>
+```
+
+### `loop`
+
+Pans repeatedly: pauses 2 seconds at the end, snaps back to start, then pans again until `stopLoop()` is called.
+
+```html
+<ixfx-pan-text mode="loop">Scrolling ticker text</ixfx-pan-text>
+```
+
+```js
+const pan = document.querySelector('ixfx-pan-text');
+pan.startLoop();   // Begin the loop
+pan.stopLoop();    // Stop and snap back to rest position
+```
+
+The loop starts automatically when `mode="loop"` is set on an already-connected element, and stops automatically when `disabled` is set to `true`.
+
+---
+
+## Direction
+
+| Direction | Rest position       | Pan direction |
+|-----------|--------------------|---------------|
+| `end`     | Start of text      | Left          |
+| `start`   | End of text        | Right         |
+
+```html
+<!-- Shows end of text at rest, pans left on hover -->
+<ixfx-pan-text direction="end">Very long label</ixfx-pan-text>
+
+<!-- Shows start of text at rest, pans right on hover -->
+<ixfx-pan-text direction="start">Very long label</ixfx-pan-text>
+```
+
+---
+
+## Properties / attributes
+
+| Attribute / Property | Type                  | Default  | Description                                           |
+|---------------------|-----------------------|----------|-------------------------------------------------------|
+| `direction`         | `'start'` \| `'end'`  | `'end'`  | Which end of the text is visible at rest              |
+| `mode`              | `'hover'` \| `'loop'` | `'hover'`| Interaction mode                                      |
+| `disabled`          | boolean               | `false`  | Disables panning and applies reduced opacity          |
+
+---
+
+## JavaScript API
+
+```ts
+const pan = document.querySelector('ixfx-pan-text');
+
+// Programmatic loop control
+pan.startLoop(); // Begin continuous panning
+pan.stopLoop();  // Stop and snap back
+
+// Check current state
+if (pan.looping) {
+  console.log('Pan is in loop mode');
+}
+```
+
+---
+
+## Accessibility
+
+Respects `prefers-reduced-motion`. When reduced motion is preferred, the text stays in its rest position without animation.
+
+---
+
+## CSS custom properties
+
+| Property            | Default   | Description          |
+|---------------------|-----------|----------------------|
+| `--disabled-opacity`| `0.5`     | Opacity when disabled |
+
+---
+
+## TypeScript types
+
+```ts
+import type { PanTextElement, PanTextMode } from 'ixfxfun-components';
+```

package/docs-user/text-shimmer.md

@@ -0,0 +1,56 @@
+# `ixfx-text-shimmer`
+
+A label with a sweeping highlight band across the text. Useful as a lightweight "still working…" or "loading…" indicator.
+
+```html
+<ixfx-text-shimmer text="Thinking…"></ixfx-text-shimmer>
+```
+
+Or using the default slot:
+
+```html
+<ixfx-text-shimmer>Reticulating splines…</ixfx-text-shimmer>
+```
+
+---
+
+## Properties / attributes
+
+| Attribute / Property | Type      | Default | Description                                     |
+|---------------------|-----------|---------|------------------------------------------------|
+| `text`              | `string`  | `''`    | Label text. When empty, uses the default slot  |
+| `paused`            | `boolean` | `false` | Stops the sweep and shows flat base colour     |
+
+---
+
+## CSS custom properties
+
+| Property                        | Default                        | Description                              |
+|---------------------------------|--------------------------------|------------------------------------------|
+| `--text-shimmer-color`          | `var(--surface-3-text)`       | Resting / base text colour               |
+| `--text-shimmer-gradient-color`| `var(--surface-2-text)`       | Colour of the moving highlight           |
+| `--text-shimmer-duration`       | `2s`                           | Time for one sweep                       |
+| `--text-shimmer-spread`         | `15%`                          | Half-width of the highlight band         |
+
+```css
+/* Example: warmer highlight colour */
+ixfx-text-shimmer {
+  --text-shimmer-color: #666;
+  --text-shimmer-gradient-color: #f0a500;
+  --text-shimmer-duration: 1.5s;
+}
+```
+
+---
+
+## Accessibility
+
+Respects `prefers-reduced-motion`. When reduced motion is preferred, the sweep animation is disabled and the text shows its base colour.
+
+---
+
+## TypeScript types
+
+```ts
+import type { TextShimmerElement } from 'ixfxfun-components';
+```

package/docs-user/tree.md

@@ -275,7 +275,8 @@ All events **bubble** and are **composed** (cross shadow-DOM boundaries).
 | `select` | `TreeSelectDetail` | Selection set changes by any means (click, keyboard, programmatic) |
 | `tickle` | `TreeTickleDetail` | An item enters cursor focus: pointer hover OR keyboard navigation cursor |
 | `activate` | `TreeActivateDetail` | User explicitly activates an item (Enter key or double-click) |
-| `item-click` | `{ node: TreeNode; depth: number }` | Raw pointer click on any item |
+| `item-click` | `{ node: TreeNode; depth: number }` | Raw pointer click on any item (not fired for the second click of a double-click) |
+| `item-dblclick` | `TreeItemDblClickDetail` | User double-clicks an item. The second click is swallowed, so a branch is never toggled open/closed by a double-click. `activate` also fires. |
 | `expand` | `{ node: TreeNode; depth: number }` | A branch expands |
 | `collapse` | `{ node: TreeNode; depth: number }` | A branch collapses |
 
@@ -524,8 +525,8 @@ These are set by the global theme and inherited by all tree components.
 | Variable | Default | Description |
 |----------|---------|-------------|
 | `--tree-indent` | `20px` | Indentation per depth level |
-| `--tree-item-height` | `28px` | Height of each row |
-| `--tree-caret-size` | `10px` | Expand/collapse caret size |
+| `--tree-item-height` | `2ch` | Height of each row |
+| `--tree-caret-size` | `30px` | Expand/collapse caret size |
 | `--ixfx-list-item-move-duration` | `200ms` | Row enter / leave animation duration |
 
 ### `ixfx-miller-list` specific
@@ -539,7 +540,7 @@ These are set by the global theme and inherited by all tree components.
 | `--item-selected-text` | `#fff` | Selected item text |
 | `--item-open-bg` | (theme) | Background for items on the open path |
 | `--icon-size` | `1em` | Icon dimensions |
-| `--icon-spacing` | `0.3em` | Gap between icon and label |
+| `--icon-spacing` | `0px` | Gap between icon and label |
 
 ---