@aceshooting/lyra-ui 1.1.0 → 2.0.0

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

@@ -0,0 +1,439 @@
+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 { defineElement } from '../../internal/prefix.js';
+import { lockScroll } from '../../internal/scroll-lock.js';
+import { nextId } from '../../internal/a11y.js';
+import { styles } from './tool-select-dialog.styles.js';
+import '../checkbox/checkbox.js';
+import '../switch/switch.js';
+const OTHER_CATEGORY = 'Other';
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+// Shadow-piercing so both a slotted custom element's real focusable target
+// (footer content) and a directly-rendered one (the search input, the
+// use-defaults <lyra-switch>, each row's <lyra-checkbox> -- all live in this
+// component's own shadow tree, not projected via <slot>) are found even
+// though the tag itself doesn't match FOCUSABLE_SELECTOR. Deliberately
+// duplicated from lyra-dialog's/lyra-tool-result-dialog's identical helper
+// rather than imported/shared -- this component is its own standalone
+// overlay and must not depend on either (see this file's class doc).
+function collectFocusable(el) {
+    const result = [];
+    if (el.matches(FOCUSABLE_SELECTOR)) {
+        result.push(el);
+    }
+    if (el instanceof HTMLSlotElement) {
+        for (const assigned of el.assignedElements({ flatten: true })) {
+            result.push(...collectFocusable(assigned));
+        }
+        return result;
+    }
+    const container = el.shadowRoot ?? el;
+    for (const child of Array.from(container.children)) {
+        result.push(...collectFocusable(child));
+    }
+    return result;
+}
+/** Whether `el` is actually laid out/paintable -- `checkVisibility()` (falling
+ *  back to `getClientRects().length` where unsupported) correctly follows
+ *  flattened-tree/slot assignment, unlike `offsetParent`. Mirrors
+ *  lyra-dialog's/lyra-tool-result-dialog's identical helper. */
+function isRendered(el) {
+    return el.checkVisibility ? el.checkVisibility() : el.getClientRects().length > 0;
+}
+/** 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 is its own standalone overlay implementation (`role="dialog"`,
+ * focus-trapped, Escape/backdrop-dismissible, scroll-locking) rather than
+ * nesting a `<lyra-dialog>` in its shadow template — see `<lyra-dialog>`'s
+ * own header comment for why a new overlay component in this library
+ * duplicates that pattern locally instead of composing the previous one.
+ *
+ * `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 visible tool count next to a category heading.
+ * @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.
+ * @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.close('backdrop');
+        };
+        this.onDocKeyDown = (e) => {
+            if (!this.open)
+                return;
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                this.close('escape');
+                return;
+            }
+            if (e.key !== 'Tab')
+                return;
+            const focusable = this.getFocusableElements();
+            if (focusable.length === 0) {
+                e.preventDefault();
+                return;
+            }
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            const active = this.getActiveElement();
+            if (e.shiftKey && active === first) {
+                e.preventDefault();
+                last.focus();
+            }
+            else if (!e.shiftKey && active === last) {
+                e.preventDefault();
+                first.focus();
+            }
+        };
+        this.onSearchInput = (e) => {
+            this.query = e.target.value;
+        };
+        this.onDefaultsToggle = (e) => {
+            this.useDefaults = e.detail.checked;
+            this.emitChange();
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate(changed) {
+        if (!this.hasUpdated) {
+            this.hasFooterSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'footer');
+        }
+        if (changed.has('open')) {
+            if (this.open) {
+                // Captured here (before render) rather than from a click event on
+                // some specific internal control -- like lyra-dialog, a trigger
+                // typically lives *outside* this component entirely, so "whatever
+                // had focus right before open" is the only generally correct
+                // definition of "the trigger".
+                const active = this.getActiveElement();
+                this.lastTrigger = active instanceof HTMLElement ? active : undefined;
+                this.releaseScrollLock = lockScroll();
+                document.addEventListener('keydown', this.onDocKeyDown);
+            }
+            else {
+                this.releaseScrollLock?.();
+                this.releaseScrollLock = undefined;
+                document.removeEventListener('keydown', this.onDocKeyDown);
+            }
+        }
+    }
+    // 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) {
+            const first = this.getFocusableElements()[0];
+            if (first) {
+                first.focus();
+            }
+            else {
+                this.shadowRoot?.querySelector('[part="panel"]')?.focus();
+            }
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // A reconnect (e.g. a drag-and-drop reparent keeping this same element
+        // instance) fires disconnectedCallback then connectedCallback
+        // synchronously with no update in between, so willUpdate never reruns to
+        // notice `open` is still true -- restore the scroll lock/trap it dropped.
+        if (this.hasUpdated && this.open && !this.releaseScrollLock) {
+            this.releaseScrollLock = lockScroll();
+            document.addEventListener('keydown', this.onDocKeyDown);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.releaseScrollLock?.();
+        this.releaseScrollLock = undefined;
+        document.removeEventListener('keydown', this.onDocKeyDown);
+    }
+    /**
+     * 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);
+        this.lastTrigger?.focus();
+    }
+    // Bounds Tab/Shift+Tab to the panel while open. Order follows the search
+    // input, then the use-defaults switch, then each visible tool row's
+    // checkbox, then the footer slot -- the same order the flattened tree
+    // already tabs through (mirrors lyra-tool-result-dialog's identical
+    // header-buttons-then-body-then-footer ordering rationale).
+    getFocusableElements() {
+        const root = this.shadowRoot;
+        if (!root)
+            return [];
+        const searchInput = root.querySelector('[part="search-input"]');
+        const defaultsToggle = root.querySelector('[part="defaults-toggle"]');
+        const checkboxes = Array.from(root.querySelectorAll('[part="tool-checkbox"]'));
+        const fromSlot = (selector) => {
+            const slot = root.querySelector(selector);
+            return slot ? slot.assignedElements({ flatten: true }).flatMap(collectFocusable) : [];
+        };
+        return [
+            ...(searchInput ? collectFocusable(searchInput) : []),
+            ...(defaultsToggle ? collectFocusable(defaultsToggle) : []),
+            ...checkboxes.flatMap(collectFocusable),
+            ...fromSlot('slot[name="footer"]'),
+        ].filter(isRendered);
+    }
+    getActiveElement() {
+        let active = document.activeElement;
+        while (active) {
+            const inner = active.shadowRoot?.activeElement ?? null;
+            if (!inner)
+                break;
+            active = inner;
+        }
+        return active;
+    }
+    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}
+        </lyra-checkbox>
+        ${tool.disabled && tool.disabledReason
+            ? html `<p part="tool-disabled-reason">${tool.disabledReason}</p>`
+            : nothing}
+      </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">${group.tools.length}</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);
+defineElement('tool-select-dialog', LyraToolSelectDialog);

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

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

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

@@ -0,0 +1,182 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    /* Backdrop scrim color -- component-specific so a host can retheme it
+       without a raw literal leaking into the public API (no shared
+       --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);
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+    padding: var(--lyra-space-l);
+  }
+  :host([open]) {
+    display: flex;
+  }
+  [part='backdrop'] {
+    position: absolute;
+    inset: 0;
+    background: var(--lyra-tool-select-dialog-overlay-color);
+  }
+  [part='panel'] {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    inline-size: min(30rem, 100%);
+    block-size: min(38rem, 100%);
+    background: var(--lyra-color-surface);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    box-shadow: var(--lyra-shadow);
+    overflow: hidden;
+  }
+  [part='header'] {
+    padding: var(--lyra-space-l) var(--lyra-space-l) 0;
+  }
+  [part='title'] {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+  [part='subtitle'] {
+    margin: var(--lyra-space-xs) 0 0;
+    font-size: 0.8125rem;
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='subtitle'][hidden] {
+    display: none;
+  }
+
+  [part='search-row'] {
+    padding: var(--lyra-space-m) var(--lyra-space-l) 0;
+  }
+  [part='search-input'] {
+    inline-size: 100%;
+    box-sizing: border-box;
+    padding: var(--lyra-space-s) var(--lyra-space-m);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    color: inherit;
+    font: inherit;
+  }
+  [part='search-input']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+
+  [part='defaults-row'] {
+    display: flex;
+    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);
+  }
+  [part='defaults-hint'] {
+    margin: 0;
+    padding-inline-start: calc(var(--lyra-icon-button-size) * 0.7);
+    font-size: 0.75rem;
+    color: var(--lyra-color-text-quiet);
+  }
+
+  [part='body'] {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    overflow: auto;
+    padding: var(--lyra-space-m) var(--lyra-space-l) var(--lyra-space-l);
+  }
+  [part='empty'] {
+    margin: 0;
+    padding: var(--lyra-space-l) 0;
+    color: var(--lyra-color-text-quiet);
+    font-size: 0.875rem;
+    text-align: center;
+  }
+
+  [part='category'] {
+    margin-block-end: var(--lyra-space-l);
+  }
+  [part='category']:last-child {
+    margin-block-end: 0;
+  }
+  [part='category-heading'] {
+    display: flex;
+    align-items: baseline;
+    gap: var(--lyra-space-xs);
+    margin: 0 0 var(--lyra-space-s);
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='category-count'] {
+    font-weight: 400;
+    text-transform: none;
+    letter-spacing: normal;
+  }
+  [part='category-list'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-s);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  [part='tool-row'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-xs);
+  }
+  [part='tool-row'][data-disabled] [part='tool-checkbox'] {
+    opacity: var(--lyra-opacity-disabled);
+  }
+  [part='tool-checkbox'] {
+    align-items: flex-start;
+  }
+  [part='tool-checkbox']::part(label) {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+  [part='tool-name'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--lyra-color-text);
+  }
+  [part='tool-icon'] {
+    line-height: 1;
+  }
+  [part='tool-description'] {
+    display: block;
+    font-size: 0.8125rem;
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='tool-disabled-reason'] {
+    margin: 0;
+    padding-inline-start: calc(var(--lyra-icon-button-size) * 0.7);
+    font-size: 0.75rem;
+    color: var(--lyra-color-warning);
+  }
+
+  [part='footer'] {
+    display: flex;
+    align-items: center;
+    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);
+  }
+  [part='footer'][hidden] {
+    display: none;
+  }
+`;

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

@@ -14,7 +14,7 @@ import type { TreeItem } from './tree.js';
  *
  * @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 its label, or Enter/Space).
+ * @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, toggle, label, badge
  */
 export declare class LyraTreeNode extends LyraElement {
@@ -32,7 +32,16 @@ export declare class LyraTreeNode extends LyraElement {
     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). */
+    /**
+     * 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>;