@aceshooting/lyra-ui 2.1.0 → 2.2.0

package/dist/components/tree/tree.js

@@ -1,326 +1,6 @@
-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, tag } from '../../internal/prefix.js';
-import { isRtl } from '../../internal/rtl.js';
-import { styles } from './tree.styles.js';
-import { cascadeUpdateComplete } from './update-cascade.js';
-import './tree-node.js';
-/**
- * `<lyra-tree>` — an expand/collapse hierarchy for graph/document navigation.
- *
- * Implements the WAI-ARIA treeitem keyboard pattern: a single roving
- * `tabindex` (tracked here as `activeId`, pushed down to every
- * `<lyra-tree-node>` — including nested ones, recursively) and
- * ArrowUp/Down/Right/Left/Home/End/Enter/Space handled by one delegated
- * `keydown` listener. Native `KeyboardEvent`s are `composed: true` and
- * bubble across shadow-DOM boundaries, so a press inside a deeply-nested
- * `<lyra-tree-node>`'s own shadow root still reaches this listener.
- *
- * @customElement lyra-tree
- * @event lyra-node-toggle - `detail: { id, expanded }`, dispatched by a descendant `<lyra-tree-node>` and observed here (bubbling, composed) to keep the roving-tabindex `activeId` in sync.
- * @event lyra-node-select - `detail: { id }`, dispatched by a descendant `<lyra-tree-node>` and observed here (bubbling, composed) to keep the roving-tabindex `activeId` in sync.
- * @csspart base
- * @slot - `<lyra-tree-node>` elements (top-level tree items).
- */
-export class LyraTree extends LyraElement {
-    constructor() {
-        super(...arguments);
-        this.data = [];
-        /** Accessible name for the tree -- `role="tree"` lives on an internal element, not the host, so `aria-label`/`aria-labelledby` set directly on `<lyra-tree>` would not label it. */
-        this.label = '';
-        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;
-        /**
-         * A mouse click always lands directly on the node it interacts with --
-         * `select()`/`expand()`/`collapse()` all emit their own node's id --
-         * independent of whatever `activeId` currently holds. Sync `activeId` to
-         * that id here so a click always becomes the tree's new roving-tabindex
-         * target: this keeps it aligned with real DOM focus, keeps the next
-         * arrow-key press relative to the item the user just clicked (rather than
-         * a stale `activeId`), and keeps `activeId` valid when a click collapses
-         * an ancestor of the previously-active node -- the collapsed node's own
-         * id (always still visible, since collapsing never removes a node's own
-         * top-level or already-rendered self) replaces the now-hidden descendant's
-         * id, so at least one node keeps a roving tabindex of 0. Keyboard-driven
-         * toggles/selects always target the already-active node, so this is a
-         * same-value, no-op assignment for them.
-         */
-        this.onNodeActivate = (e) => {
-            this.activeId = e.detail.id;
-        };
-        this.onTreeKeyDown = (e) => {
-            const visible = this.visibleNodeElements();
-            if (visible.length === 0)
-                return;
-            const currentIndex = visible.findIndex((n) => n.item.id === this.activeId);
-            const current = currentIndex >= 0 ? visible[currentIndex] : visible[0];
-            // Expand/step-in and collapse/step-out are physical-direction actions --
-            // swap which arrow key does which in RTL, matching split.ts/time-range.ts.
-            const rtl = isRtl(this);
-            const expandKey = rtl ? 'ArrowLeft' : 'ArrowRight';
-            const collapseKey = rtl ? 'ArrowRight' : 'ArrowLeft';
-            switch (e.key) {
-                case 'ArrowDown':
-                    e.preventDefault();
-                    this.focusNode(visible[Math.min(visible.length - 1, currentIndex + 1)]);
-                    break;
-                case 'ArrowUp':
-                    e.preventDefault();
-                    this.focusNode(visible[Math.max(0, currentIndex - 1)]);
-                    break;
-                case 'Home':
-                    e.preventDefault();
-                    this.focusNode(visible[0]);
-                    break;
-                case 'End':
-                    e.preventDefault();
-                    this.focusNode(visible[visible.length - 1]);
-                    break;
-                case expandKey:
-                    e.preventDefault();
-                    if (!current.hasChildren)
-                        break;
-                    if (!current.expanded) {
-                        current.expand(); // focus stays put; a 2nd press steps into the first child
-                    }
-                    else {
-                        const child = visible[currentIndex + 1];
-                        if (child && child.depth > current.depth)
-                            this.focusNode(child);
-                    }
-                    break;
-                case collapseKey:
-                    e.preventDefault();
-                    if (current.hasChildren && current.expanded) {
-                        current.collapse();
-                    }
-                    else {
-                        for (let i = currentIndex - 1; i >= 0; i--) {
-                            if (visible[i].depth < current.depth) {
-                                this.focusNode(visible[i]);
-                                break;
-                            }
-                        }
-                    }
-                    break;
-                case 'Enter':
-                case ' ':
-                    e.preventDefault();
-                    current.select();
-                    break;
-                default:
-                    return;
-            }
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    get nodeElements() {
-        return [...this.querySelectorAll(tag('tree-node'))];
-    }
-    childrenOf(node) {
-        return [...(node.shadowRoot?.querySelectorAll(tag('tree-node')) ?? [])];
-    }
-    /**
-     * 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() {
-        const acc = [];
-        const walk = (nodes) => {
-            for (const n of nodes) {
-                acc.push(n);
-                if (n.expanded)
-                    walk(this.childrenOf(n));
-            }
-        };
-        walk(this.nodeElements);
-        return acc;
-    }
-    findItem(items, id) {
-        for (const item of items) {
-            if (item.id === id)
-                return item;
-            const nested = item.children && this.findItem(item.children, id);
-            if (nested)
-                return nested;
-        }
-        return undefined;
-    }
-    willUpdate(changed) {
-        if (changed.has('data')) {
-            // `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
-            // top-level ancestor is about to be removed.
-            const focused = this.nodeElements.find((n) => n === document.activeElement);
-            this.syncNodes();
-            if (!this.activeId || !this.findItem(this.data, this.activeId)) {
-                this.activeId = this.data[0]?.id ?? null;
-            }
-            // `node.remove()` inside `syncNodes()` (per the DOM spec) already moved
-            // real focus off `focused` and onto <body> by this point; record the
-            // newly-resolved `activeId` so `updated()` can restore focus to it.
-            this.pendingFocusId = focused && !focused.isConnected ? this.activeId : null;
-        }
-    }
-    updated(changed) {
-        if (changed.has('activeId') || changed.has('data')) {
-            const count = this.data.length;
-            this.nodeElements.forEach((node, i) => {
-                node.activeId = this.activeId;
-                node.setSize = count;
-                node.posInSet = i + 1;
-            });
-        }
-    }
-    /** By-id reconciliation of top-level items: reuses/reorders existing `<lyra-tree-node>` elements and removes ones no longer present in `data`. */
-    syncNodes() {
-        const existingById = new Map();
-        for (const node of this.nodeElements) {
-            if (node.item)
-                existingById.set(node.item.id, node);
-        }
-        const seen = new Set();
-        let previousSibling = null;
-        for (const item of this.data) {
-            const reused = !seen.has(item.id) ? existingById.get(item.id) : undefined;
-            const node = reused ?? document.createElement(tag('tree-node'));
-            node.item = item;
-            node.depth = 0;
-            seen.add(item.id);
-            const targetPosition = previousSibling
-                ? previousSibling.nextElementSibling
-                : this.firstElementChild;
-            if (targetPosition !== node)
-                this.insertBefore(node, targetPosition);
-            previousSibling = node;
-        }
-        for (const [id, node] of existingById) {
-            if (!seen.has(id))
-                node.remove();
-        }
-    }
-    focusNode(node) {
-        if (!node)
-            return;
-        this.activeId = node.item.id;
-        node.focus();
-    }
-    /**
-     * `updated()` only pushes the new `activeId` to *top-level* nodes; nested
-     * nodes only receive it once their ancestor chain's own renders cascade it
-     * down (one more pending update per depth level). Cascade `updateComplete`
-     * to match (see `cascadeUpdateComplete`), so `focusNode()`'s `.focus()`
-     * call never runs while a nested target is still mid-cascade -- `.focus()`
-     * on an element with no `tabindex` attribute committed yet is a silent
-     * no-op.
-     *
-     * The `pendingFocusId` refocus (set by `willUpdate()` when a `data`
-     * reassignment removes the node that currently holds real DOM focus) is
-     * also resolved *here*, after the cascade above, rather than from
-     * `updated()` firing a detached `void this.updateComplete.then(...)` of
-     * its own: `updateComplete`'s getter (see the base class) calls this
-     * method fresh on *every* access rather than caching one promise, so a
-     * second, independent invocation started from inside `updated()` isn't
-     * the same promise chain a caller's own `await el.updateComplete` is
-     * following -- both ultimately settle once the same underlying update
-     * resolves, but as separate chains their `.then()` continuations aren't
-     * ordered against each other, so a caller's `await` can win the race and
-     * observe focus *not yet* restored. Doing the refocus inline, before this
-     * method's own `await` chain resolves, makes it unconditionally part of
-     * whatever `updateComplete` promise every caller (this class's own
-     * `focusNode()` included) is already waiting on.
-     */
-    async getUpdateComplete() {
-        const result = await super.getUpdateComplete();
-        await cascadeUpdateComplete(this.nodeElements);
-        if (this.pendingFocusId != null) {
-            const id = this.pendingFocusId;
-            this.pendingFocusId = null;
-            this.nodeElements.find((n) => n.item.id === id)?.focus();
-        }
-        return result;
-    }
-    /**
-     * Expand every node in the tree, recursively. Resolves once every
-     * descendant has actually finished expanding (not just had `expanded` set)
-     * -- 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) => {
-                if (n.hasChildren)
-                    n.expanded = true;
-                await n.updateComplete;
-                await setAll(this.childrenOf(n));
-            }));
-        };
-        await setAll(this.nodeElements);
-    }
-    /**
-     * Collapse every node in the tree, recursively. Goes through each node's
-     * own `collapse()` (rather than assigning `expanded` directly) so its
-     * `lyra-node-toggle` emit reaches `onNodeActivate` -- that keeps `activeId`
-     * re-synced to a node that's still visible after collapsing, even when the
-     * roving-tabindex target was a nested descendant whose ancestor's
-     * `role="group"` is about to disappear.
-     */
-    collapseAll() {
-        const setAll = (nodes) => {
-            for (const n of nodes) {
-                setAll(this.childrenOf(n));
-                n.collapse();
-            }
-        };
-        setAll(this.nodeElements);
-    }
-    render() {
-        return html `
-      <div
-        part="base"
-        role="tree"
-        aria-label=${this.label || nothing}
-        @keydown=${this.onTreeKeyDown}
-        @lyra-node-toggle=${this.onNodeActivate}
-        @lyra-node-select=${this.onNodeActivate}
-      >
-        <slot></slot>
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ attribute: false })
-], LyraTree.prototype, "data", void 0);
-__decorate([
-    property()
-], LyraTree.prototype, "label", void 0);
-__decorate([
-    state()
-], LyraTree.prototype, "activeId", void 0);
+export * from './tree.class.js';
+import { LyraTree } from './tree.class.js';
+import { defineElement } from '../../internal/prefix.js';
+import "./tree-node.js";
 defineElement('tree', LyraTree);
+//# sourceMappingURL=tree.js.map

package/dist/components/tree/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../../src/components/tree/tree.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,gBAAgB,CAAC;AACxB,aAAa,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC"}

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

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

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

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

package/dist/components/tree/tree.styles.js

@@ -11,3 +11,4 @@ export const styles = css `
     overflow-x: auto;
   }
 `;
+//# sourceMappingURL=tree.styles.js.map

package/dist/components/tree/tree.styles.js.map

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

package/dist/components/tree/update-cascade.d.ts

@@ -11,3 +11,4 @@
 export declare function cascadeUpdateComplete(children: Iterable<{
     updateComplete: Promise<unknown>;
 }>): Promise<void>;
+//# sourceMappingURL=update-cascade.d.ts.map

package/dist/components/tree/update-cascade.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-cascade.d.ts","sourceRoot":"","sources":["../../../src/components/tree/update-cascade.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,wBAAsB,qBAAqB,CACzC,QAAQ,EAAE,QAAQ,CAAC;IAAE,cAAc,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;CAAE,CAAC,GACvD,OAAO,CAAC,IAAI,CAAC,CAEf"}

package/dist/components/tree/update-cascade.js

@@ -11,3 +11,4 @@
 export async function cascadeUpdateComplete(children) {
     await Promise.all([...children].map((child) => child.updateComplete));
 }
+//# sourceMappingURL=update-cascade.js.map

package/dist/components/tree/update-cascade.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-cascade.js","sourceRoot":"","sources":["../../../src/components/tree/update-cascade.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,CAAC,KAAK,UAAU,qBAAqB,CACzC,QAAwD;IAExD,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;AACxE,CAAC"}

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

@@ -0,0 +1,71 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type TypingIndicatorVariant = 'dots' | 'pulse' | 'cursor';
+export type TypingIndicatorSize = 'sm' | 'md';
+/**
+ * `<lyra-typing-indicator>` — a purely presentational "assistant is
+ * responding" presence cue. No events, no interactivity: a consumer mounts
+ * it while a response is being generated and removes it (or hides it) once
+ * real content has arrived.
+ *
+ * Three visual variants share one component rather than three separate tags
+ * because callers pick between them along a single axis — how the
+ * surrounding surface wants the cue to read — and nothing else about the
+ * component differs:
+ * - `dots` (default) — three dots with a staggered bounce, the classic
+ *   "typing…" affordance for a standalone status line.
+ * - `pulse` — a single breathing dot, a quieter cue for a tighter space
+ *   (e.g. next to an avatar).
+ * - `cursor` — a blinking vertical bar, meant to sit inline at the tail end
+ *   of streamed text that is still being appended to.
+ *
+ * Accessibility: this indicator typically mounts and unmounts around a real
+ * generation lifecycle (appears when a response starts, disappears once one
+ * arrives) rather than emitting a stream of updates of its own, so it does
+ * *not* route through `<lyra-live-region>`/`Announcer`
+ * (`../../internal/announcer.js`) — that machinery exists to coalesce many
+ * rapidly-changing announcements into one, and there is only ever a single
+ * announcement here: the mount itself. A plain `role="status"` plus an
+ * 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. 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.
+ *
+ * @customElement lyra-typing-indicator
+ * @csspart base - The decorative (`aria-hidden`) wrapper around the animated shape.
+ * @csspart dot - Each of the three dots in the `dots` variant.
+ * @csspart pulse - The single pulsing dot in the `pulse` variant.
+ * @csspart cursor - The blinking bar in the `cursor` variant.
+ */
+export declare class LyraTypingIndicator extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Which decorative presentation to render. */
+    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. 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;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-typing-indicator': LyraTypingIndicator;
+    }
+}
+//# sourceMappingURL=typing-indicator.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typing-indicator.class.d.ts","sourceRoot":"","sources":["../../../src/components/typing-indicator/typing-indicator.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAErE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AACjE,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBAAa,mBAAoB,SAAQ,WAAW;IAClD,MAAM,CAAC,MAAM,iCAAwC;IAErD,+CAA+C;IAClB,OAAO,EAAE,sBAAsB,CAAU;IAEtE;;;;qDAIiD;IACrC,KAAK,SAAe;IAEhC,4EAA4E;IAC/C,IAAI,EAAE,mBAAmB,CAAQ;IAE9D;;;;kCAI8B;IAC9B,OAAO,KAAK,eAAe,GAE1B;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAKlD;IAED,MAAM,IAAI,cAAc,CAKvB;IAED,OAAO,CAAC,WAAW;CAWpB;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF"}

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

@@ -0,0 +1,107 @@
+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 } from 'lit';
+import { property } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { srOnly } from '../../internal/a11y.js';
+import { styles } from './typing-indicator.styles.js';
+/**
+ * `<lyra-typing-indicator>` — a purely presentational "assistant is
+ * responding" presence cue. No events, no interactivity: a consumer mounts
+ * it while a response is being generated and removes it (or hides it) once
+ * real content has arrived.
+ *
+ * Three visual variants share one component rather than three separate tags
+ * because callers pick between them along a single axis — how the
+ * surrounding surface wants the cue to read — and nothing else about the
+ * component differs:
+ * - `dots` (default) — three dots with a staggered bounce, the classic
+ *   "typing…" affordance for a standalone status line.
+ * - `pulse` — a single breathing dot, a quieter cue for a tighter space
+ *   (e.g. next to an avatar).
+ * - `cursor` — a blinking vertical bar, meant to sit inline at the tail end
+ *   of streamed text that is still being appended to.
+ *
+ * Accessibility: this indicator typically mounts and unmounts around a real
+ * generation lifecycle (appears when a response starts, disappears once one
+ * arrives) rather than emitting a stream of updates of its own, so it does
+ * *not* route through `<lyra-live-region>`/`Announcer`
+ * (`../../internal/announcer.js`) — that machinery exists to coalesce many
+ * rapidly-changing announcements into one, and there is only ever a single
+ * announcement here: the mount itself. A plain `role="status"` plus an
+ * 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. 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.
+ *
+ * @customElement lyra-typing-indicator
+ * @csspart base - The decorative (`aria-hidden`) wrapper around the animated shape.
+ * @csspart dot - Each of the three dots in the `dots` variant.
+ * @csspart pulse - The single pulsing dot in the `pulse` variant.
+ * @csspart cursor - The blinking bar in the `cursor` variant.
+ */
+export class LyraTypingIndicator extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Which decorative presentation to render. */
+        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. 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.accessibleLabel);
+        }
+    }
+    render() {
+        return html `
+      <span part="base" aria-hidden="true">${this.renderShape()}</span>
+      <span class="sr-only">${this.accessibleLabel}</span>
+    `;
+    }
+    renderShape() {
+        switch (this.variant) {
+            case 'pulse':
+                return html `<span part="pulse"></span>`;
+            case 'cursor':
+                return html `<span part="cursor"></span>`;
+            case 'dots':
+            default:
+                return html `<span part="dot"></span><span part="dot"></span><span part="dot"></span>`;
+        }
+    }
+}
+__decorate([
+    property({ reflect: true })
+], LyraTypingIndicator.prototype, "variant", void 0);
+__decorate([
+    property()
+], LyraTypingIndicator.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraTypingIndicator.prototype, "size", void 0);
+//# sourceMappingURL=typing-indicator.class.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typing-indicator.class.js","sourceRoot":"","sources":["../../../src/components/typing-indicator/typing-indicator.class.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAA4C,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAKtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,OAAO,mBAAoB,SAAQ,WAAW;IAApD;;QAGE,+CAA+C;QAClB,YAAO,GAA2B,MAAM,CAAC;QAEtE;;;;yDAIiD;QACrC,UAAK,GAAG,WAAW,CAAC;QAEhC,4EAA4E;QAC/C,SAAI,GAAwB,IAAI,CAAC;IAoChE,CAAC;aAjDQ,WAAM,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,AAAvC,CAAwC;IAerD;;;;kCAI8B;IAC9B,IAAY,eAAe;QACzB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,WAAW,CAAC;IAC1C,CAAC;IAES,UAAU,CAAC,OAAuB;QAC1C,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QACpC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;6CAC8B,IAAI,CAAC,WAAW,EAAE;8BACjC,IAAI,CAAC,eAAe;KAC7C,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,OAAO;gBACV,OAAO,IAAI,CAAA,4BAA4B,CAAC;YAC1C,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAA,6BAA6B,CAAC;YAC3C,KAAK,MAAM,CAAC;YACZ;gBACE,OAAO,IAAI,CAAA,0EAA0E,CAAC;QAC1F,CAAC;IACH,CAAC;CACF;AA9C8B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAA0C;AAO1D;IAAX,QAAQ,EAAE;kDAAqB;AAGH;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAkC"}

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

@@ -1,70 +1,2 @@
-import { type TemplateResult, type PropertyValues } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-export type TypingIndicatorVariant = 'dots' | 'pulse' | 'cursor';
-export type TypingIndicatorSize = 'sm' | 'md';
-/**
- * `<lyra-typing-indicator>` — a purely presentational "assistant is
- * responding" presence cue. No events, no interactivity: a consumer mounts
- * it while a response is being generated and removes it (or hides it) once
- * real content has arrived.
- *
- * Three visual variants share one component rather than three separate tags
- * because callers pick between them along a single axis — how the
- * surrounding surface wants the cue to read — and nothing else about the
- * component differs:
- * - `dots` (default) — three dots with a staggered bounce, the classic
- *   "typing…" affordance for a standalone status line.
- * - `pulse` — a single breathing dot, a quieter cue for a tighter space
- *   (e.g. next to an avatar).
- * - `cursor` — a blinking vertical bar, meant to sit inline at the tail end
- *   of streamed text that is still being appended to.
- *
- * Accessibility: this indicator typically mounts and unmounts around a real
- * generation lifecycle (appears when a response starts, disappears once one
- * arrives) rather than emitting a stream of updates of its own, so it does
- * *not* route through `<lyra-live-region>`/`Announcer`
- * (`../../internal/announcer.js`) — that machinery exists to coalesce many
- * rapidly-changing announcements into one, and there is only ever a single
- * announcement here: the mount itself. A plain `role="status"` plus an
- * 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. 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.
- *
- * @customElement lyra-typing-indicator
- * @csspart base - The decorative (`aria-hidden`) wrapper around the animated shape.
- * @csspart dot - Each of the three dots in the `dots` variant.
- * @csspart pulse - The single pulsing dot in the `pulse` variant.
- * @csspart cursor - The blinking bar in the `cursor` variant.
- */
-export declare class LyraTypingIndicator extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    /** Which decorative presentation to render. */
-    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. 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;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-typing-indicator': LyraTypingIndicator;
-    }
-}
+export * from './typing-indicator.class.js';
+//# sourceMappingURL=typing-indicator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typing-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/typing-indicator/typing-indicator.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC"}