export type DtListViewSelectable = 'none' | 'single' | 'multi';
export interface DtListViewItemClickDetail<T = unknown> {
    item: T;
    index: number;
}
export interface DtListViewSelectionChangeDetail<T = unknown> {
    selected: T[];
}
export type DtListViewRenderItem<T = unknown> = (item: T, container: HTMLElement, index: number) => void;
/**
 * `<dt-list-view>` — virtualized list web component for long collections.
 *
 * Supports two sizing modes:
 * - fixed-height mode via `item-height`
 * - variable-height mode when `item-height` is omitted
 *
 * ## Attributes
 * - `item-height` — fixed row height in px; omit for measured variable-height rows
 * - `dividers` — when present, shows dividers between items
 * - `selectable` — selection mode: `none`, `single`, or `multi`
 * - `empty-text` — text shown when the list has no items
 *
 * ## Properties
 * - `items` — array of item objects to render
 * - `renderItem` — optional custom renderer `(item, container, index) => void`
 * - `selectedItems` — readonly array of currently selected item objects
 *
 * ## Template binding
 * When using a child `<template>`, bindings are applied as follows:
 * - `data-field="title"` sets `textContent` from `item.title`
 * - `data-field-variant="statusVariant"` sets the `variant` attribute from `item.statusVariant`
 *
 * ## Events
 * - `dt-item-click` — fired when an item is clicked; `detail` contains `{ item, index }`
 * - `dt-selection-change` — fired when selection changes; `detail.selected` is the selected items array
 *
 * ## Usage
 * ```html
 * <dt-list-view id="tasks" item-height="72" dividers selectable="single">
 *   <template>
 *     <dt-stack gap="8">
 *       <dt-stack direction="row" align="center" gap="8">
 *         <strong data-field="title"></strong>
 *         <dt-badge data-field="status" data-field-variant="statusVariant"></dt-badge>
 *       </dt-stack>
 *       <span class="text-muted" data-field="summary"></span>
 *     </dt-stack>
 *   </template>
 * </dt-list-view>
 * <script>
 *   const list = document.getElementById('tasks');
 *   list.items = [
 *     { title: 'Review report', status: 'Queued', statusVariant: 'warning', summary: 'Waiting on CPU budget' },
 *     { title: 'Ship release', status: 'Done', statusVariant: 'success', summary: 'Published 4 minutes ago' },
 *   ];
 * </script>
 * ```
 */
export declare class DtListView extends HTMLElement {
    private _items;
    private _selectedIndices;
    private _renderItem;
    private readonly _virtualizer;
    private readonly _viewport;
    private readonly _spacer;
    private readonly _itemsLayer;
    private readonly _emptyState;
    private _resizeObserver;
    private _itemResizeObserver;
    static get observedAttributes(): string[];
    get items(): unknown[];
    set items(value: unknown[]);
    get selectedItems(): unknown[];
    get renderItem(): DtListViewRenderItem | null;
    set renderItem(value: DtListViewRenderItem | null);
    get itemHeight(): number | null;
    set itemHeight(value: number | null);
    get selectable(): DtListViewSelectable;
    set selectable(value: DtListViewSelectable);
    get emptyText(): string;
    set emptyText(value: string);
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    attributeChangedCallback(name: string): void;
    private _onScroll;
    private _syncSizingMode;
    private _render;
    private _renderVisibleItem;
    private _handleItemClick;
    private _emitSelectionChange;
    private _getTemplate;
}
//# sourceMappingURL=dt-list-view.d.ts.map