import { type PropertyValues } from 'lit'; import { LuxenElement } from '../../shared/luxen-element.js'; import type { TreeItem } from '../tree-item/tree-item.js'; export type TreeSelection = 'single' | 'multiple' | 'leaf' | 'none'; /** Fired when the tree's selected items change. */ export declare class SelectionChangeEvent extends Event { readonly selection: TreeItem[]; constructor(selection: TreeItem[]); } declare global { interface GlobalEventHandlersEventMap { 'selection-change': SelectionChangeEvent; } } /** * A hierarchical tree view composed of `` children. * * The host carries `role="tree"`, so give it an accessible name with * `aria-label` or `aria-labelledby` (e.g. ``). * * @slot - One or more `l-tree-item` elements. * * @csspart base - The root tree container. * * @cssproperty --indent-size - Horizontal indent per depth level. Default `1rem`. * @cssproperty --indent-guide-width - Thickness of the vertical guide line between a parent and its children. Default `1px`. Set to `0` to hide guides. * @cssproperty --indent-guide-style - Line style of the guide (`solid`, `dashed`, `dotted`, `double`…). Default `solid`. * @cssproperty --indent-guide-color - Color of the guide line. * @cssproperty --row-height - Minimum row height. Default `1.75rem`. * @cssproperty --row-padding-inline - Inner inline padding of the row; also drives the content slot left indent and the indent guide column. Default `0.25rem`. * @cssproperty --chevron-size - Size of the expand/collapse chevron box. Default `1.125rem`. * @cssproperty --item-gap - Horizontal gap between chevron, prefix, label and suffix on the row; also drives the content slot left indent. Default `0.375rem`. * * @event selection-change - Fired when the selected items change. Properties: `selection: TreeItem[]`. * * @customElement l-tree */ export declare class Tree extends LuxenElement { static styles: import("lit").CSSResult[]; private _internals; private _mutationObserver?; private _lastFocusedItem; /** * Selection behaviour: * - `single` (default): at most one item selected via `aria-selected`. * - `multiple`: any number of items selected. Checkboxes are rendered. * - `leaf`: only leaf items can be selected (single). Branches just toggle. * - `none`: purely navigable, no selection state. */ accessor selection: TreeSelection; /** * When set with `selection="multiple"`, parent and children selection are decoupled: * toggling a parent does NOT toggle its descendants and vice versa. * Without it, selection cascades both ways and branches may become indeterminate. */ accessor independent: boolean; connectedCallback(): void; disconnectedCallback(): void; updated(changed: PropertyValues): void; /** Returns all items in document (flat) order, including nested ones. */ getAllItems({ includeDisabled }?: { includeDisabled?: boolean | undefined; }): TreeItem[]; /** Returns currently selected items. */ getSelection(): TreeItem[]; /** Expands every item that has children. */ expandAll(): void; /** Collapses every item. */ collapseAll(): void; private _syncAll; /** * Sync depth, checkbox visibility and ARIA position for a sibling group, then * recurse. `aria-level`/`aria-setsize`/`aria-posinset` let screen readers * announce "level N, M of K" — valuable here because `lazy` items mean the * full set isn't always in the DOM (see WAI-ARIA Tree View pattern). */ private _syncLevel; private _canShowCheckboxOn; private _rootItems; private _ensureTabStop; /** Items currently visible (parent chain all expanded). */ private _visibleItems; private _onItemToggle; private _handleRowActivate; private _setSingleSelection; private _selectItem; private _setSubtreeSelection; /** Propagate child state UP to parents (indeterminate / auto-checked). */ private _updateBranchStates; private _emitSelectionChange; private _onClick; private _itemFromEvent; private _focusItem; private _onFocusIn; private _onKeyDown; render(): import("lit").TemplateResult<1>; } //# sourceMappingURL=tree.d.ts.map