@aceshooting/lyra-ui 2.0.0 → 2.1.0

package/dist/components/tool-result-dialog/tool-result-dialog.d.ts

@@ -10,7 +10,7 @@ export type ToolResultStatus = 'pending' | 'running' | 'success' | 'error' | 'de
  * other string is whatever a caller passes to `close()` directly (e.g. a
  * consumer's own footer action).
  */
-export type ToolResultDialogCloseReason = 'escape' | 'backdrop' | 'close-button' | 'api' | string;
+export type ToolResultDialogCloseReason = 'escape' | 'backdrop' | 'close-button' | 'api' | (string & Record<never, never>);
 /**
  * `<lyra-tool-result-dialog>` — a full tool-call detail overlay: a status/
  * duration header plus a `body` slot where a consumer typically places a
@@ -34,6 +34,10 @@ export type ToolResultDialogCloseReason = 'escape' | 'backdrop' | 'close-button'
  * return to, so no separate scroll-lock/focus-trap bookkeeping is needed for
  * the transition itself.
  *
+ * Stacking: opening more than one of these dialogs at once is supported --
+ * Escape and the Tab focus trap only ever act on the topmost open instance,
+ * so instances beneath it stay open and untouched until the one on top closes.
+ *
  * @customElement lyra-tool-result-dialog
  * @slot body - The dialog's main content — typically a `<lyra-tabs>` with
  * Input/Preview/JSON/Raw panels, entirely consumer-assembled.
@@ -58,11 +62,22 @@ export type ToolResultDialogCloseReason = 'escape' | 'backdrop' | 'close-button'
  */
 export declare class LyraToolResultDialog extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
-    /** Whether the dialog is open. Set this (or call `close()`) — there is no separate `show()`/`hide()` pair. */
+    /**
+     * Whether the dialog is open. Set this (or call `close()`) — there is no
+     * separate `show()`/`hide()` pair. Both paths restore focus to the trigger
+     * element identically; only `close()` additionally fires
+     * `lyra-dialog-close`, since a direct assignment carries no reason string
+     * to attach to that event.
+     */
     open: boolean;
     /** The tool's name, rendered prominently in the header. */
     toolName: string;
-    /** The tool call's current lifecycle state — drives the header's status badge. */
+    /**
+     * The tool call's current lifecycle state — drives the header's status
+     * badge. An out-of-union value (e.g. a stray `status` attribute, or a
+     * direct property assignment from an untyped caller) is treated as
+     * `'pending'` rather than crashing render.
+     */
     status: ToolResultStatus;
     /** How long the call took, in milliseconds. Omitted from the header entirely when unset. */
     durationMs?: number;
@@ -70,7 +85,7 @@ export declare class LyraToolResultDialog extends LyraElement {
     maximized: boolean;
     private hasFooterSlot;
     private releaseScrollLock?;
-    private lastTrigger?;
+    private overlay?;
     private readonly titleId;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
@@ -85,14 +100,19 @@ export declare class LyraToolResultDialog extends LyraElement {
      * 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.
+     *
+     * Focus restoration follows the `open` lifecycle, so a direct `.open =
+     * false` assignment restores focus identically to calling `close()` -- the
+     * one thing a direct assignment still can't do is fire
+     * `lyra-dialog-close`, since there's no reason string to attach without
+     * going through this method.
      */
     close(reason?: ToolResultDialogCloseReason): void;
     private onBackdropClick;
     private onCloseButtonClick;
     private toggleMaximized;
-    private onDocKeyDown;
-    private getFocusableElements;
-    private getActiveElement;
+    private activateOverlay;
+    private deactivateOverlay;
     render(): TemplateResult;
 }
 declare global {

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

@@ -4,45 +4,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, svg, nothing } from 'lit';
+import { html, svg, 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 { activateOverlay } from '../../internal/overlay-manager.js';
 import { nextId } from '../../internal/a11y.js';
 import { closeIcon, expandIcon } from '../../internal/icons.js';
 import { styles } from './tool-result-dialog.styles.js';
-const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-// Shadow-piercing so a slotted custom element's real focusable target (e.g.
-// an <input> inside its own shadow root) is found even though the host tag
-// itself doesn't match FOCUSABLE_SELECTOR. Deliberately duplicated from
-// lyra-dialog's identical helper rather than imported/shared -- this
-// component is its own standalone overlay with its own header chrome and
-// must not depend on lyra-dialog (see this file's authoring notes).
-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-widget's identical helper. */
-function isRendered(el) {
-    return el.checkVisibility ? el.checkVisibility() : el.getClientRects().length > 0;
-}
 // Mirrors the shared icon set's viewBox/stroke conventions
 // (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding
 // tool-result-specific glyphs to that module -- it's off limits here -- so
@@ -121,6 +91,24 @@ const STATUS_LABEL = {
     error: 'Error',
     denied: 'Denied',
 };
+const STATUS_VALUES = new Set(Object.keys(STATUS_LABEL));
+/**
+ * Normalizes `status` at the attribute boundary -- an out-of-union value
+ * (markup a caller doesn't fully control, or a raw string from an untyped
+ * consumer) falls back to `'pending'` here rather than reaching
+ * STATUS_ICON/STATUS_LABEL as a bad lookup key and crashing `render()`. This
+ * only covers attribute parsing; a `.status = ...` assignment made directly
+ * as a property bypasses converters entirely, which is why `render()` below
+ * also falls back at the STATUS_ICON/STATUS_LABEL lookup itself.
+ */
+const statusConverter = {
+    fromAttribute(value) {
+        return value !== null && STATUS_VALUES.has(value) ? value : 'pending';
+    },
+    toAttribute(value) {
+        return value;
+    },
+};
 /** `820` -> `"820ms"`; `1500` -> `"1.5s"`; `2000` -> `"2s"`. Sub-second
  *  durations are the common case for a single tool call, so they get the
  *  more precise unit; once a call runs a full second or longer, trimming to
@@ -157,6 +145,10 @@ function formatDuration(ms) {
  * return to, so no separate scroll-lock/focus-trap bookkeeping is needed for
  * the transition itself.
  *
+ * Stacking: opening more than one of these dialogs at once is supported --
+ * Escape and the Tab focus trap only ever act on the topmost open instance,
+ * so instances beneath it stay open and untouched until the one on top closes.
+ *
  * @customElement lyra-tool-result-dialog
  * @slot body - The dialog's main content — typically a `<lyra-tabs>` with
  * Input/Preview/JSON/Raw panels, entirely consumer-assembled.
@@ -182,11 +174,22 @@ function formatDuration(ms) {
 export class LyraToolResultDialog extends LyraElement {
     constructor() {
         super(...arguments);
-        /** Whether the dialog is open. Set this (or call `close()`) — there is no separate `show()`/`hide()` pair. */
+        /**
+         * Whether the dialog is open. Set this (or call `close()`) — there is no
+         * separate `show()`/`hide()` pair. Both paths restore focus to the trigger
+         * element identically; only `close()` additionally fires
+         * `lyra-dialog-close`, since a direct assignment carries no reason string
+         * to attach to that event.
+         */
         this.open = false;
         /** The tool's name, rendered prominently in the header. */
         this.toolName = '';
-        /** The tool call's current lifecycle state — drives the header's status badge. */
+        /**
+         * The tool call's current lifecycle state — drives the header's status
+         * badge. An out-of-union value (e.g. a stray `status` attribute, or a
+         * direct property assignment from an untyped caller) is treated as
+         * `'pending'` rather than crashing render.
+         */
         this.status = 'pending';
         /** Near-fullscreen presentation of the same open dialog. */
         this.maximized = false;
@@ -196,7 +199,7 @@ export class LyraToolResultDialog extends LyraElement {
             this.hasFooterSlot = e.target.assignedElements({ flatten: true }).length > 0;
         };
         this.onBackdropClick = () => {
-            this.close('backdrop');
+            this.overlay?.dismissBackdrop();
         };
         this.onCloseButtonClick = () => {
             this.close('close-button');
@@ -205,33 +208,6 @@ export class LyraToolResultDialog extends LyraElement {
             this.maximized = !this.maximized;
             this.emit('lyra-maximize-change', this.maximized);
         };
-        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();
-            }
-        };
     }
     static { this.styles = [LyraElement.styles, styles]; }
     willUpdate(changed) {
@@ -240,35 +216,18 @@ export class LyraToolResultDialog extends LyraElement {
         }
         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);
+                this.activateOverlay();
             }
             else {
-                this.releaseScrollLock?.();
-                this.releaseScrollLock = undefined;
-                document.removeEventListener('keydown', this.onDocKeyDown);
+                this.deactivateOverlay();
             }
         }
     }
