@ixfx/components 0.13.1 → 0.13.3

package/dist/tree.d.ts

@@ -1,267 +1,4 @@
-import { A as TreeDataModelOptions, C as TreeItemDblClickEvent, D as TreeTickleDetail, E as TreeSelectEvent, F as ListDragPreviewSourceResolver, L as ListNativeDragStartDetail, O as TreeTickleEvent, P as ListDragPreviewRenderer, T as TreeSelectDetail, _ as TreeDropTarget, a as TreeComponent, b as TreeItemClickDetail, c as TreeDragContext, d as TreeDragStartEvent, g as TreeDropPosition, h as TreeDropEvent, i as TreeCollapseEvent, k as TreeDataModel, l as TreeDragEndEvent, m as TreeDropDetail, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeDropContext, r as TreeCollapseDetail, s as TreeDndMode, t as TreeActivateDetail, u as TreeDragOverEvent, v as TreeExpandDetail, w as TreeSearchHost, x as TreeItemClickEvent, y as TreeExpandEvent } from "./tree-component-Cj8V3uar.js";
-import { a as TreeItem, i as TreeInteractionMode, n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-DQ7KOUIj.js";
-import { S as ListSearchController } from "./index-CxZ61DO1.js";
-import { t as ListNativeDragController } from "./list-native-drag-controller-ChIi3eK5.js";
-import { n as TickledController } from "./tickled-controller-DodxD3eQ.js";
-import { LitElement, PropertyValues, ReactiveController, ReactiveControllerHost, TemplateResult, nothing } from "lit";
-import { CommandRegistry } from "@clinth/ui-commands";
-import { TraversableTree } from "@ixfx/collections";
-//#region src/tree/types.d.ts
-/** Tree layout/display configuration (tree-specific, not shared). */
-type TreeConfig = {
-  indent: number;
-};
-//#endregion
-//#region src/tree/tree-base.d.ts
-declare class TreeBaseElement extends LitElement implements TreeComponent, TreeSearchHost {
-  #private;
-  root: TreeNode | undefined;
-  model: TreeDataModel | undefined;
-  /** Callback to lazily load children for a node. Superseded by `model` when both are set. */
-  loadChildren: LoadChildrenCallback | undefined;
-  exclusivity: TreeExclusivity;
-  selectionFilter: TreeSelectionFilter;
-  /** Controls how pointer/keyboard gestures map to selection changes. Default: `'standard'`. */
-  interactionMode: TreeInteractionMode;
-  selectedNode: TreeNode | undefined;
-  protected _selectedNodes: Set<TreeNode>;
-  get selectedNodes(): ReadonlySet<TreeNode>;
-  filterPredicate: TreeFilterPredicate | undefined;
-  disableKeyboardNavigation: boolean;
-  registry: CommandRegistry<unknown> | undefined;
-  /**
-   * Space-separated subset of `navigate select filter` — limits which
-   * incremental-search modes are offered. Unset ⇒ all three; empty ⇒ search
-   * disabled. See `docs/infra-incremental.md`.
-   */
-  searchModes: string | undefined;
-  itemDnd: TreeDndMode;
-  acceptDropTypes: string | undefined;
-  dndExpandHoverMs: number;
-  /**
-   * Whether a drag that only reorders siblings (no dragged node changes parent)
-   * is honoured. Default `true`. Set `reorderable="false"` for models with no
-   * meaningful child order (e.g. a filesystem) — pure-reorder drags then get no
-   * drop indicator and emit no `tree-drop`. Reparenting is unaffected.
-   */
-  reorderable: boolean;
-  /**
-   * VS Code-style sticky headers: while scrolling vertically, the ancestors of
-   * the top-visible row stick to the top of the list. Clicking a stuck header
-   * selects that ancestor and scrolls it into view; clicking its caret toggles
-   * expansion. On by default — set `sticky-headers="false"` to opt out.
-   */
-  stickyHeaders: boolean;
-  dragPreviewRenderer: ListDragPreviewRenderer<TreeNode> | undefined;
-  dragPreviewSource: ListDragPreviewSourceResolver<TreeNode> | undefined;
-  canDrag: ((ctx: TreeDragContext) => boolean) | undefined;
-  canDrop: ((ctx: TreeDropContext) => boolean) | undefined;
-  parseExternalDrop: ((dt: DataTransfer) => TreeNode[] | undefined) | undefined;
-  applyInternalDrop: boolean;
-  protected _expandedKeys: Set<string>;
-  protected tickled: TickledController<string>;
-  protected _focusedDepth: number;
-  /** Incremental search (navigate / select / filter). See `docs/infra-incremental.md`. */
-  readonly search: ListSearchController<{
-    node: TreeNode;
-    depth: number;
-  }>;
-  /**
-   * Ancestor keys currently stuck to the top of the list (root-ward order).
-   * Recomputed on scroll and structural updates; empty when nothing is stuck.
-   */
-  protected _stickyKeys: string[];
-  protected get nativeDrag(): ListNativeDragController<TreeNode>;
-  protected get dropState(): TreeDropTarget | undefined;
-  /** Keys of the nodes currently being dragged out of this tree. */
-  protected get nativeDragKeys(): ReadonlySet<string>;
-  willUpdate(changedProps: PropertyValues): void;
-  /** True while `node` is a fading ghost row (removed / collapsed, still animating out). */
-  protected _isLeaving(node: TreeNode): boolean;
-  /**
-   * True when `filterPredicate` is set and neither `node` nor any descendant
-   * matches — the row should carry the `filtered` class (`display: none`).
-   */
-  protected _isFilteredOut(node: TreeNode, depth: number): boolean;
-  updated(changedProps: PropertyValues): void;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  getConfig(): TreeConfig;
-  setConfig(config: Partial<TreeConfig>): void;
-  select(node: TreeNode): void;
-  deselect(node: TreeNode): void;
-  clearSelection(): void;
-  selectAll(): void;
-  deselectAll(): void;
-  navigateTo(keys: readonly string[]): boolean;
-  navigateToNode(predicate: (node: TreeNode) => boolean): boolean;
-  /** Expand ancestors + move the cursor to `key`, without touching the selection (search "navigate" mode). */
-  revealKey(key: string): boolean;
-  /** Replace the selection with `nodes` (subject to `selectionFilter`) — search "select" mode. */
-  selectMany(nodes: Iterable<TreeNode>): void;
-  getNodes(): ReadonlyArray<{
-    node: TreeNode;
-    depth: number;
-  }>;
-  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, depth?: number): boolean;
-  protected get _pendingNode(): TreeNode | undefined;
-  protected renderLoadingIndicator(): TemplateResult | typeof nothing;
-  protected render(): TemplateResult<1>;
-  /** Shared drag-and-drop render state for a row, used by every `_renderNode` variant. */
-  protected _dndRowState(node: TreeNode): {
-    draggable: boolean;
-    dragging: boolean;
-    dropTarget: boolean;
-    dropPosition?: TreeDropTarget[`position`];
-    dropDepth?: number;
-  };
-  protected _renderNode(node: TreeNode, depth: number): TemplateResult;
-  static styles: import("lit").CSSResult[];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    'ixfx-tree-base': TreeBaseElement;
-  }
-}
-interface TreeBaseElementEventMap extends TreeComponentEventMap {
-  'item-click': TreeItemClickEvent;
-  'item-dblclick': TreeItemDblClickEvent;
-  'expand': TreeExpandEvent;
-  'collapse': TreeCollapseEvent;
-  'select': TreeSelectEvent;
-  'tickle': TreeTickleEvent;
-  'activate': TreeActivateEvent;
-  'list-native-drag-start': CustomEvent<ListNativeDragStartDetail<TreeNode>>;
-  'tree-drag-start': TreeDragStartEvent;
-  'tree-drag-over': TreeDragOverEvent;
-  'tree-drop': TreeDropEvent;
-  'tree-drag-end': TreeDragEndEvent;
-}
-interface TreeBaseElement {
-  addEventListener: (<K extends keyof TreeBaseElementEventMap>(type: K, listener: (this: TreeBaseElement, event: TreeBaseElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
-  removeEventListener: (<K extends keyof TreeBaseElementEventMap>(type: K, listener: (this: TreeBaseElement, event: TreeBaseElementEventMap[K]) => void, options?: boolean | EventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void);
-}
-//#endregion
-//#region src/tree/tree-list.d.ts
-/** Checkbox tri-state in `checked` interactionMode: a branch node is `indeterminate` when some but not all of its descendants are selected. */
-type TreeCheckboxState = `checked` | `unchecked` | `indeterminate`;
-declare class TreeListElement extends TreeBaseElement {
-  #private;
-  /**
-   * Optional renderer for the checkbox shown in `checked` interactionMode.
-   * Receives the node's current tri-state (`checked` / `unchecked` / `indeterminate`,
-   * the latter when some but not all descendants are selected) and returns a Lit
-   * template.
-   *
-   * When set, the checkbox becomes a `<span role="checkbox">` whose contents are
-   * whatever this returns. When unset, a native `<input type="checkbox">` is used.
-   *
-   * @example
-   *   list.checkboxRenderer = (state) => state === `unchecked`
-   *     ? html``
-   *     : html`<svg viewBox="0 0 16 16" width="14" height="14"
-   *           fill="none" stroke="currentColor" stroke-width="2"
-   *           stroke-linecap="round" stroke-linejoin="round"
-   *           style="opacity:${state === `indeterminate` ? 0.35 : 0.6}">
-   *         <polyline points="3,8 7,12 13,4" />
-   *       </svg>`;
-   */
-  checkboxRenderer: ((state: TreeCheckboxState) => unknown) | undefined;
-  protected render(): TemplateResult<1>;
-  protected renderNodeContent(node: TreeNode, depth: number): TemplateResult;
-  protected _renderNode(node: TreeNode, depth: number): TemplateResult;
-  static styles: import("lit").CSSResult[];
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    'ixfx-tree-list': TreeListElement;
-  }
-}
-interface TreeListElement {
-  addEventListener: (<K extends keyof TreeBaseElementEventMap>(type: K, listener: (this: TreeListElement, event: TreeBaseElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
-}
-//#endregion
-//#region src/tree/tree-controller.d.ts
-type TreeControllerOptions<T> = {
-  valueToItem: (value: T, node: TraversableTree<T>) => TreeItem;
-};
-declare class TreeController<T> {
-  #private;
-  constructor(root: TraversableTree<T>, element: TreeBaseElement, options: TreeControllerOptions<T>);
-  connect(): void;
-  disconnect(): void;
-  navigateToValue(predicate: (value: T) => boolean): boolean;
-}
-//#endregion
-//#region src/tree/tree-drop-controller.d.ts
-interface TreeDropVisibleRow {
-  readonly key: string;
-  readonly node: TreeNode;
-  readonly depth: number;
-  readonly rect: DOMRect;
-}
-/** What a `dragover` / `drop` DataTransfer resolved to for this tree. */
-interface TreeDropResolvedDrag {
-  readonly source: `internal` | `external`;
-  /** Keys of the dragged nodes (empty for external). */
-  readonly keys: readonly string[];
-  /** The dragged nodes — live nodes for internal, parsed payload for external. */
-  readonly nodes: readonly TreeNode[];
-}
-type TreeDropControllerConfig = {
-  getDndMode: () => `none` | `internal` | `external` | `both`;
-  getExpandHoverMs: () => number;
-  /** Visible rows in display order, each with a fresh viewport rect. Host may cache. */
-  getVisibleRows: () => TreeDropVisibleRow[];
-  getIndentPx: () => number;
-  getScrollContainer: () => HTMLElement | undefined;
-  /** True when `key` is `ancestorKey` or a descendant of it. */
-  isSelfOrDescendant: (ancestorKey: string, key: string) => boolean;
-  /** True when the node is currently expanded in the UI. */
-  isExpanded: (key: string) => boolean;
-  /**
-   * When `false`, an internal drop that would not change any dragged node's
-   * parent (pure sibling reorder, or dropping back into the current parent) is
-   * rejected outright — no indicator, no `tree-drop`.
-   */
-  isReorderAllowed: () => boolean;
-  /** Current parent key of `key`, or `undefined` for a root-level node. */
-  getParentKey: (key: string) => string | undefined;
-  /**
-   * Decide whether this DataTransfer is acceptable and resolve the dragged set.
-   * `phase` is `hover` during dragenter/dragover (DataTransfer is read-protected —
-   * resolve internal drags from the drag registry) and `drop` during drop
-   * (getData is readable; external payloads may be parsed here). Return
-   * `undefined` to reject (the tree will not become a drop target).
-   */
-  resolveDrag: (dataTransfer: DataTransfer, phase: `hover` | `drop`) => TreeDropResolvedDrag | undefined;
-  vet: (ctx: TreeDropContext) => boolean;
-  expandKey: (key: string) => void;
-  /** Fired whenever the resolved drop target changes (undefined = none / rejected). */
-  onDropStateChange: (state: TreeDropTarget | undefined) => void;
-  /** Fired when a drag enters / leaves this tree. */
-  onActiveChange: (active: boolean) => void;
-  commitDrop: (detail: TreeDropDetail) => boolean;
-  onDragEnd: (dropped: boolean) => void;
-};
-declare class TreeDropController implements ReactiveController {
-  #private;
-  constructor(host: ReactiveControllerHost & HTMLElement, config: TreeDropControllerConfig);
-  /** A drag is currently over this tree. */
-  get isDragging(): boolean;
-  /** A drag is over this tree but the current position is not a valid drop. */
-  get isRejected(): boolean;
-  get dropState(): TreeDropTarget | undefined;
-  hostConnected(): void;
-  /** Bind once the shadow `#container` exists (it does not yet at `hostConnected`). */
-  hostUpdated(): void;
-  hostDisconnected(): void;
-}
-//#endregion
-export { type LoadChildrenCallback, type TreeActivateDetail, type TreeActivateEvent, TreeBaseElement, TreeBaseElementEventMap, TreeCheckboxState, type TreeCollapseDetail, type TreeCollapseEvent, type TreeComponentEventMap, TreeConfig, TreeController, TreeControllerOptions, TreeDataModel, type TreeDataModelOptions, type TreeDndMode, type TreeDragContext, type TreeDragEndEvent, type TreeDragOverEvent, type TreeDragStartEvent, type TreeDropContext, TreeDropController, TreeDropControllerConfig, type TreeDropDetail, type TreeDropEvent, type TreeDropPosition, TreeDropResolvedDrag, type TreeDropTarget, TreeDropVisibleRow, type TreeExclusivity, type TreeExpandDetail, type TreeExpandEvent, type TreeFilterPredicate, type TreeItem, type TreeItemClickDetail, type TreeItemClickEvent, TreeListElement, type TreeNode, type TreeSelectDetail, type TreeSelectEvent, type TreeSelectionFilter, type TreeTickleDetail, type TreeTickleEvent };
-//# sourceMappingURL=tree.d.ts.map
+import { A as TreeDataModelOptions, D as TreeTickleDetail, E as TreeSelectEvent, O as TreeTickleEvent, T as TreeSelectDetail, _ as TreeDropTarget, b as TreeItemClickDetail, c as TreeDragContext, d as TreeDragStartEvent, g as TreeDropPosition, h as TreeDropEvent, i as TreeCollapseEvent, k as TreeDataModel, l as TreeDragEndEvent, m as TreeDropDetail, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeDropContext, r as TreeCollapseDetail, s as TreeDndMode, t as TreeActivateDetail, u as TreeDragOverEvent, v as TreeExpandDetail, x as TreeItemClickEvent, y as TreeExpandEvent } from "./tree-component-Cj8V3uar.js";
+import { a as TreeItem, n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-DQ7KOUIj.js";
+import { a as TreeDropVisibleRow, c as TreeListElement, d as TreeBaseElementEventMap, f as TreeVirtualize, i as TreeDropRowInfo, l as TreeCheckboxState, n as TreeDropControllerConfig, o as TreeController, p as TreeConfig, r as TreeDropResolvedDrag, s as TreeControllerOptions, t as TreeDropController, u as TreeBaseElement } from "./index-CnQPCywE.js";
+export { type LoadChildrenCallback, type TreeActivateDetail, type TreeActivateEvent, TreeBaseElement, TreeBaseElementEventMap, type TreeCheckboxState, type TreeCollapseDetail, type TreeCollapseEvent, type TreeComponentEventMap, TreeConfig, TreeController, TreeControllerOptions, TreeDataModel, type TreeDataModelOptions, type TreeDndMode, type TreeDragContext, type TreeDragEndEvent, type TreeDragOverEvent, type TreeDragStartEvent, type TreeDropContext, TreeDropController, TreeDropControllerConfig, type TreeDropDetail, type TreeDropEvent, type TreeDropPosition, TreeDropResolvedDrag, TreeDropRowInfo, type TreeDropTarget, TreeDropVisibleRow, type TreeExclusivity, type TreeExpandDetail, type TreeExpandEvent, type TreeFilterPredicate, type TreeItem, type TreeItemClickDetail, type TreeItemClickEvent, TreeListElement, type TreeNode, type TreeSelectDetail, type TreeSelectEvent, type TreeSelectionFilter, type TreeTickleDetail, type TreeTickleEvent, TreeVirtualize };

package/dist/tree.js

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

package/dist/{vertical-list-CqBc-t8w.d.ts → vertical-list-lj_19DCx.d.ts}

@@ -1,6 +1,6 @@
 import { F as ListDragPreviewSourceResolver, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent } from "./tree-component-Cj8V3uar.js";
 import { n as ListViewportChangeEvent } from "./list-viewport-types-BRZsLcvp.js";
-import { S as ListSearchController } from "./index-CxZ61DO1.js";
+import { S as ListSearchController } from "./index-Dlah7Zfi.js";
 import { i as ListInteractionMode, l as ListSelectionMode, r as ListElementEventMap } from "./list-selection-types-PjKdhF-a.js";
 import "./editable-label-rzXkjf1H.js";
 import { LitElement, PropertyValues } from "lit";
@@ -319,6 +319,7 @@ declare class VerticalListElement extends LitElement {
   private _onClick;
   private _onDblClick;
   private _activateItem;
+  activateKey(key: string): void;
   private _onDragOver;
   private _onDragLeave;
   private _onDrop;
@@ -358,4 +359,4 @@ interface VerticalListElementEventMap extends ListElementEventMap {
 }
 //#endregion
 export { ListContextMenuDetail as a, ListDragLeaveEvent as c, ListDropEvent as d, ListEditCancelDetail as f, ListEditCommitEvent as h, VerticalListElementEventMap as i, ListDragOverEvent as l, ListEditCommitDetail as m, CustomCheckboxOptions as n, ListContextMenuEvent as o, ListEditCancelEvent as p, VerticalListElement as r, ListDragLeaveDetail as s, AddItemOptions as t, ListDropDetail as u };
-//# sourceMappingURL=vertical-list-CqBc-t8w.d.ts.map
+//# sourceMappingURL=vertical-list-lj_19DCx.d.ts.map

package/dist/{vertical-list-CqBc-t8w.d.ts.map → vertical-list-lj_19DCx.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"vertical-list-CqBc-t8w.d.ts","names":[],"sources":["../src/vertical-list/types.ts","../src/vertical-list/vertical-list.ts"],"mappings":";;;;;;;;;;;;KAuBY;WACD;WACA,MAAM;WACN,cAAc;;KAGb;WACD;;KAGC;WACD;WACA,MAAM;;WAEN;WACA;;WAEA,cAAc;;KAGb;WACD;WACA;;KAGC;WACD;;KAGC,oBAAoB,YAAY;KAChC,gBAAgB,YAAY;KAC5B,qBAAqB,YAAY;KACjC,uBAAuB,YAAY;KACnC,sBAAsB,YAAY;KAClC,sBAAsB,YAAY;;;UC+B7B;EACf,WAAW;EACX;EACA;;UAGe;;;;;;EAMf;;cAkCW,4BAA4B;;EAEvC,eAAe;EAGf,iBAAiB;EAGjB,mBAAmB,IAAI;;;;;;EAQvB;;;;;;;;;;;;;;;;;;;EAqBA,oBAAoB,gCAAgC;;;;;;EAQpD;;;;;;EAQA;;;;;EAOA,qBAAqB,wBAAwB;EAG7C,mBAAmB,8BAA8B;;;;;;;;;;;EAajD;;;;;EAOA;;;;;;;;;EAWA,aAAa,eAAe;;;;;;;EAS5B,QAAQ,eAAe;;;;;EAOvB,aAAa,eAAe;;;;;EAO5B,aAAa,eAAe;;;;;;EAQ5B,SAAS,eAAe;;;;;;;;;;;;;;;;;;EAoBxB;;;;;;EAQA;;;;;;;;EAUA;;;;;;;EASA,iBAAiB,eAAe;;;;;;EAQhC,WAAW,MAAM,qBAAqB,cAAc;mBAyCnC;UAeT;UA6EA;;WA6EC,QAAM,qBAAA;;MAYX,YAAY;EA2BP;EA0BA;;;;;;YAkCU;EAwDV,QAAQ,SAAS;;MAgFtB,gBAAgB;;MAKhB,iBAAiB,YAAY;EAIjC,QAAQ,MAAM,kBAAkB,UAAU;;;;;;;EA4B1C,WAAW,MAAM,UAAU;;EA2B3B,YAAY,OAAO,SAAS,WAAW;EAIvC;;;;;;EAmBA,SAAS,gBAAgB;;;;;;EAwBzB,SAAS,WAAW,WAAW,OAAO;EAItC,OAAO,MAAM;EAIb,WAAW,OAAO,SAAS;EAI3B,SAAS,MAAM;EAIf;EAIA;;MAQI,gBAAgB;;MAKhB;;EAMJ,WAAW,MAAM;;EAKjB,gBAAgB,MAAM;;EAKtB,mBAAmB,MAAM;;;;;;EASzB,SAAS;;EAgCT,aAAa,cAAc;;;;;;;;EAW3B;;;;;;;EAuBA;EAsBE,eAAe,0CAA0C,UAAU;;;;;EA2CrE,YAAY,MAAM;;;;;;;;;;;EAclB,WAAW,aAAa;UAmiBhB;UAgBA;UAOA;UAiBA;;;;;;;UA4GA;;;;;UAuBA;UAcA;UAYA;UAQA;UAWA;UAMA;UAIA;UAmEA;UAYA;UAQA;UAaA;UA2BA;UAOA;UAwCA;;MAuCJ;;;;;;;;;;;;EAmBJ,UAAU;SAiEM,sBAAM;EAuLb,wBAAM;;QAeT;YACI;IACR,sBAAsB;;YAGd,4BAA4B;;UAGvB,oCAAoC;EACnD,iCAAiC;EACjC,0BAA0B,yBAAyB;EACnD,kBAAkB;EAClB,aAAa;EACb,mBAAmB;EACnB,qBAAqB;EACrB,oBAAoB;EACpB,oBAAoB"}
+{"version":3,"file":"vertical-list-lj_19DCx.d.ts","names":[],"sources":["../src/vertical-list/types.ts","../src/vertical-list/vertical-list.ts"],"mappings":";;;;;;;;;;;;KAuBY;WACD;WACA,MAAM;WACN,cAAc;;KAGb;WACD;;KAGC;WACD;WACA,MAAM;;WAEN;WACA;;WAEA,cAAc;;KAGb;WACD;WACA;;KAGC;WACD;;KAGC,oBAAoB,YAAY;KAChC,gBAAgB,YAAY;KAC5B,qBAAqB,YAAY;KACjC,uBAAuB,YAAY;KACnC,sBAAsB,YAAY;KAClC,sBAAsB,YAAY;;;UCgC7B;EACf,WAAW;EACX;EACA;;UAGe;;;;;;EAMf;;cAkCW,4BAA4B;;EAEvC,eAAe;EAGf,iBAAiB;EAGjB,mBAAmB,IAAI;;;;;;EAQvB;;;;;;;;;;;;;;;;;;;EAqBA,oBAAoB,gCAAgC;;;;;;EAQpD;;;;;;EAQA;;;;;EAOA,qBAAqB,wBAAwB;EAG7C,mBAAmB,8BAA8B;;;;;;;;;;;EAajD;;;;;EAOA;;;;;;;;;EAWA,aAAa,eAAe;;;;;;;EAS5B,QAAQ,eAAe;;;;;EAOvB,aAAa,eAAe;;;;;EAO5B,aAAa,eAAe;;;;;;EAQ5B,SAAS,eAAe;;;;;;;;;;;;;;;;;;EAoBxB;;;;;;EAQA;;;;;;;;EAUA;;;;;;;EASA,iBAAiB,eAAe;;;;;;EAQhC,WAAW,MAAM,qBAAqB,cAAc;mBAyCnC;UAeT;UAqFA;;WA6EC,QAAM,qBAAA;;MAcX,YAAY;EA2BP;EA0BA;;;;;;YAkCU;EAwDV,QAAQ,SAAS;;MAgFtB,gBAAgB;;MAKhB,iBAAiB,YAAY;EAIjC,QAAQ,MAAM,kBAAkB,UAAU;;;;;;;EA6B1C,WAAW,MAAM,UAAU;;EA2B3B,YAAY,OAAO,SAAS,WAAW;EAIvC;;;;;;EAoBA,SAAS,gBAAgB;;;;;;EA0BzB,SAAS,WAAW,WAAW,OAAO;EAItC,OAAO,MAAM;EAIb,WAAW,OAAO,SAAS;EAI3B,SAAS,MAAM;EAIf;EAIA;;MAQI,gBAAgB;;MAKhB;;EAMJ,WAAW,MAAM;;EAKjB,gBAAgB,MAAM;;EAKtB,mBAAmB,MAAM;;;;;;EASzB,SAAS;;EAkFT,aAAa,cAAc;;;;;;;;EAW3B;;;;;;;EAuBA;EAsBE,eAAe,0CAA0C,UAAU;;;;;EA2CrE,YAAY,MAAM;;;;;;;;;;;EAclB,WAAW,aAAa;UAmjBhB;UAgBA;UAOA;UAmBA;;;;;;;UA4GA;;;;;UAuBA;UAcA;UAYA;UAQA;UAWA;UAMA;UAIA;UAyFA;UAYA;UAQA;EAQR,YAAY;UAWJ;UA2BA;UAOA;UA0CA;;MAuCJ;;;;;;;;;;;;EAmBJ,UAAU;SAiEM,sBAAM;EAuLb,wBAAM;;QAuBT;YACI;IACR,sBAAsB;;YAGd,4BAA4B;;UAGvB,oCAAoC;EACnD,iCAAiC;EACjC,0BAA0B,yBAAyB;EACnD,kBAAkB;EAClB,aAAa;EACb,mBAAmB;EACnB,qBAAqB;EACrB,oBAAoB;EACpB,oBAAoB"}

package/dist/vertical-list.d.ts

@@ -1,5 +1,5 @@
 import { I as ListDragSource, L as ListNativeDragStartDetail, M as ListDragPreview, N as ListDragPreviewContext, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent, j as ListDragEntry } from "./tree-component-Cj8V3uar.js";
 import { n as ListViewportChangeEvent, t as ListViewportChangeDetail } from "./list-viewport-types-BRZsLcvp.js";
 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-PjKdhF-a.js";
-import { a as ListContextMenuDetail, c as ListDragLeaveEvent, d as ListDropEvent, f as ListEditCancelDetail, h as ListEditCommitEvent, i as VerticalListElementEventMap, l as ListDragOverEvent, m as ListEditCommitDetail, n as CustomCheckboxOptions, o as ListContextMenuEvent, p as ListEditCancelEvent, r as VerticalListElement, s as ListDragLeaveDetail, t as AddItemOptions, u as ListDropDetail } from "./vertical-list-CqBc-t8w.js";
+import { a as ListContextMenuDetail, c as ListDragLeaveEvent, d as ListDropEvent, f as ListEditCancelDetail, h as ListEditCommitEvent, i as VerticalListElementEventMap, l as ListDragOverEvent, m as ListEditCommitDetail, n as CustomCheckboxOptions, o as ListContextMenuEvent, p as ListEditCancelEvent, r as VerticalListElement, s as ListDragLeaveDetail, t as AddItemOptions, u as ListDropDetail } from "./vertical-list-lj_19DCx.js";
 export { AddItemOptions, CustomCheckboxOptions, type ListActivateDetail, type ListActivateEvent, type ListContextMenuDetail, type ListContextMenuEvent, type ListDragEntry, type ListDragLeaveDetail, type ListDragLeaveEvent, type ListDragOverEvent, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListDropDetail, type ListDropEvent, type ListEditCancelDetail, type ListEditCancelEvent, type ListEditCommitDetail, type ListEditCommitEvent, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListSelectDetail, type ListSelectEvent, type ListSelectionMode, type ListTickleDetail, type ListTickleEvent, type ListViewportChangeDetail, type ListViewportChangeEvent, VerticalListElement, VerticalListElementEventMap };

package/dist/vertical-list.js

@@ -1,7 +1,7 @@
 import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import { c as createElementListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-D91M4Ozq.js";
+import { c as createElementListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-JIhwB49y.js";
 import { t as ListNativeDragController } from "./list-native-drag-controller-B9xO0XWn.js";
 import { r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-BeE70lbB.js";
 import { n as animateListItemIn, r as animateListItemOut } from "./list-item-animation-BUoEKi5s.js";
@@ -11,6 +11,7 @@ import "./editable-label.js";
 import { LitElement, css, html, render } from "lit";
 import { property } from "lit/decorators.js";
 import { createCommandRegistry } from "@clinth/ui-commands";
+import { ifDefined } from "lit/directives/if-defined.js";
 //#region src/vertical-list/vertical-list.ts
 const ITEM_SELECTOR = `li:not([data-virtual-spacer]), [data-list-item]:not([data-virtual-spacer])`;
 /**
@@ -75,8 +76,8 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 				});
 			}
 		});
-		this.tickled = new TickledController(this, {
-			getItems: () => this._getVisibleItems().map((el) => ({
+		this.tickled = ((self) => new TickledController(self, {
+			getItems: () => self.#selectionOrder().map((el) => ({
 				id: el,
 				enabled: !el.hasAttribute(`not-checked`)
 			})),
@@ -84,9 +85,11 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 				if (id !== void 0) this._dispatch(`list-tickle`, { item: id });
 			},
 			onStateChange: () => this._syncItemStates(),
-			itemWrap: this.itemWrap,
+			get itemWrap() {
+				return self.itemWrap;
+			},
 			hoverDisabled: () => this.#dragSelect.isDragging || this.#nativeDrag.isDragging
-		});
+		}))(this);
 		this.#nativeDragging = false;
 		this.#postDragSuppressTimer = 0;
 		this.#nativeDrag = new ListNativeDragController(this, {
@@ -118,6 +121,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 				this.toggleAttribute(`data-native-dragging`, false);
 				this.removeAttribute(`aria-label`);
 				for (const el of this._getVisibleItems()) el.removeAttribute(`data-drag-origin`);
+				if (this.#virtualActive()) for (const el of this.#allItems) el.removeAttribute(`data-drag-origin`);
 				this.#startPostDragSuppressTimer();
 			},
 			syncLightDomDraggable: () => this._syncNativeDraggable()
@@ -146,7 +150,9 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this.search = new ListSearchController(this, { adapter: createElementListSearchAdapter(this, {
 			itemSelector: ITEM_SELECTOR,
 			getLabel: (el) => el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
-			highlightKey: `vertical-list-search`
+			highlightKey: `vertical-list-search`,
+			getAllItems: () => this.#selectionOrder(),
+			observeContainer: false
 		}) });
 		this.#onScroll = () => {
 			if (this.#scrollRaf !== 0) return;
@@ -185,10 +191,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 				case `ArrowDown`:
 					e.preventDefault();
 					this.tickled.handleKeyboardNavigation(`next`);
-					this.tickled.tickledId?.scrollIntoView({
-						block: `nearest`,
-						inline: `nearest`
-					});
+					this.#revealCursor();
 					if (e.shiftKey && this.interactionMode === `vscode`) {
 						const cur = this.tickled.tickledId;
 						if (cur) this.selection.rangeTo(cur);
@@ -197,15 +200,30 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 				case `ArrowUp`:
 					e.preventDefault();
 					this.tickled.handleKeyboardNavigation(`previous`);
-					this.tickled.tickledId?.scrollIntoView({
-						block: `nearest`,
-						inline: `nearest`
-					});
+					this.#revealCursor();
 					if (e.shiftKey && this.interactionMode === `vscode`) {
 						const cur = this.tickled.tickledId;
 						if (cur) this.selection.rangeTo(cur);
 					}
 					break;
+				case `Home`:
+					e.preventDefault();
+					this.tickled.handleKeyboardNavigation(`first`);
+					this.#revealCursor();
+					break;
+				case `End`:
+					e.preventDefault();
+					this.tickled.handleKeyboardNavigation(`last`);
+					this.#revealCursor();
+					break;
+				case `PageDown`:
+					e.preventDefault();
+					this.#handlePage(1);
+					break;
+				case `PageUp`:
+					e.preventDefault();
+					this.#handlePage(-1);
+					break;
 				case `Enter`: {
 					const id = this.tickled.tickledId;
 					if (id) {
@@ -327,16 +345,17 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 	#postDragSuppressTimer;
 	#nativeDrag;
 	#prepareNativeDrag(originKey) {
-		const visible = this._getVisibleItems();
-		const originEl = visible.find((el) => keyForElement(el) === originKey);
+		const originEl = this.#itemForKey(originKey);
 		if (!originEl || !this._isCheckable(originEl)) return void 0;
 		if (!this.selection.selected.has(originEl)) this.selection.replace(originEl);
+		const ordered = this.#selectionOrder();
 		const selected = [];
-		visible.forEach((el, index) => {
+		ordered.forEach((el) => {
 			if (!this.selection.selected.has(el)) return;
+			const idx = this.#registryIndexOf(el);
 			selected.push({
 				key: keyForElement(el) ?? originKey,
-				index,
+				index: idx,
 				item: el,
 				element: el
 			});
@@ -563,6 +582,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			return;
 		}
 		if (this.interactionMode === `checked`) this._syncCheckboxes();
+		this.search.refresh();
 	}
 	/**
 	* Collapse + fade `item` out, then detach it. The rows below slide up to
@@ -599,6 +619,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this.replaceChildren();
 		this.selection.reset();
 		this._syncItemStates();
+		this.search.refresh();
 		if (this.#virtualActive()) this.#syncVirtualWindow(true);
 	}
 	/**
@@ -614,11 +635,13 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			this.#allItems = [...items];
 			for (const el of this.#allItems) this.#animatedItems.add(el);
 			this.selection.reset();
+			this.search.refresh();
 			this.#syncVirtualWindow(true);
 			return;
 		}
 		for (const item of items) this.appendChild(item);
 		if (this.interactionMode === `checked`) this._syncCheckboxes();
+		this.search.refresh();
 	}
 	/**
 	* Dispatch a command to this list — used by `ixfx-grouped-item-lister` to
@@ -675,7 +698,16 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			if (index < 0) return;
 			const ul = this.renderRoot.querySelector(`ul`);
 			if (ul) {
-				ul.scrollTop = index * this.itemHeight;
+				const stride = this.itemHeight;
+				const viewportH = ul.clientHeight;
+				const top = index * stride;
+				const bottom = (index + 1) * stride;
+				const vt = ul.scrollTop;
+				const vh = viewportH;
+				let next = vt;
+				if (top < vt) next = top;
+				else if (bottom > vt + vh) next = bottom - vh;
+				if (next !== vt) ul.scrollTop = next;
 				this.#syncVirtualWindow(true);
 			}
 		}
@@ -687,6 +719,33 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			inline: `nearest`
 		});
 	}
+	#revealCursor() {
+		const el = this.tickled.tickledId;
+		const key = el ? keyForElement(el) : void 0;
+		if (key !== void 0) this.focusKey(key);
+	}
+	#pageSize() {
+		const ul = this.#scrollList();
+		if (!ul) return 1;
+		const viewportH = ul.clientHeight;
+		if (this.#virtualActive()) return Math.max(1, Math.floor(viewportH / this.itemHeight));
+		const first = this.querySelector(`li[data-key]`);
+		if (!first) return 1;
+		const firstH = first.offsetHeight || this.itemHeight;
+		return Math.max(1, Math.floor(viewportH / firstH));
+	}
+	/** Move the cursor one page up (-1) or down (1) across the whole registry. */
+	#handlePage(direction) {
+		const page = this.#pageSize();
+		const items = this.#selectionOrder().filter((el) => !el.hasAttribute(`not-checked`));
+		if (items.length === 0) return;
+		const currentKey = this.tickled.tickledId ? keyForElement(this.tickled.tickledId) : void 0;
+		const currentIdx = currentKey !== void 0 ? items.findIndex((i) => keyForElement(i) === currentKey) : -1;
+		const fallback = direction === 1 ? page - 1 : 0;
+		const nextIdx = currentIdx < 0 ? fallback : currentIdx + direction * page;
+		this.tickled.handleKeyboardNavigation(items[Math.min(items.length - 1, Math.max(0, nextIdx))]);
+		this.#revealCursor();
+	}
 	#itemForKey(key) {
 		if (this.#virtualActive()) return this.#allItems.find((el) => keyForElement(el) === key);
 		for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
@@ -1035,6 +1094,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			else this.#pendingAnimate.push(...fresh);
 		}
 		if (changed && this.interactionMode === `checked`) this._syncCheckboxes();
+		if (changed) this.search.refresh();
 		return changed;
 	}
 	/** Consume queued observer records first so a sync never drops a row. */
@@ -1112,9 +1172,10 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this.#windowEnd = end;
 		if (this.interactionMode === `checked`) this._syncCheckboxes();
 		this._syncItemStates();
+		const totalCount = this.#selectionOrder().length;
 		for (let i = start; i < end; i++) {
 			const el = this.#allItems[i];
-			if (el) this.#applyRowState(el);
+			if (el) this.#applyRowState(el, i + 1, totalCount);
 		}
 		const pending = this.#pendingAnimate;
 		this.#pendingAnimate = [];
@@ -1122,12 +1183,25 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			this.#animatedItems.add(el);
 			if (el.parentNode === this) animateListItemIn(el);
 		}
+		this.search.repaintHighlights();
 	}
 	/** Per-attach state the attached sweep can't cover (it only sees the window). */
-	#applyRowState(el) {
-		if (el instanceof HTMLElement) el.draggable = this.itemsDraggable && this._isCheckable(el) && !el.hasAttribute(`data-editing`);
+	#applyRowState(el, posInSet, setSize) {
+		if (el instanceof HTMLElement) {
+			el.draggable = this.itemsDraggable && this._isCheckable(el) && !el.hasAttribute(`data-editing`);
+			if (posInSet !== void 0 && setSize !== void 0) {
+				el.setAttribute(`aria-setsize`, String(setSize));
+				el.setAttribute(`aria-posinset`, String(posInSet));
+				if (!el.hasAttribute(`role`) || el.hasAttribute(`data-aria-role`)) {
+					el.setAttribute(`role`, `option`);
+					el.setAttribute(`data-aria-role`, ``);
+					el.setAttribute(`aria-selected`, String(this.selection.selected.has(el)));
+				}
+			}
+		}
 		el.removeAttribute(`data-marquee`);
 		el.removeAttribute(`data-drag-origin`);
+		el.removeAttribute(`data-drop-target`);
 	}
 	/**
 	* Leave virtualization: reattach every registry row in order and drop the
@@ -1192,6 +1266,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			const item = this.#customWrappers.get(el) ?? el;
 			el.toggleAttribute(`data-tickled`, this.tickled.isTickled(el));
 			el.toggleAttribute(`data-selected`, this.selection.selected.has(el));
+			if (el.hasAttribute(`data-aria-role`)) el.setAttribute(`aria-selected`, String(this.selection.selected.has(el)));
 			if (this.interactionMode === `checked`) el.toggleAttribute(`data-checked`, !item.hasAttribute(`not-checked`) && this.selection.selected.has(el));
 			else el.removeAttribute(`data-checked`);
 		}
@@ -1335,6 +1410,10 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		if (this.interactionMode !== `manual`) this.selection.replace(item);
 		this._dispatch(`list-activate`, { item });
 	}
+	activateKey(key) {
+		const item = this.#itemForKey(key);
+		if (item) this._activateItem(item);
+	}
 	/** The row (or `undefined` for empty space) the last `list-drag-over` was fired for. */
 	#dragOver;
 	/** Tell the consumer the drag left its last target and drop the highlight. */
@@ -1344,9 +1423,11 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this.#highlightDropTarget(void 0, false);
 		if (last) this._dispatch(`list-drag-leave`, { key: last.item ? keyForElement(last.item) : void 0 });
 	}
+	#dropTargetEl;
 	/** Mark one row (or, for empty space, the host) as the drop target. */
 	#highlightDropTarget(item, active) {
-		for (const el of this.querySelectorAll(`[data-drop-target]`)) el.removeAttribute(`data-drop-target`);
+		this.#dropTargetEl?.removeAttribute(`data-drop-target`);
+		this.#dropTargetEl = active ? item : void 0;
 		this.toggleAttribute(`data-drop-target`, active && item === void 0);
 		if (active && item) item.setAttribute(`data-drop-target`, ``);
 	}
@@ -1631,9 +1712,17 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		];
 	}
 	render() {
+		const role = this.getAttribute(`role`) ? void 0 : `listbox`;
+		const ariaMulti = this.selectionMode === `multiple`;
 		return html`
       <div class="container">
-        <ul part="list" class="scroll-fade-y" @scroll=${this.#onScroll}>
+        <ul
+          part="list"
+          class="scroll-fade-y"
+          role=${ifDefined(role)}
+          aria-multiselectable=${ariaMulti ? `true` : `false`}
+          @scroll=${this.#onScroll}
+        >
           <slot></slot>
         </ul>
         ${this.#marqueeRect ? html`<div class="marquee" part="marquee" style=${this.#marqueeStyle(this.#marqueeRect)}></div>` : ``}