@ixfx/components 0.7.3 → 0.7.4

package/bundle/index.d.ts

@@ -2590,6 +2590,8 @@ type BuiltInFormatterOptions = {
 type DataGridGetRowKey<R> = (row: R, index: number) => string;
 type DataGridGroupBy<R> = string | ((row: R) => string);
 type DataGridGroupLabel = (groupKey: string, rows: readonly unknown[]) => string;
+/** Whether the data-grid renders its built-in header column/group menu. */
+type DataGridColumnMenu = `auto` | `none`;
 //#endregion
 //#region src/menu/menu-bar.d.ts
 declare class MenuBar extends LitElement {
@@ -2822,6 +2824,7 @@ interface DataGridElementEventMap {
   'datagrid-group-change': DataGridGroupChangeEvent;
 }
 declare class DataGridElement extends LitElement {
+  #private;
   static styles: CSSResult[];
   columns: DataGridColumn[];
   rows: unknown[];
@@ -2839,6 +2842,12 @@ declare class DataGridElement extends LitElement {
   /** Columns keys that can be grouped by; undefined = all groupable columns */
   groupableColumns: string[] | undefined;
   crossGroupSelection: boolean;
+  /**
+   * `auto` (default): render the built-in header column/group menu.
+   * `none`: don't render it — for hosts that supply their own column UI via
+   * `column.visible` + `datagrid-column-visibility`.
+   */
+  columnMenu: DataGridColumnMenu;
   globalFormatter?: GlobalFormatter;
   private _columnFormatters;
   private _selectedKeys;
@@ -2883,6 +2892,29 @@ declare class DataGridElement extends LitElement {
   private _anchorKey;
   private _scrollRowIntoView;
   private _getRowForKey;
+  /** The selected row keys (read-only). */
+  get selectedKeys(): ReadonlySet<string>;
+  /** Replace the selection with these row keys (clamped to known rows). */
+  set selectedKeys(keys: Iterable<string>);
+  /**
+   * Replace the selection with the given row keys. Unknown keys are dropped;
+   * in a single-select mode only the last surviving key is kept;
+   * `selectionMode="none"` clears. Fires `datagrid-select` with the previous
+   * set when the selection actually changes.
+   */
+  selectKeys(keys: Iterable<string>): void;
+  /** The row key under the cursor, or `undefined`. */
+  get tickledKey(): string | undefined;
+  /** Move the cursor to this row key and scroll it into view. */
+  tickleRow(key: string): void;
+  /**
+   * Append rows without the full O(n log n) rebuild that reassigning `rows`
+   * incurs. `rows` still gets a new array reference (reactivity is preserved),
+   * but 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 kept.
+   */
+  appendRows(rows: readonly unknown[]): void;
   private _replaceSelection;
   private _toggleSelection;
   private _rangeSelectTo;
@@ -2925,6 +2957,69 @@ interface DataGridElement {
   removeEventListener: (<K extends keyof DataGridElementEventMap>(type: K, listener: (this: DataGridElement, event: DataGridElementEventMap[K]) => void, options?: boolean | EventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void);
 }
 //#endregion
+//#region src/data-table/data-table.d.ts
+type DataTableRow = {
+  label: string;
+  value: string | number | boolean | Node | TemplateResult;
+  fullWidth?: boolean;
+  detail?: string | TemplateResult;
+  id?: string;
+};
+type DataTableRowClickDetail = {
+  readonly row: DataTableRow;
+  readonly index: number;
+  readonly selected: boolean;
+};
+type DataTableRowClickEvent = CustomEvent<DataTableRowClickDetail>;
+interface DataTableElementEventMap {
+  'data-table-row-click': DataTableRowClickEvent;
+}
+declare class DataTableElement extends LitElement {
+  #private;
+  static styles: CSSResult[];
+  rows: readonly DataTableRow[];
+  selectedIndex: number | undefined;
+  /**
+   * How long (ms) the pointer must rest on a hovered row before its detail
+   * panel is revealed. The tickled highlight itself appears immediately on
+   * hover; only the detail panel is debounced. Clicking a row reveals its
+   * detail straight away, ignoring this delay.
+   */
+  tickleDelay: number;
+  /**
+   * Table layout.
+   * - `auto` (default): responsive — widens to multiple pair-columns on wide
+   *   containers, and stacks key above value once narrower than
+   *   {@link narrowBreakpoint}.
+   * - `rows`: always stacked (key above value), regardless of width.
+   * - `columns`: always a two-column key/value grid, regardless of width.
+   */
+  layout: `auto` | `rows` | `columns`;
+  /**
+   * Inline width (px) at or below which the `auto` layout switches to its
+   * stacked, key-above-value form. Ignored when {@link layout} is locked.
+   */
+  narrowBreakpoint: number;
+  private _tickled;
+  /** Index of the row whose detail panel is currently revealed, if any. */
+  private _detailIndex;
+  /** Whether the table is currently rendering in its stacked form. */
+  private _stacked;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  willUpdate(changed: PropertyValues<this>): void;
+  render(): ReturnType<typeof html>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-data-table': DataTableElement;
+  }
+}
+interface DataTableElement {
+  addEventListener<K extends keyof DataTableElementEventMap>(type: K, listener: (this: DataTableElement, event: DataTableElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+}
+//#endregion
 //#region src/interaction/list-selection-types.d.ts
 /**
  * Shared list selection types.
@@ -2951,6 +3046,11 @@ type ListInteractionMode = `implicit` | `standard` | `manual` | `checked` | `sti
 type ListSelectDetail = {
   readonly selected: ReadonlySet<Element>;
   readonly previous: ReadonlySet<Element>;
+  /**
+   * The selection as stable key strings (`data-key` / `data-value`). Empty
+   * when items carry no key. Additive to `selected`.
+   */
+  readonly selectedKeys: ReadonlySet<string>;
 };
 type ListTickleDetail = {
   readonly item: Element;
@@ -3030,7 +3130,14 @@ declare class VerticalListElement extends LitElement {
   /** The full current selection set (read-only). */
   get selectedItems(): ReadonlySet<Element>;
   addItem(item: Element | string, options?: AddItemOptions): void;
-  removeItem(item: Element): void;
+  /**
+   * Collapse + fade `item` out, then detach it. The rows below slide up to
+   * close the gap. Resolves once the element has actually been removed.
+   * Under `prefers-reduced-motion: reduce` it's removed immediately.
+   */
+  removeItem(item: Element): Promise<void>;
+  /** {@link removeItem} for several items at once. */
+  removeItems(items: Iterable<Element>): Promise<void>;
   clearItems(): void;
   /**
    * Replace the entire item list in one call.
@@ -3049,6 +3156,18 @@ declare class VerticalListElement extends LitElement {
   deselect(item: Element): void;
   clearSelection(): void;
   selectAll(): void;
+  /** The selection as stable `data-key` / `data-value` strings. */
+  get selectedKeys(): ReadonlySet<string>;
+  /** The key of the item under the cursor, or `undefined`. */
+  get tickledKey(): string | undefined;
+  /** Replace the selection with the items carrying these keys (unknown keys ignored). */
+  selectKeys(keys: Iterable<string>): void;
+  /** Add items by key to the selection (multi-select modes only). */
+  addSelectedKeys(keys: Iterable<string>): void;
+  /** Remove items by key from the selection. */
+  removeSelectedKeys(keys: Iterable<string>): void;
+  /** Move the cursor to the item with this key and scroll it into view. */
+  focusKey(key: string): void;
   selectedFilter(kind: `selected` | `checked` | `either`): Generator<Element>;
   private _getVisibleItems;
   private _isCheckable;
@@ -3163,7 +3282,13 @@ declare class DetailListElement extends LitElement {
    */
   refreshLayout(): void;
   addItem(item: Element | string, options?: AddItemOptions): void;
-  removeItem(item: Element): void;
+  /**
+   * Collapse + fade `item` out, then detach it; the rows after it slide up to
+   * close the gap. Resolves once removed. Immediate under reduced motion.
+   */
+  removeItem(item: Element): Promise<void>;
+  /** {@link removeItem} for several items at once. */
+  removeItems(items: Iterable<Element>): Promise<void>;
   clearItems(): void;
   /**
    * Replace the entire item list in one call.
@@ -3182,6 +3307,18 @@ declare class DetailListElement extends LitElement {
   deselect(item: Element): void;
   clearSelection(): void;
   selectAll(): void;
+  /** The selection as stable `data-key` / `data-value` strings. */
+  get selectedKeys(): ReadonlySet<string>;
+  /** The key of the item under the cursor, or `undefined`. */
+  get tickledKey(): string | undefined;
+  /** Replace the selection with the items carrying these keys (unknown keys ignored). */
+  selectKeys(keys: Iterable<string>): void;
+  /** Add items by key to the selection (multi-select modes only). */
+  addSelectedKeys(keys: Iterable<string>): void;
+  /** Remove items by key from the selection. */
+  removeSelectedKeys(keys: Iterable<string>): void;
+  /** Move the cursor to the item with this key and scroll it into view. */
+  focusKey(key: string): void;
   selectedFilter(kind: `selected` | `checked` | `either`): Generator<Element>;
   private _getVisibleItems;
   /**
@@ -4406,184 +4543,236 @@ declare global {
   }
 }
 //#endregion
-//#region src/grouped-item-lister/types.d.ts
-/**
- * Fired when the selection set changes by any means.
- * Event name: `select`
- */
-type SubComponentSelectDetail<T> = {
-  readonly selected: ReadonlySet<T>;
-  readonly previous: ReadonlySet<T>;
-};
-/**
- * Fired when an item is explicitly activated (double-click or Enter key).
- * Event name: `activate`
- */
-type SubComponentActivateDetail<T> = {
-  readonly item: T;
-};
-/**
- * Fired on a raw pointer click before any selection change.
- * Event name: `item-click`
- */
-type SubComponentItemClickDetail<T> = {
-  readonly item: T;
-};
-/**
- * Fired when the pointer hovers over an item or the keyboard cursor moves to it.
- * Event name: `tickle`
- */
-type SubComponentTickleDetail<T> = {
-  readonly item: T;
-};
-type SubComponentSelectEvent<T> = CustomEvent<SubComponentSelectDetail<T>>;
-type SubComponentActivateEvent<T> = CustomEvent<SubComponentActivateDetail<T>>;
-type SubComponentItemClickEvent<T> = CustomEvent<SubComponentItemClickDetail<T>>;
-type SubComponentTickleEvent<T> = CustomEvent<SubComponentTickleDetail<T>>;
-interface IGroupedSubComponentEventMap<T> {
-  'select': SubComponentSelectEvent<T>;
-  'activate': SubComponentActivateEvent<T>;
-  'item-click': SubComponentItemClickEvent<T>;
-  'tickle': SubComponentTickleEvent<T>;
-}
+//#region src/grid-list/types.d.ts
 /**
- * Contract that sub-components passed to `ixfx-grouped-item-lister` must satisfy.
- *
- * All four events (`select`, `activate`, `item-click`, `tickle`) must bubble and be composed
- * so they propagate through the lister's light DOM to external listeners.
+ * How the caption relates to the cell's content.
+ * - `hidden`: no caption is rendered.
+ * - `separate`: content sits in a square; the caption is a detached label
+ *   below it. Square and caption are highlighted separately, like macOS
+ *   Finder icon view.
+ * - `under` (default): the whole cell is one box — content on top, caption in
+ *   its own strip below it, inside the same box. One selection outline.
+ * - `overlaid`: the caption floats on top of the content (see
+ *   `GridListCaptionPosition` / `GridListCaptionBackdrop`).
  */
-interface IGroupedSubComponent<T> extends HTMLElement {
-  /** Replace the full item list. Called whenever the lister's items or grouping changes. */
-  setItems: (items: readonly T[]) => void;
-  /** Clear the current selection without firing a `select` event (avoids re-entrant loops). */
-  clearSelection: () => void;
-  /** The current selection set. */
-  readonly selectedItems: ReadonlySet<T>;
-  /** Controls how many items can be selected simultaneously. */
-  selectionMode: ListSelectionMode;
-  /**
-   * Forward a command (e.g. sort-order change) to this sub-component.
-   * Uses `CommandId` from `@clinth/ui-commands` for interoperability.
-   */
-  dispatch: (commandId: CommandId, args?: Record<string, unknown>) => void;
-  addEventListener: (<K extends keyof IGroupedSubComponentEventMap<T>>(type: K, listener: (event: IGroupedSubComponentEventMap<T>[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
-}
+type GridListCaptionStyle = `hidden` | `separate` | `under` | `overlaid`;
+/** Horizontal alignment of caption text (`middle` is the default). */
+type GridListCaptionAlign = `left` | `middle` | `right`;
+/** Vertical placement of an `overlaid` caption (`bottom` is the default). */
+type GridListCaptionPosition = `top` | `middle` | `bottom`;
 /**
- * Factory that creates a sub-component for a given group.
- * Called once per group (or once with `undefined` in ungrouped mode).
+ * Backdrop behind an `overlaid` caption.
+ * - `scrim` (default): flat translucent panel.
+ * - `gradient`: translucent gradient fading away from the caption edge.
+ * - `blur`: frosted / backdrop-blurred panel.
+ * - `none`: no panel — caption text only, with a shadow for legibility.
  */
-type SubComponentFactory<T> = (groupKey: string | undefined) => HTMLElement & IGroupedSubComponent<T>;
+type GridListCaptionBackdrop = `scrim` | `gradient` | `blur` | `none`;
 /**
- * Fired by `ixfx-grouped-item-lister` after any sub-component fires `select`.
- * Carries the full cross-group selection union and the key of the group whose
- * selection just changed (or `undefined` in ungrouped mode).
+ * Layout / scroll direction.
+ * - `grid` (default): items wrap across as many columns as fit and the list
+ *   scrolls vertically.
+ * - `row`: a single row of items that scrolls horizontally.
+ * - `column`: a single column of items that scrolls vertically.
  */
-type GroupedSelectDetail<T> = {
-  readonly selected: ReadonlySet<T>;
-  readonly groupKey: string | undefined;
-};
-type GroupedSelectEvent<T> = CustomEvent<GroupedSelectDetail<T>>;
-interface GroupedItemListerElementEventMap<T> {
-  'grouped-select': GroupedSelectEvent<T>;
-}
-//#endregion
-//#region src/panel/panel.d.ts
-/** Backwards-compatible aliases: canonical types now live in `../titlebar/titlebar.js`. */
-type PanelOrientation = TitlebarOrientation;
-type PanelVariant = TitlebarVariant;
-type PanelToggleInteraction = TitlebarToggleInteraction;
-type PanelToggleDetail = TitlebarToggleDetail;
-type PanelToggleEvent = TitlebarToggleEvent;
-type PanelCloseEvent = TitlebarCloseEvent;
-interface PanelElementEventMap {
-  toggle: PanelToggleEvent;
-  close: PanelCloseEvent;
-}
-declare class PanelElement extends LitElement {
-  collapsed: boolean;
-  orientation: PanelOrientation;
-  closable: boolean;
-  /** Show the collapse/expand caret and enable toggle behaviour. Defaults to true so existing panels stay collapsible. */
-  collapsible: boolean;
-  title: string;
-  iconName: string;
-  toggleInteraction: PanelToggleInteraction;
-  variant: PanelVariant;
-  /** Suppress the titlebar entirely (content-only chrome, e.g. dock tabbed mode). */
-  hideTitlebar: boolean;
-  private _onTitlebarToggle;
-  private _onCloseClick;
-  protected render(): TemplateResult<1>;
-  static styles: CSSResult[];
+type GridListOrientation = `grid` | `row` | `column`;
+interface GridListSelectDetail {
+  readonly selected: ReadonlySet<Element>;
+  readonly previous: ReadonlySet<Element>;
+  /** The selection as stable `data-key` / `data-value` strings. */
+  readonly selectedKeys: ReadonlySet<string>;
 }
-declare global {
-  interface HTMLElementTagNameMap {
-    'ixfx-panel': PanelElement;
-  }
+type GridListSelectEvent = CustomEvent<GridListSelectDetail>;
+interface GridListActivateDetail {
+  readonly item: Element;
 }
-interface PanelElement {
-  addEventListener: (<K extends keyof PanelElementEventMap>(type: K, listener: (this: PanelElement, event: PanelElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
+type GridListActivateEvent = CustomEvent<GridListActivateDetail>;
+interface GridListItemClickDetail {
+  readonly item: Element;
 }
-//#endregion
-//#region src/grouped-item-lister/grouped-item-lister.d.ts
-declare class GroupedItemListerElement<T = unknown> extends LitElement {
-  #private;
-  grouped: boolean;
-  crossGroupSelection: boolean;
-  get groupBy(): ((item: T) => string) | undefined;
-  set groupBy(value: ((item: T) => string) | undefined);
-  get factory(): SubComponentFactory<T> | undefined;
-  set factory(value: SubComponentFactory<T> | undefined);
-  get provider(): IDataProvider<void, T> | undefined;
-  set provider(value: IDataProvider<void, T> | undefined);
-  /** The union of all selected items across every sub-component. */
-  get selectedItems(): ReadonlySet<T>;
-  /**
-   * Forward a command to all live sub-components.
-   * Use this to propagate changes like sort order, filter state, or view mode.
-   */
-  dispatch(commandId: CommandId, args?: Record<string, unknown>): void;
-  protected createRenderRoot(): this;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  protected updated(changed: PropertyValues): void;
-  protected render(): typeof nothing | TemplateResult<1>;
+type GridListItemClickEvent = CustomEvent<GridListItemClickDetail>;
+interface GridListTickleDetail {
+  readonly item: Element;
 }
-declare global {
-  interface HTMLElementTagNameMap {
-    'ixfx-grouped-item-lister': GroupedItemListerElement;
-  }
+type GridListTickleEvent = CustomEvent<GridListTickleDetail>;
+interface GridListElementEventMap {
+  'list-select': GridListSelectEvent;
+  'list-activate': GridListActivateEvent;
+  'list-item-click': GridListItemClickEvent;
+  'list-tickle': GridListTickleEvent;
 }
-interface GroupedItemListerElement<T> {
-  addEventListener: (<K extends keyof GroupedItemListerElementEventMap<T>>(type: K, listener: (this: GroupedItemListerElement<T>, event: GroupedItemListerElementEventMap<T>[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
+type GridListViewportChangeDetail = {
+  readonly visibleKeys: string[];
+};
+type GridListViewportChangeEvent = CustomEvent<GridListViewportChangeDetail>;
+interface GridListFullElementEventMap extends GridListElementEventMap {
+  'grid-list-viewport-change': GridListViewportChangeEvent;
 }
 //#endregion
-//#region src/interaction/tickled-controller.d.ts
+//#region src/interaction/list-selection-controller.d.ts
+/** Modifier state needed to route a click gesture per interaction mode. */
+type ListSelectionGesture = {
+  readonly ctrlKey: boolean;
+  readonly metaKey: boolean;
+  readonly shiftKey: boolean;
+};
+type ListSelectionModes = {
+  readonly selectionMode: ListSelectionMode;
+  readonly interactionMode: ListInteractionMode;
+};
 /**
- * Represents an item that can be tickled (highlighted via hover or keyboard navigation)
+ * Configuration supplied by the host component.
+ *
+ * The controller owns selection *state* only — everything DOM- or
+ * component-specific is expressed through these callbacks.
  */
-type TickledItem<T = unknown> = {
+type ListSelectionControllerConfig<T> = {
+  /** Visible items in navigation order — used for range selection and select-all. */
+  readonly getOrderedItems: () => readonly T[];
+  /** Whether an item may join the selection (e.g. reject `not-checked` rows). */
+  readonly isSelectable: (item: T) => boolean;
+  /** Current modes; read on every gesture so property changes apply immediately. */
+  readonly getModes: () => ListSelectionModes;
   /**
-   * Unique identifier for the item (e.g., index, id, path)
+   * Fired after every selection change. The host syncs DOM state
+   * (`data-selected` / `data-checked`), dispatches `list-select`, and
+   * requests an update.
    */
-  readonly id: T;
+  readonly onChange: (selected: ReadonlySet<T>, previous: ReadonlySet<T>) => void;
   /**
-   * Whether the item is currently enabled/interactive
+   * Optional: derive a stable string key for an item. Enables `selectedKeys`
+   * and `selectKeys()`. When omitted, `selectedKeys` is always empty.
    */
-  readonly enabled?: boolean;
+  readonly getKey?: (item: T) => string | undefined;
 };
+/** Whether the interaction mode allows building a multi-item selection. */
+declare function isMultiMode(mode: ListInteractionMode): boolean;
 /**
- * Input mode determines which mechanism controls the tickled state
- */
-type InputMode = `keyboard` | `mouse`;
-/**
- * Configuration for TickledController
+ * Generic selection state machine shared by list components.
+ *
+ * Owns the selected set plus the range-selection anchor, the selection
+ * primitives (`replace` / `toggle` / `rangeTo` / `clear` / `selectAll` /
+ * `selectMany` / `deselect`) and the per-interactionMode gesture routers
+ * (`handleClick` / `handleSpace`).
+ *
+ * Identity is generic: both `ixfx-vertical-list` and `ixfx-detail-list` use
+ * `ListSelectionController<Element>`.
+ *
+ * @example
+ * ```ts
+ * const selection = new ListSelectionController<Element>({
+ *   getOrderedItems: () => this.getVisibleItems(),
+ *   isSelectable: el => !el.hasAttribute(`not-checked`),
+ *   getModes: () => ({ selectionMode: this.selectionMode, interactionMode: this.interactionMode }),
+ *   onChange: (selected, previous) => {
+ *     this.syncItemStates();
+ *     this.dispatchEvent(new CustomEvent(`list-select`, { detail: { selected, previous } }));
+ *   },
+ * });
+ * ```
  */
-type TickledControllerConfig<T> = {
-  /**
-   * Function to retrieve all items that can be tickled
-   */
-  getItems: () => ReadonlyArray<TickledItem<T>>;
+declare class ListSelectionController<T> {
+  #private;
+  constructor(config: ListSelectionControllerConfig<T>);
+  /** The current selection set (read-only). */
+  get selected(): ReadonlySet<T>;
+  /**
+   * The current selection as stable string keys (read-only). Empty unless a
+   * `getKey` was supplied in config. Items whose `getKey` returns `undefined`
+   * are omitted.
+   */
+  get selectedKeys(): ReadonlySet<string>;
+  /** Anchor for range (shift) selection — the last plainly-selected item. */
+  get anchor(): T | undefined;
+  /** Whether "select all" (Cmd/Ctrl+A) is currently permitted. */
+  canSelectAll(): boolean;
+  /** Whether a multi-item selection can be built in the current modes. */
+  canSelectMultiple(): boolean;
+  /** Replace the entire selection with a single item; updates the anchor. */
+  replace(item: T): void;
+  /** Toggle a single item in/out of the selection without replacing it. Anchor unchanged. */
+  toggle(item: T): void;
+  /** Select the contiguous ordered range from the anchor to `item`. Anchor unchanged. */
+  rangeTo(item: T): void;
+  /** Clear the selection. No change event when the selection is already empty. */
+  clear(): void;
+  /** Select every ordered item that passes `isSelectable`. */
+  selectAll(): void;
+  /**
+   * Replace the selection with many items at once. Requires
+   * `selectionMode="multiple"`, throws otherwise. Updates the anchor.
+   */
+  selectMany(items: Iterable<T>): void;
+  /** Remove a single item from the selection. */
+  deselect(item: T): void;
+  /**
+   * Replace the selection with the items resolved from `keys`. Keys that
+   * `resolve` cannot map, or that resolve to a non-selectable item, are
+   * ignored. `selectionMode="none"` is a no-op. When multi-select is not
+   * available, only the last resolvable key is kept. `onChange` fires once.
+   */
+  selectKeys(keys: Iterable<string>, resolve: (key: string) => T | undefined): void;
+  /**
+   * Add the items resolved from `keys` to the selection (multi-select only;
+   * a no-op otherwise). `onChange` fires once if anything changed.
+   */
+  addKeys(keys: Iterable<string>, resolve: (key: string) => T | undefined): void;
+  /**
+   * Remove the items resolved from `keys` from the selection. `onChange`
+   * fires once if anything changed.
+   */
+  removeKeys(keys: Iterable<string>, resolve: (key: string) => T | undefined): void;
+  /** Route a click on `item` according to the current interaction mode. */
+  handleClick(item: T, gesture: ListSelectionGesture): void;
+  /** Route a Space keypress on `item` according to the current interaction mode. */
+  handleSpace(item: T): void;
+  /** Drop the range-selection anchor (e.g. when the interaction mode changes). */
+  clearAnchor(): void;
+  /**
+   * Re-key the selection across an identity boundary — e.g. when items are
+   * wrapped/unwrapped and the selected Element references change. Silent:
+   * no `onChange` is fired.
+   */
+  remap(fn: (item: T) => T): void;
+  /**
+   * Hard reset: empty the selection and clear the anchor without firing
+   * `onChange` (e.g. when all items are removed).
+   */
+  reset(): void;
+  /**
+   * Replace the selection and anchor silently (no `onChange`). Used to
+   * re-key the selection when items are rebuilt from data — e.g. matching
+   * new elements to previously selected keys.
+   */
+  seed(items: Iterable<T>, anchor?: T): void;
+}
+//#endregion
+//#region src/interaction/tickled-controller.d.ts
+/**
+ * Represents an item that can be tickled (highlighted via hover or keyboard navigation)
+ */
+type TickledItem<T = unknown> = {
+  /**
+   * Unique identifier for the item (e.g., index, id, path)
+   */
+  readonly id: T;
+  /**
+   * Whether the item is currently enabled/interactive
+   */
+  readonly enabled?: boolean;
+};
+/**
+ * Input mode determines which mechanism controls the tickled state
+ */
+type InputMode = `keyboard` | `mouse`;
+/**
+ * Configuration for TickledController
+ */
+type TickledControllerConfig<T> = {
+  /**
+   * Function to retrieve all items that can be tickled
+   */
+  getItems: () => ReadonlyArray<TickledItem<T>>;
   /**
    * Optional callback when an item becomes tickled
    * Use this for side effects like opening submenus
@@ -4700,6 +4889,17 @@ declare class TickledController<T = number> implements ReactiveController {
    * Get the currently tickled item id
    */
   get tickledId(): T | undefined;
+  /**
+   * The item currently under the cursor, or `undefined`. Alias of `tickledId`
+   * for parity with other controllers.
+   */
+  get current(): T | undefined;
+  /**
+   * Move the cursor programmatically (e.g. to reveal a match or re-seat it
+   * after the item set changed). Does not change the input mode. Alias of
+   * `setTickled`.
+   */
+  focus(id: T | undefined): void;
   /**
    * Check if a specific item is tickled
    */
@@ -4752,6 +4952,253 @@ declare class TickledController<T = number> implements ReactiveController {
   setInputMode(mode: InputMode): void;
 }
 //#endregion
+//#region src/grid-list/grid-list.d.ts
+declare class GridListElement extends LitElement {
+  #private;
+  static styles: CSSResult[];
+  selectionMode: ListSelectionMode;
+  interactionMode: ListInteractionMode;
+  itemSize: number;
+  gap: number;
+  /**
+   * Layout / scroll direction.
+   * - `grid` (default): items wrap across as many columns as fit, scrolls vertically.
+   * - `row`: a single row of items, scrolls horizontally.
+   * - `column`: a single column of items, scrolls vertically.
+   */
+  orientation: GridListOrientation;
+  /**
+   * How the caption relates to the content — see {@link GridListCaptionStyle}.
+   * - `hidden`: no caption.
+   * - `separate`: detached label below the square, each highlighted on its own.
+   * - `under` (default): one box, content on top, caption strip below it inside.
+   * - `overlaid`: caption floats over the content.
+   */
+  captionStyle: GridListCaptionStyle;
+  /** Horizontal alignment of the caption text: `left`, `middle` (default), `right`. */
+  captionAlign: GridListCaptionAlign;
+  /** `overlaid` only — vertical placement: `top`, `middle`, `bottom` (default). */
+  captionPosition: GridListCaptionPosition;
+  /** `overlaid` only — backdrop behind the caption: `scrim` (default), `gradient`, `blur`, `none`. */
+  captionBackdrop: GridListCaptionBackdrop;
+  /**
+   * Height reserved for the caption in `separate` / `under` styles, in pixels.
+   * Ignored by `overlaid` and `hidden`.
+   */
+  captionHeight: number;
+  itemWrap: `stop` | `wrap`;
+  private _scrollTop;
+  private _scrollLeft;
+  private _viewportHeight;
+  private _viewportWidth;
+  readonly selection: ListSelectionController<Element>;
+  readonly tickled: TickledController<Element>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected firstUpdated(): void;
+  protected willUpdate(changed: PropertyValues<this>): void;
+  protected updated(changed: PropertyValues<this>): void;
+  private _getVisibleItems;
+  get count(): number;
+  /**
+   * Number of cells currently rendered in the shadow DOM. With virtualization
+   * this is roughly the visible rows plus overscan, regardless of how large
+   * `count` is — useful for demos/diagnostics.
+   */
+  get renderedCount(): number;
+  get selectedItems(): ReadonlySet<Element>;
+  /** The selection as stable `data-key` / `data-value` strings. */
+  get selectedKeys(): ReadonlySet<string>;
+  select(item: Element): void;
+  selectMany(items: Iterable<Element>): void;
+  deselect(item: Element): void;
+  clearSelection(): void;
+  selectAll(): void;
+  /**
+   * Replace the selection with the items carrying these keys. Unknown keys are
+   * ignored; survives the host rebuilding the item set. Requires each item to
+   * have a `data-key` (or `data-value`).
+   */
+  selectKeys(keys: Iterable<string>): void;
+  /** Add items by key to the selection (multi-select modes only). */
+  addSelectedKeys(keys: Iterable<string>): void;
+  /** Remove items by key from the selection. */
+  removeSelectedKeys(keys: Iterable<string>): void;
+  /** Move the cursor to the item with this key and scroll it into view. */
+  focusKey(key: string): void;
+  /** The key of the item under the cursor, or `undefined`. */
+  get tickledKey(): string | undefined;
+  getItem(key: string): Element | undefined;
+  getItemByIndex(index: number): Element | undefined;
+  getKey(item: Element): string | undefined;
+  visibleKeys(): string[];
+  private _syncItemStates;
+  private _dispatch;
+  protected render(): ReturnType<typeof html>;
+  private _onKeyDown;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-grid-list': GridListElement;
+  }
+}
+interface GridListElement {
+  addEventListener<K extends keyof GridListFullElementEventMap>(type: K, listener: (this: GridListElement, ev: GridListFullElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+}
+//#endregion
+//#region src/grouped-item-lister/types.d.ts
+/**
+ * Fired when the selection set changes by any means.
+ * Event name: `select`
+ */
+type SubComponentSelectDetail<T> = {
+  readonly selected: ReadonlySet<T>;
+  readonly previous: ReadonlySet<T>;
+};
+/**
+ * Fired when an item is explicitly activated (double-click or Enter key).
+ * Event name: `activate`
+ */
+type SubComponentActivateDetail<T> = {
+  readonly item: T;
+};
+/**
+ * Fired on a raw pointer click before any selection change.
+ * Event name: `item-click`
+ */
+type SubComponentItemClickDetail<T> = {
+  readonly item: T;
+};
+/**
+ * Fired when the pointer hovers over an item or the keyboard cursor moves to it.
+ * Event name: `tickle`
+ */
+type SubComponentTickleDetail<T> = {
+  readonly item: T;
+};
+type SubComponentSelectEvent<T> = CustomEvent<SubComponentSelectDetail<T>>;
+type SubComponentActivateEvent<T> = CustomEvent<SubComponentActivateDetail<T>>;
+type SubComponentItemClickEvent<T> = CustomEvent<SubComponentItemClickDetail<T>>;
+type SubComponentTickleEvent<T> = CustomEvent<SubComponentTickleDetail<T>>;
+interface IGroupedSubComponentEventMap<T> {
+  'select': SubComponentSelectEvent<T>;
+  'activate': SubComponentActivateEvent<T>;
+  'item-click': SubComponentItemClickEvent<T>;
+  'tickle': SubComponentTickleEvent<T>;
+}
+/**
+ * Contract that sub-components passed to `ixfx-grouped-item-lister` must satisfy.
+ *
+ * All four events (`select`, `activate`, `item-click`, `tickle`) must bubble and be composed
+ * so they propagate through the lister's light DOM to external listeners.
+ */
+interface IGroupedSubComponent<T> extends HTMLElement {
+  /** Replace the full item list. Called whenever the lister's items or grouping changes. */
+  setItems: (items: readonly T[]) => void;
+  /** Clear the current selection without firing a `select` event (avoids re-entrant loops). */
+  clearSelection: () => void;
+  /** The current selection set. */
+  readonly selectedItems: ReadonlySet<T>;
+  /** Controls how many items can be selected simultaneously. */
+  selectionMode: ListSelectionMode;
+  /**
+   * Forward a command (e.g. sort-order change) to this sub-component.
+   * Uses `CommandId` from `@clinth/ui-commands` for interoperability.
+   */
+  dispatch: (commandId: CommandId, args?: Record<string, unknown>) => void;
+  addEventListener: (<K extends keyof IGroupedSubComponentEventMap<T>>(type: K, listener: (event: IGroupedSubComponentEventMap<T>[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
+}
+/**
+ * Factory that creates a sub-component for a given group.
+ * Called once per group (or once with `undefined` in ungrouped mode).
+ */
+type SubComponentFactory<T> = (groupKey: string | undefined) => HTMLElement & IGroupedSubComponent<T>;
+/**
+ * Fired by `ixfx-grouped-item-lister` after any sub-component fires `select`.
+ * Carries the full cross-group selection union and the key of the group whose
+ * selection just changed (or `undefined` in ungrouped mode).
+ */
+type GroupedSelectDetail<T> = {
+  readonly selected: ReadonlySet<T>;
+  readonly groupKey: string | undefined;
+};
+type GroupedSelectEvent<T> = CustomEvent<GroupedSelectDetail<T>>;
+interface GroupedItemListerElementEventMap<T> {
+  'grouped-select': GroupedSelectEvent<T>;
+}
+//#endregion
+//#region src/panel/panel.d.ts
+/** Backwards-compatible aliases: canonical types now live in `../titlebar/titlebar.js`. */
+type PanelOrientation = TitlebarOrientation;
+type PanelVariant = TitlebarVariant;
+type PanelToggleInteraction = TitlebarToggleInteraction;
+type PanelToggleDetail = TitlebarToggleDetail;
+type PanelToggleEvent = TitlebarToggleEvent;
+type PanelCloseEvent = TitlebarCloseEvent;
+interface PanelElementEventMap {
+  toggle: PanelToggleEvent;
+  close: PanelCloseEvent;
+}
+declare class PanelElement extends LitElement {
+  collapsed: boolean;
+  orientation: PanelOrientation;
+  closable: boolean;
+  /** Show the collapse/expand caret and enable toggle behaviour. Defaults to true so existing panels stay collapsible. */
+  collapsible: boolean;
+  title: string;
+  iconName: string;
+  toggleInteraction: PanelToggleInteraction;
+  variant: PanelVariant;
+  /** Suppress the titlebar entirely (content-only chrome, e.g. dock tabbed mode). */
+  hideTitlebar: boolean;
+  private _onTitlebarToggle;
+  private _onCloseClick;
+  protected render(): TemplateResult<1>;
+  static styles: CSSResult[];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-panel': PanelElement;
+  }
+}
+interface PanelElement {
+  addEventListener: (<K extends keyof PanelElementEventMap>(type: K, listener: (this: PanelElement, event: PanelElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
+}
+//#endregion
+//#region src/grouped-item-lister/grouped-item-lister.d.ts
+declare class GroupedItemListerElement<T = unknown> extends LitElement {
+  #private;
+  grouped: boolean;
+  crossGroupSelection: boolean;
+  get groupBy(): ((item: T) => string) | undefined;
+  set groupBy(value: ((item: T) => string) | undefined);
+  get factory(): SubComponentFactory<T> | undefined;
+  set factory(value: SubComponentFactory<T> | undefined);
+  get provider(): IDataProvider<void, T> | undefined;
+  set provider(value: IDataProvider<void, T> | undefined);
+  /** The union of all selected items across every sub-component. */
+  get selectedItems(): ReadonlySet<T>;
+  /**
+   * Forward a command to all live sub-components.
+   * Use this to propagate changes like sort order, filter state, or view mode.
+   */
+  dispatch(commandId: CommandId, args?: Record<string, unknown>): void;
+  protected createRenderRoot(): this;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected updated(changed: PropertyValues): void;
+  protected render(): typeof nothing | TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-grouped-item-lister': GroupedItemListerElement;
+  }
+}
+interface GroupedItemListerElement<T> {
+  addEventListener: (<K extends keyof GroupedItemListerElementEventMap<T>>(type: K, listener: (this: GroupedItemListerElement<T>, event: GroupedItemListerElementEventMap<T>[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
+}
+//#endregion
 //#region src/tree/tree-base.d.ts
 declare class TreeBaseElement extends LitElement implements TreeComponent, TreeSearchHost {
   #private;
@@ -4772,6 +5219,9 @@ declare class TreeBaseElement extends LitElement implements TreeComponent, TreeS
   protected _expandedKeys: Set<string>;
   protected tickled: TickledController<string>;
   protected _focusedDepth: number;
+  willUpdate(changedProps: PropertyValues): void;
+  /** True while `node` is a fading ghost row (removed / collapsed, still animating out). */
+  protected _isLeaving(node: TreeNode): boolean;
   updated(changedProps: PropertyValues): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
@@ -4788,12 +5238,12 @@ declare class TreeBaseElement extends LitElement implements TreeComponent, TreeS
     node: TreeNode;
     depth: number;
   }>;
-  protected renderNodeContent(node: TreeNode, _depth: number): TemplateResult | typeof nothing;
+  protected renderNodeContent(node: TreeNode, depth: number): TemplateResult | typeof nothing;
   protected _handleItemClick(node: TreeNode, depth: number, event?: MouseEvent): void;
   protected _handleCheckboxClick(event: MouseEvent, node: TreeNode, _depth: number): void;
   protected _isSelected(node: TreeNode): boolean;
   protected _isFocused(node: TreeNode): boolean;
-  protected _isExpanded(node: TreeNode): boolean;
+  protected _isExpanded(node: TreeNode, depth?: number): boolean;
   protected get _pendingNode(): TreeNode | undefined;
   protected renderLoadingIndicator(): TemplateResult | typeof nothing;
   protected render(): TemplateResult<1>;
@@ -5291,115 +5741,101 @@ declare function buildHighlightTargets<T>(root: ShadowRoot | Element, itemSelect
 //#region src/incr-search/incr-search.d.ts
 declare function createIncrSearch<T>(options?: IncrSearchOptions<T>): IncrSearch<T>;
 //#endregion
-//#region src/interaction/list-selection-controller.d.ts
-/** Modifier state needed to route a click gesture per interaction mode. */
-type ListSelectionGesture = {
-  readonly ctrlKey: boolean;
-  readonly metaKey: boolean;
-  readonly shiftKey: boolean;
-};
-type ListSelectionModes = {
-  readonly selectionMode: ListSelectionMode;
-  readonly interactionMode: ListInteractionMode;
-};
+//#region src/interaction/keyed-list.d.ts
 /**
- * Configuration supplied by the host component.
+ * Helpers for key-based selection on the Element-flavoured list components
+ * (`ixfx-vertical-list`, `ixfx-detail-list`, `ixfx-grid-list`).
  *
- * The controller owns selection *state* only — everything DOM- or
- * component-specific is expressed through these callbacks.
+ * A "key" is a stable string the host puts on each item element — `data-key`
+ * (preferred) or `data-value`. It survives the host rebuilding the item set
+ * (re-fetch, re-sort, filter) where raw `Element` references do not.
  */
-type ListSelectionControllerConfig<T> = {
-  /** Visible items in navigation order — used for range selection and select-all. */
-  readonly getOrderedItems: () => readonly T[];
-  /** Whether an item may join the selection (e.g. reject `not-checked` rows). */
-  readonly isSelectable: (item: T) => boolean;
-  /** Current modes; read on every gesture so property changes apply immediately. */
-  readonly getModes: () => ListSelectionModes;
-  /**
-   * Fired after every selection change. The host syncs DOM state
-   * (`data-selected` / `data-checked`), dispatches `list-select`, and
-   * requests an update.
-   */
-  readonly onChange: (selected: ReadonlySet<T>, previous: ReadonlySet<T>) => void;
-};
-/** Whether the interaction mode allows building a multi-item selection. */
-declare function isMultiMode(mode: ListInteractionMode): boolean;
 /**
- * Generic selection state machine shared by list components.
- *
- * Owns the selected set plus the range-selection anchor, the selection
- * primitives (`replace` / `toggle` / `rangeTo` / `clear` / `selectAll` /
- * `selectMany` / `deselect`) and the per-interactionMode gesture routers
- * (`handleClick` / `handleSpace`).
- *
- * Identity is generic: both `ixfx-vertical-list` and `ixfx-detail-list` use
- * `ListSelectionController<Element>`.
+ * The stable key for an item element: `data-key`, then `data-value`, else
+ * `undefined`.
+ */
+declare function keyForElement(el: Element): string | undefined;
+/**
+ * A lazily-built key → element index over a container. Rebuilt on first use
+ * and after any child-list mutation under `root`; `invalidate()` forces a
+ * rebuild on the next `get()`.
  *
- * @example
  * ```ts
- * const selection = new ListSelectionController<Element>({
- *   getOrderedItems: () => this.getVisibleItems(),
- *   isSelectable: el => !el.hasAttribute(`not-checked`),
- *   getModes: () => ({ selectionMode: this.selectionMode, interactionMode: this.interactionMode }),
- *   onChange: (selected, previous) => {
- *     this.syncItemStates();
- *     this.dispatchEvent(new CustomEvent(`list-select`, { detail: { selected, previous } }));
- *   },
- * });
+ * #keyIndex = new KeyedElementIndex(this);
+ * // ...
+ * const el = this.#keyIndex.get(`row-42`);
+ * // on disconnect:
+ * this.#keyIndex.dispose();
  * ```
  */
-declare class ListSelectionController<T> {
+declare class KeyedElementIndex {
   #private;
-  constructor(config: ListSelectionControllerConfig<T>);
-  /** The current selection set (read-only). */
-  get selected(): ReadonlySet<T>;
-  /** Anchor for range (shift) selection — the last plainly-selected item. */
-  get anchor(): T | undefined;
-  /** Whether "select all" (Cmd/Ctrl+A) is currently permitted. */
-  canSelectAll(): boolean;
-  /** Whether a multi-item selection can be built in the current modes. */
-  canSelectMultiple(): boolean;
-  /** Replace the entire selection with a single item; updates the anchor. */
-  replace(item: T): void;
-  /** Toggle a single item in/out of the selection without replacing it. Anchor unchanged. */
-  toggle(item: T): void;
-  /** Select the contiguous ordered range from the anchor to `item`. Anchor unchanged. */
-  rangeTo(item: T): void;
-  /** Clear the selection. No change event when the selection is already empty. */
-  clear(): void;
-  /** Select every ordered item that passes `isSelectable`. */
-  selectAll(): void;
   /**
-   * Replace the selection with many items at once. Requires
-   * `selectionMode="multiple"`, throws otherwise. Updates the anchor.
+   * @param root Container whose descendants are indexed.
+   * @param itemSelector Which descendants count as items (default: any `[data-key]`).
    */
-  selectMany(items: Iterable<T>): void;
-  /** Remove a single item from the selection. */
-  deselect(item: T): void;
-  /** Route a click on `item` according to the current interaction mode. */
-  handleClick(item: T, gesture: ListSelectionGesture): void;
-  /** Route a Space keypress on `item` according to the current interaction mode. */
-  handleSpace(item: T): void;
-  /** Drop the range-selection anchor (e.g. when the interaction mode changes). */
-  clearAnchor(): void;
-  /**
-   * Re-key the selection across an identity boundary — e.g. when items are
-   * wrapped/unwrapped and the selected Element references change. Silent:
-   * no `onChange` is fired.
-   */
-  remap(fn: (item: T) => T): void;
-  /**
-   * Hard reset: empty the selection and clear the anchor without firing
-   * `onChange` (e.g. when all items are removed).
-   */
-  reset(): void;
+  constructor(root: Element, itemSelector?: string);
+  /** The element with this key, or `undefined`. First match wins on duplicates. */
+  get(key: string): Element | undefined;
+  /** Force a rebuild on the next `get()` — e.g. after a `data-key` attribute change. */
+  invalidate(): void;
+  /** Stop observing and drop the cache. */
+  dispose(): void;
+}
+//#endregion
+//#region src/interaction/list-item-animation.d.ts
+/**
+ * Shared insertion / removal animation for the list & tree components.
+ *
+ * Two flavours, because the components split into two layout families:
+ *
+ * - **Flow layouts** (`ixfx-vertical-list`, `ixfx-detail-list`, `ixfx-tree-*`) —
+ *   rows sit in normal flow, so a new row can collapse in from zero height and a
+ *   leaving row can collapse back to zero, and the rows around it slide to make
+ *   or close the gap for free. Use {@link animateListItemIn} /
+ *   {@link animateListItemOut} (Web Animations API, exact measured sizes).
+ *
+ * - **Virtualised layouts** (`ixfx-grid-list`, `ixfx-data-grid`) — rows are
+ *   absolutely positioned (`transform` / `top`), so collapsing a row's box moves
+ *   nothing. Those components instead fade the entering / leaving row with the
+ *   {@link listItemFadeKeyframes} keyframes and slide the survivors by
+ *   transitioning their position for a short window after the change.
+ *
+ * Everything here is a no-op under `prefers-reduced-motion: reduce`.
+ */
+/** Default duration (ms) for both flavours; overridable per call / per component. */
+declare const LIST_ITEM_MOTION_MS = 200;
+declare function prefersReducedMotion(): boolean;
+/**
+ * Opacity keyframes for the virtualised components. Each one adds its own
+ * one-line rule binding `.<row>.ixfx-item-entering` / `.ixfx-item-leaving` to
+ * these, plus a `prefers-reduced-motion` guard on its own selectors.
+ */
+declare const listItemFadeKeyframes: CSSResult;
+interface ListItemMotionOptions {
   /**
-   * Replace the selection and anchor silently (no `onChange`). Used to
-   * re-key the selection when items are rebuilt from data — e.g. matching
-   * new elements to previously selected keys.
+   * Animation duration in ms. When omitted, the element's
+   * `--ixfx-list-item-move-duration` custom property is used if set (accepts
+   * `ms` or `s`), otherwise {@link LIST_ITEM_MOTION_MS}.
    */
-  seed(items: Iterable<T>, anchor?: T): void;
+  duration?: number;
+  /** Which axis collapses — `block` (height, default) or `inline` (width). */
+  axis?: `block` | `inline`;
+  easing?: string;
 }
+/**
+ * Collapse + fade `el` in from nothing to its natural size. Call it just after
+ * the element has been inserted (it must already be laid out at full size so it
+ * can be measured). No-op under reduced motion.
+ */
+declare function animateListItemIn(el: HTMLElement, options?: ListItemMotionOptions): Animation | undefined;
+/**
+ * Collapse + fade `el` out. Resolves once the animation finishes (or straight
+ * away under reduced motion); the caller detaches the element after. The final
+ * collapsed state is held (`fill: forwards`) so there's no flash back to full
+ * size in the gap before removal.
+ */
+declare function animateListItemOut(el: HTMLElement, options?: ListItemMotionOptions): Promise<void>;
 //#endregion
 //#region src/interaction/tickled-styles.d.ts
 /**
@@ -6199,6 +6635,41 @@ interface PillRendererOptions {
 }
 declare function createPillRenderer(options?: PillRendererOptions): NotificationRenderer;
 //#endregion
+//#region src/pan-text/pan-text.d.ts
+declare class PanTextElement extends LitElement {
+  direction: `start` | `end`;
+  disabled: boolean;
+  private _isOverflowing;
+  private _isHovering;
+  private _textEl;
+  private _overflow;
+  private _resizeObserver;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  firstUpdated(): void;
+  protected updated(): void;
+  private _onMouseEnter;
+  private _onMouseLeave;
+  /**
+   * Measures how far the slotted text overflows its container. The measurement
+   * is taken on the inner `.text` span (which clips with an ellipsis), not on
+   * the host — the host never overflows, so measuring it always yielded zero
+   * and the hover interaction never activated.
+   *
+   * Skipped while hovering, because the hover styles switch `.text` to
+   * `overflow: visible` and the measurement would collapse to zero mid-pan.
+   */
+  private _measure;
+  private _textStyle;
+  protected render(): TemplateResult<1>;
+  static styles: CSSResult[];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-pan-text': PanTextElement;
+  }
+}
+//#endregion
 //#region src/panel/panel-group.d.ts
 type PanelGroupOrientation = `horizontal` | `vertical`;
 declare class PanelGroupElement extends LitElement {
@@ -7999,5 +8470,5 @@ interface XyPad {
 //#region src/index.d.ts
 declare function init(): void;
 //#endregion
-export { AcTextChangeDetail, AcTextChangeEvent, AcTextCompletionProvider, AcTextElement, AcTextItem, AcTextSelectDetail, AcTextSelectEvent, type AcTokenAddDetail, type AcTokenAddEvent, AcTokenElement, type AcTokenElementEventMap, type AcTokenItem, type AcTokenRemoveDetail, type AcTokenRemoveEvent, type AcTokenizerFn, type AcTokensChangeDetail, type AcTokensChangeEvent, AddItemOptions, Axis, ButtonElement, Checkbox, CheckboxChangeDetail, CheckboxChangeEvent, CheckboxEventMap, ClickSnapMode, ColourMapConfig, ColourMode, ColourPicker, type ColourPickerChangeEvent, type ColourPickerEventDetail, type ColourPickerInputEvent, ColourPickerPopup, ColourResult, ConfigEntry, ContiguousSelectEventDetail, CrossoverBehaviour, CrumbNavChangeDetail, CrumbNavChangeEvent, CrumbNavExpandDetail, CrumbNavExpandEvent, CrumbNavNavigateDetail, CrumbNavNavigateEvent, CrumbNavigationChangeDetail, CrumbNavigationChangeEvent, CrumbNavigationElement, CrumbNavigationElementEventMap, CrumbNavigationExpandDetail, CrumbNavigationExpandEvent, CrumbNavigationItemClickDetail, CrumbNavigationItemClickEvent, CrumbPathController, CrumbPathControllerOptions, CrumbPathElement, CrumbPathElementEventMap, CrumbSegment, CrumbSiblingLookupFn, type CssVars, CustomCheckboxOptions, DataBatch, DataController, DataControllerOptions, DataDisplayComponent, DataGridCellClickDetail, DataGridCellClickEvent, DataGridCellEditDetail, DataGridCellEditEvent, DataGridColumnReorderDetail, DataGridColumnReorderEvent, DataGridColumnResizeDetail, DataGridColumnResizeEvent, DataGridColumnVisibilityDetail, DataGridColumnVisibilityEvent, DataGridElement, DataGridElementEventMap, DataGridGroupChangeDetail, DataGridGroupChangeEvent, DataGridSelectDetail, DataGridSelectEvent, DataGridSortDetail, DataGridSortEvent, DataProviderResult, type DetailFormatter, DetailListElement, type DetailSortComparator, type DetailSortItem, type DetailSortMode, DisplayTextLogic, DistributeResult, DockAddPanelTarget, DockAxis, DockChangeDetail, DockChangeEvent, DockDirection, DockDragBoundaryDetail, DockDragBoundaryEvent, DockDropTarget, type DockDropZone, DockEdge, DockHostElement, DockHostElementEventMap, DockLayout, DockLeafContentRules, DockLeafInfo, DockLeafRef, DockNeighbours, DockNode, DockOperation, DockPanelActivatedDetail, DockPanelActivatedEvent, DockPanelAddedDetail, DockPanelAddedEvent, DockPanelDragStartDetail, DockPanelDragStartEvent, DockPanelElement, DockPanelElementEventMap, DockPanelInit, DockPanelRemovedDetail, DockPanelRemovedEvent, DockPanelSnapshot, DockPanelTearOutDetail, DockPanelTearOutEvent, DockRect, DockSplitNode, DockStackNode, DragSnappingFn, DragTarget, EditableLabel, EditableLabelChangeDetail, EditableLabelChangeEvent, EditableMode, EditableNumber, Effect, type ElementIncrSearch, type ElementIncrSearchOptions, Endpoints, EntryMode, FormElement, FormGroupElement, FormPartElement, FormatValueForHuman, FormattingOptions, type FuzzySearch, type FuzzySearchOptions, FuzzySearchResult, GridMode, GridResolution, GroupNode, GroupedItemListerElement, type GroupedItemListerElementEventMap, type GroupedSelectDetail, type GroupedSelectEvent, HexChangeDetail, HexChangeEvent, type HighlightOptions, type HighlightTarget, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IDataProvider, type IGroupedSubComponent, type IGroupedSubComponentEventMap, type IconChangedDetail, type IconChangedEvent, type IconEntry, type IncrSearch, type IncrSearchChangeCallback, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, type IncrSearchTreeOptions as IncrSearchMillerOptions, type IncrSearchTreeOptions, type IncrSearchOptions, type IncrSearchResult, type IncrSearchState, type InputMode, ItemsProvider, IxfxHexEditorElement, IxfxIconElement, IxfxRatingElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LaneData, LaneType, LayoutNode, LayoutSnapshot, LeafGeom, LedElement, type ListActivateDetail, type ListActivateEvent, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListSelectDetail, type ListSelectEvent, ListSelectionController, type ListSelectionControllerConfig, type ListSelectionGesture, type ListSelectionMode, type ListSelectionModes, type ListTickleDetail, type ListTickleEvent, LoadChildrenCallback, MarkerStyle, index_d_exports as Menu, type TreeActivateDetail as MillerActivateDetail, TreeActivateDetail, type TreeActivateEvent as MillerActivateEvent, TreeActivateEvent, MillerBaseElement, MillerBaseElementEventMap, type TreeCollapseDetail as MillerCollapseDetail, TreeCollapseDetail, type TreeCollapseEvent as MillerCollapseEvent, TreeCollapseEvent, MillerConfig, type TreeExpandDetail as MillerExpandDetail, TreeExpandDetail, type TreeExpandEvent as MillerExpandEvent, TreeExpandEvent, MillerHeaderClickDetail, MillerHeaderClickEvent, MillerHeaderRightClickDetail, MillerHeaderRightClickEvent, type TreeItem as MillerItem, TreeItem, type TreeItemClickDetail as MillerItemClickDetail, TreeItemClickDetail, type TreeItemClickEvent as MillerItemClickEvent, TreeItemClickEvent, MillerItemDblClickDetail, MillerItemDblClickEvent, MillerItemRightClickDetail, MillerItemRightClickEvent, MillerItemState, MillerListElement, type TreeNode as MillerNode, TreeNode, type TreeSelectDetail as MillerSelectDetail, TreeSelectDetail, type TreeSelectEvent as MillerSelectEvent, TreeSelectEvent, MillerSelectionMode, type TreeTickleDetail as MillerTickleDetail, TreeTickleDetail, type TreeTickleEvent as MillerTickleEvent, TreeTickleEvent, MillerTreeController, MillerTreeControllerOptions, NarrowedTextChangeDetail, NarrowedTextChangeEvent, NarrowedTextElement, NarrowedTextItem, NoneSelectEventDetail, Notification, NotificationContent, NotificationManager, NotificationPillElement, NotificationPillElementEventMap, NotificationRenderer, NotificationRendererHooks, NotificationType, NotifierOptions, type OklchValue, Orientation, PanelCloseEvent, PanelElement, PanelElementEventMap, PanelGroupElement, PanelGroupOrientation, PanelInfo, PanelNode, PanelOrientation, PanelToggleDetail, PanelToggleEvent, PanelToggleInteraction, PanelVariant, PillPosition, PillQueueDisplay, PillRendererOptions, PillSafeArea, PillTapDetail, PillTapEvent, PlotDataSeries, PlotDataSeriesOptions, PlotHistogram, PlotHistogramBucketClickDetail, PlotHistogramBucketClickEvent, PlotHistogramElementEventMap, PlotHistogramOrientation, PlotHistogramValueTooltips, PlotMultiAxis, PlotMultiAxisDataPointClickDetail, PlotMultiAxisDataPointClickEvent, PlotMultiAxisElementEventMap, PlotMultiAxisLayout, PlotSingleAxis, PlotSingleAxisElementEventMap, PlotSingleAxisPointerMoveDetail, PlotSingleAxisPointerMoveEvent, PlotXyAxis, PolarPad, PolarPadInputDetail, PolarPadInputEvent, PopupItem, RadialInputChangeDetail, RadialInputChangeEvent, RadialInputElement, RadialInputInputDetail, RadialInputInputEvent, RadioGroup, RadioGroupChangeDetail, RadioGroupChangeEvent, RadioGroupMode, RadioItem, RangeElement, RangeInput, RangeMultiElement, RangeMultiInputDetail, RangeMultiInputEvent, RatingChangeDetail, RatingChangeEvent, RatingElement, RatingElementEventMap, RatingInputEvent, RatingVariant, type Rect, RectangularSelectEventDetail, RendererStyle, ResizeMode, SelectEventDetail, SelectHorizChangeDetail, SelectHorizChangeEvent, SelectHorizElement, SelectHorizEventMap, SelectionMode, SingleAxisAgeStyle, SingleAxisDrawStyle, SingleSelectEventDetail, SliderChangedField, SliderCrossover, SliderHandleKey, SliderInputChangeDetail, SliderInputChangeEvent, SliderInputElement, SliderInputElementEventMap, SliderInputInputDetail, SliderInputInputEvent, SliderLaneData, SliderLaneType, SliderMarkerStyle, SliderOrientation, SliderSingleStyle, SliderValueCFollow, SliderValueDrag, SliderValueMode, SlidingNumberElement, SlidingNumberTrend, SnackbarDismiss, SnackbarElement, SnackbarMode, SnackbarPlacement, SnapChangeDetail, SnapChangeEvent, SnapContainer, SnapInputDetail, SnapInputEvent, SnapLogic, SnapshotNode, SortCompareFn, SplitButton, SplitButtonMode, SplitButtonSelectDetail, SplitButtonSelectEvent, SplitChangeDetail, SplitChangeEvent, SplitCloseDetail, SplitCloseEvent, SplitCollapseDetail, SplitCollapseEvent, SplitExpandDetail, SplitExpandEvent, SplitLayoutElement, SplitLayoutElementEventMap, SplitPanelElement, SplitResizeDetail, SplitResizeEvent, type SubComponentActivateDetail, type SubComponentActivateEvent, type SubComponentFactory, type SubComponentItemClickDetail, type SubComponentItemClickEvent, type SubComponentSelectDetail, type SubComponentSelectEvent, type SubComponentTickleDetail, type SubComponentTickleEvent, SwipeElement, SwipeElementEventMap, SwipeInputDetail, SwipeInputEvent, SwitcherItem, Tab, TabAddOptions, TabController, TabControllerOptions, TabListChangeDetail, TabListChangeEvent, TabListDragMode, TabListElement, TabListItemElement, TabListReorderDetail, TabListReorderEvent, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, type TickledControllerConfig, type TickledItem, TimelineController, TimelineControllerConfig, TimelineDraggingCallbackDetail, TimelineDraggingDetail, TimelineDraggingEvent, TimelineElementEventMap, TimelineEvent, TimelineEventMoveDetail, TimelineEventMoveEvent, TimelineEventResizeDetail, TimelineEventResizeEvent, TimelineSelectionChangeDetail, TimelineSelectionChangeEvent, TimelineTickleChangeDetail, TimelineTickleChangeEvent, TimelineTrack, TimelineTrackReorderDetail, TimelineTrackReorderEvent, TimelineTrackResizeDetail, TimelineTrackResizeEvent, TimelineTrackSelectDetail, TimelineTrackSelectEvent, TimelineTrackTabElement, TitlebarCloseEvent, TitlebarElement, TitlebarElementEventMap, TitlebarOrientation, TitlebarToggleDetail, TitlebarToggleEvent, TitlebarToggleInteraction, TitlebarVariant, ToolbarAlign, ToolbarElement, ToolbarGroupElement, ToolbarLayout, ToolbarOrientation, ToolbarVerticalWriting, TooltipElement, TooltipOrientations, TrackHeightMode, TrackLayout, TransitoryLabelElement, TreeBaseElement, TreeBaseElementEventMap, TreeCheckboxState, TreeComponent, TreeComponentEventMap, TreeConfig, TreeController, TreeControllerOptions, TreeDataModel, TreeDataModelOptions, TreeExclusivity, TreeFilterPredicate, TreeInteractionMode, type TreeKeyboardNavCallbacks, TreeKeyboardNavController, type TreeKeyboardNavControllerConfig, type TreeKeyboardNavItemId, TreeListAdapterOptions, TreeListElement, TreeSearchHost, TreeSelectionFilter, TwoSplitLayoutElement, UserScale, ValueMode, VerticalListAdapterOptions, VerticalListElement, ViewRange, WhenSmall, XyAgeStyle, XyDrawStyle, XyPad, XyPadEventMap, XyPadInputDetail, XyPadInputEvent, addPanelToStack, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, buildHighlightTargets, buildModel, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createElementIncrSearch, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, parseColourScaleAttr, parseLayout, pointerOverAnyHost, readBaseColour, registerFontIcon, registerIcon, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
+export { AcTextChangeDetail, AcTextChangeEvent, AcTextCompletionProvider, AcTextElement, AcTextItem, AcTextSelectDetail, AcTextSelectEvent, type AcTokenAddDetail, type AcTokenAddEvent, AcTokenElement, type AcTokenElementEventMap, type AcTokenItem, type AcTokenRemoveDetail, type AcTokenRemoveEvent, type AcTokenizerFn, type AcTokensChangeDetail, type AcTokensChangeEvent, AddItemOptions, Axis, ButtonElement, Checkbox, CheckboxChangeDetail, CheckboxChangeEvent, CheckboxEventMap, ClickSnapMode, ColourMapConfig, ColourMode, ColourPicker, type ColourPickerChangeEvent, type ColourPickerEventDetail, type ColourPickerInputEvent, ColourPickerPopup, ColourResult, ConfigEntry, ContiguousSelectEventDetail, CrossoverBehaviour, CrumbNavChangeDetail, CrumbNavChangeEvent, CrumbNavExpandDetail, CrumbNavExpandEvent, CrumbNavNavigateDetail, CrumbNavNavigateEvent, CrumbNavigationChangeDetail, CrumbNavigationChangeEvent, CrumbNavigationElement, CrumbNavigationElementEventMap, CrumbNavigationExpandDetail, CrumbNavigationExpandEvent, CrumbNavigationItemClickDetail, CrumbNavigationItemClickEvent, CrumbPathController, CrumbPathControllerOptions, CrumbPathElement, CrumbPathElementEventMap, CrumbSegment, CrumbSiblingLookupFn, type CssVars, CustomCheckboxOptions, DataBatch, DataController, DataControllerOptions, DataDisplayComponent, DataGridCellClickDetail, DataGridCellClickEvent, DataGridCellEditDetail, DataGridCellEditEvent, DataGridColumnReorderDetail, DataGridColumnReorderEvent, DataGridColumnResizeDetail, DataGridColumnResizeEvent, DataGridColumnVisibilityDetail, DataGridColumnVisibilityEvent, DataGridElement, DataGridElementEventMap, DataGridGroupChangeDetail, DataGridGroupChangeEvent, DataGridSelectDetail, DataGridSelectEvent, DataGridSortDetail, DataGridSortEvent, DataProviderResult, DataTableElement, DataTableElementEventMap, DataTableRow, DataTableRowClickDetail, DataTableRowClickEvent, type DetailFormatter, DetailListElement, type DetailSortComparator, type DetailSortItem, type DetailSortMode, DisplayTextLogic, DistributeResult, DockAddPanelTarget, DockAxis, DockChangeDetail, DockChangeEvent, DockDirection, DockDragBoundaryDetail, DockDragBoundaryEvent, DockDropTarget, type DockDropZone, DockEdge, DockHostElement, DockHostElementEventMap, DockLayout, DockLeafContentRules, DockLeafInfo, DockLeafRef, DockNeighbours, DockNode, DockOperation, DockPanelActivatedDetail, DockPanelActivatedEvent, DockPanelAddedDetail, DockPanelAddedEvent, DockPanelDragStartDetail, DockPanelDragStartEvent, DockPanelElement, DockPanelElementEventMap, DockPanelInit, DockPanelRemovedDetail, DockPanelRemovedEvent, DockPanelSnapshot, DockPanelTearOutDetail, DockPanelTearOutEvent, DockRect, DockSplitNode, DockStackNode, DragSnappingFn, DragTarget, EditableLabel, EditableLabelChangeDetail, EditableLabelChangeEvent, EditableMode, EditableNumber, Effect, type ElementIncrSearch, type ElementIncrSearchOptions, Endpoints, EntryMode, FormElement, FormGroupElement, FormPartElement, FormatValueForHuman, FormattingOptions, type FuzzySearch, type FuzzySearchOptions, FuzzySearchResult, type GridListActivateDetail, type GridListActivateEvent, type GridListCaptionAlign, type GridListCaptionBackdrop, type GridListCaptionPosition, type GridListCaptionStyle, GridListElement, type GridListElementEventMap, type GridListFullElementEventMap, type GridListItemClickDetail, type GridListItemClickEvent, type GridListOrientation, type GridListSelectDetail, type GridListSelectEvent, type GridListTickleDetail, type GridListTickleEvent, type GridListViewportChangeDetail, type GridListViewportChangeEvent, GridMode, GridResolution, GroupNode, GroupedItemListerElement, type GroupedItemListerElementEventMap, type GroupedSelectDetail, type GroupedSelectEvent, HexChangeDetail, HexChangeEvent, type HighlightOptions, type HighlightTarget, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IDataProvider, type IGroupedSubComponent, type IGroupedSubComponentEventMap, type IconChangedDetail, type IconChangedEvent, type IconEntry, type IncrSearch, type IncrSearchChangeCallback, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, type IncrSearchTreeOptions as IncrSearchMillerOptions, type IncrSearchTreeOptions, type IncrSearchOptions, type IncrSearchResult, type IncrSearchState, type InputMode, ItemsProvider, IxfxHexEditorElement, IxfxIconElement, IxfxRatingElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LaneData, LaneType, LayoutNode, LayoutSnapshot, LeafGeom, LedElement, type ListActivateDetail, type ListActivateEvent, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListItemMotionOptions, type ListSelectDetail, type ListSelectEvent, ListSelectionController, type ListSelectionControllerConfig, type ListSelectionGesture, type ListSelectionMode, type ListSelectionModes, type ListTickleDetail, type ListTickleEvent, LoadChildrenCallback, MarkerStyle, index_d_exports as Menu, type TreeActivateDetail as MillerActivateDetail, TreeActivateDetail, type TreeActivateEvent as MillerActivateEvent, TreeActivateEvent, MillerBaseElement, MillerBaseElementEventMap, type TreeCollapseDetail as MillerCollapseDetail, TreeCollapseDetail, type TreeCollapseEvent as MillerCollapseEvent, TreeCollapseEvent, MillerConfig, type TreeExpandDetail as MillerExpandDetail, TreeExpandDetail, type TreeExpandEvent as MillerExpandEvent, TreeExpandEvent, MillerHeaderClickDetail, MillerHeaderClickEvent, MillerHeaderRightClickDetail, MillerHeaderRightClickEvent, type TreeItem as MillerItem, TreeItem, type TreeItemClickDetail as MillerItemClickDetail, TreeItemClickDetail, type TreeItemClickEvent as MillerItemClickEvent, TreeItemClickEvent, MillerItemDblClickDetail, MillerItemDblClickEvent, MillerItemRightClickDetail, MillerItemRightClickEvent, MillerItemState, MillerListElement, type TreeNode as MillerNode, TreeNode, type TreeSelectDetail as MillerSelectDetail, TreeSelectDetail, type TreeSelectEvent as MillerSelectEvent, TreeSelectEvent, MillerSelectionMode, type TreeTickleDetail as MillerTickleDetail, TreeTickleDetail, type TreeTickleEvent as MillerTickleEvent, TreeTickleEvent, MillerTreeController, MillerTreeControllerOptions, NarrowedTextChangeDetail, NarrowedTextChangeEvent, NarrowedTextElement, NarrowedTextItem, NoneSelectEventDetail, Notification, NotificationContent, NotificationManager, NotificationPillElement, NotificationPillElementEventMap, NotificationRenderer, NotificationRendererHooks, NotificationType, NotifierOptions, type OklchValue, Orientation, PanTextElement, PanelCloseEvent, PanelElement, PanelElementEventMap, PanelGroupElement, PanelGroupOrientation, PanelInfo, PanelNode, PanelOrientation, PanelToggleDetail, PanelToggleEvent, PanelToggleInteraction, PanelVariant, PillPosition, PillQueueDisplay, PillRendererOptions, PillSafeArea, PillTapDetail, PillTapEvent, PlotDataSeries, PlotDataSeriesOptions, PlotHistogram, PlotHistogramBucketClickDetail, PlotHistogramBucketClickEvent, PlotHistogramElementEventMap, PlotHistogramOrientation, PlotHistogramValueTooltips, PlotMultiAxis, PlotMultiAxisDataPointClickDetail, PlotMultiAxisDataPointClickEvent, PlotMultiAxisElementEventMap, PlotMultiAxisLayout, PlotSingleAxis, PlotSingleAxisElementEventMap, PlotSingleAxisPointerMoveDetail, PlotSingleAxisPointerMoveEvent, PlotXyAxis, PolarPad, PolarPadInputDetail, PolarPadInputEvent, PopupItem, RadialInputChangeDetail, RadialInputChangeEvent, RadialInputElement, RadialInputInputDetail, RadialInputInputEvent, RadioGroup, RadioGroupChangeDetail, RadioGroupChangeEvent, RadioGroupMode, RadioItem, RangeElement, RangeInput, RangeMultiElement, RangeMultiInputDetail, RangeMultiInputEvent, RatingChangeDetail, RatingChangeEvent, RatingElement, RatingElementEventMap, RatingInputEvent, RatingVariant, type Rect, RectangularSelectEventDetail, RendererStyle, ResizeMode, SelectEventDetail, SelectHorizChangeDetail, SelectHorizChangeEvent, SelectHorizElement, SelectHorizEventMap, SelectionMode, SingleAxisAgeStyle, SingleAxisDrawStyle, SingleSelectEventDetail, SliderChangedField, SliderCrossover, SliderHandleKey, SliderInputChangeDetail, SliderInputChangeEvent, SliderInputElement, SliderInputElementEventMap, SliderInputInputDetail, SliderInputInputEvent, SliderLaneData, SliderLaneType, SliderMarkerStyle, SliderOrientation, SliderSingleStyle, SliderValueCFollow, SliderValueDrag, SliderValueMode, SlidingNumberElement, SlidingNumberTrend, SnackbarDismiss, SnackbarElement, SnackbarMode, SnackbarPlacement, SnapChangeDetail, SnapChangeEvent, SnapContainer, SnapInputDetail, SnapInputEvent, SnapLogic, SnapshotNode, SortCompareFn, SplitButton, SplitButtonMode, SplitButtonSelectDetail, SplitButtonSelectEvent, SplitChangeDetail, SplitChangeEvent, SplitCloseDetail, SplitCloseEvent, SplitCollapseDetail, SplitCollapseEvent, SplitExpandDetail, SplitExpandEvent, SplitLayoutElement, SplitLayoutElementEventMap, SplitPanelElement, SplitResizeDetail, SplitResizeEvent, type SubComponentActivateDetail, type SubComponentActivateEvent, type SubComponentFactory, type SubComponentItemClickDetail, type SubComponentItemClickEvent, type SubComponentSelectDetail, type SubComponentSelectEvent, type SubComponentTickleDetail, type SubComponentTickleEvent, SwipeElement, SwipeElementEventMap, SwipeInputDetail, SwipeInputEvent, SwitcherItem, Tab, TabAddOptions, TabController, TabControllerOptions, TabListChangeDetail, TabListChangeEvent, TabListDragMode, TabListElement, TabListItemElement, TabListReorderDetail, TabListReorderEvent, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, type TickledControllerConfig, type TickledItem, TimelineController, TimelineControllerConfig, TimelineDraggingCallbackDetail, TimelineDraggingDetail, TimelineDraggingEvent, TimelineElementEventMap, TimelineEvent, TimelineEventMoveDetail, TimelineEventMoveEvent, TimelineEventResizeDetail, TimelineEventResizeEvent, TimelineSelectionChangeDetail, TimelineSelectionChangeEvent, TimelineTickleChangeDetail, TimelineTickleChangeEvent, TimelineTrack, TimelineTrackReorderDetail, TimelineTrackReorderEvent, TimelineTrackResizeDetail, TimelineTrackResizeEvent, TimelineTrackSelectDetail, TimelineTrackSelectEvent, TimelineTrackTabElement, TitlebarCloseEvent, TitlebarElement, TitlebarElementEventMap, TitlebarOrientation, TitlebarToggleDetail, TitlebarToggleEvent, TitlebarToggleInteraction, TitlebarVariant, ToolbarAlign, ToolbarElement, ToolbarGroupElement, ToolbarLayout, ToolbarOrientation, ToolbarVerticalWriting, TooltipElement, TooltipOrientations, TrackHeightMode, TrackLayout, TransitoryLabelElement, TreeBaseElement, TreeBaseElementEventMap, TreeCheckboxState, TreeComponent, TreeComponentEventMap, TreeConfig, TreeController, TreeControllerOptions, TreeDataModel, TreeDataModelOptions, TreeExclusivity, TreeFilterPredicate, TreeInteractionMode, type TreeKeyboardNavCallbacks, TreeKeyboardNavController, type TreeKeyboardNavControllerConfig, type TreeKeyboardNavItemId, TreeListAdapterOptions, TreeListElement, TreeSearchHost, TreeSelectionFilter, TwoSplitLayoutElement, UserScale, ValueMode, VerticalListAdapterOptions, VerticalListElement, ViewRange, WhenSmall, XyAgeStyle, XyDrawStyle, XyPad, XyPadEventMap, XyPadInputDetail, XyPadInputEvent, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, buildHighlightTargets, buildModel, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createElementIncrSearch, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, readBaseColour, registerFontIcon, registerIcon, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
 //# sourceMappingURL=index.d.ts.map