import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement,type LyraEventDetailSnapshot}from'../../../internal/lyra-element.js';import{type LyraTreeNodeData}from'./tree-types.js';export interface LyraTreeItemEventMap{'lr-node-toggle':CustomEvent<{nodeId:string;expanded:boolean;}>;'lr-node-select':CustomEvent<{nodeId:string;}>;'lr-expand':CustomEvent>;'lr-after-expand':CustomEvent>;'lr-collapse':CustomEvent>;'lr-after-collapse':CustomEvent>;'lr-lazy-change':CustomEvent>;'lr-lazy-load':CustomEvent>;} /** * `` — one row of ``, in either of two child models. * * **Declarative model** (mirrors `wa-tree-item`/`sl-tree-item`, so that markup renames * mechanically): the row's label is the default slot's content — or the `label` attribute when the * slot is empty — and the hierarchy is nested `` elements written as light-DOM * children. Those nested children are moved to the internal `children` slot by this component, so * an author never writes `slot=` themselves, exactly as `` assigns the slots for its * own ``/`` element model. `expanded`, `disabled` and `selected` are plain * attributes on each element. * * **Data model**: `` assigns an `item` (a `LyraTreeNodeData` object) and this element renders that * object's whole subtree — icon, description, badges and children — into its own shadow root. An * assigned `item` always wins for label, disabled state, and children; its `selected`/`lazy` * values seed the element whenever a refreshed object identity is assigned. The owning tree then * manages selection on the element without mutating the caller's object. * * Both models share the owning tree's selection engine, lazy-loading lifecycle, disclosure-icon * slots, and expansion lifecycle. Lyra's richer `lr-node-*` notifications remain available beside * the normalized `lr-expand`/`lr-collapse`/`lr-lazy-*` surface. Per-row icons, secondary * descriptions and badges remain additive data-model features. * In the declarative model, flattened real-content presence chooses between the visual slot and * `label` fallback, so decorative or element-only visuals remain rendered. Spoken `nodeLabel` * text is resolved separately from accessibility-visible assigned content and updates through * forwarding slots; a host `aria-label` keeps precedence by presence in both models. A data * item's `accessibleLabel` is reflected only while the component owns that attribute, so an * initial or later author override survives object refreshes. A data item with no usable spoken * label, visible label, description or badge name uses its stable ID as a semantic fallback. * This leaves the visible content unchanged and does not apply to declarative items. * Every documented CSS part is forwarded under the same name through recursively rendered data- * model children. A consumer selector on the outer item therefore reaches matching row, label, * state, checkbox, badge, and disclosure parts at every rendered depth. Declarative children stay * in consumer light DOM and remain directly selectable as their own `` hosts. * * `role="treeitem"` (plus `aria-expanded`/`aria-level`/`aria-setsize`/ * `aria-posinset` and the roving `tabindex`, driven by ``) live on * the *host* element, not the internal `[part="row"]` div — that makes this * node's own nested children (rendered in *its own* shadow root, or projected from the light DOM, * as further `role="group"` content) genuine DOM descendants of the treeitem, which is * what the WAI-ARIA treeitem pattern requires (previously a shadow-root * sibling). * * @customElement lr-tree-item * @slot - The row's label content, in the declarative model. Nested `` children written here are moved to the `children` slot automatically; the `label` attribute is used when no label content is slotted. * @slot children - Where nested `` children are projected. Assigned by this component — authors write the children in the default slot. * @slot expand-icon - The disclosure icon shown while expanded. Falls back to the owning tree's slot, then the built-in chevron. * @slot collapse-icon - The disclosure icon shown while collapsed. Falls back to the owning tree's slot, then the built-in chevron. * @event lr-node-toggle - `detail: { nodeId, expanded }`, fired when this node is expanded or collapsed (via `expand()`/`collapse()`, the toggle button, or ArrowRight/ArrowLeft). * @event lr-node-select - `detail: { nodeId }`, fired when this node's primary action is activated (via `select()`, clicking anywhere in its row, or Enter/Space). * @event lr-expand - Fired when expansion begins. `detail: { item }`. * @event lr-after-expand - Fired after the expansion motion completes. `detail: { item }`. * @event lr-collapse - Fired when collapse begins. `detail: { item }`. * @event lr-after-collapse - Fired after the collapse motion completes. `detail: { item }`. * @event lr-lazy-change - Fired when the pending lazy-loading state changes. `detail: { item, loading }`. * @event lr-lazy-load - Requests children for a lazy item. `detail: { item, generation }`; consumers can ignore stale generations. * @csspart base - Compatibility name for the outer wrapper; `tree-item` is the component-specific alias. * @csspart tree-item - The outer wrapper around the row and child group. It is the same node as * `base`. * @csspart row - The tree row. * @csspart toggle - The expand/collapse button, with pointer hover/pressed feedback while enabled. * @csspart icon - The optional decorative leading icon. * @csspart content - The primary and secondary text wrapper. * @csspart label - The node label. * @csspart description - The optional secondary description. * @csspart badge - One optional chip per `item.badges` entry, tone-mapped via `data-tone`. * @csspart group - The wrapper around a node's expanded child items. * @csspart item - The painted row container, excluding nested children; state backgrounds and * opacity applied through the mirrored item parts reach the visible row. * @csspart item--disabled - The item container while disabled. * @csspart item--expanded - The item container while expanded. * @csspart item--indeterminate - The item container while partially selected. * @csspart item--selected - The item container while selected. * @csspart indentation - The indentation and guide container. * @csspart expand-button - The disclosure button and lazy spinner container. * @csspart spinner - The lazy-loading spinner. * @csspart spinner__base - The spinner's base. * @csspart children - The nested-children container. * @csspart checkbox - The checkbox shown by `multiple` and `leaf-multiple` selection. * @csspart checkbox__base - The checkbox base. * @csspart checkbox__control - The checkbox control. * @csspart checkbox__control--checked - The checked checkbox control. * @csspart checkbox__control--indeterminate - The indeterminate checkbox control. * @csspart checkbox__checked-icon - The checked glyph. * @csspart checkbox__indeterminate-icon - The indeterminate glyph. * @csspart checkbox__label - The checkbox label wrapper. * @cssstate disabled - The item is disabled. * @cssstate expanded - The item is expanded. * @cssstate indeterminate - The item is partially selected. * @cssstate selected - The item is selected. * @cssprop [--show-duration=var(--lr-duration-base)] - Expansion motion duration. * @cssprop [--hide-duration=var(--lr-duration-base)] - Collapse motion duration. * @cssprop [--indent-size=var(--lr-space-l)] - Indentation step applied once per nesting depth. * @cssprop [--indent-guide-color=var(--lr-color-border)] - Indentation guide color. * @cssprop [--indent-guide-offset=0] - Block-axis inset at both ends of the indentation guide. * @cssprop [--indent-guide-style=solid] - Indentation guide border style. * @cssprop [--indent-guide-width=0] - Indentation guide width. * @cssprop [--lr-tree-depth=0] - Internal indent plumbing, not a retheming knob: this node's * `depth`, written inline onto `[part="row"]` by the component and multiplied by * `--indent-size` (capped at `--lr-size-8rem`) to produce the row's `padding-inline-start`. * @cssprop [--lr-tree-selected-bg=var(--lr-color-brand-quiet)] - Background of the selected row. * @cssprop [--lr-tree-selected-color=var(--lr-color-brand)] - Text color of the selected row. * @cssprop [--lr-tree-checkbox-checked-border-color=var(--lr-color-brand)] - Checked control border. * @cssprop [--lr-tree-checkbox-checked-bg=var(--lr-color-brand)] - Checked control background. * @cssprop [--lr-tree-checkbox-checked-color=var(--lr-color-on-brand)] - Checked glyph color. * @cssprop [--lr-tree-checkbox-indeterminate-border-color=var(--lr-color-brand)] - Indeterminate * control border. * @cssprop [--lr-tree-checkbox-indeterminate-bg=var(--lr-color-brand)] - Indeterminate control * background. * @cssprop [--lr-tree-checkbox-indeterminate-color=var(--lr-color-on-brand)] - Indeterminate glyph * color. * @cssprop [--lr-tree-badge-neutral-color=var(--lr-color-text-quiet)] - Neutral badge text color. * @cssprop [--lr-tree-badge-neutral-bg=var(--lr-color-surface)] - Neutral badge background. * @cssprop [--lr-tree-badge-brand-color=var(--lr-color-brand)] - Brand badge text color. * @cssprop [--lr-tree-badge-brand-bg=var(--lr-color-brand-quiet)] - Brand badge background. * @cssprop [--lr-tree-badge-success-color=var(--lr-color-success)] - Success badge text color. * @cssprop [--lr-tree-badge-success-bg=var(--lr-color-success-quiet)] - Success badge background. * @cssprop [--lr-tree-badge-warning-color=var(--lr-color-warning)] - Warning badge text color. * @cssprop [--lr-tree-badge-warning-bg=var(--lr-color-warning-quiet)] - Warning badge background. * @cssprop [--lr-tree-badge-danger-color=var(--lr-color-danger)] - Danger badge text color. * @cssprop [--lr-tree-badge-danger-bg=var(--lr-color-danger-quiet)] - Danger badge background. * @status stable * @since 8.0.0 */ export declare class LyraTreeItem extends LyraElement{protected static readonly immutableEventDetails:readonly string[];protected static readonly identityEventDetailProperties:Readonly<{'lr-expand':readonly string[];'lr-after-expand':readonly string[];'lr-collapse':readonly string[];'lr-after-collapse':readonly string[];'lr-lazy-change':readonly string[];'lr-lazy-load':readonly string[];}>;static styles:import("lit").CSSResultGroup[]; /** Custom states are progressive enhancement. DOM shims and partial polyfills may omit, throw * from, or return no value from `attachInternals()`; none may make the public item unconstructible. */ private readonly itemInternals;private managedItemAriaLabel;private writingItemAriaLabel;attributeChangedCallback(name:string,oldValue:string|null,value:string|null):void; /** * The data model: the whole subtree as one object, assigned by `` from its `data`. When * set it wins over the declarative model for label, disabled state, and children. Its selected * and lazy values seed the corresponding element state when a refreshed identity is assigned. */ get item():LyraTreeNodeData|undefined;set item(value:LyraTreeNodeData|undefined);private _item?; /** * The row's label in the declarative model, used when no label content is slotted. Ignored when * an `item` object is assigned (`item.label` is the label then). */ label:string; /** * Removes this item from roving focus and prevents select/toggle activation, in the declarative * model. Ignored when an `item` is assigned (`item.disabled` decides then). */ disabled:boolean; /** * Whether this item is the current selection. Declarative markup can seed it with the reflected * attribute; data objects seed it on assignment; an owning tree then maintains it directly. */ selected:boolean;expanded:boolean; /** Enables asynchronous child loading. Expanding emits `lr-lazy-load` and waits for children. */ lazy:boolean;private _loading; /** Whether a lazy expansion is waiting for children. */ get loading():boolean; /** Whether only part of this branch is selected. Managed by the owning tree. */ get indeterminate():boolean; /** Owner-only hierarchy state. None of these values are consumer-settable item properties. */ private get ownerContext();private lifecycleGeneration;private lazyGeneration;private lifecycleTimer?;private lifecycleAnimation?;private _collapsing;private generatedId?; /** * This item's identity, in whichever child model is in use: `item.id` in the data model, or a * generated, per-element id in the declarative one (where the markup carries no id of its own). * `` tracks its roving tabindex by this value, and it is the `id` every `lr-node-toggle` * / `lr-node-select` / `lr-reorder` detail carries. */ get nodeId():string; /** Whether this item is disabled, in whichever child model is in use. */ get isDisabled():boolean; /** Whether this rendered occurrence conflicts with an earlier data item that owns the same * public id. The owner is deterministic depth-first order; later occurrences fail closed. */ private get hasDuplicateDataId(); /** * This item's spoken name, in whichever child model is in use — used for ``'s reorder * announcements. Falls back through `item.accessibleLabel`/`item.label`, then a host * `aria-label`, flattened accessible slotted label text (nested items excluded), and finally the * `label` attribute fallback. */ get nodeLabel():string; /** Reflects the data model's richer spoken name without taking ownership of an author-supplied * host name. Component-owned attributes may be refreshed or removed; author-owned ones are * presence-authoritative until the author removes them. */ private syncItemAriaLabel; /** * This node's child `` elements, in whichever child model is in use: rendered into * this node's own shadow root from `item.children` (data model), or authored as its own light-DOM * children (declarative model). Only ever direct children — a grandchild lives inside its own * parent's shadow root, or under its own parent element. */ childItems():LyraTreeItem[]; /** Gets this node's direct child items, optionally excluding disabled children. */ getChildrenItems({includeDisabled}?:{includeDisabled?:boolean;}):LyraTreeItem[];private isChildItem;private isDeclarativeLabelNode;private labelForwardingSlots;private get slottedLabelText();private declarativeLabelRoots;private declarativeLabelNodes; /** Whether the default slot has real label content — any element that is not a nested item, or a * non-whitespace text node. Read straight off the light DOM rather than from `slotchange` so the * very first render already knows, instead of flashing the `label` fallback under slotted text. * Indentation whitespace around nested items does not count, which is why the fallback still * renders for the (extremely common) `` + nested-children shape. */ private get hasSlottedLabel(); /** Moves nested `` children onto the `children` slot so the default slot can stay * the label, the way the upstream markup this mirrors expects. Writing `slot` here rather than * asking consumers to is what keeps that markup a pure tag rename (same approach as * ``'s element model), and it is idempotent, so the mutation observer that sees the * write does not re-enter. */ private assignChildSlots; /** `slotchange` alone cannot see a child appended with a `slot` attribute already set while this * node is collapsed (the `children` slot is not rendered then), nor a label edited in place — a * childList observer sees both, and is the same mechanism `` uses for its own * light-DOM child model. */ private childObserver?;private observeLabelNode;private composedParentForLabelNode;private observeLabelAncestors;private bindChildObserverTargets;private handleLabelSlotChange; /** `hasSlottedLabel` and the declarative model's own `hasChildren`, sampled once per update in * `willUpdate()` rather than read live from `render()`. Both answers come from the light DOM, * which a server renderer cannot see at all, so a hydrating item has to reproduce the server's * "no children" render first and sample one update later — see `seedFirstRenderState()`. Every * later update re-samples, so they stay exactly as live as the getters they cache. */ private slottedLabel;private slottedChildren;private sampleLightDomState;connectedCallback():void;disconnectedCallback():void; /** * `MutationObserver` instances are bound to the realm (`window`) that constructed them, not to * the node they observe: one built from a stale `window.MutationObserver` keeps delivering * through that window's microtask queue even after this element is adopted into a different * document, instead of the adopted document's own. Adoption (`document.adoptNode()`, or an * implicit cross-document `appendChild`) always runs `adoptedCallback()` -- while this element is * momentarily disconnected, ahead of any later `connectedCallback()` -- so this rebuilds the * observer here rather than only lazily on the next connect, the same realm-follows-adoption * treatment this file's own lifecycle timer already gives the owner realm in * `scheduleAfterEvent()`. */ adoptedCallback():void; /** Tears down and reconstructs `childObserver` bound to the current `ownerDocument`'s realm, then * rebinds every current target. Called on connect and on adoption -- see `adoptedCallback()`. */ private rebuildChildObserver;private actualChildItems;get hasChildren():boolean;protected willUpdate(changed:PropertyValues):void; /** Expand this node (no-op if already expanded, disabled, loading, or a leaf). */ expand():void;private commitExpanded;private beginLazyLoad;private finishLazyLoad;private cancelLazyLoad;private scheduleAfterEvent;private cancelLifecycleTimer;private motionDuration; /** Collapse this node (no-op if already collapsed or a leaf). */ collapse():void; /** * Fire this item's primary "select" action (Enter/Space, or clicking * anywhere in the row). Emits *before* calling `.focus()`: ``'s * `onNodeActivate` listener for `lr-node-select` runs synchronously * (native `dispatchEvent` is sync) and updates `activeId`, which pushes * `tabIndex = 0` down onto this node via its own render -- calling * `.focus()` after that emit, rather than before, means real DOM focus * lands correctly the very first time a previously-inactive node is * clicked, not one render late. */ select():void; /** Activates the same row-selection path as a pointer click, with disabled gating. */ click():void; /** See `cascadeUpdateComplete` and the matching override on ``. */ protected getUpdateComplete():Promise; /** * A `