@aceshooting/lyra-ui 2.0.0 → 2.1.0

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

@@ -2,44 +2,44 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: block;
-    --accent-width: 4px;
-    --show-duration: var(--lyra-transition-base, 180ms ease-out);
-    --hide-duration: var(--lyra-transition-base, 180ms ease-out);
-    --padding: var(--lyra-space-m);
-    --font-size: 1rem;
-    --accent-color: var(--lyra-color-border);
+    --lyra-toast-accent-width: 4px;
+    --lyra-toast-show-duration: var(--lyra-transition-base, 180ms ease-out);
+    --lyra-toast-hide-duration: var(--lyra-transition-base, 180ms ease-out);
+    --lyra-toast-padding: var(--lyra-space-m);
+    --lyra-toast-font-size: 1rem;
+    --lyra-toast-accent-color: var(--lyra-color-border);
   }
   :host([variant='brand']) {
-    --accent-color: var(--lyra-color-brand);
+    --lyra-toast-accent-color: var(--lyra-color-brand);
   }
   :host([variant='success']) {
-    --accent-color: var(--lyra-color-success);
+    --lyra-toast-accent-color: var(--lyra-color-success);
   }
   :host([variant='warning']) {
-    --accent-color: var(--lyra-color-warning);
+    --lyra-toast-accent-color: var(--lyra-color-warning);
   }
   :host([variant='danger']) {
-    --accent-color: var(--lyra-color-danger);
+    --lyra-toast-accent-color: var(--lyra-color-danger);
   }
   :host([size='xs']) {
-    --padding: var(--lyra-space-xs);
-    --font-size: 0.75rem;
+    --lyra-toast-padding: var(--lyra-space-xs);
+    --lyra-toast-font-size: 0.75rem;
   }
   :host([size='s']) {
-    --padding: var(--lyra-space-s);
-    --font-size: 0.875rem;
+    --lyra-toast-padding: var(--lyra-space-s);
+    --lyra-toast-font-size: 0.875rem;
   }
   :host([size='m']) {
-    --padding: var(--lyra-space-m);
-    --font-size: 1rem;
+    --lyra-toast-padding: var(--lyra-space-m);
+    --lyra-toast-font-size: 1rem;
   }
   :host([size='l']) {
-    --padding: var(--lyra-space-l);
-    --font-size: 1.125rem;
+    --lyra-toast-padding: var(--lyra-space-l);
+    --lyra-toast-font-size: 1.125rem;
   }
   :host([size='xl']) {
-    --padding: calc(var(--lyra-space-l) * 1.5);
-    --font-size: 1.25rem;
+    --lyra-toast-padding: calc(var(--lyra-space-l) * 1.5);
+    --lyra-toast-font-size: 1.25rem;
   }
 
   [part='toast-item'] {
@@ -48,9 +48,9 @@ export const styles = css `
     align-items: start;
     gap: var(--lyra-space-s);
     inline-size: 100%;
-    padding: var(--padding);
-    padding-inline-start: calc(var(--padding) + var(--accent-width));
-    font-size: var(--font-size);
+    padding: var(--lyra-toast-padding);
+    padding-inline-start: calc(var(--lyra-toast-padding) + var(--lyra-toast-accent-width));
+    font-size: var(--lyra-toast-font-size);
     background: var(--lyra-color-surface);
     color: var(--lyra-color-text);
     border: 1px solid var(--lyra-color-border);
@@ -59,8 +59,13 @@ export const styles = css `
     opacity: 0;
     transform: translateY(-8px);
     transition:
-      opacity var(--show-duration),
-      transform var(--show-duration);
+      opacity var(--lyra-toast-show-duration),
+      transform var(--lyra-toast-show-duration);
+  }
+  :host([data-hiding]) [part='toast-item'] {
+    transition:
+      opacity var(--lyra-toast-hide-duration),
+      transform var(--lyra-toast-hide-duration);
   }
   :host([data-visible]) [part='toast-item'] {
     opacity: 1;
@@ -76,20 +81,46 @@ export const styles = css `
     position: absolute;
     inset-block: 0;
     inset-inline-start: 0;
-    inline-size: var(--accent-width);
-    background: var(--accent-color);
+    inline-size: var(--lyra-toast-accent-width);
+    background: var(--lyra-toast-accent-color);
     border-start-start-radius: var(--lyra-radius);
     border-end-start-radius: var(--lyra-radius);
   }
   [part='icon'] {
     display: inline-flex;
     flex: 0 0 auto;
-    color: var(--accent-color);
+    color: var(--lyra-toast-accent-color);
   }
   [part='content'] {
     flex: 1 1 auto;
     min-inline-size: 0;
   }
+  /* toaster.ts's action option (and the WithIcon/Triggers stories) append a
+     plain light-DOM button as a sibling of the message text -- without
+     this, it renders with the browser's unstyled default button chrome,
+     clashing with the rest of the token-driven design. Styled as an inline
+     text action (matching the toast's own accent color) rather than a
+     boxed button, since it sits directly after the message inside the
+     content part rather than in its own layout slot. */
+  ::slotted(button) {
+    display: inline-block;
+    margin-inline-start: var(--lyra-space-s);
+    padding: 0;
+    border: none;
+    background: none;
+    font: inherit;
+    font-weight: bold;
+    color: var(--lyra-toast-accent-color);
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  ::slotted(button:hover) {
+    color: var(--lyra-color-text);
+  }
+  ::slotted(button:focus-visible) {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
   [part='close-button'] {
     flex: 0 0 auto;
     margin-inline-start: auto;

package/dist/components/toast/toast.js

@@ -29,17 +29,29 @@ export class LyraToast extends LyraElement {
     /** Create and append a toast item programmatically; resolves to the item. */
     async create(message, options = {}) {
         const item = document.createElement('lyra-toast-item');
-        item.variant = options.variant ?? 'neutral';
-        item.duration = options.duration ?? 5000;
-        item.size = options.size ?? 'm';
-        item.withIcon = options.withIcon ?? false;
+        // Only assign what the caller actually specified -- a freshly-created
+        // <lyra-toast-item> already carries its own property defaults, so
+        // falling back to a literal here (e.g. `?? 5000`) would duplicate those
+        // defaults in a second place that has no way of staying in sync if the
+        // property declaration in toast-item.ts ever changes.
+        if (options.variant !== undefined)
+            item.variant = options.variant;
+        if (options.duration !== undefined)
+            item.duration = options.duration;
+        if (options.size !== undefined)
+            item.size = options.size;
+        if (options.withIcon !== undefined)
+            item.withIcon = options.withIcon;
         item.textContent = message;
         this.appendChild(item);
         await item.updateComplete;
         return item;
     }
     render() {
-        return html `<div part="stack" role="status" aria-live="polite"><slot></slot></div>`;
+        // Each toast item owns its own status/alert role. Keeping a live region on
+        // the stack as well would nest assertive alerts inside a polite region and
+        // can cause duplicate or out-of-order announcements.
+        return html `<div part="stack"><slot></slot></div>`;
     }
 }
 __decorate([

package/dist/components/toast/toaster.js

@@ -27,8 +27,17 @@ function getRegion(placement = DEFAULT_PLACEMENT) {
  */
 export function toast(input) {
     const opts = typeof input === 'string' ? { message: input } : input;
+    // An action must remain available until the user can reach it. Callers can
+    // still opt into a finite duration explicitly; the convenience API makes
+    // only the omitted-duration/action combination persistent.
+    const createOptions = {
+        variant: opts.variant,
+        duration: opts.duration ?? (opts.action ? 0 : undefined),
+        size: opts.size,
+        withIcon: opts.withIcon,
+    };
     const item = getRegion(opts.placement)
-        .create(opts.message, opts)
+        .create(opts.message, createOptions)
         .then((el) => {
         if (opts.action) {
             const btn = document.createElement('button');

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

@@ -17,11 +17,10 @@ export type ToolApprovalDialogCloseReason = 'escape' | 'backdrop' | 'approve' |
  * executing it until a person explicitly approves or denies it, with an
  * optional inline "edit the arguments before approving" step.
  *
- * 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.
  *
  * Approve/Deny/Edit are built-in chrome (not a `footer` slot a consumer must
  * assemble) — this component's interaction shape is fixed enough (there is
@@ -43,8 +42,12 @@ export type ToolApprovalDialogCloseReason = 'escape' | 'backdrop' | 'approve' |
  * Both `editing` and any in-progress draft reset back to the read-only view
  * every time the dialog transitions from closed to open, so a reused
  * instance never leaks one proposal's half-finished edit into the next.
+ * `editable` flipping to `false` mid-edit does the same (see `willUpdate()`)
+ * and, if the textarea it unmounts still held focus, `updated()` refocuses
+ * Deny so the focus trap keeps engaging instead of silently letting focus
+ * fall through to the document.
  *
- * Initial focus deliberately does *not* land on Approve (see `updated()`):
+ * Initial focus deliberately does *not* land on Approve:
  * approving a tool call is a consequential, potentially irreversible action,
  * so a user who opens this dialog and reflexively presses Enter/Space before
  * reading anything should deny, not approve. Deny gets the initial focus
@@ -95,13 +98,14 @@ export declare class LyraToolApprovalDialog extends LyraElement {
     /** `JSON.parse` failure message for `draftText`, or `''` while it parses cleanly. Empty string (not `undefined`) so it can drive `?hidden` directly. */
     private draftError;
     private releaseScrollLock?;
-    private lastTrigger?;
+    private overlay?;
     private readonly titleId;
     private readonly errorId;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private activateOverlay;
     /**
      * Close the dialog and return focus to whatever had it before the dialog
      * opened. `reason` is forwarded as the `lyra-close` detail — built-in
@@ -113,9 +117,6 @@ export declare class LyraToolApprovalDialog extends LyraElement {
      */
     close(reason?: ToolApprovalDialogCloseReason): void;
     private onBackdropClick;
-    private onDocKeyDown;
-    private getFocusableElements;
-    private getActiveElement;
     private stringifyArgs;
     private toggleEdit;
     private onDraftInput;

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

@@ -7,54 +7,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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';
 import { defineElement } from '../../internal/prefix.js';
 import { lockScroll } from '../../internal/scroll-lock.js';
 import { nextId } from '../../internal/a11y.js';
 import { styles } from './tool-approval-dialog.styles.js';
 import '../json-viewer/json-viewer.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, and
-// this component's own directly-rendered <lyra-json-viewer>'s internal
-// toggle/copy buttons, are found even though neither the slotted host tag
-// nor <lyra-json-viewer> itself matches FOCUSABLE_SELECTOR. Deliberately
-// duplicated from lyra-dialog's/lyra-tool-select-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-select-dialog's identical helper. */
-function isRendered(el) {
-    return el.checkVisibility ? el.checkVisibility() : el.getClientRects().length > 0;
-}
 /**
  * `<lyra-tool-approval-dialog>` — a human-in-the-loop gate: presents one
  * proposed tool/function call (`toolName` + `args`) and blocks an agent from
  * executing it until a person explicitly approves or denies it, with an
  * optional inline "edit the arguments before approving" step.
  *
- * 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.
  *
  * Approve/Deny/Edit are built-in chrome (not a `footer` slot a consumer must
  * assemble) — this component's interaction shape is fixed enough (there is
@@ -76,8 +44,12 @@ function isRendered(el) {
  * Both `editing` and any in-progress draft reset back to the read-only view
  * every time the dialog transitions from closed to open, so a reused
  * instance never leaks one proposal's half-finished edit into the next.
+ * `editable` flipping to `false` mid-edit does the same (see `willUpdate()`)
+ * and, if the textarea it unmounts still held focus, `updated()` refocuses
+ * Deny so the focus trap keeps engaging instead of silently letting focus
+ * fall through to the document.
  *
- * Initial focus deliberately does *not* land on Approve (see `updated()`):
+ * Initial focus deliberately does *not* land on Approve:
  * approving a tool call is a consequential, potentially irreversible action,
  * so a user who opens this dialog and reflexively presses Enter/Space before
  * reading anything should deny, not approve. Deny gets the initial focus
@@ -131,34 +103,7 @@ export class LyraToolApprovalDialog extends LyraElement {
         this.titleId = nextId('tool-approval-dialog-title');
         this.errorId = nextId('tool-approval-dialog-error');
         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.overlay?.dismissBackdrop();
         };
         this.toggleEdit = () => {
             if (this.editing) {
@@ -208,15 +153,8 @@ export class LyraToolApprovalDialog extends LyraElement {
     willUpdate(changed) {
         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.releaseScrollLock ??= lockScroll(this.ownerDocument);
+                this.activateOverlay();
                 // Every open starts fresh in the read-only view -- a reused instance
                 // must never carry a half-finished edit (or its error state) over
                 // from whatever the previous proposal was.
@@ -227,7 +165,8 @@ export class LyraToolApprovalDialog extends LyraElement {
             else {
                 this.releaseScrollLock?.();
                 this.releaseScrollLock = undefined;
-                document.removeEventListener('keydown', this.onDocKeyDown);
+                this.overlay?.deactivate();
+                this.overlay = undefined;
             }
         }
         // A consumer flipping editable off mid-edit (e.g. a policy change
@@ -245,40 +184,53 @@ export class LyraToolApprovalDialog extends LyraElement {
     // them -- mirrors lyra-dialog's identical ordering rationale.
     updated(changed) {
         if (changed.has('open') && this.open) {
-            // Deliberately the Deny button, not "the first focusable element" --
-            // see the class doc's focus-management paragraph.
-            const deny = this.shadowRoot?.querySelector('[part="deny-button"]');
-            if (deny) {
-                deny.focus();
-            }
-            else {
-                this.shadowRoot?.querySelector('[part="panel"]')?.focus();
-            }
+            this.overlay?.focusInitial();
             return;
         }
-        if (changed.has('editing') && this.editing) {
-            // Entering edit mode is a deliberate request to start typing --
-            // steering focus into the textarea beats leaving it on the Edit
-            // button the click already left it on.
-            this.shadowRoot?.querySelector('[part="args-editor"]')?.focus();
+        if (changed.has('editing')) {
+            if (this.editing) {
+                // Entering edit mode is a deliberate request to start typing --
+                // steering focus into the textarea beats leaving it on the Edit
+                // button the click already left it on.
+                this.shadowRoot?.querySelector('[part="args-editor"]')?.focus();
+            }
+            else if (this.open && !this.shadowRoot?.activeElement) {
+                // Reached when editing was turned off some way other than clicking
+                // Cancel (e.g. `editable` flipping to false while the textarea held
+                // focus, in willUpdate above) -- the textarea that held focus was
+                // just unmounted without anything else claiming it, which would
+                // otherwise drop focus to <body> and silently stop the Tab trap
+                // from engaging. Refocus a stable target inside the panel instead.
+                this.shadowRoot?.querySelector('[part="deny-button"]')?.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);
+        if (this.hasUpdated && this.open) {
+            this.releaseScrollLock ??= lockScroll(this.ownerDocument);
+            this.activateOverlay();
+            queueMicrotask(() => this.overlay?.focusInitial());
         }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.releaseScrollLock?.();
         this.releaseScrollLock = undefined;
-        document.removeEventListener('keydown', this.onDocKeyDown);
+        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'),
+            preferredInitialFocus: () => this.shadowRoot?.querySelector('[part="deny-button"]') ?? null,
+        });
     }
     /**
      * Close the dialog and return focus to whatever had it before the dialog
@@ -294,32 +246,6 @@ export class LyraToolApprovalDialog extends LyraElement {
             return;
         this.open = false;
         this.emit('lyra-close', reason);
-        this.lastTrigger?.focus();
-    }
-    // Bounds Tab/Shift+Tab to the panel while open. Order follows the body
-    // (the json-viewer's own toggle/copy buttons, or the textarea, depending
-    // on `editing`), then the footer row (the footer slot, then Deny/Edit/
-    // Approve) -- the same order the flattened tree already tabs through.
-    // collectFocusable()'s own FOCUSABLE_SELECTOR check excludes the Approve
-    // button for free while it's `disabled`, so an invalid in-progress edit
-    // can't be Tab-trapped into.
-    getFocusableElements() {
-        const root = this.shadowRoot;
-        if (!root)
-            return [];
-        const body = root.querySelector('[part="body"]');
-        const footer = root.querySelector('[part="footer"]');
-        return [...(body ? collectFocusable(body) : []), ...(footer ? collectFocusable(footer) : [])].filter(isRendered);
-    }
-    getActiveElement() {
-        let active = document.activeElement;
-        while (active) {
-            const inner = active.shadowRoot?.activeElement ?? null;
-            if (!inner)
-                break;
-            active = inner;
-        }
-        return active;
     }
     stringifyArgs() {
         try {

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

@@ -16,7 +16,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-call-chip/tool-call-chip.d.ts

@@ -23,7 +23,12 @@ export interface ToolChipSelectDetail {
  * a short preview) shown in a floating tooltip on hover/focus, positioned
  * with `internal/positioner.js`'s `place()` the same way `<lyra-combobox>`
  * positions its listbox. No tooltip is shown at all when the slot carries no
- * content — hovering an empty chip does nothing.
+ * content — hovering an empty chip does nothing. Hover and keyboard focus are
+ * tracked as independent reasons to keep the tooltip open (mirrors
+ * `<lyra-citation-badge>`'s popover), so releasing one modality while the
+ * other is still active doesn't close it, and the trigger button's
+ * `aria-describedby` points at the tooltip's id whenever it's open and has
+ * content, so the association reaches assistive tech too.
  *
  * The `icon` slot overrides the built-in per-status glyph entirely via the
  * platform's own slot-fallback-content mechanism (`<slot
@@ -56,7 +61,10 @@ export declare class LyraToolCallChip extends LyraElement {
     name: string;
     /** Optional grouping label, e.g. `research`. */
     category: string;
-    /** The call's current lifecycle state — drives the glyph, color, and `status-text`. */
+    /**
+     * The call's current lifecycle state — drives the glyph, color, and
+     * `status-text`. Invalid runtime values use the pending presentation.
+     */
     status: ToolCallStatus;
     /** Short human-readable status text, e.g. `Searching web…`. */
     summary: string;
@@ -70,15 +78,23 @@ export declare class LyraToolCallChip extends LyraElement {
     callId: string;
     private hasDetailSlot;
     private tooltipOpen;
+    private readonly tooltipId;
     private cleanupPositioner?;
+    private hovering;
+    private focused;
     protected willUpdate(): void;
     protected updated(changed: PropertyValues): void;
     disconnectedCallback(): void;
     private onDetailSlotChange;
     private showTooltip;
     private hideTooltip;
+    private onMouseEnter;
+    private onMouseLeave;
+    private onFocus;
+    private onBlur;
     private onKeyDown;
     private onClick;
+    private get effectiveStatus();
     private get accessibleLabel();
     render(): TemplateResult;
 }