@aceshooting/lyra-ui 0.1.1 → 0.1.2

package/dist/components/time-range/time-range.d.ts

@@ -0,0 +1,40 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-time-range>` — a two-handle brush/scrubber over a numeric domain.
+ * Callers map their own time axis to `[min, max]`; no date logic lives here
+ * (matches the no-date-library constraint used elsewhere in this library).
+ *
+ * @customElement lyra-time-range
+ * @event lyra-input - Fired continuously while dragging. `detail: { start, end }`.
+ * @event lyra-change - Fired on release / keyup-commit. `detail: { start, end }`.
+ * @csspart base, track, range, handle-start, handle-end
+ */
+export declare class LyraTimeRange extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    min: number;
+    max: number;
+    start: number;
+    end: number;
+    step: number;
+    disabled: boolean;
+    private dragging;
+    disconnectedCallback(): void;
+    private percentOf;
+    private clamp;
+    private setValue;
+    private onKeyDown;
+    private onKeyUp;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    /** Stop an in-progress drag, optionally committing a final lyra-change. */
+    private endDrag;
+    protected willUpdate(changed: PropertyValues): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-time-range': LyraTimeRange;
+    }
+}

package/dist/components/time-range/time-range.js

@@ -0,0 +1,219 @@
+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 } from 'lit';
+import { property } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './time-range.styles.js';
+function isArrowKey(key) {
+    return key === 'ArrowRight' || key === 'ArrowUp' || key === 'ArrowLeft' || key === 'ArrowDown';
+}
+/**
+ * `<lyra-time-range>` — a two-handle brush/scrubber over a numeric domain.
+ * Callers map their own time axis to `[min, max]`; no date logic lives here
+ * (matches the no-date-library constraint used elsewhere in this library).
+ *
+ * @customElement lyra-time-range
+ * @event lyra-input - Fired continuously while dragging. `detail: { start, end }`.
+ * @event lyra-change - Fired on release / keyup-commit. `detail: { start, end }`.
+ * @csspart base, track, range, handle-start, handle-end
+ */
+export class LyraTimeRange extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.min = 0;
+        this.max = 100;
+        this.start = 0;
+        this.end = 100;
+        this.step = 1;
+        this.disabled = false;
+        this.dragging = null;
+        this.onKeyDown = (handle, e) => {
+            // A handle that already has focus when the component becomes disabled
+            // must not still respond to arrow keys (new pointerdowns are already
+            // blocked by the `if (this.disabled) return;` guard in onPointerDown,
+            // and disabled handles carry `tabindex="-1"`, but a pre-existing focus
+            // can bypass both of those).
+            if (this.disabled)
+                return;
+            const current = handle === 'start' ? this.start : this.end;
+            if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+                e.preventDefault();
+                this.setValue(handle, current + this.step, false);
+            }
+            else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.setValue(handle, current - this.step, false);
+            }
+        };
+        this.onKeyUp = (e) => {
+            // Only commit on release of the arrow keys that onKeyDown acts on —
+            // releasing an unrelated key (Tab, Shift, ...) while a handle happens
+            // to be focused must not emit a spurious lyra-change.
+            if (this.disabled || !isArrowKey(e.key))
+                return;
+            this.emit('lyra-change', { start: this.start, end: this.end });
+        };
+        this.onPointerDown = (handle, e) => {
+            if (this.disabled)
+                return;
+            this.dragging = handle;
+            e.target.setPointerCapture(e.pointerId);
+            window.addEventListener('pointermove', this.onPointerMove);
+            window.addEventListener('pointerup', this.onPointerUp);
+        };
+        this.onPointerMove = (e) => {
+            if (!this.dragging)
+                return;
+            if (this.disabled) {
+                // These are window-level listeners driven by setPointerCapture, so
+                // they keep firing for this pointerId regardless of any CSS on the
+                // host (this was already true even back when the host used
+                // `pointer-events: none`, since that never governed an
+                // already-captured window listener) — a drag already in progress
+                // would otherwise keep mutating start/end (and emitting lyra-input)
+                // after `disabled` flips true mid-drag. Abort the drag instead of
+                // continuing to process it.
+                this.endDrag(false);
+                return;
+            }
+            const base = this.renderRoot.querySelector('[part="base"]');
+            const rect = base.getBoundingClientRect();
+            const ratio = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
+            const value = this.min + ratio * (this.max - this.min);
+            this.setValue(this.dragging, value, false);
+        };
+        this.onPointerUp = () => {
+            this.endDrag(true);
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Mirror lyra-split's cleanup: if the element is removed mid-drag (or a
+        // pointercancel/alt-tab means `pointerup` never reaches `window`), these
+        // window-level listeners — and the closure keeping this instance alive —
+        // would otherwise leak indefinitely.
+        window.removeEventListener('pointermove', this.onPointerMove);
+        window.removeEventListener('pointerup', this.onPointerUp);
+    }
+    percentOf(value) {
+        const span = this.max - this.min || 1;
+        return ((value - this.min) / span) * 100;
+    }
+    clamp(handle, value) {
+        const stepped = Math.round(value / this.step) * this.step;
+        const bounded = Math.min(this.max, Math.max(this.min, stepped));
+        if (handle === 'start')
+            return Math.min(bounded, this.end);
+        return Math.max(bounded, this.start);
+    }
+    setValue(handle, value, commit) {
+        const clamped = this.clamp(handle, value);
+        if (handle === 'start')
+            this.start = clamped;
+        else
+            this.end = clamped;
+        this.emit('lyra-input', { start: this.start, end: this.end });
+        if (commit)
+            this.emit('lyra-change', { start: this.start, end: this.end });
+    }
+    /** Stop an in-progress drag, optionally committing a final lyra-change. */
+    endDrag(commit) {
+        if (this.dragging && commit)
+            this.emit('lyra-change', { start: this.start, end: this.end });
+        this.dragging = null;
+        window.removeEventListener('pointermove', this.onPointerMove);
+        window.removeEventListener('pointerup', this.onPointerUp);
+    }
+    willUpdate(changed) {
+        if (changed.has('start') ||
+            changed.has('end') ||
+            changed.has('min') ||
+            changed.has('max')) {
+            // Clamp both handles into the current [min, max] domain first — a
+            // caller narrowing the domain after mount (e.g. zooming the time
+            // axis via `el.max = 50`) must not leave a handle rendered outside
+            // the track, since percentOf() would otherwise produce <0%/>100%.
+            // Guard against a caller passing min > max so the bounds themselves
+            // stay well-formed.
+            const lo = Math.min(this.min, this.max);
+            const hi = Math.max(this.min, this.max);
+            this.start = Math.min(hi, Math.max(lo, this.start));
+            this.end = Math.min(hi, Math.max(lo, this.end));
+        }
+        // Keep start <= end regardless of which side changed (a controlled
+        // caller may set only `end`, e.g. two-way-binding an external store —
+        // see finding in 2026-07-09 tier2 review). The handle that just moved
+        // wins; the other side is pulled to meet it, mirroring the direction
+        // `clamp()` already uses during interactive dragging.
+        if (changed.has('start') || changed.has('min') || changed.has('max')) {
+            this.start = Math.min(this.start, this.end);
+        }
+        if (changed.has('end') || changed.has('min') || changed.has('max')) {
+            this.end = Math.max(this.end, this.start);
+        }
+    }
+    render() {
+        const startPct = this.percentOf(this.start);
+        const endPct = this.percentOf(this.end);
+        return html `
+      <div part="base">
+        <div part="track"></div>
+        <div
+          part="range"
+          style=${`inset-inline-start:${startPct}%;inline-size:${endPct - startPct}%`}
+        ></div>
+        <div
+          part="handle-start"
+          role="slider"
+          tabindex=${this.disabled ? '-1' : '0'}
+          aria-label="Range start"
+          aria-valuemin=${this.min}
+          aria-valuemax=${this.max}
+          aria-valuenow=${this.start}
+          style=${`inset-inline-start:${startPct}%`}
+          @pointerdown=${(e) => this.onPointerDown('start', e)}
+          @keydown=${(e) => this.onKeyDown('start', e)}
+          @keyup=${(e) => this.onKeyUp(e)}
+        ></div>
+        <div
+          part="handle-end"
+          role="slider"
+          tabindex=${this.disabled ? '-1' : '0'}
+          aria-label="Range end"
+          aria-valuemin=${this.min}
+          aria-valuemax=${this.max}
+          aria-valuenow=${this.end}
+          style=${`inset-inline-start:${endPct}%`}
+          @pointerdown=${(e) => this.onPointerDown('end', e)}
+          @keydown=${(e) => this.onKeyDown('end', e)}
+          @keyup=${(e) => this.onKeyUp(e)}
+        ></div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Number })
+], LyraTimeRange.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], LyraTimeRange.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], LyraTimeRange.prototype, "start", void 0);
+__decorate([
+    property({ type: Number })
+], LyraTimeRange.prototype, "end", void 0);
+__decorate([
+    property({ type: Number })
+], LyraTimeRange.prototype, "step", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraTimeRange.prototype, "disabled", void 0);
+defineElement('time-range', LyraTimeRange);

