@aceshooting/lyra-ui 2.1.0 → 2.3.0

package/dist/components/tree/tree-node.class.js

@@ -0,0 +1,223 @@
+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;
+};
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { tag } from '../../internal/prefix.js';
+import { chevronIcon } from '../../internal/icons.js';
+import { css } from 'lit';
+import { cascadeUpdateComplete } from './update-cascade.js';
+const styles = css `
+  :host {
+    display: block;
+    outline: none; /* the host is the focusable treeitem; the visible ring lives on [part=row] */
+  }
+  :host(:focus-visible) [part='row'] {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='row'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    /* Depth-based indent is capped at 8rem so a deeply-nested item can't
+       push its content off-screen with no way back; [part=label] below
+       truncates the remaining overflow and tree.styles.ts's [part=base]
+       adds an overflow-x:auto fallback for whatever's left. */
+    padding-inline-start: calc(var(--lyra-space-s) + min(var(--lyra-tree-depth, 0) * 1rem, 8rem));
+    cursor: pointer;
+    border-radius: var(--lyra-radius);
+  }
+  [part='row']:hover {
+    background: var(--lyra-color-brand-quiet);
+  }
+  [part='toggle'] {
+    /* Deliberately smaller than the shared --lyra-icon-button-size (2.5rem,
+       for standalone icon-only buttons) — this toggle sits inline in a
+       compact row, but still needs a real touch target, not a 1rem hitbox. */
+    min-inline-size: 1.75rem;
+    min-block-size: 1.75rem;
+    padding: var(--lyra-space-xs);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: none;
+    color: var(--lyra-color-text-quiet);
+    cursor: pointer;
+    flex: 0 0 auto;
+  }
+  [part='toggle'][hidden] {
+    /* visibility (not display) so the placeholder keeps its layout box --
+       a leaf row still lines up with sibling rows that do have a chevron. */
+    visibility: hidden;
+  }
+  :host([expanded]) [part='toggle'] {
+    transform: rotate(90deg);
+  }
+  [part='label'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [part='badge'] {
+    font-size: 0.75rem;
+    color: var(--lyra-color-text);
+    background: var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    padding: 0 0.35rem;
+  }
+`;
+/**
+ * `<lyra-tree-node>` — internal recursive renderer for `<lyra-tree>`.
+ *
+ * `role="treeitem"` (plus `aria-expanded`/`aria-level`/`aria-setsize`/
+ * `aria-posinset` and the roving `tabindex`, driven by `<lyra-tree>`) 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 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 lyra-tree-node
+ * @event lyra-node-toggle - `detail: { id, expanded }`, fired when this node is expanded or collapsed (via `expand()`/`collapse()`, the toggle button, or ArrowRight/ArrowLeft).
+ * @event lyra-node-select - `detail: { id }`, fired when this node's primary action is activated (via `select()`, clicking anywhere in its row, or Enter/Space).
+ * @csspart row - The tree row.
+ * @csspart toggle - The expand/collapse button.
+ * @csspart label - The node label.
+ * @csspart badge - The optional node badge.
+ */
+export class LyraTreeNode extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.depth = 0;
+        this.expanded = false;
+        /** The id of the tree's roving-tabindex-focused item, pushed down from `<lyra-tree>`. */
+        this.activeId = null;
+        this.setSize = 1;
+        this.posInSet = 1;
+        /**
+         * A `<button>` is a real focusable click target even with
+         * `tabindex="-1" aria-hidden="true"` -- only *sequential* (Tab-key)
+         * navigation honors `tabindex="-1"`, a mouse click does not. Left
+         * unguarded, clicking this toggle parks real DOM focus on this hidden,
+         * non-treeitem button instead of the host, which is both an a11y dead end
+         * and invisible to `:host(:focus-visible)`'s ring. `preventDefault()` on
+         * `mousedown` blocks that default focus move; focusing the host instead
+         * keeps focus on the actual `role="treeitem"` element the row represents.
+         */
+        this.onToggleMouseDown = (e) => {
+            e.preventDefault();
+            this.focus();
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    get hasChildren() {
+        return Boolean(this.item.children?.length);
+    }
+    willUpdate() {
+        this.setAttribute('role', 'treeitem');
+        this.setAttribute('aria-level', String(this.depth + 1));
+        this.setAttribute('aria-setsize', String(this.setSize));
+        this.setAttribute('aria-posinset', String(this.posInSet));
+        if (this.hasChildren)
+            this.setAttribute('aria-expanded', String(this.expanded));
+        else
+            this.removeAttribute('aria-expanded');
+        this.tabIndex = this.item?.id === this.activeId ? 0 : -1;
+    }
+    /** Expand this node (no-op if already expanded or a leaf). */
+    expand() {
+        if (!this.hasChildren || this.expanded)
+            return;
+        this.expanded = true;
+        this.emit('lyra-node-toggle', { id: this.item.id, expanded: true });
+    }
+    /** Collapse this node (no-op if already collapsed or a leaf). */
+    collapse() {
+        if (!this.hasChildren || !this.expanded)
+            return;
+        this.expanded = false;
+        this.emit('lyra-node-toggle', { id: this.item.id, expanded: false });
+    }
+    /**
+     * Fire this item's primary "select" action (Enter/Space, or clicking
+     * anywhere in the row). Emits *before* calling `.focus()`: `<lyra-tree>`'s
+     * `onNodeActivate` listener for `lyra-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() {
+        this.emit('lyra-node-select', { id: this.item.id });
+        this.focus();
+    }
+    /** See `cascadeUpdateComplete` and the matching override on `<lyra-tree>`. */
+    async getUpdateComplete() {
+        const result = await super.getUpdateComplete();
+        await cascadeUpdateComplete([...(this.shadowRoot?.querySelectorAll(tag('tree-node')) ?? [])]);
+        return result;
+    }
+    render() {
+        return html `
+      <div part="row" style=${`--lyra-tree-depth:${this.depth}`} @click=${() => this.select()}>
+        <button
+          part="toggle"
+          type="button"
+          tabindex="-1"
+          aria-hidden="true"
+          ?hidden=${!this.hasChildren}
+          @mousedown=${this.onToggleMouseDown}
+          @click=${(e) => {
+            e.stopPropagation();
+            this.expanded ? this.collapse() : this.expand();
+        }}
+        >
+          ${this.hasChildren ? chevronIcon() : nothing}
+        </button>
+        <span part="label">${this.item.label}</span>
+        ${this.item.badge != null ? html `<span part="badge">${this.item.badge}</span>` : nothing}
+      </div>
+      ${this.expanded && this.hasChildren
+            ? html `<div role="group">
+            ${repeat(this.item.children, (child) => child.id, (child, i) => html `<lyra-tree-node
+                .item=${child}
+                .depth=${this.depth + 1}
+                .activeId=${this.activeId}
+                .setSize=${this.item.children.length}
+                .posInSet=${i + 1}
+              ></lyra-tree-node>`)}
+          </div>`
+            : nothing}
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraTreeNode.prototype, "item", void 0);
+__decorate([
+    property({ type: Number })
+], LyraTreeNode.prototype, "depth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraTreeNode.prototype, "expanded", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraTreeNode.prototype, "activeId", void 0);
+__decorate([
+    property({ type: Number, attribute: false })
+], LyraTreeNode.prototype, "setSize", void 0);
+__decorate([
+    property({ type: Number, attribute: false })
+], LyraTreeNode.prototype, "posInSet", void 0);
+//# sourceMappingURL=tree-node.class.js.map

package/dist/components/tree/tree-node.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-node.class.js","sourceRoot":"","sources":["../../../src/components/tree/tree-node.class.ts"],"names":[],"mappings":"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"}

package/dist/components/tree/tree-node.d.ts

@@ -1,68 +1,2 @@
-import { type TemplateResult } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-import type { TreeItem } from './tree.js';
-/**
- * `<lyra-tree-node>` — internal recursive renderer for `<lyra-tree>`.
- *
- * `role="treeitem"` (plus `aria-expanded`/`aria-level`/`aria-setsize`/
- * `aria-posinset` and the roving `tabindex`, driven by `<lyra-tree>`) 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 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 lyra-tree-node
- * @event lyra-node-toggle - `detail: { id, expanded }`, fired when this node is expanded or collapsed (via `expand()`/`collapse()`, the toggle button, or ArrowRight/ArrowLeft).
- * @event lyra-node-select - `detail: { id }`, fired when this node's primary action is activated (via `select()`, clicking anywhere in its row, or Enter/Space).
- * @csspart row - The tree row.
- * @csspart toggle - The expand/collapse button.
- * @csspart label - The node label.
- * @csspart badge - The optional node badge.
- */
-export declare class LyraTreeNode extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    item: TreeItem;
-    depth: number;
-    expanded: boolean;
-    /** The id of the tree's roving-tabindex-focused item, pushed down from `<lyra-tree>`. */
-    activeId: string | null;
-    setSize: number;
-    posInSet: number;
-    get hasChildren(): boolean;
-    protected willUpdate(): void;
-    /** Expand this node (no-op if already expanded or a leaf). */
-    expand(): void;
-    /** 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()`: `<lyra-tree>`'s
-     * `onNodeActivate` listener for `lyra-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;
-    /** See `cascadeUpdateComplete` and the matching override on `<lyra-tree>`. */
-    protected getUpdateComplete(): Promise<boolean>;
-    /**
-     * A `<button>` is a real focusable click target even with
-     * `tabindex="-1" aria-hidden="true"` -- only *sequential* (Tab-key)
-     * navigation honors `tabindex="-1"`, a mouse click does not. Left
-     * unguarded, clicking this toggle parks real DOM focus on this hidden,
-     * non-treeitem button instead of the host, which is both an a11y dead end
-     * and invisible to `:host(:focus-visible)`'s ring. `preventDefault()` on
-     * `mousedown` blocks that default focus move; focusing the host instead
-     * keeps focus on the actual `role="treeitem"` element the row represents.
-     */
-    private onToggleMouseDown;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-tree-node': LyraTreeNode;
-    }
-}
+export * from './tree-node.class.js';
+//# sourceMappingURL=tree-node.d.ts.map

package/dist/components/tree/tree-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-node.d.ts","sourceRoot":"","sources":["../../../src/components/tree/tree-node.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/components/tree/tree-node.js

@@ -1,223 +1,5 @@
-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;
-};
-import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { LyraElement } from '../../internal/lyra-element.js';
-import { defineElement, tag } from '../../internal/prefix.js';
-import { chevronIcon } from '../../internal/icons.js';
-import { css } from 'lit';
-import { cascadeUpdateComplete } from './update-cascade.js';
-const styles = css `
-  :host {
-    display: block;
-    outline: none; /* the host is the focusable treeitem; the visible ring lives on [part=row] */
-  }
-  :host(:focus-visible) [part='row'] {
-    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
-    outline-offset: var(--lyra-focus-ring-offset);
-  }
-  [part='row'] {
-    display: flex;
-    align-items: center;
-    gap: var(--lyra-space-xs);
-    padding: var(--lyra-space-xs) var(--lyra-space-s);
-    /* Depth-based indent is capped at 8rem so a deeply-nested item can't
-       push its content off-screen with no way back; [part=label] below
-       truncates the remaining overflow and tree.styles.ts's [part=base]
-       adds an overflow-x:auto fallback for whatever's left. */
-    padding-inline-start: calc(var(--lyra-space-s) + min(var(--lyra-tree-depth, 0) * 1rem, 8rem));
-    cursor: pointer;
-    border-radius: var(--lyra-radius);
-  }
-  [part='row']:hover {
-    background: var(--lyra-color-brand-quiet);
-  }
-  [part='toggle'] {
-    /* Deliberately smaller than the shared --lyra-icon-button-size (2.5rem,
-       for standalone icon-only buttons) — this toggle sits inline in a
-       compact row, but still needs a real touch target, not a 1rem hitbox. */
-    min-inline-size: 1.75rem;
-    min-block-size: 1.75rem;
-    padding: var(--lyra-space-xs);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    background: none;
-    color: var(--lyra-color-text-quiet);
-    cursor: pointer;
-    flex: 0 0 auto;
-  }
-  [part='toggle'][hidden] {
-    /* visibility (not display) so the placeholder keeps its layout box --
-       a leaf row still lines up with sibling rows that do have a chevron. */
-    visibility: hidden;
-  }
-  :host([expanded]) [part='toggle'] {
-    transform: rotate(90deg);
-  }
-  [part='label'] {
-    flex: 1 1 auto;
-    min-inline-size: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  [part='badge'] {
-    font-size: 0.75rem;
-    color: var(--lyra-color-text);
-    background: var(--lyra-color-border);
-    border-radius: var(--lyra-radius);
-    padding: 0 0.35rem;
-  }
-`;
-/**
- * `<lyra-tree-node>` — internal recursive renderer for `<lyra-tree>`.
- *
- * `role="treeitem"` (plus `aria-expanded`/`aria-level`/`aria-setsize`/
- * `aria-posinset` and the roving `tabindex`, driven by `<lyra-tree>`) 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 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 lyra-tree-node
- * @event lyra-node-toggle - `detail: { id, expanded }`, fired when this node is expanded or collapsed (via `expand()`/`collapse()`, the toggle button, or ArrowRight/ArrowLeft).
- * @event lyra-node-select - `detail: { id }`, fired when this node's primary action is activated (via `select()`, clicking anywhere in its row, or Enter/Space).
- * @csspart row - The tree row.
- * @csspart toggle - The expand/collapse button.
- * @csspart label - The node label.
- * @csspart badge - The optional node badge.
- */
-export class LyraTreeNode extends LyraElement {
-    constructor() {
-        super(...arguments);
-        this.depth = 0;
-        this.expanded = false;
-        /** The id of the tree's roving-tabindex-focused item, pushed down from `<lyra-tree>`. */
-        this.activeId = null;
-        this.setSize = 1;
-        this.posInSet = 1;
-        /**
-         * A `<button>` is a real focusable click target even with
-         * `tabindex="-1" aria-hidden="true"` -- only *sequential* (Tab-key)
-         * navigation honors `tabindex="-1"`, a mouse click does not. Left
-         * unguarded, clicking this toggle parks real DOM focus on this hidden,
-         * non-treeitem button instead of the host, which is both an a11y dead end
-         * and invisible to `:host(:focus-visible)`'s ring. `preventDefault()` on
-         * `mousedown` blocks that default focus move; focusing the host instead
-         * keeps focus on the actual `role="treeitem"` element the row represents.
-         */
-        this.onToggleMouseDown = (e) => {
-            e.preventDefault();
-            this.focus();
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    get hasChildren() {
-        return Boolean(this.item.children?.length);
-    }
-    willUpdate() {
-        this.setAttribute('role', 'treeitem');
-        this.setAttribute('aria-level', String(this.depth + 1));
-        this.setAttribute('aria-setsize', String(this.setSize));
-        this.setAttribute('aria-posinset', String(this.posInSet));
-        if (this.hasChildren)
-            this.setAttribute('aria-expanded', String(this.expanded));
-        else
-            this.removeAttribute('aria-expanded');
-        this.tabIndex = this.item?.id === this.activeId ? 0 : -1;
-    }
-    /** Expand this node (no-op if already expanded or a leaf). */
-    expand() {
-        if (!this.hasChildren || this.expanded)
-            return;
-        this.expanded = true;
-        this.emit('lyra-node-toggle', { id: this.item.id, expanded: true });
-    }
-    /** Collapse this node (no-op if already collapsed or a leaf). */
-    collapse() {
-        if (!this.hasChildren || !this.expanded)
-            return;
-        this.expanded = false;
-        this.emit('lyra-node-toggle', { id: this.item.id, expanded: false });
-    }
-    /**
-     * Fire this item's primary "select" action (Enter/Space, or clicking
-     * anywhere in the row). Emits *before* calling `.focus()`: `<lyra-tree>`'s
-     * `onNodeActivate` listener for `lyra-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() {
-        this.emit('lyra-node-select', { id: this.item.id });
-        this.focus();
-    }
-    /** See `cascadeUpdateComplete` and the matching override on `<lyra-tree>`. */
-    async getUpdateComplete() {
-        const result = await super.getUpdateComplete();
-        await cascadeUpdateComplete([...(this.shadowRoot?.querySelectorAll(tag('tree-node')) ?? [])]);
-        return result;
-    }
-    render() {
-        return html `
-      <div part="row" style=${`--lyra-tree-depth:${this.depth}`} @click=${() => this.select()}>
-        <button
-          part="toggle"
-          type="button"
-          tabindex="-1"
-          aria-hidden="true"
-          ?hidden=${!this.hasChildren}
-          @mousedown=${this.onToggleMouseDown}
-          @click=${(e) => {
-            e.stopPropagation();
-            this.expanded ? this.collapse() : this.expand();
-        }}
-        >
-          ${this.hasChildren ? chevronIcon() : nothing}
-        </button>
-        <span part="label">${this.item.label}</span>
-        ${this.item.badge != null ? html `<span part="badge">${this.item.badge}</span>` : nothing}
-      </div>
-      ${this.expanded && this.hasChildren
-            ? html `<div role="group">
-            ${repeat(this.item.children, (child) => child.id, (child, i) => html `<lyra-tree-node
-                .item=${child}
-                .depth=${this.depth + 1}
-                .activeId=${this.activeId}
-                .setSize=${this.item.children.length}
-                .posInSet=${i + 1}
-              ></lyra-tree-node>`)}
-          </div>`
-            : nothing}
-    `;
-    }
-}
-__decorate([
-    property({ attribute: false })
-], LyraTreeNode.prototype, "item", void 0);
-__decorate([
-    property({ type: Number })
-], LyraTreeNode.prototype, "depth", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraTreeNode.prototype, "expanded", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraTreeNode.prototype, "activeId", void 0);
-__decorate([
-    property({ type: Number, attribute: false })
-], LyraTreeNode.prototype, "setSize", void 0);
-__decorate([
-    property({ type: Number, attribute: false })
-], LyraTreeNode.prototype, "posInSet", void 0);
+export * from './tree-node.class.js';
+import { LyraTreeNode } from './tree-node.class.js';
+import { defineElement } from '../../internal/prefix.js';
 defineElement('tree-node', LyraTreeNode);
+//# sourceMappingURL=tree-node.js.map

package/dist/components/tree/tree-node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-node.js","sourceRoot":"","sources":["../../../src/components/tree/tree-node.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC"}

package/dist/components/tree/tree.class.d.ts

@@ -0,0 +1,130 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import './tree-node.class.js';
+export interface TreeItem {
+    id: string;
+    label: string;
+    children?: TreeItem[];
+    badge?: string | number;
+}
+/**
+ * `<lyra-tree>` — an expand/collapse hierarchy for graph/document navigation.
+ *
+ * Implements the WAI-ARIA treeitem keyboard pattern: a single roving
+ * `tabindex` (tracked here as `activeId`, pushed down to every
+ * `<lyra-tree-node>` — including nested ones, recursively) and
+ * ArrowUp/Down/Right/Left/Home/End/Enter/Space handled by one delegated
+ * `keydown` listener. Native `KeyboardEvent`s are `composed: true` and
+ * bubble across shadow-DOM boundaries, so a press inside a deeply-nested
+ * `<lyra-tree-node>`'s own shadow root still reaches this listener.
+ *
+ * @customElement lyra-tree
+ * @event lyra-node-toggle - `detail: { id, expanded }`, dispatched by a descendant `<lyra-tree-node>` and observed here (bubbling, composed) to keep the roving-tabindex `activeId` in sync.
+ * @event lyra-node-select - `detail: { id }`, dispatched by a descendant `<lyra-tree-node>` and observed here (bubbling, composed) to keep the roving-tabindex `activeId` in sync.
+ * @csspart base
+ * @slot - `<lyra-tree-node>` elements (top-level tree items).
+ */
+export declare class LyraTree extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    data: TreeItem[];
+    /** Accessible name for the tree -- `role="tree"` lives on an internal element, not the host, so `aria-label`/`aria-labelledby` set directly on `<lyra-tree>` would not label it. */
+    label: string;
+    private activeId;
+    /** Set by `willUpdate()` when a `data` reassignment removes the node that currently holds real DOM focus; consumed by `updated()` to refocus the newly-designated `activeId` node once it's actually focusable. */
+    private pendingFocusId;
+    private get nodeElements();
+    private childrenOf;
+    /**
+     * Every currently *visible* (ancestor-expanded) node, top-to-bottom.
+     *
+     * Recomputed on every call rather than memoized: `item`/`expanded` are
+     * plain public settable properties on `<lyra-tree-node>` (not just
+     * reachable through this class's own `data` setter or the bubbling
+     * `lyra-node-toggle` event), so a cache keyed off those two entry points
+     * alone would go stale the moment a caller mutated a node directly --
+     * e.g. `node.item = { ...node.item, children: [...] }` to append a child
+     * in place. This walk only runs from user-paced `keydown` handling (never
+     * a hot render-loop path), so the cost of a `shadowRoot.querySelectorAll`
+     * per currently-expanded node is not worth trading for that staleness risk.
+     */
+    private visibleNodeElements;
+    private findItem;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /** By-id reconciliation of top-level items: reuses/reorders existing `<lyra-tree-node>` elements and removes ones no longer present in `data`. */
+    private syncNodes;
+    private focusNode;
+    /**
+     * A mouse click always lands directly on the node it interacts with --
+     * `select()`/`expand()`/`collapse()` all emit their own node's id --
+     * independent of whatever `activeId` currently holds. Sync `activeId` to
+     * that id here so a click always becomes the tree's new roving-tabindex
+     * target: this keeps it aligned with real DOM focus, keeps the next
+     * arrow-key press relative to the item the user just clicked (rather than
+     * a stale `activeId`), and keeps `activeId` valid when a click collapses
+     * an ancestor of the previously-active node -- the collapsed node's own
+     * id (always still visible, since collapsing never removes a node's own
+     * top-level or already-rendered self) replaces the now-hidden descendant's
+     * id, so at least one node keeps a roving tabindex of 0. Keyboard-driven
+     * toggles/selects always target the already-active node, so this is a
+     * same-value, no-op assignment for them.
+     */
+    private onNodeActivate;
+    /**
+     * `updated()` only pushes the new `activeId` to *top-level* nodes; nested
+     * nodes only receive it once their ancestor chain's own renders cascade it
+     * down (one more pending update per depth level). Cascade `updateComplete`
+     * to match (see `cascadeUpdateComplete`), so `focusNode()`'s `.focus()`
+     * call never runs while a nested target is still mid-cascade -- `.focus()`
+     * on an element with no `tabindex` attribute committed yet is a silent
+     * no-op.
+     *
+     * The `pendingFocusId` refocus (set by `willUpdate()` when a `data`
+     * reassignment removes the node that currently holds real DOM focus) is
+     * also resolved *here*, after the cascade above, rather than from
+     * `updated()` firing a detached `void this.updateComplete.then(...)` of
+     * its own: `updateComplete`'s getter (see the base class) calls this
+     * method fresh on *every* access rather than caching one promise, so a
+     * second, independent invocation started from inside `updated()` isn't
+     * the same promise chain a caller's own `await el.updateComplete` is
+     * following -- both ultimately settle once the same underlying update
+     * resolves, but as separate chains their `.then()` continuations aren't
+     * ordered against each other, so a caller's `await` can win the race and
+     * observe focus *not yet* restored. Doing the refocus inline, before this
+     * method's own `await` chain resolves, makes it unconditionally part of
+     * whatever `updateComplete` promise every caller (this class's own
+     * `focusNode()` included) is already waiting on.
+     */
+    protected getUpdateComplete(): Promise<boolean>;
+    private onTreeKeyDown;
+    /**
+     * Expand every node in the tree, recursively. Resolves once every
+     * descendant has actually finished expanding (not just had `expanded` set)
+     * -- callers that immediately read `visibleNodeElements()`-derived state
+     * (or call `collapseAll()` right after) should `await` this instead of
+     * firing it and moving on.
+     *
+     * Guarded on `n.hasChildren`, matching `expand()`'s own invariant -- a leaf
+     * node's `expanded` must never be set to `true`, since `collapse()` (and
+     * this method's own counterpart, `collapseAll()`) refuse to act on a node
+     * that's `!hasChildren`, which would otherwise leave the leaf permanently
+     * stuck with a reflected `expanded` attribute nothing can clear.
+     */
+    expandAll(): Promise<void>;
+    /**
+     * Collapse every node in the tree, recursively. Goes through each node's
+     * own `collapse()` (rather than assigning `expanded` directly) so its
+     * `lyra-node-toggle` emit reaches `onNodeActivate` -- that keeps `activeId`
+     * re-synced to a node that's still visible after collapsing, even when the
+     * roving-tabindex target was a nested descendant whose ancestor's
+     * `role="group"` is about to disappear.
+     */
+    collapseAll(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-tree': LyraTree;
+    }
+}
+//# sourceMappingURL=tree.class.d.ts.map