luxen-ui 0.1.0

package/dist/elements/tree/tree.js

@@ -0,0 +1,432 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _LuxenTree_selection_accessor_storage, _LuxenTree_independent_accessor_storage;
+import { html, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import { LuxenElement } from '../../shared/luxen-element';
+import { tagName } from '../../registry';
+import hostStyles from '../../shared/styles/host.styles';
+import rawStyles from './tree.css?inline';
+const styles = unsafeCSS(rawStyles);
+/**
+ * A hierarchical tree view composed of `<l-tree-item>` children.
+ *
+ * @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. Detail: `{ selection: LuxenTreeItem[] }`.
+ */
+export class LuxenTree extends LuxenElement {
+    constructor() {
+        super(...arguments);
+        this._lastFocusedItem = null;
+        _LuxenTree_selection_accessor_storage.set(this, 'single');
+        _LuxenTree_independent_accessor_storage.set(this, false);
+        // --- Selection handling ---
+        this._onItemToggle = (event) => {
+            const { item, checked } = event.detail;
+            this._selectItem(item, checked);
+        };
+        // --- Keyboard / focus ---
+        this._onClick = (event) => {
+            const item = this._itemFromEvent(event);
+            if (!item || item.disabled)
+                return;
+            const path = event.composedPath();
+            const onCheckbox = path.some((n) => n instanceof HTMLInputElement && n.type === 'checkbox');
+            if (onCheckbox)
+                return; // handled via change event
+            // Clicks on consumer-provided interactive elements (buttons, links, form
+            // controls, menu items…) must not toggle the row — the consumer owns that
+            // interaction. Works regardless of which slot the element was placed in.
+            const INTERACTIVE_TAGS = new Set(['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA']);
+            const INTERACTIVE_ROLES = new Set(['button', 'link', 'menuitem', 'menuitemcheckbox']);
+            const onInteractive = path.some((n) => {
+                if (!(n instanceof HTMLElement) || n === item)
+                    return false;
+                if (n.getAttribute?.('part') === 'expand-button')
+                    return false;
+                if (n instanceof HTMLInputElement && n.type === 'checkbox')
+                    return false;
+                if (INTERACTIVE_TAGS.has(n.tagName))
+                    return true;
+                const role = n.getAttribute?.('role');
+                return role !== null && INTERACTIVE_ROLES.has(role);
+            });
+            if (onInteractive)
+                return;
+            const onExpand = path.some((n) => n instanceof HTMLElement && n.getAttribute?.('part') === 'expand-button');
+            this._focusItem(item);
+            if (onExpand) {
+                item.toggle();
+                return;
+            }
+            // Row click (label area): mode-dependent behaviour.
+            switch (this.selection) {
+                case 'single':
+                    this._setSingleSelection(item);
+                    if (!item.isLeaf())
+                        item.toggle();
+                    break;
+                case 'leaf':
+                    if (item.isLeaf())
+                        this._setSingleSelection(item);
+                    else
+                        item.toggle();
+                    break;
+                case 'multiple':
+                    // The whole row acts like a <label> for the checkbox: clicking anywhere
+                    // on it toggles selection. Use the chevron to expand/collapse branches.
+                    this._selectItem(item, !item.selected);
+                    break;
+                case 'none':
+                    item.toggle();
+                    break;
+            }
+        };
+        this._onFocusIn = (event) => {
+            const target = event.target;
+            if (target instanceof HTMLElement) {
+                const item = target.closest(tagName('tree-item'));
+                if (item)
+                    this._lastFocusedItem = item;
+            }
+        };
+        this._onKeyDown = (event) => {
+            const current = this._lastFocusedItem ?? this._visibleItems()[0];
+            if (!current)
+                return;
+            const visible = this._visibleItems();
+            const index = visible.indexOf(current);
+            switch (event.key) {
+                case 'ArrowDown': {
+                    event.preventDefault();
+                    const next = visible[Math.min(index + 1, visible.length - 1)];
+                    if (next)
+                        this._focusItem(next);
+                    break;
+                }
+                case 'ArrowUp': {
+                    event.preventDefault();
+                    const prev = visible[Math.max(index - 1, 0)];
+                    if (prev)
+                        this._focusItem(prev);
+                    break;
+                }
+                case 'ArrowRight': {
+                    event.preventDefault();
+                    if (!current.isLeaf() && !current.expanded) {
+                        current.expanded = true;
+                    }
+                    else if (current.expanded) {
+                        const first = current.getChildrenItems()[0];
+                        if (first)
+                            this._focusItem(first);
+                    }
+                    break;
+                }
+                case 'ArrowLeft': {
+                    event.preventDefault();
+                    if (current.expanded && !current.isLeaf()) {
+                        current.expanded = false;
+                    }
+                    else {
+                        const parent = current.parentElement?.closest(tagName('tree-item'));
+                        if (parent)
+                            this._focusItem(parent);
+                    }
+                    break;
+                }
+                case 'Home': {
+                    event.preventDefault();
+                    if (visible[0])
+                        this._focusItem(visible[0]);
+                    break;
+                }
+                case 'End': {
+                    event.preventDefault();
+                    const last = visible[visible.length - 1];
+                    if (last)
+                        this._focusItem(last);
+                    break;
+                }
+                case 'Enter':
+                case ' ': {
+                    event.preventDefault();
+                    this._handleRowActivate(current);
+                    break;
+                }
+                case '*': {
+                    event.preventDefault();
+                    // Expand all siblings of the current item.
+                    const siblings = (current.parentElement
+                        ? Array.from(current.parentElement.children)
+                        : []).filter((el) => el.tagName === tagName('tree-item').toUpperCase());
+                    for (const sib of siblings) {
+                        if (!sib.isLeaf())
+                            sib.expanded = true;
+                    }
+                    break;
+                }
+            }
+        };
+    }
+    /**
+     * 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.
+     */
+    get selection() { return __classPrivateFieldGet(this, _LuxenTree_selection_accessor_storage, "f"); }
+    set selection(value) { __classPrivateFieldSet(this, _LuxenTree_selection_accessor_storage, value, "f"); }
+    /**
+     * 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.
+     */
+    get independent() { return __classPrivateFieldGet(this, _LuxenTree_independent_accessor_storage, "f"); }
+    set independent(value) { __classPrivateFieldSet(this, _LuxenTree_independent_accessor_storage, value, "f"); }
+    connectedCallback() {
+        super.connectedCallback();
+        this._mutationObserver = new MutationObserver(() => this._syncAll());
+        this._mutationObserver.observe(this, { childList: true, subtree: true });
+        this.addEventListener('l-tree-item-toggle', this._onItemToggle);
+        // Defer sync to let light DOM upgrade.
+        queueMicrotask(() => this._syncAll());
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._mutationObserver?.disconnect();
+        this.removeEventListener('l-tree-item-toggle', this._onItemToggle);
+    }
+    updated(changed) {
+        if (changed.has('selection') || changed.has('independent')) {
+            this._syncAll();
+        }
+    }
+    // --- Public API ---
+    /** Returns all items in document (flat) order, including nested ones. */
+    getAllItems({ includeDisabled = true } = {}) {
+        const tag = tagName('tree-item');
+        return Array.from(this.querySelectorAll(tag)).filter((item) => includeDisabled || !item.disabled);
+    }
+    /** Returns currently selected items. */
+    getSelection() {
+        return this.getAllItems().filter((i) => i.selected);
+    }
+    /** Expands every item that has children. */
+    expandAll() {
+        for (const item of this.getAllItems()) {
+            if (!item.isLeaf())
+                item.expanded = true;
+        }
+    }
+    /** Collapses every item. */
+    collapseAll() {
+        for (const item of this.getAllItems()) {
+            item.expanded = false;
+        }
+    }
+    // --- Sync / ARIA / depth / checkbox visibility ---
+    _syncAll() {
+        const showCheckbox = this.selection === 'multiple';
+        const roots = this._rootItems();
+        for (const root of roots) {
+            this._syncSubtree(root, 0, showCheckbox);
+        }
+        this._updateBranchStates();
+        // Ensure at least one item is tabbable.
+        this._ensureTabStop();
+    }
+    _syncSubtree(item, depth, showCheckbox) {
+        item.depth = depth;
+        item.showCheckbox = showCheckbox && this._canShowCheckboxOn(item);
+        for (const child of item.getChildrenItems()) {
+            this._syncSubtree(child, depth + 1, showCheckbox);
+        }
+    }
+    _canShowCheckboxOn(_item) {
+        if (this.selection !== 'multiple')
+            return false;
+        // In cascade mode, branches get a checkbox too so you can bulk-toggle children.
+        // In leaf-only selection, hidden here because selection !== 'multiple'.
+        return true;
+    }
+    _rootItems() {
+        const tag = tagName('tree-item').toUpperCase();
+        return Array.from(this.children).filter((el) => el.tagName === tag);
+    }
+    _ensureTabStop() {
+        const items = this._visibleItems();
+        if (items.length === 0)
+            return;
+        const hasTabStop = items.some((i) => i.tabIndex === 0);
+        if (!hasTabStop) {
+            for (const i of items)
+                i.tabIndex = -1;
+            items[0].tabIndex = 0;
+        }
+    }
+    /** Items currently visible (parent chain all expanded). */
+    _visibleItems() {
+        const out = [];
+        const walk = (items) => {
+            for (const i of items) {
+                out.push(i);
+                if (i.expanded)
+                    walk(i.getChildrenItems());
+            }
+        };
+        walk(this._rootItems());
+        return out;
+    }
+    _handleRowActivate(item) {
+        if (item.disabled)
+            return;
+        switch (this.selection) {
+            case 'single':
+                this._setSingleSelection(item);
+                break;
+            case 'leaf':
+                if (item.isLeaf())
+                    this._setSingleSelection(item);
+                else
+                    item.toggle();
+                break;
+            case 'multiple':
+                this._selectItem(item, !item.selected);
+                break;
+            case 'none':
+                item.toggle();
+                break;
+        }
+    }
+    _setSingleSelection(item) {
+        for (const i of this.getAllItems()) {
+            if (i !== item && i.selected)
+                i.selected = false;
+        }
+        item.selected = true;
+        this._emitSelectionChange();
+    }
+    _selectItem(item, value) {
+        if (item.disabled)
+            return;
+        item.selected = value;
+        if (this.selection === 'multiple' && !this.independent) {
+            // Cascade DOWN: toggling a branch toggles all descendants.
+            this._setSubtreeSelection(item, value);
+        }
+        item.indeterminate = false;
+        this._updateBranchStates();
+        this._emitSelectionChange();
+    }
+    _setSubtreeSelection(item, value) {
+        for (const child of item.getChildrenItems()) {
+            if (child.disabled)
+                continue;
+            child.selected = value;
+            child.indeterminate = false;
+            this._setSubtreeSelection(child, value);
+        }
+    }
+    /** Propagate child state UP to parents (indeterminate / auto-checked). */
+    _updateBranchStates() {
+        if (this.selection !== 'multiple' || this.independent) {
+            // In independent or non-multiple modes, clear any indeterminate flags.
+            for (const i of this.getAllItems())
+                i.indeterminate = false;
+            return;
+        }
+        const recompute = (item) => {
+            const children = item.getChildrenItems({ includeDisabled: false });
+            if (children.length === 0) {
+                return { all: item.selected, any: item.selected };
+            }
+            let all = true;
+            let any = false;
+            for (const child of children) {
+                const state = recompute(child);
+                if (!state.all)
+                    all = false;
+                if (state.any)
+                    any = true;
+            }
+            item.selected = all;
+            item.indeterminate = !all && any;
+            return { all: all && (item.getChildrenItems().length > 0 ? all : item.selected), any };
+        };
+        for (const root of this._rootItems())
+            recompute(root);
+    }
+    _emitSelectionChange() {
+        this.emit('selection-change', { detail: { selection: this.getSelection() } });
+    }
+    _itemFromEvent(event) {
+        const tag = tagName('tree-item');
+        const path = event.composedPath();
+        for (const node of path) {
+            if (node instanceof HTMLElement && node.matches?.(tag)) {
+                return node;
+            }
+        }
+        return null;
+    }
+    _focusItem(item) {
+        const visible = this._visibleItems();
+        for (const i of visible)
+            i.tabIndex = -1;
+        item.tabIndex = 0;
+        item.focus();
+        this._lastFocusedItem = item;
+    }
+    render() {
+        return html `
+      <div
+        class="tree"
+        part="base"
+        role="tree"
+        aria-multiselectable=${this.selection === 'multiple' ? 'true' : 'false'}
+        @click=${this._onClick}
+        @keydown=${this._onKeyDown}
+        @focusin=${this._onFocusIn}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+_LuxenTree_selection_accessor_storage = new WeakMap(), _LuxenTree_independent_accessor_storage = new WeakMap();
+LuxenTree.styles = [hostStyles, styles];
+__decorate([
+    property({ reflect: true })
+], LuxenTree.prototype, "selection", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LuxenTree.prototype, "independent", null);

package/dist/elements/tree-item/index.d.ts

@@ -0,0 +1,8 @@
+import { LuxenTreeItem } from './tree-item';
+export * from './tree-item';
+declare global {
+    interface HTMLElementTagNameMap {
+        'l-tree-item': LuxenTreeItem;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/tree-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tree-item/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,cAAc,aAAa,CAAC;AAG5B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,aAAa,CAAC;KAC9B;CACF"}

package/dist/elements/tree-item/index.js

@@ -0,0 +1,4 @@
+import { define } from '../../define';
+import { LuxenTreeItem } from './tree-item';
+export * from './tree-item';
+define('tree-item', LuxenTreeItem);

package/dist/elements/tree-item/tree-item.css

@@ -0,0 +1,172 @@
+:host {
+  display: block;
+  color: var(--l-color-text-primary, CanvasText);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+:host([disabled]) {
+  opacity: 0.4;
+}
+
+:host([disabled]) .item {
+  cursor: not-allowed;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: var(--item-gap);
+  min-block-size: var(--row-height);
+  padding-inline: var(--row-padding-inline);
+  padding-inline-start: calc(var(--indent-size) * var(--_depth, 0) + var(--row-padding-inline));
+  border-radius: 0.375rem;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease;
+  position: relative;
+}
+
+.item:focus-visible,
+:host(:focus-visible) .item {
+  outline: 2px solid var(--l-focus-ring, Highlight);
+  outline-offset: 1px;
+}
+
+@media (hover: hover) {
+  :host(:not([disabled])) .item:hover {
+    background-color: var(--l-color-bg-state-hover);
+  }
+}
+
+:host([selected]:not([disabled])) .item {
+  background-color: var(--l-color-bg-state-selected);
+}
+
+.expand {
+  inline-size: var(--chevron-size);
+  block-size: var(--chevron-size);
+  display: grid;
+  place-items: center;
+  flex: none;
+  color: var(--l-color-text-secondary, CanvasText);
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+/* Hide the DEFAULT fallback chevron SVG on a leaf — slotted content
+   (user-provided icon, avatar, etc.) remains visible. */
+:host(:not(:state(has-children)):not([lazy])) .expand > svg {
+  display: none;
+}
+
+.expand svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.checkbox {
+  margin: 0;
+  flex: none;
+  accent-color: var(--l-color-bg-fill-brand, Highlight);
+  cursor: pointer;
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
+/* Checkbox is only rendered when the parent tree enables multi-selection */
+:host(:not(:state(checkbox))) .checkbox {
+  display: none;
+}
+
+.label {
+  flex: 1;
+  min-inline-size: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.label ::slotted(*) {
+  min-inline-size: 0;
+}
+
+/* Wrapper around the content slot + children — anchor for the indent guide. */
+.branch {
+  position: relative;
+}
+
+/* Content slot — block area between the row and the children.
+   Aligned under the label text: same left offset as the row's label
+   (depth indent + row padding + chevron + gap). Visible for leaves (no
+   children) and for expanded branches; hidden when a branch is collapsed
+   (mirrors the children visibility). */
+.content {
+  display: block;
+  padding-inline-start: calc(
+    var(--indent-size) * var(--_depth, 0) + var(--row-padding-inline) + var(--chevron-size) +
+      var(--item-gap)
+  );
+  padding-inline-end: var(--row-padding-inline);
+}
+
+:host(:state(has-children):not([expanded])) .content {
+  display: none;
+}
+
+.children {
+  display: none;
+}
+
+:host([expanded]) .children {
+  display: block;
+}
+
+/* Vertical indent guide — spans the content + children block, starting
+   right below the row so it never overlaps the chevron/avatar.
+   The guide's visual centre sits exactly on the parent chevron's centre. */
+.branch::before {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: calc(
+    var(--indent-size) * var(--_depth, 0) + var(--row-padding-inline) + (var(--chevron-size) / 2) -
+      (var(--indent-guide-width) / 2)
+  );
+  inline-size: 0;
+  border-inline-start: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);
+  pointer-events: none;
+}
+
+/* Only render the guide for open branches that have children. */
+:host(:not([expanded])) .branch::before,
+:host(:not(:state(has-children))) .branch::before {
+  display: none;
+}
+
+.spinner {
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+  border-radius: 50%;
+  border: 2px solid var(--l-color-border, currentColor);
+  border-block-start-color: transparent;
+  animation: spin 700ms linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation: none;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/elements/tree-item/tree-item.d.ts

@@ -0,0 +1,74 @@
+import { type PropertyValues } from 'lit';
+import { LuxenElement } from '../../shared/luxen-element';
+/**
+ * A node inside `<l-tree>`. Nested `<l-tree-item>` children become sub-nodes.
+ *
+ * @slot - Label content (kept to a single row).
+ * @slot prefix - Leading content before the label (e.g. icon).
+ * @slot suffix - Trailing content.
+ * @slot expand-icon - Icon shown when the item is collapsed.
+ * @slot collapse-icon - Icon shown when the item is expanded.
+ * @slot content - Block content that belongs to the item but not to its header row (e.g. comment body, action bar). Hidden when a branch is collapsed.
+ *
+ * @csspart base - The item row.
+ * @csspart expand-button - The chevron toggle area.
+ * @csspart checkbox - The native checkbox input.
+ * @csspart label - The label container.
+ * @csspart branch - Wrapper around the content and children slots; carries the indent guide.
+ * @csspart content - The content slot wrapper (block area between the row and the children).
+ * @csspart children - The nested items container.
+ *
+ * @cssproperty [--_depth] - Internal depth index driving indentation. Set by `<l-tree>`.
+ *
+ * Layout tokens (`--chevron-size`, `--row-height`, `--row-padding-inline`, `--item-gap`) live on `<l-tree>` and cascade down — see its CSS custom properties.
+ *
+ * @event expand - Fired when the item is expanded.
+ * @event collapse - Fired when the item is collapsed.
+ * @event lazy-load - Fired when a lazy item is expanded for the first time. Consumers should append children and set `lazy=false`.
+ */
+export declare class LuxenTreeItem extends LuxenElement {
+    static styles: import("lit").CSSResult[];
+    private _internals;
+    private _childObserver?;
+    /** Whether the item is expanded. */
+    accessor expanded: boolean;
+    /** Whether the item is selected. */
+    accessor selected: boolean;
+    /** Whether the checkbox is indeterminate (some descendants selected). */
+    accessor indeterminate: boolean;
+    /** Whether the item is disabled. */
+    accessor disabled: boolean;
+    /** Marks this item as having children that will be loaded on first expand. */
+    accessor lazy: boolean;
+    /** Whether the item is currently loading (shows a spinner). */
+    accessor loading: boolean;
+    /** Set by `<l-tree>`: whether a checkbox is shown. */
+    set showCheckbox(value: boolean);
+    get showCheckbox(): boolean;
+    private _showCheckbox;
+    /** Set by `<l-tree>`: depth of the item in the tree (0 = root). */
+    set depth(value: number);
+    get depth(): number;
+    private _depth;
+    /** Whether this item has nested tree-item children. */
+    get hasChildren(): boolean;
+    private _hasChildren;
+    /** Returns the child `<l-tree-item>` elements directly under this one. */
+    getChildrenItems({ includeDisabled }?: {
+        includeDisabled?: boolean | undefined;
+    }): LuxenTreeItem[];
+    /** Returns true if this item has no expandable children. */
+    isLeaf(): boolean;
+    /** Returns the text label of this item. */
+    getTextLabel(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues<this>): void;
+    private _setState;
+    private _syncChildren;
+    /** Toggle expand state. Emits `lazy-load` the first time a lazy item opens. */
+    toggle(): void;
+    private _onCheckboxChange;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=tree-item.d.ts.map