@aceshooting/lyra-ui 2.0.0 → 2.1.0

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

@@ -7,46 +7,14 @@ 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 { 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';
-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);
@@ -56,11 +24,10 @@ function defaultFilter(tool, query) {
  * 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`
@@ -98,14 +65,17 @@ function defaultFilter(tool, query) {
  * @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 class LyraToolSelectDialog extends LyraElement {
@@ -135,34 +105,7 @@ export class LyraToolSelectDialog extends LyraElement {
             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.overlay?.dismissBackdrop();
         };
         this.onSearchInput = (e) => {
             this.query = e.target.value;
@@ -172,27 +115,25 @@ export class LyraToolSelectDialog extends LyraElement {
             this.emitChange();
         };
     }
-    static { this.styles = [LyraElement.styles, styles]; }
+    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) {
-                // 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();
             }
             else {
                 this.releaseScrollLock?.();
                 this.releaseScrollLock = undefined;
-                document.removeEventListener('keydown', this.onDocKeyDown);
+                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 = '';
             }
         }
     }
@@ -202,31 +143,34 @@ export class LyraToolSelectDialog extends LyraElement {
     // 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();
-            }
+            this.overlay?.focusInitial();
         }
     }
     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'),
+        });
     }
     /**
      * Close the dialog and return focus to whatever had it before the dialog
@@ -241,40 +185,6 @@ export class LyraToolSelectDialog 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 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', {
@@ -337,10 +247,10 @@ export class LyraToolSelectDialog extends LyraElement {
             ${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>`
+          ${tool.disabled && tool.disabledReason
+            ? html `<span part="tool-disabled-reason">${tool.disabledReason}</span>`
             : nothing}
+        </lyra-checkbox>
       </li>
     `;
     }
@@ -349,7 +259,8 @@ export class LyraToolSelectDialog extends LyraElement {
         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>
+          ${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))}

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

@@ -10,7 +10,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);
@@ -79,7 +79,13 @@ export const styles = css `
   }
   [part='defaults-hint'] {
     margin: 0;
-    padding-inline-start: calc(var(--lyra-icon-button-size) * 0.7);
+    /* Lines the hint up under the switch's label text, not its track --
+       lyra-switch's own [part="base"] uses a fixed 2.25rem track
+       inline-size plus a --lyra-space-s gap before its label (both defined
+       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;
     color: var(--lyra-color-text-quiet);
   }
@@ -162,8 +168,11 @@ export const styles = css `
     color: var(--lyra-color-text-quiet);
   }
   [part='tool-disabled-reason'] {
-    margin: 0;
-    padding-inline-start: calc(var(--lyra-icon-button-size) * 0.7);
+    /* Slotted into lyra-checkbox's default slot alongside tool-name/
+       tool-description (see tool-select-dialog.ts's renderTool()), so it
+       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;
     color: var(--lyra-color-warning);
   }

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

@@ -15,7 +15,10 @@ 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 anywhere in its row, or Enter/Space).
- * @csspart row, toggle, label, badge
+ * @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 {
     static styles: import("lit").CSSResultGroup[];

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

@@ -90,7 +90,10 @@ const styles = css `
  * @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, toggle, label, badge
+ * @csspart row - The tree row.
+ * @csspart toggle - The expand/collapse button.
+ * @csspart label - The node label.
+ * @csspart badge - The optional node badge.
  */
 export class LyraTreeNode extends LyraElement {
     constructor() {

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

@@ -35,15 +35,18 @@ export declare class LyraTree extends LyraElement {
     private get nodeElements();
     private childrenOf;
     /**
-     * Memoized result of the last `visibleNodeElements()` walk. Every keydown
-     * (ArrowUp/Down/Home/End especially) reads the full visible-node list, and
-     * rebuilding it means a `shadowRoot.querySelectorAll` per currently-expanded
-     * node -- invalidated below on the only two things that can change which
-     * nodes are visible: a `data` reassignment, or a node expanding/collapsing.
+     * Every currently *visible* (ancestor-expanded) node, top-to-bottom.
+     *
+     * Recomputed on every call rather than memoized: `item`/`expanded` are
+     * plain public settable properties on `<lyra-tree-node>` (not just
+     * reachable through this class's own `data` setter or the bubbling
+     * `lyra-node-toggle` event), so a cache keyed off those two entry points
+     * alone would go stale the moment a caller mutated a node directly --
+     * e.g. `node.item = { ...node.item, children: [...] }` to append a child
+     * in place. This walk only runs from user-paced `keydown` handling (never
+     * a hot render-loop path), so the cost of a `shadowRoot.querySelectorAll`
+     * per currently-expanded node is not worth trading for that staleness risk.
      */
-    private cachedVisible;
-    private invalidateVisibleCache;
-    /** Every currently *visible* (ancestor-expanded) node, top-to-bottom. */
     private visibleNodeElements;
     private findItem;
     protected willUpdate(changed: PropertyValues): void;
@@ -100,6 +103,12 @@ export declare class LyraTree extends LyraElement {
      * -- callers that immediately read `visibleNodeElements()`-derived state
      * (or call `collapseAll()` right after) should `await` this instead of
      * firing it and moving on.
+     *
+     * Guarded on `n.hasChildren`, matching `expand()`'s own invariant -- a leaf
+     * node's `expanded` must never be set to `true`, since `collapse()` (and
+     * this method's own counterpart, `collapseAll()`) refuse to act on a node
+     * that's `!hasChildren`, which would otherwise leave the leaf permanently
+     * stuck with a reflected `expanded` attribute nothing can clear.
      */
     expandAll(): Promise<void>;
     /**

package/dist/components/tree/tree.js

@@ -38,14 +38,6 @@ export class LyraTree extends LyraElement {
         this.activeId = null;
         /** Set by `willUpdate()` when a `data` reassignment removes the node that currently holds real DOM focus; consumed by `updated()` to refocus the newly-designated `activeId` node once it's actually focusable. */
         this.pendingFocusId = null;
-        /**
-         * Memoized result of the last `visibleNodeElements()` walk. Every keydown
-         * (ArrowUp/Down/Home/End especially) reads the full visible-node list, and
-         * rebuilding it means a `shadowRoot.querySelectorAll` per currently-expanded
-         * node -- invalidated below on the only two things that can change which
-         * nodes are visible: a `data` reassignment, or a node expanding/collapsing.
-         */
-        this.cachedVisible = null;
         /**
          * A mouse click always lands directly on the node it interacts with --
          * `select()`/`expand()`/`collapse()` all emit their own node's id --
@@ -62,8 +54,6 @@ export class LyraTree extends LyraElement {
          * same-value, no-op assignment for them.
          */
         this.onNodeActivate = (e) => {
-            if (e.type === 'lyra-node-toggle')
-                this.invalidateVisibleCache();
             this.activeId = e.detail.id;
         };
         this.onTreeKeyDown = (e) => {
@@ -138,13 +128,20 @@ export class LyraTree extends LyraElement {
     childrenOf(node) {
         return [...(node.shadowRoot?.querySelectorAll(tag('tree-node')) ?? [])];
     }
-    invalidateVisibleCache() {
-        this.cachedVisible = null;
-    }
-    /** Every currently *visible* (ancestor-expanded) node, top-to-bottom. */
+    /**
+     * Every currently *visible* (ancestor-expanded) node, top-to-bottom.
+     *
+     * Recomputed on every call rather than memoized: `item`/`expanded` are
+     * plain public settable properties on `<lyra-tree-node>` (not just
+     * reachable through this class's own `data` setter or the bubbling
+     * `lyra-node-toggle` event), so a cache keyed off those two entry points
+     * alone would go stale the moment a caller mutated a node directly --
+     * e.g. `node.item = { ...node.item, children: [...] }` to append a child
+     * in place. This walk only runs from user-paced `keydown` handling (never
+     * a hot render-loop path), so the cost of a `shadowRoot.querySelectorAll`
+     * per currently-expanded node is not worth trading for that staleness risk.
+     */
     visibleNodeElements() {
-        if (this.cachedVisible)
-            return this.cachedVisible;
         const acc = [];
         const walk = (nodes) => {
             for (const n of nodes) {
@@ -154,7 +151,6 @@ export class LyraTree extends LyraElement {
             }
         };
         walk(this.nodeElements);
-        this.cachedVisible = acc;
         return acc;
     }
     findItem(items, id) {
@@ -169,7 +165,6 @@ export class LyraTree extends LyraElement {
     }
     willUpdate(changed) {
         if (changed.has('data')) {
-            this.invalidateVisibleCache();
             // `document.activeElement` collapses to the outermost light-DOM node
             // even when the real focus target is a nested descendant several
             // shadow roots down, so this also catches a focused nested node whose
@@ -269,12 +264,18 @@ export class LyraTree extends LyraElement {
      * -- callers that immediately read `visibleNodeElements()`-derived state
      * (or call `collapseAll()` right after) should `await` this instead of
      * firing it and moving on.
+     *
+     * Guarded on `n.hasChildren`, matching `expand()`'s own invariant -- a leaf
+     * node's `expanded` must never be set to `true`, since `collapse()` (and
+     * this method's own counterpart, `collapseAll()`) refuse to act on a node
+     * that's `!hasChildren`, which would otherwise leave the leaf permanently
+     * stuck with a reflected `expanded` attribute nothing can clear.
      */
     async expandAll() {
         const setAll = async (nodes) => {
             await Promise.all(nodes.map(async (n) => {
-                n.expanded = true;
-                this.invalidateVisibleCache();
+                if (n.hasChildren)
+                    n.expanded = true;
                 await n.updateComplete;
                 await setAll(this.childrenOf(n));
             }));

package/dist/components/typing-indicator/typing-indicator.d.ts

@@ -29,7 +29,9 @@ export type TypingIndicatorSize = 'sm' | 'md';
  * accessible name derived from `label` is sufficient, set both as an
  * `aria-label` on the host *and* as a visually-hidden text node in the
  * shadow tree, so the name survives even if only one of the two is picked up
- * by a given assistive-tech/browser pairing. The animated dots/pulse/cursor
+ * by a given assistive-tech/browser pairing. An empty or whitespace-only
+ * `label` falls back to the default "Thinking…" copy in both places, rather
+ * than leaving the component with no accessible name at all. The animated dots/pulse/cursor
  * shape is `aria-hidden="true"` — it's decorative; `label` is the entire
  * accessible content, so nothing narrates individual animation frames.
  *
@@ -45,10 +47,18 @@ export declare class LyraTypingIndicator extends LyraElement {
     variant: TypingIndicatorVariant;
     /** Accessible name, exposed via `role="status"`. Not re-announced on every
      *  animation frame — only mount (and any later change to this property)
-     *  produces a new announcement. */
+     *  produces a new announcement. An empty or whitespace-only value falls
+     *  back to the default "Thinking…" copy (see `accessibleLabel`) so the
+     *  component never loses its accessible name. */
     label: string;
     /** Compact sizing for dense layouts (e.g. inline with a message bubble). */
     size: TypingIndicatorSize;
+    /** The accessible name actually used, falling back to the default
+     *  "Thinking…" copy when `label` is set to an empty or whitespace-only
+     *  string -- otherwise both the `aria-label` and the sr-only text node
+     *  would go blank, leaving this purely-decorative component with no
+     *  accessible name at all. */
+    private get accessibleLabel();
     protected willUpdate(changed: PropertyValues): void;
     render(): TemplateResult;
     private renderShape;

package/dist/components/typing-indicator/typing-indicator.js

@@ -37,7 +37,9 @@ import { styles } from './typing-indicator.styles.js';
  * accessible name derived from `label` is sufficient, set both as an
  * `aria-label` on the host *and* as a visually-hidden text node in the
  * shadow tree, so the name survives even if only one of the two is picked up
- * by a given assistive-tech/browser pairing. The animated dots/pulse/cursor
+ * by a given assistive-tech/browser pairing. An empty or whitespace-only
+ * `label` falls back to the default "Thinking…" copy in both places, rather
+ * than leaving the component with no accessible name at all. The animated dots/pulse/cursor
  * shape is `aria-hidden="true"` — it's decorative; `label` is the entire
  * accessible content, so nothing narrates individual animation frames.
  *
@@ -54,22 +56,32 @@ export class LyraTypingIndicator extends LyraElement {
         this.variant = 'dots';
         /** Accessible name, exposed via `role="status"`. Not re-announced on every
          *  animation frame — only mount (and any later change to this property)
-         *  produces a new announcement. */
+         *  produces a new announcement. An empty or whitespace-only value falls
+         *  back to the default "Thinking…" copy (see `accessibleLabel`) so the
+         *  component never loses its accessible name. */
         this.label = 'Thinking…';
         /** Compact sizing for dense layouts (e.g. inline with a message bubble). */
         this.size = 'md';
     }
     static { this.styles = [LyraElement.styles, styles, srOnly]; }
+    /** The accessible name actually used, falling back to the default
+     *  "Thinking…" copy when `label` is set to an empty or whitespace-only
+     *  string -- otherwise both the `aria-label` and the sr-only text node
+     *  would go blank, leaving this purely-decorative component with no
+     *  accessible name at all. */
+    get accessibleLabel() {
+        return this.label.trim() || 'Thinking…';
+    }
     willUpdate(changed) {
         this.setAttribute('role', 'status');
         if (changed.has('label')) {
-            this.setAttribute('aria-label', this.label);
+            this.setAttribute('aria-label', this.accessibleLabel);
         }
     }
     render() {
         return html `
       <span part="base" aria-hidden="true">${this.renderShape()}</span>
-      <span class="sr-only">${this.label}</span>
+      <span class="sr-only">${this.accessibleLabel}</span>
     `;
     }
     renderShape() {

package/dist/components/typing-indicator/typing-indicator.styles.js

@@ -18,8 +18,8 @@ export const styles = css `
     align-items: center;
     vertical-align: middle;
     line-height: 1;
-    --lyra-typing-dot-size: 0.5rem;
-    --lyra-typing-gap: 0.25rem;
+    --lyra-typing-dot-size: var(--lyra-space-s);
+    --lyra-typing-gap: var(--lyra-space-xs);
     --lyra-typing-cursor-width: 0.125rem;
     --lyra-typing-cursor-height: 1em;
   }