package/dist/components/time-range/time-range.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/time-range/time-range.styles.js

@@ -0,0 +1,78 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    inline-size: 100%;
+    block-size: 1.5rem;
+  }
+  [part='base'] {
+    position: relative;
+    inline-size: 100%;
+    block-size: 100%;
+    display: flex;
+    align-items: center;
+  }
+  [part='track'] {
+    position: absolute;
+    inset-inline: 0;
+    block-size: 4px;
+    border-radius: 2px;
+    background: var(--lyra-color-border);
+  }
+  [part='range'] {
+    position: absolute;
+    block-size: 4px;
+    border-radius: 2px;
+    background: var(--lyra-color-brand);
+  }
+  [part^='handle'] {
+    position: absolute;
+    inline-size: 14px;
+    block-size: 14px;
+    border-radius: 50%;
+    background: var(--lyra-color-brand);
+    border: 2px solid var(--lyra-color-surface);
+    box-shadow: var(--lyra-shadow);
+    transform: translateX(-50%);
+    cursor: grab;
+    touch-action: none;
+  }
+  /*
+   * The visible dot stays 14px by design, but that's well under the ~24px
+   * minimum touch target size despite \`touch-action: none\` signalling this
+   * is meant to be touch-dragged. Widen the actual hit/drag area with a
+   * transparent ::before instead of growing the handle box itself:
+   * onPointerMove (time-range.ts) never reads the handle's own
+   * getBoundingClientRect() — it only measures \`[part="base"]\`'s rect and
+   * e.clientX/e.clientY — and a pointerdown inside the ::before still
+   * reports \`e.target\` as the real handle element (pseudo-elements have no
+   * separate DOM node/event target), so this is purely additive and cannot
+   * change the drag math.
+   */
+  [part^='handle']::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: 28px;
+    block-size: 28px;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+  }
+  [part^='handle']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  :host([disabled]) {
+    opacity: var(--lyra-opacity-disabled);
+    cursor: not-allowed;
+  }
+  :host([disabled]) [part^='handle'] {
+    /* [part^='handle'] above sets \`cursor: grab\` unconditionally, which
+       would otherwise keep winning over the inherited :host cursor (it
+       isn't conditioned on [disabled]) — restate not-allowed here so the
+       cursor actually changes over the handles themselves, not just the
+       track/base. */
+    cursor: not-allowed;
+  }
+`;

package/dist/components/toast/toast-item.js

@@ -8,8 +8,16 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
+import { closeIcon } from '../../internal/icons.js';
 import { styles } from './toast-item.styles.js';
-const ANIM_MS = 250;
+// Must stay in sync with --lyra-transition-base's 180ms fallback
+// (internal/tokens.styles.ts) — toast-item.styles.ts derives
+// --show-duration/--hide-duration from that same token. Kept as a literal
+// here rather than read via getComputedStyle() because the token's value is
+// a full transition shorthand ("180ms ease-out"), not a bare duration, and
+// parsing that back out in JS for a single setTimeout would be more fragile
+// than this documented literal.
+const ANIM_MS = 180;
 /**
  * `<lyra-toast-item>` — a single toast notification.
  * Mirrors the Web Awesome `<wa-toast-item>` API under the `lyra-` prefix.
@@ -102,7 +110,7 @@ export class LyraToastItem extends LyraElement {
         ${this.withIcon ? html `<span part="icon"><slot name="icon"></slot></span>` : ''}
         <div part="content"><slot></slot></div>
         <button part="close-button" type="button" aria-label="Close" @click=${() => this.hide()}>
-          &times;
+          ${closeIcon()}
         </button>
       </div>
     `;