-    // Runs after render (not willUpdate) so [part="panel"] has already landed
-    // in the DOM before the fallback .focus() call below can rely on it --
-    // mirrors lyra-dialog's identical ordering rationale.
+    // Runs after render so the manager can resolve the panel and its composed
+    // focus targets, including controls projected through either slot.
     updated(changed) {
         if (changed.has('open') && this.open) {
-            const first = this.getFocusableElements()[0];
-            if (first) {
-                first.focus();
-            }
-            else {
-                this.shadowRoot?.querySelector('[part="panel"]')?.focus();
-            }
+            this.overlay?.focusInitial();
         }
     }
     connectedCallback() {
@@ -277,16 +236,22 @@ export class LyraToolResultDialog extends LyraElement {
         // 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);
+        if (this.hasUpdated && this.open) {
+            if (this.overlay?.isActive()) {
+                this.overlay.resume();
+                this.releaseScrollLock ??= lockScroll(this.ownerDocument);
+            }
+            else {
+                this.activateOverlay();
+            }
+            queueMicrotask(() => this.overlay?.focusInitial());
         }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.releaseScrollLock?.();
         this.releaseScrollLock = undefined;
-        document.removeEventListener('keydown', this.onDocKeyDown);
+        this.overlay?.suspend();
     }
     /**
      * Close the dialog and return focus to whatever had it before the dialog
@@ -296,39 +261,35 @@ export class LyraToolResultDialog extends LyraElement {
      * 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.
+     *
+     * Focus restoration follows the `open` lifecycle, so a direct `.open =
+     * false` assignment restores focus identically to calling `close()` -- the
+     * one thing a direct assignment still can't do is fire
+     * `lyra-dialog-close`, since there's no reason string to attach without
+     * going through this method.
      */
     close(reason = 'api') {
         if (!this.open)
             return;
         this.open = false;
         this.emit('lyra-dialog-close', reason);
-        this.lastTrigger?.focus();
     }
-    // Bounds Tab/Shift+Tab to the panel while open. Order follows the header's
-    // own maximize/close buttons, then the body slot, then the footer slot --
-    // the same order the flattened tree already tabs through (mirrors
-    // lyra-widget's identical actions-before-body ordering for its fullscreen
-    // mode).
-    getFocusableElements() {
-        const root = this.shadowRoot;
-        if (!root)
-            return [];
-        const fromSlot = (selector) => {
-            const slot = root.querySelector(selector);
-            return slot ? slot.assignedElements({ flatten: true }).flatMap(collectFocusable) : [];
-        };
-        const headerButtons = Array.from(root.querySelectorAll('[part="maximize-button"], [part="close-button"]'));
-        return [...headerButtons, ...fromSlot('slot[name="body"]'), ...fromSlot('slot[name="footer"]')].filter(isRendered);
+    activateOverlay() {
+        if (this.overlay?.isActive())
+            return;
+        this.releaseScrollLock ??= lockScroll(this.ownerDocument);
+        this.overlay = activateOverlay({
+            host: this,
+            panel: () => this.shadowRoot?.querySelector('[part="panel"]') ?? null,
+            onEscape: () => this.close('escape'),
+            onBackdrop: () => this.close('backdrop'),
+        });
     }
-    getActiveElement() {
-        let active = document.activeElement;
-        while (active) {
-            const inner = active.shadowRoot?.activeElement ?? null;
-            if (!inner)
-                break;
-            active = inner;
-        }
-        return active;
+    deactivateOverlay() {
+        this.releaseScrollLock?.();
+        this.releaseScrollLock = undefined;
+        this.overlay?.deactivate();
+        this.overlay = undefined;
     }
     render() {
         const hasDuration = this.durationMs != null;
@@ -344,7 +305,11 @@ export class LyraToolResultDialog extends LyraElement {
         <div part="header">
           <div part="title">
             <span part="tool-name" id=${this.titleId}>${this.toolName || 'Tool call'}</span>
-            <span part="status">${STATUS_ICON[this.status]()}<span>${STATUS_LABEL[this.status]}</span></span>
+            <span part="status"
+              >${(STATUS_ICON[this.status] ?? STATUS_ICON.pending)()}<span
+                >${STATUS_LABEL[this.status] ?? STATUS_LABEL.pending}</span
+              ></span
+            >
             ${hasDuration ? html `<span part="duration">${formatDuration(this.durationMs)}</span>` : nothing}
           </div>
           <div part="header-actions">
@@ -379,7 +344,7 @@ __decorate([
     property({ attribute: 'tool-name' })
 ], LyraToolResultDialog.prototype, "toolName", void 0);
 __decorate([
-    property({ reflect: true })
+    property({ reflect: true, converter: statusConverter })
 ], LyraToolResultDialog.prototype, "status", void 0);
 __decorate([
     property({ type: Number, attribute: 'duration-ms' })

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

@@ -14,7 +14,7 @@ export const styles = css `
     display: none;
     position: fixed;
     inset: 0;
-    z-index: 1000;
+    z-index: var(--lyra-overlay-stack-index, 1000);
     align-items: center;
     justify-content: center;
     padding: var(--lyra-space-l);

package/dist/components/tool-result-view/registry.d.ts

@@ -71,11 +71,3 @@ export declare function findToolRenderer(toolName: string, payload: unknown, reg
  * failed promise forever.
  */
 export declare function loadToolRenderer(def: ToolRendererDefinition): Promise<ToolRendererDefinition>;
-/**
- * Test-only utility: empties the default registry and its `load()` cache so
- * one test's `registerToolRenderer()` calls can't leak into the next. Mirrors
- * the fact that this module (like `toaster.ts`'s per-placement region map) is
- * deliberately singleton, module-level state -- there is no per-instance
- * registry to construct fresh in a test's own `fixture()` call instead.
- */
-export declare function clearToolRenderers(): void;

package/dist/components/tool-result-view/registry.js

@@ -72,11 +72,16 @@ export function loadToolRenderer(def) {
     return promise;
 }
 /**
- * Test-only utility: empties the default registry and its `load()` cache so
+ * @internal Test-only utility: empties the default registry and its `load()` cache so
  * one test's `registerToolRenderer()` calls can't leak into the next. Mirrors
  * the fact that this module (like `toaster.ts`'s per-placement region map) is
  * deliberately singleton, module-level state -- there is no per-instance
- * registry to construct fresh in a test's own `fixture()` call instead.
+ * registry to construct fresh in a test's own `fixture()` call instead. Not
+ * part of the public API; not re-exported from the root barrel -- a
+ * consuming app has no legitimate reason to wipe this page's entire
+ * registered-renderer registry at runtime, only a test suite resetting
+ * state between cases (import directly from this module, as the test suite
+ * already does).
  */
 export function clearToolRenderers() {
     defaultRegistry.clear();

package/dist/components/tool-result-view/tool-result-view.d.ts

@@ -7,8 +7,9 @@ import '../json-viewer/json-viewer.js';
  * `<lyra-tool-result-view>` — renders a tool call's result via whichever
  * custom renderer a host app has registered for it (see `registerToolRenderer()`
  * in `registry.ts`), falling back to `<lyra-json-viewer>` whenever no
- * renderer matches, a renderer's optional `load()` rejects, or its `render()`
- * throws. This component owns none of the actual visual weight of a
+ * renderer matches, a candidate renderer's `matches()` predicate throws during
+ * dispatch, a renderer's optional `load()` rejects, or its `render()` throws.
+ * This component owns none of the actual visual weight of a
  * populated tool result — that's entirely whatever the registered renderer
  * returns; this is just the dispatch + fallback + loading-state shell.
  *
@@ -25,7 +26,8 @@ import '../json-viewer/json-viewer.js';
  * @customElement lyra-tool-result-view
  * @event lyra-render-error - `detail: { toolName, error }` — fired immediately
  * before falling back to `<lyra-json-viewer>`, whether because no renderer
- * matched, a renderer's `load()` rejected, or its `render()` threw.
+ * matched, a candidate renderer's `matches()` predicate threw during dispatch,
+ * a renderer's `load()` rejected, or its `render()` threw.
  * @csspart base - The root wrapper around the resolved renderer's output (or the loading/fallback view).
  */
 export declare class LyraToolResultView extends LyraElement {
@@ -42,6 +44,7 @@ export declare class LyraToolResultView extends LyraElement {
     fallback: string;
     private renderState;
     private generation;
+    private resolvedLazy?;
     protected willUpdate(changed: PropertyValues): void;
     private resolve;
     private renderWith;

package/dist/components/tool-result-view/tool-result-view.js

@@ -17,8 +17,9 @@ const FALLBACK_STATE = { kind: 'fallback' };
  * `<lyra-tool-result-view>` — renders a tool call's result via whichever
  * custom renderer a host app has registered for it (see `registerToolRenderer()`
  * in `registry.ts`), falling back to `<lyra-json-viewer>` whenever no
- * renderer matches, a renderer's optional `load()` rejects, or its `render()`
- * throws. This component owns none of the actual visual weight of a
+ * renderer matches, a candidate renderer's `matches()` predicate throws during
+ * dispatch, a renderer's optional `load()` rejects, or its `render()` throws.
+ * This component owns none of the actual visual weight of a
  * populated tool result — that's entirely whatever the registered renderer
  * returns; this is just the dispatch + fallback + loading-state shell.
  *
@@ -35,7 +36,8 @@ const FALLBACK_STATE = { kind: 'fallback' };
  * @customElement lyra-tool-result-view
  * @event lyra-render-error - `detail: { toolName, error }` — fired immediately
  * before falling back to `<lyra-json-viewer>`, whether because no renderer
- * matched, a renderer's `load()` rejected, or its `render()` threw.
+ * matched, a candidate renderer's `matches()` predicate threw during dispatch,
+ * a renderer's `load()` rejected, or its `render()` threw.
  * @csspart base - The root wrapper around the resolved renderer's output (or the loading/fallback view).
  */
 export class LyraToolResultView extends LyraElement {
@@ -64,12 +66,23 @@ export class LyraToolResultView extends LyraElement {
     async resolve() {
         const generation = ++this.generation;
         const registry = this.registry ?? getDefaultToolRendererRegistry();
-        const def = findToolRenderer(this.toolName, this.result, registry);
+        let def;
+        try {
+            def = findToolRenderer(this.toolName, this.result, registry);
+        }
+        catch (error) {
+            this.fail(error);
+            return;
+        }
         if (!def) {
             this.fail(new Error(`<lyra-tool-result-view>: no renderer registered for tool "${this.toolName}"`));
             return;
         }
         if (def.load) {
+            if (this.resolvedLazy?.def === def) {
+                this.renderWith(this.resolvedLazy.resolved);
+                return;
+            }
             this.renderState = { kind: 'loading' };
             let resolved;
             try {
@@ -83,6 +96,7 @@ export class LyraToolResultView extends LyraElement {
             }
             if (generation !== this.generation)
                 return;
+            this.resolvedLazy = { def, resolved };
             this.renderWith(resolved);
             return;
         }

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

@@ -39,11 +39,10 @@ export type ToolSelectDialogCloseReason = 'escape' | 'backdrop' | 'api' | string
  * 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.
+ * 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`
@@ -81,14 +80,17 @@ export type ToolSelectDialogCloseReason = 'escape' | 'backdrop' | 'api' | string
  * @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-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.
+ * @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 declare class LyraToolSelectDialog extends LyraElement {
@@ -109,13 +111,14 @@ export declare class LyraToolSelectDialog extends LyraElement {
     private query;
     private hasFooterSlot;
     private releaseScrollLock?;
-    private lastTrigger?;
+    private overlay?;
     private readonly titleId;
     private readonly categoryIds;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private activateOverlay;
     private onFooterSlotChange;
     /**
      * Close the dialog and return focus to whatever had it before the dialog
@@ -127,9 +130,6 @@ export declare class LyraToolSelectDialog extends LyraElement {
      */
     close(reason?: ToolSelectDialogCloseReason): void;
     private onBackdropClick;
-    private onDocKeyDown;
-    private getFocusableElements;
-    private getActiveElement;
     private emitChange;
     private onSearchInput;
     private onDefaultsToggle;