@aceshooting/lyra-ui 2.1.0 → 2.3.0

package/dist/components/tool-select-dialog/tool-select-dialog.js

@@ -1,350 +1,7 @@
-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, state } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
-import { activateOverlay } from '../../internal/overlay-manager.js';
+export * from './tool-select-dialog.class.js';
+import { LyraToolSelectDialog } from './tool-select-dialog.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { lockScroll } from '../../internal/scroll-lock.js';
-import { nextId, srOnly } from '../../internal/a11y.js';
-import { styles } from './tool-select-dialog.styles.js';
-import '../checkbox/checkbox.js';
-import '../switch/switch.js';
-const OTHER_CATEGORY = 'Other';
-/** Default `filter`: case-insensitive substring match against the tool's name and description. */
-function defaultFilter(tool, query) {
-    return tool.name.toLowerCase().includes(query) || (tool.description ?? '').toLowerCase().includes(query);
-}
-/**
- * `<lyra-tool-select-dialog>` — a category-grouped, filterable, searchable
- * tool-enablement dialog for picking which agent tools are available in a
- * conversation.
- *
- * This renders its own dialog panel rather than nesting a `<lyra-dialog>` in
- * its shadow template. Shared overlay infrastructure coordinates stacking,
- * focus trapping, Escape/backdrop dismissal, and focus return with every
- * other overlay in the same document.
- *
- * `useDefaults` is a single top-level switch: while `true`, every per-tool
- * checkbox below renders disabled (still reflecting whatever `selected`
- * holds — a consumer should populate that with its own default tool set
- * whenever `useDefaults` is true) and a hint explains that turning the
- * switch off is how to customize. Turning it off is the "customize"
- * affordance — it's the only thing that both flips `useDefaults` to `false`
- * *and* unlocks the per-tool checkboxes for editing, so there's exactly one
- * control for that transition rather than a separate button duplicating it.
- *
- * There is no built-in footer/close button — like `<lyra-dialog>`, dismissal
- * happens via Escape, a backdrop click, or a consumer's own `footer`-slotted
- * action calling `close()`. This also means the search input is the very
- * first focusable element in the panel with no special-casing needed, so
- * it's what receives focus on open (see `updated()`).
- *
- * @customElement lyra-tool-select-dialog
- * @slot footer - Optional action buttons (e.g. a "Done" button), rendered in a bottom row.
- * Changes already apply live via `lyra-change`, so this is optional.
- * @event lyra-change - The enabled-tool selection or the `useDefaults` toggle changed.
- * `detail: { selected: string[], useDefaults: boolean }`.
- * @event lyra-close - `detail: ToolSelectDialogCloseReason`. Fired exactly once per dismissal,
- * via Escape, a backdrop click, or a `close()` call.
- * @csspart backdrop - The full-viewport scrim behind the panel.
- * @csspart panel - The dialog panel itself (`role="dialog"` while open).
- * @csspart header - The wrapper around the title/subtitle.
- * @csspart title - The dialog's heading.
- * @csspart subtitle - The "N of M tools enabled" summary line.
- * @csspart search-row - The wrapper around the search input.
- * @csspart search-input - The filter text input.
- * @csspart defaults-row - The wrapper around the use-defaults switch and its hint.
- * @csspart defaults-toggle - The built-in `<lyra-switch>` bound to `useDefaults`.
- * @csspart defaults-hint - The "turn off to customize" hint, shown only while `useDefaults` is true.
- * @csspart body - The scrollable wrapper around the grouped tool list.
- * @csspart empty - The "no tools" / "no matches" message.
- * @csspart category - A single category's wrapper (`role="group"`).
- * @csspart category-heading - A category's heading.
- * @csspart category-count - The terse, `aria-hidden` tool count next to a category heading
- * (the heading's accessible name gets the full sentence from an sr-only sibling instead).
- * @csspart category-list - The `<ul>` of tool rows within a category.
- * @csspart tool-row - A single tool's `<li>` row.
- * @csspart tool-checkbox - A row's `<lyra-checkbox>`.
- * @csspart tool-name - A row's name text (plus its `icon`, if set).
- * @csspart tool-icon - A row's leading icon glyph, when `icon` is set.
- * @csspart tool-description - A row's optional description text.
- * @csspart tool-disabled-reason - A disabled row's `disabledReason` text, slotted inside
- * `tool-checkbox` (alongside `tool-name`/`tool-description`) so it contributes to the
- * checkbox's accessible name/description instead of going unannounced.
- * @csspart footer - The wrapper around the `footer` slot.
- */
-export class LyraToolSelectDialog extends LyraElement {
-    constructor() {
-        super(...arguments);
-        /** Whether the dialog is open. Set this (or call `close()`) — there is no separate `show()`/`hide()` pair. */
-        this.open = false;
-        /** The full set of tools a consumer offers, across all categories. */
-        this.tools = [];
-        /** The currently-enabled tool ids. */
-        this.selected = [];
-        /** Whether the conversation is using the default tool set (`true`) or a custom selection (`false`) — see the class doc for the exact interaction with `selected`/per-tool editing. */
-        this.useDefaults = false;
-        /** The dialog's visible heading and accessible name. */
-        this.label = 'Select tools';
-        this.searchPlaceholder = 'Search tools…';
-        /** Overrides the built-in case-insensitive name/description substring match. */
-        this.filter = null;
-        this.query = '';
-        this.hasFooterSlot = false;
-        this.titleId = nextId('tool-select-dialog-title');
-        // Stable per-category heading ids, keyed by category name -- generated
-        // once (not regenerated every render/keystroke) so a category's
-        // aria-labelledby target keeps the same id across re-renders.
-        this.categoryIds = new Map();
-        this.onFooterSlotChange = (e) => {
-            this.hasFooterSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        this.onBackdropClick = () => {
-            this.overlay?.dismissBackdrop();
-        };
-        this.onSearchInput = (e) => {
-            this.query = e.target.value;
-        };
-        this.onDefaultsToggle = (e) => {
-            this.useDefaults = e.detail.checked;
-            this.emitChange();
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles, srOnly]; }
-    willUpdate(changed) {
-        if (!this.hasUpdated) {
-            this.hasFooterSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'footer');
-        }
-        if (changed.has('open')) {
-            if (this.open) {
-                this.releaseScrollLock ??= lockScroll(this.ownerDocument);
-                this.activateOverlay();
-            }
-            else {
-                this.releaseScrollLock?.();
-                this.releaseScrollLock = undefined;
-                this.overlay?.deactivate();
-                this.overlay = undefined;
-                // Otherwise a long-lived instance reopens still showing whatever
-                // search filter/collapsed-category state the previous session left
-                // behind, rather than the fresh, unfiltered list a reopen implies.
-                this.query = '';
-            }
-        }
-    }
-    // Runs after render (not willUpdate) so [part="panel"] and its contents
-    // have already landed in the DOM before the focus call below can rely on
-    // them -- mirrors lyra-dialog's/lyra-tool-result-dialog's identical
-    // ordering rationale.
-    updated(changed) {
-        if (changed.has('open') && this.open) {
-            this.overlay?.focusInitial();
-        }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.hasUpdated && this.open) {
-            this.releaseScrollLock ??= lockScroll(this.ownerDocument);
-            this.activateOverlay();
-            queueMicrotask(() => this.overlay?.focusInitial());
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.releaseScrollLock?.();
-        this.releaseScrollLock = undefined;
-        this.overlay?.suspend();
-    }
-    activateOverlay() {
-        if (this.overlay?.isActive()) {
-            this.overlay.resume();
-            return;
-        }
-        this.overlay = activateOverlay({
-            host: this,
-            panel: () => this.shadowRoot?.querySelector('[part="panel"]') ?? null,
-            onEscape: () => this.close('escape'),
-            onBackdrop: () => this.close('backdrop'),
-        });
-    }
-    /**
-     * Close the dialog and return focus to whatever had it before the dialog
-     * opened. `reason` is forwarded as the `lyra-close` detail — built-in
-     * triggers pass `'escape'`/`'backdrop'`; a consumer's own close affordance
-     * (e.g. a footer Done button) should call this directly with its own
-     * reason string, so every dismissal path funnels through the same event
-     * instead of the consumer having to also toggle `open` itself.
-     */
-    close(reason = 'api') {
-        if (!this.open)
-            return;
-        this.open = false;
-        this.emit('lyra-close', reason);
-    }
-    emitChange() {
-        this.emit('lyra-change', {
-            selected: [...this.selected],
-            useDefaults: this.useDefaults,
-        });
-    }
-    onToolToggle(tool, e) {
-        const set = new Set(this.selected);
-        e.detail.checked ? set.add(tool.id) : set.delete(tool.id);
-        this.selected = [...set];
-        this.emitChange();
-    }
-    categoryId(category) {
-        let id = this.categoryIds.get(category);
-        if (!id) {
-            id = nextId('tool-select-dialog-category');
-            this.categoryIds.set(category, id);
-        }
-        return id;
-    }
-    /** Tools grouped by `category` (first-seen order), with an uncategorized
-     *  bucket always last, then filtered by the active search query -- a
-     *  category left with zero matches is dropped entirely rather than
-     *  rendered as an empty heading. */
-    get groups() {
-        const order = [];
-        const byCategory = new Map();
-        for (const tool of this.tools) {
-            const category = tool.category?.trim() || OTHER_CATEGORY;
-            let bucket = byCategory.get(category);
-            if (!bucket) {
-                bucket = [];
-                byCategory.set(category, bucket);
-                if (category !== OTHER_CATEGORY)
-                    order.push(category);
-            }
-            bucket.push(tool);
-        }
-        if (byCategory.has(OTHER_CATEGORY))
-            order.push(OTHER_CATEGORY);
-        const q = this.query.trim().toLowerCase();
-        const matches = q ? (tool) => (this.filter ?? defaultFilter)(tool, q) : () => true;
-        return order
-            .map((category) => ({ category, tools: byCategory.get(category).filter(matches) }))
-            .filter((group) => group.tools.length > 0);
-    }
-    renderTool(tool) {
-        const rowDisabled = Boolean(tool.disabled) || this.useDefaults;
-        return html `
-      <li part="tool-row" ?data-disabled=${rowDisabled}>
-        <lyra-checkbox
-          part="tool-checkbox"
-          value=${tool.id}
-          ?checked=${this.selected.includes(tool.id)}
-          ?disabled=${rowDisabled}
-          @lyra-change=${(e) => this.onToolToggle(tool, e)}
-        >
-          <span part="tool-name">
-            ${tool.icon ? html `<span part="tool-icon" aria-hidden="true">${tool.icon}</span>` : nothing}${tool.name}
-          </span>
-          ${tool.description ? html `<span part="tool-description">${tool.description}</span>` : nothing}
-          ${tool.disabled && tool.disabledReason
-            ? html `<span part="tool-disabled-reason">${tool.disabledReason}</span>`
-            : nothing}
-        </lyra-checkbox>
-      </li>
-    `;
-    }
-    renderCategory(group) {
-        const headingId = this.categoryId(group.category);
-        return html `
-      <div part="category" role="group" aria-labelledby=${headingId}>
-        <h3 part="category-heading" id=${headingId}>
-          ${group.category}<span part="category-count" aria-hidden="true">${group.tools.length}</span
-          ><span class="sr-only">${group.tools.length} tool${group.tools.length === 1 ? '' : 's'}</span>
-        </h3>
-        <ul part="category-list">
-          ${group.tools.map((tool) => this.renderTool(tool))}
-        </ul>
-      </div>
-    `;
-    }
-    render() {
-        const groups = this.groups;
-        const hasTools = this.tools.length > 0;
-        return html `
-      <div part="backdrop" @click=${this.onBackdropClick}></div>
-      <div
-        part="panel"
-        role=${this.open ? 'dialog' : nothing}
-        aria-modal=${this.open ? 'true' : nothing}
-        aria-labelledby=${this.titleId}
-        tabindex="-1"
-      >
-        <div part="header">
-          <h2 part="title" id=${this.titleId}>${this.label}</h2>
-          <p part="subtitle" ?hidden=${!hasTools}>${this.selected.length} of ${this.tools.length} tools enabled</p>
-        </div>
-        <div part="search-row">
-          <input
-            part="search-input"
-            type="search"
-            .value=${this.query}
-            placeholder=${this.searchPlaceholder}
-            aria-label=${this.searchPlaceholder}
-            @input=${this.onSearchInput}
-          />
-        </div>
-        <div part="defaults-row">
-          <lyra-switch
-            part="defaults-toggle"
-            ?checked=${this.useDefaults}
-            @lyra-change=${this.onDefaultsToggle}
-          >
-            Use default tools
-          </lyra-switch>
-          ${this.useDefaults
-            ? html `<p part="defaults-hint">Turn off to choose individual tools.</p>`
-            : nothing}
-        </div>
-        <div part="body">
-          ${groups.length === 0
-            ? html `<p part="empty">
-                ${hasTools ? html `No tools match "${this.query}".` : 'No tools available.'}
-              </p>`
-            : groups.map((group) => this.renderCategory(group))}
-        </div>
-        <div part="footer" ?hidden=${!this.hasFooterSlot}>
-          <slot name="footer" @slotchange=${this.onFooterSlotChange}></slot>
-        </div>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraToolSelectDialog.prototype, "open", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraToolSelectDialog.prototype, "tools", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraToolSelectDialog.prototype, "selected", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'use-defaults' })
-], LyraToolSelectDialog.prototype, "useDefaults", void 0);
-__decorate([
-    property()
-], LyraToolSelectDialog.prototype, "label", void 0);
-__decorate([
-    property({ attribute: 'search-placeholder' })
-], LyraToolSelectDialog.prototype, "searchPlaceholder", void 0);
-__decorate([
-    property({ attribute: false })
-], LyraToolSelectDialog.prototype, "filter", void 0);
-__decorate([
-    state()
-], LyraToolSelectDialog.prototype, "query", void 0);
-__decorate([
-    state()
-], LyraToolSelectDialog.prototype, "hasFooterSlot", void 0);
+import "../checkbox/checkbox.js";
+import "../switch/switch.js";
 defineElement('tool-select-dialog', LyraToolSelectDialog);
+//# sourceMappingURL=tool-select-dialog.js.map

package/dist/components/tool-select-dialog/tool-select-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-select-dialog.js","sourceRoot":"","sources":["../../../src/components/tool-select-dialog/tool-select-dialog.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,yBAAyB,CAAC;AACjC,OAAO,qBAAqB,CAAC;AAC7B,aAAa,CAAC,oBAAoB,EAAE,oBAAoB,CAAC,CAAC"}

package/dist/components/tool-select-dialog/tool-select-dialog.styles.d.ts

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=tool-select-dialog.styles.d.ts.map

package/dist/components/tool-select-dialog/tool-select-dialog.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-select-dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tool-select-dialog/tool-select-dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgMlB,CAAC"}

package/dist/components/tool-select-dialog/tool-select-dialog.styles.js

@@ -6,14 +6,17 @@ export const styles = css `
        --wa-*-overlay token exists in the design system to resolve through,
        same rationale as lyra-dialog's --lyra-dialog-overlay-color and
        lyra-tool-result-dialog's --lyra-tool-result-dialog-overlay-color). */
-    --lyra-tool-select-dialog-overlay-color: rgb(0 0 0 / 0.5);
+    --lyra-tool-select-dialog-overlay-color: var(--lyra-color-overlay);
     display: none;
     position: fixed;
     inset: 0;
-    z-index: var(--lyra-overlay-stack-index, 1000);
+    z-index: var(--lyra-overlay-stack-index, var(--lyra-layer-modal));
     align-items: center;
     justify-content: center;
-    padding: var(--lyra-space-l);
+    padding-block-start: max(var(--lyra-space-l), var(--lyra-safe-area-top));
+    padding-block-end: max(var(--lyra-space-l), var(--lyra-safe-area-bottom));
+    padding-inline-start: max(var(--lyra-space-l), var(--lyra-safe-area-inline-start));
+    padding-inline-end: max(var(--lyra-space-l), var(--lyra-safe-area-inline-end));
   }
   :host([open]) {
     display: flex;
@@ -27,10 +30,10 @@ export const styles = css `
     position: relative;
     display: flex;
     flex-direction: column;
-    inline-size: min(30rem, 100%);
-    block-size: min(38rem, 100%);
+    inline-size: min(var(--lyra-size-30rem), 100%);
+    block-size: min(var(--lyra-size-38rem), 100%);
     background: var(--lyra-color-surface);
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     box-shadow: var(--lyra-shadow);
     overflow: hidden;
@@ -40,12 +43,12 @@ export const styles = css `
   }
   [part='title'] {
     margin: 0;
-    font-size: 1rem;
-    font-weight: 600;
+    font-size: var(--lyra-font-size-md);
+    font-weight: var(--lyra-font-weight-semibold);
   }
   [part='subtitle'] {
     margin: var(--lyra-space-xs) 0 0;
-    font-size: 0.8125rem;
+    font-size: var(--lyra-font-size-sm);
     color: var(--lyra-color-text-quiet);
   }
   [part='subtitle'][hidden] {
@@ -59,7 +62,7 @@ export const styles = css `
     inline-size: 100%;
     box-sizing: border-box;
     padding: var(--lyra-space-s) var(--lyra-space-m);
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     background: var(--lyra-color-surface);
     color: inherit;
@@ -75,7 +78,7 @@ export const styles = css `
     flex-direction: column;
     gap: var(--lyra-space-xs);
     padding: var(--lyra-space-m) var(--lyra-space-l);
-    border-block-end: 1px solid var(--lyra-color-border);
+    border-block-end: var(--lyra-border-width-thin) solid var(--lyra-color-border);
   }
   [part='defaults-hint'] {
     margin: 0;
@@ -85,8 +88,8 @@ export const styles = css `
        in switch.styles.ts, not exposed as tokens), so this indent is
        coupled to that fixed geometry rather than derived from an unrelated
        component's token. */
-    padding-inline-start: calc(2.25rem + var(--lyra-space-s));
-    font-size: 0.75rem;
+    padding-inline-start: calc(var(--lyra-size-2-25rem) + var(--lyra-space-s));
+    font-size: var(--lyra-font-size-xs);
     color: var(--lyra-color-text-quiet);
   }
 
@@ -100,7 +103,7 @@ export const styles = css `
     margin: 0;
     padding: var(--lyra-space-l) 0;
     color: var(--lyra-color-text-quiet);
-    font-size: 0.875rem;
+    font-size: var(--lyra-font-size-md-sm);
     text-align: center;
   }
 
@@ -115,14 +118,14 @@ export const styles = css `
     align-items: baseline;
     gap: var(--lyra-space-xs);
     margin: 0 0 var(--lyra-space-s);
-    font-size: 0.75rem;
-    font-weight: 700;
+    font-size: var(--lyra-font-size-xs);
+    font-weight: var(--lyra-font-weight-bold);
     text-transform: uppercase;
-    letter-spacing: 0.04em;
+    letter-spacing: var(--lyra-size-0-04em);
     color: var(--lyra-color-text-quiet);
   }
   [part='category-count'] {
-    font-weight: 400;
+    font-weight: var(--lyra-font-weight-normal);
     text-transform: none;
     letter-spacing: normal;
   }
@@ -149,22 +152,22 @@ export const styles = css `
   [part='tool-checkbox']::part(label) {
     display: flex;
     flex-direction: column;
-    gap: 0.125rem;
+    gap: var(--lyra-size-0-125rem);
   }
   [part='tool-name'] {
     display: inline-flex;
     align-items: center;
     gap: var(--lyra-space-xs);
-    font-size: 0.875rem;
-    font-weight: 600;
+    font-size: var(--lyra-font-size-md-sm);
+    font-weight: var(--lyra-font-weight-semibold);
     color: var(--lyra-color-text);
   }
   [part='tool-icon'] {
-    line-height: 1;
+    line-height: var(--lyra-line-height-none);
   }
   [part='tool-description'] {
     display: block;
-    font-size: 0.8125rem;
+    font-size: var(--lyra-font-size-sm);
     color: var(--lyra-color-text-quiet);
   }
   [part='tool-disabled-reason'] {
@@ -173,7 +176,7 @@ export const styles = css `
        inherits its indent for free from ::part(label)'s column layout
        above instead of needing its own guessed padding. */
     display: block;
-    font-size: 0.75rem;
+    font-size: var(--lyra-font-size-xs);
     color: var(--lyra-color-warning);
   }
 
@@ -183,9 +186,10 @@ export const styles = css `
     justify-content: flex-end;
     gap: var(--lyra-space-s);
     padding: var(--lyra-space-m) var(--lyra-space-l);
-    border-block-start: 1px solid var(--lyra-color-border);
+    border-block-start: var(--lyra-border-width-thin) solid var(--lyra-color-border);
   }
   [part='footer'][hidden] {
     display: none;
   }
 `;
+//# sourceMappingURL=tool-select-dialog.styles.js.map

package/dist/components/tool-select-dialog/tool-select-dialog.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-select-dialog.styles.js","sourceRoot":"","sources":["../../../src/components/tool-select-dialog/tool-select-dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgMxB,CAAC"}

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

@@ -0,0 +1,78 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import type { TreeItem } from './tree.class.js';
+export interface LyraTreeNodeEventMap {
+    'lyra-node-toggle': CustomEvent<{
+        id: string;
+        expanded: boolean;
+    }>;
+    'lyra-node-select': CustomEvent<{
+        id: string;
+    }>;
+}
+/**
+ * `<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<LyraTreeNodeEventMap> {
+    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;
+    }
+}
+//# sourceMappingURL=tree-node.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-node.class.d.ts","sourceRoot":"","sources":["../../../src/components/tree/tree-node.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAK7D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAmEhD,MAAM,WAAW,oBAAoB;IACnC,kBAAkB,EAAE,WAAW,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IACnE,kBAAkB,EAAE,WAAW,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACjD;AACD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,YAAa,SAAQ,WAAW,CAAC,oBAAoB,CAAC;IACjE,MAAM,CAAC,MAAM,iCAAgC;IAEb,IAAI,EAAG,QAAQ,CAAC;IACpB,KAAK,SAAK;IACM,QAAQ,UAAS;IAC7D,yFAAyF;IACzD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IACjB,OAAO,SAAK;IACZ,QAAQ,SAAK;IAE3D,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,SAAS,CAAC,UAAU,IAAI,IAAI,CAQ3B;IAED,8DAA8D;IAC9D,MAAM,IAAI,IAAI,CAIb;IAED,iEAAiE;IACjE,QAAQ,IAAI,IAAI,CAIf;IAED;;;;;;;;;OASG;IACH,MAAM,IAAI,IAAI,CAGb;IAED,8EAA8E;IAC9E,UAAgB,iBAAiB,IAAI,OAAO,CAAC,OAAO,CAAC,CAMpD;IAED;;;;;;;;;OASG;IACH,OAAO,CAAC,iBAAiB,CAGvB;IAEF,MAAM,IAAI,cAAc,CAoCvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}