package/dist/components/toast/toast-item.styles.js

@@ -3,8 +3,8 @@ export const styles = css `
   :host {
     display: block;
     --accent-width: 4px;
-    --show-duration: 250ms;
-    --hide-duration: 250ms;
+    --show-duration: var(--lyra-transition-base, 180ms ease-out);
+    --hide-duration: var(--lyra-transition-base, 180ms ease-out);
     --padding: var(--lyra-space-m);
     --accent-color: var(--lyra-color-border);
   }
@@ -37,13 +37,18 @@ export const styles = css `
     opacity: 0;
     transform: translateY(-8px);
     transition:
-      opacity var(--show-duration) ease,
-      transform var(--show-duration) ease;
+      opacity var(--show-duration),
+      transform var(--show-duration);
   }
   :host([data-visible]) [part='toast-item'] {
     opacity: 1;
     transform: none;
   }
+  @media (prefers-reduced-motion: reduce) {
+    [part='toast-item'] {
+      transition-duration: 0.01ms !important;
+    }
+  }
 
   [part='accent'] {
     position: absolute;
@@ -78,4 +83,8 @@ export const styles = css `
   [part='close-button']:hover {
     color: var(--lyra-color-text);
   }
+  [part='close-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
 `;

package/dist/components/toast/toast.styles.js

@@ -15,7 +15,6 @@ export const styles = css `
     inline-size: var(--width);
     max-inline-size: calc(100vw - 2rem);
   }
-  [part='stack']::slotted(*),
   ::slotted(*) {
     pointer-events: auto;
   }

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

@@ -0,0 +1,50 @@
+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 (2026-07-10 audit,
+ * "temporal-graph" §lyra-tree, Medium — previously a shadow-root sibling).
+ *
+ * @customElement lyra-tree-node
+ * @csspart row, toggle, label, 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 the label). */
+    select(): void;
+    /**
+     * Cascade `updateComplete`: a nested `<lyra-tree-node>` rendered by this
+     * one (in its own shadow root) only receives a pushed-down `activeId` (and
+     * the `tabIndex` that comes from it) once *this* node's own render has
+     * committed. Without this override, awaiting a parent's `updateComplete`
+     * doesn't guarantee an arbitrarily-nested descendant's own pending update
+     * has also settled — see the matching override on `<lyra-tree>`.
+     */
+    protected getUpdateComplete(): Promise<boolean>;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-tree-node': LyraTreeNode;
+    }
+}

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

@@ -0,0 +1,196 @@
+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 } from '../../internal/prefix.js';
+import { chevronIcon } from '../../internal/icons.js';
+import { css } from 'lit';
+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']:empty {
+    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 (2026-07-10 audit,
+ * "temporal-graph" §lyra-tree, Medium — previously a shadow-root sibling).
+ *
+ * @customElement lyra-tree-node
+ * @csspart row, toggle, label, 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;
+    }
+    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 the label). */
+    select() {
+        this.emit('lyra-node-select', { id: this.item.id });
+    }
+    /**
+     * Cascade `updateComplete`: a nested `<lyra-tree-node>` rendered by this
+     * one (in its own shadow root) only receives a pushed-down `activeId` (and
+     * the `tabIndex` that comes from it) once *this* node's own render has
+     * committed. Without this override, awaiting a parent's `updateComplete`
+     * doesn't guarantee an arbitrarily-nested descendant's own pending update
+     * has also settled — see the matching override on `<lyra-tree>`.
+     */
+    async getUpdateComplete() {
+        const result = await super.getUpdateComplete();
+        await Promise.all([...(this.shadowRoot?.querySelectorAll('lyra-tree-node') ?? [])].map((n) => n.updateComplete));
+        return result;
+    }
+    render() {
+        return html `
+      <div part="row" style=${`--lyra-tree-depth:${this.depth}`}>
+        <button
+          part="toggle"
+          type="button"
+          tabindex="-1"
+          aria-hidden="true"
+          @click=${(e) => {
+            e.stopPropagation();
+            this.expanded ? this.collapse() : this.expand();
+        }}
+        >
+          ${this.hasChildren ? chevronIcon() : nothing}
+        </button>
+        <span part="label" @click=${() => this.select()}>${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);
+defineElement('tree-node', LyraTreeNode);