@aceshooting/lyra-ui 2.0.0 → 2.1.0

package/dist/components/stat/stat.d.ts

@@ -1,4 +1,4 @@
-import { type TemplateResult } from 'lit';
+import { type TemplateResult, type PropertyValues } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
 export type StatVariant = 'neutral' | 'success' | 'warning' | 'danger';
 export type StatGoodDirection = 'up' | 'down';
@@ -24,7 +24,9 @@ export interface StatRow {
  * @csspart icon - Container for the leading icon slot.
  * @csspart label - The label text.
  * @csspart value-row - Wrapper around the value and unit.
- * @csspart value - The value text.
+ * @csspart value - The value text. Accessibly labelled by the `label` part (via
+ *   `aria-labelledby`) whenever `label` is set, so tabbing directly to this
+ *   (focusable when `exactValue` is set) control still announces which metric it is.
  * @csspart unit - The unit text.
  * @csspart trend - The trend pill.
  * @csspart sub - Container for the `sub` attribute/slot.
@@ -34,7 +36,8 @@ export interface StatRow {
  * @csspart row - A single breakdown row (one per `rows` entry).
  * @csspart row-label - The label text of a breakdown row.
  * @csspart row-value - The value text of a breakdown row. Shows the row's `exactValue` (if any) as
- *   a hover/focus tooltip, same as the headline `value`.
+ *   a hover/focus tooltip, same as the headline `value`, and is accessibly labelled by its
+ *   `row-label` (via `aria-labelledby`) the same way the headline `value` is.
  */
 export declare class LyraStat extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
@@ -69,7 +72,10 @@ export declare class LyraStat extends LyraElement {
     private hasCaptionSlot;
     private hasSparkSlot;
     private hasSubSlot;
-    protected willUpdate(): void;
+    private readonly labelId;
+    private readonly valueId;
+    private rowLabelIds;
+    protected willUpdate(changed: PropertyValues): void;
     private onIconSlotChange;
     private onCaptionSlotChange;
     private onSparkSlotChange;

package/dist/components/stat/stat.js

@@ -9,7 +9,7 @@ import { property, state } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
 import { chevronIcon } from '../../internal/icons.js';
-import { srOnly } from '../../internal/a11y.js';
+import { nextId, srOnly } from '../../internal/a11y.js';
 import { styles } from './stat.styles.js';
 /**
  * `<lyra-stat>` — a KPI/stat card. First-party invention consolidating the
@@ -25,7 +25,9 @@ import { styles } from './stat.styles.js';
  * @csspart icon - Container for the leading icon slot.
  * @csspart label - The label text.
  * @csspart value-row - Wrapper around the value and unit.
- * @csspart value - The value text.
+ * @csspart value - The value text. Accessibly labelled by the `label` part (via
+ *   `aria-labelledby`) whenever `label` is set, so tabbing directly to this
+ *   (focusable when `exactValue` is set) control still announces which metric it is.
  * @csspart unit - The unit text.
  * @csspart trend - The trend pill.
  * @csspart sub - Container for the `sub` attribute/slot.
@@ -35,7 +37,8 @@ import { styles } from './stat.styles.js';
  * @csspart row - A single breakdown row (one per `rows` entry).
  * @csspart row-label - The label text of a breakdown row.
  * @csspart row-value - The value text of a breakdown row. Shows the row's `exactValue` (if any) as
- *   a hover/focus tooltip, same as the headline `value`.
+ *   a hover/focus tooltip, same as the headline `value`, and is accessibly labelled by its
+ *   `row-label` (via `aria-labelledby`) the same way the headline `value` is.
  */
 export class LyraStat extends LyraElement {
     constructor() {
@@ -74,6 +77,16 @@ export class LyraStat extends LyraElement {
         this.hasCaptionSlot = false;
         this.hasSparkSlot = false;
         this.hasSubSlot = false;
+        // Stable id pairing `[part='label']` with `[part='value']` via
+        // aria-labelledby, so a keyboard user tabbing straight to the (focusable,
+        // tooltip-bearing) value still gets an accessible name like "Revenue
+        // $1.2K" instead of the bare value.
+        this.labelId = nextId('stat-label');
+        this.valueId = `${this.labelId}-value`;
+        // One id per `rows` entry, regenerated only when the `rows` array itself is
+        // reassigned (not on every render) so `aria-labelledby` references stay
+        // stable across unrelated re-renders.
+        this.rowLabelIds = [];
         this.onIconSlotChange = (e) => {
             this.hasIcon = e.target.assignedElements({ flatten: true }).length > 0;
         };
@@ -88,16 +101,24 @@ export class LyraStat extends LyraElement {
         };
     }
     static { this.styles = [LyraElement.styles, styles, srOnly]; }
-    willUpdate() {
+    willUpdate(changed) {
         if (!this.hasUpdated) {
             this.hasIcon = Array.from(this.children).some((el) => !el.hasAttribute('slot'));
             this.hasCaptionSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'caption');
             this.hasSparkSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'spark');
             this.hasSubSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'sub');
         }
+        if (changed.has('rows')) {
+            this.rowLabelIds = this.rows.map(() => nextId('stat-row-label'));
+        }
     }
     render() {
-        const hasTrend = !isNaN(this.trend);
+        // Lit's built-in Number converter maps a removed/absent attribute to
+        // `null`, not NaN, even though the property is typed `number` — so
+        // `isNaN(this.trend)` alone is false for a cleared attribute and the pill
+        // would reappear showing a fabricated "unchanged, 0%". Treat null/undefined
+        // the same as NaN here instead of trusting the static type.
+        const hasTrend = this.trend != null && !isNaN(this.trend);
         const rawDirection = this.trend > 0 ? 'up' : this.trend < 0 ? 'down' : 'flat';
         const isGood = rawDirection === 'flat' ? null : rawDirection === this.goodDirection;
         // The trend pill previously rendered literal ▲/▼ glyphs — font-dependent
@@ -118,9 +139,14 @@ export class LyraStat extends LyraElement {
         <span part="icon" ?hidden=${!this.hasIcon}
           ><slot @slotchange=${this.onIconSlotChange}></slot
         ></span>
-        <span part="label">${this.label}</span>
+        <span part="label" id=${this.labelId}>${this.label}</span>
         <div part="value-row">
-          <span part="value" title=${this.exactValue || nothing} tabindex=${this.exactValue ? '0' : nothing}
+          <span
+            part="value"
+            id=${this.valueId}
+            title=${this.exactValue || nothing}
+            tabindex=${this.exactValue ? '0' : nothing}
+            aria-labelledby=${this.label ? `${this.labelId} ${this.valueId}` : nothing}
             >${this.value}</span
           >
           <span part="unit">${this.unit}</span>
@@ -136,7 +162,7 @@ export class LyraStat extends LyraElement {
             </span>`
             : nothing}
         <div part="sub" ?hidden=${!hasSub}>
-          ${this.sub}<slot name="sub" @slotchange=${this.onSubSlotChange}></slot>
+          <slot name="sub" @slotchange=${this.onSubSlotChange}>${this.sub}</slot>
         </div>
         <div part="spark" ?hidden=${!this.hasSparkSlot}>
           <slot name="spark" @slotchange=${this.onSparkSlotChange}></slot>
@@ -145,17 +171,23 @@ export class LyraStat extends LyraElement {
           <slot name="caption" @slotchange=${this.onCaptionSlotChange}>${this.caption}</slot>
         </div>
         <div part="rows" ?hidden=${this.rows.length === 0}>
-          ${this.rows.map((row) => html `
+          ${this.rows.map((row, i) => {
+            const rowLabelId = this.rowLabelIds[i];
+            const rowValueId = `${rowLabelId}-value`;
+            return html `
               <div part="row">
-                <span part="row-label">${row.label}</span>
+                <span part="row-label" id=${rowLabelId}>${row.label}</span>
                 <span
                   part="row-value"
+                  id=${rowValueId}
                   title=${row.exactValue || nothing}
                   tabindex=${row.exactValue ? '0' : nothing}
+                  aria-labelledby=${row.label ? `${rowLabelId} ${rowValueId}` : nothing}
                   >${row.value}</span
                 >
               </div>
-            `)}
+            `;
+        })}
         </div>
       </div>
     `;
@@ -212,4 +244,7 @@ __decorate([
 __decorate([
     state()
 ], LyraStat.prototype, "hasSubSlot", void 0);
+__decorate([
+    state()
+], LyraStat.prototype, "rowLabelIds", void 0);
 defineElement('stat', LyraStat);

package/dist/components/stream-status/stream-status.d.ts

@@ -18,12 +18,20 @@ export type StreamStatusPhase = 'idle' | 'connecting' | 'streaming' | 'stalled';
  *
  * Internally, an inactivity timer runs only while `phase === 'streaming'`.
  * It's (re)armed whenever the phase transitions to `'streaming'` (directly,
- * or via `recordActivity()` recovering from `'stalled'`) and on every
- * subsequent `recordActivity()` call while already streaming; it's disarmed
- * the instant `phase` becomes anything else, including a host-driven
- * reassignment away from `'streaming'` — so a stale timer can never fire a
- * stall transition after the host has already moved on. If it ever fires,
- * `phase` becomes `'stalled'` and `lyra-stall` is dispatched.
+ * or via `recordActivity()` recovering from `'stalled'`), on every
+ * subsequent `recordActivity()` call while already streaming, whenever
+ * `stall-threshold-ms` itself changes while already streaming (the new
+ * value takes effect immediately, the same way `<lyra-toast-item>`'s
+ * `duration` re-applies mid-flight, rather than waiting for the next
+ * `recordActivity()`/phase change), and whenever this element (re)connects
+ * to the DOM while `phase` is still `'streaming'` (a disconnect always
+ * disarms it, so moving the element elsewhere in the page — disconnect then
+ * reconnect with `phase` unchanged — must resume detection rather than
+ * silently disabling it for the rest of the streaming session). It's
+ * disarmed the instant `phase` becomes anything else, including a
+ * host-driven reassignment away from `'streaming'` — so a stale timer can
+ * never fire a stall transition after the host has already moved on. If it
+ * ever fires, `phase` becomes `'stalled'` and `lyra-stall` is dispatched.
  *
  * `phase` remains a fully public, directly settable property at all times —
  * a host can assign `'stalled'` (or any other phase) itself as a manual
@@ -45,10 +53,15 @@ export type StreamStatusPhase = 'idle' | 'connecting' | 'streaming' | 'stalled';
  * routing through the throttled announcer instead of writing to a live
  * region on every call. Entering `'stalled'` announces with `mode="assertive"`
  * (a stall can need the user's attention, e.g. before they give up and
- * navigate away); recovering back out of `'stalled'` announces with
- * `mode="polite"` (good news doesn't need to interrupt). The decorative
- * indicator dot is `aria-hidden` — it's a color/motion cue only, never the
- * sole carrier of state.
+ * navigate away); leaving `'stalled'` always announces with `mode="polite"`
+ * (good news doesn't need to interrupt), but the *wording* depends on where
+ * it lands: `"Connection restored."` only when the destination is
+ * `'streaming'` (a genuine recovery), or a neutral `"No longer stalled."`
+ * when the destination is `'idle'`/`'connecting'` instead — that's the host
+ * giving up on the stream, not the stream recovering, and a screen-reader
+ * user must never be told the opposite of what a sighted user sees on
+ * screen. The decorative indicator dot is `aria-hidden` — it's a
+ * color/motion cue only, never the sole carrier of state.
  *
  * Visual: `'stalled'` is styled as a warning, not a danger — a stall is
  * usually recoverable (the stream may resume on its own, or the host's own
@@ -62,7 +75,7 @@ export type StreamStatusPhase = 'idle' | 'connecting' | 'streaming' | 'stalled';
  * @slot - Custom copy shown only while `phase="stalled"` (e.g. "Taking longer than usual…"). A sensible built-in default is used when nothing is slotted.
  * @slot actions - A stop/retry button row. Always present in the template regardless of `phase` — visibility is driven purely by whether anything is slotted, not by `phase`; what to put here, and when, is entirely the host's call.
  * @event lyra-stall - Fired whenever `phase` transitions into `'stalled'` from anything else (timer-driven, or a direct host assignment).
- * @event lyra-recover - Fired whenever `phase` transitions out of `'stalled'` to anything else (via `recordActivity()`, or a direct host assignment).
+ * @event lyra-recover - Fired whenever `phase` transitions out of `'stalled'` to anything else (via `recordActivity()`, or a direct host assignment) — fired unconditionally regardless of destination phase, even though the accompanying announcement's wording varies (see the class doc's "Accessibility" section).
  * @csspart base - The root layout container.
  * @csspart indicator - The decorative (`aria-hidden`) status dot.
  * @csspart message - Wrapper around the default slot; only rendered while `phase="stalled"`.
@@ -78,9 +91,11 @@ export declare class LyraStreamStatus extends LyraElement {
     stallThresholdMs: number;
     private stallTimer?;
     private hasActionsSlot;
+    private hasMessageContent;
     private liveRegion?;
     protected willUpdate(): void;
     protected updated(changed: PropertyValues): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     /**
      * Call on every semantic (non-heartbeat) frame received while streaming.
@@ -101,6 +116,7 @@ export declare class LyraStreamStatus extends LyraElement {
     private announceTransition;
     private hasSlotted;
     private onActionsSlotChange;
+    private onMessageSlotChange;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/stream-status/stream-status.js

@@ -13,6 +13,26 @@ import { styles } from './stream-status.styles.js';
 const DEFAULT_STALL_MESSAGE = 'Taking longer than usual…';
 const STALL_ANNOUNCEMENT = 'Connection stalled.';
 const RECOVER_ANNOUNCEMENT = 'Connection restored.';
+// Used instead of RECOVER_ANNOUNCEMENT when a stall is left behind by moving
+// to 'idle'/'connecting' rather than back to 'streaming' -- see
+// announceTransition()'s caller in onPhaseChanged() for why "restored" would
+// be actively misleading in that case.
+const STALL_CLEARED_ANNOUNCEMENT = 'No longer stalled.';
+// The default slot's stalled-message content is often plain text with no
+// wrapping element at all (see the CustomStalledMessage story), so an
+// Element-only check never counts it, and ordinary indented-markup
+// whitespace (a newline + indentation before a slotted `actions` button, as
+// in the DefaultStalledMessage story) must not count either -- native <slot>
+// fallback content is suppressed by *any* assigned node, whitespace or not,
+// which previously left the message area blank in exactly that common case.
+// Mirrors lyra-citation-badge's identical isRealPreviewNode: a node counts as
+// real message content if it's an element not assigned to some other named
+// slot (e.g. `actions`), or non-whitespace text.
+function isRealMessageNode(n) {
+    return n.nodeType === Node.ELEMENT_NODE
+        ? !n.hasAttribute('slot')
+        : (n.textContent ?? '').trim().length > 0;
+}
 /**
  * `<lyra-stream-status>` — a compact status indicator for a single streaming
  * connection (SSE, WebSocket, long-poll, …), with built-in heartbeat-aware
@@ -29,12 +49,20 @@ const RECOVER_ANNOUNCEMENT = 'Connection restored.';
  *
  * Internally, an inactivity timer runs only while `phase === 'streaming'`.
  * It's (re)armed whenever the phase transitions to `'streaming'` (directly,
- * or via `recordActivity()` recovering from `'stalled'`) and on every
- * subsequent `recordActivity()` call while already streaming; it's disarmed
- * the instant `phase` becomes anything else, including a host-driven
- * reassignment away from `'streaming'` — so a stale timer can never fire a
- * stall transition after the host has already moved on. If it ever fires,
- * `phase` becomes `'stalled'` and `lyra-stall` is dispatched.
+ * or via `recordActivity()` recovering from `'stalled'`), on every
+ * subsequent `recordActivity()` call while already streaming, whenever
+ * `stall-threshold-ms` itself changes while already streaming (the new
+ * value takes effect immediately, the same way `<lyra-toast-item>`'s
+ * `duration` re-applies mid-flight, rather than waiting for the next
+ * `recordActivity()`/phase change), and whenever this element (re)connects
+ * to the DOM while `phase` is still `'streaming'` (a disconnect always
+ * disarms it, so moving the element elsewhere in the page — disconnect then
+ * reconnect with `phase` unchanged — must resume detection rather than
+ * silently disabling it for the rest of the streaming session). It's
+ * disarmed the instant `phase` becomes anything else, including a
+ * host-driven reassignment away from `'streaming'` — so a stale timer can
+ * never fire a stall transition after the host has already moved on. If it
+ * ever fires, `phase` becomes `'stalled'` and `lyra-stall` is dispatched.
  *
  * `phase` remains a fully public, directly settable property at all times —
  * a host can assign `'stalled'` (or any other phase) itself as a manual
@@ -56,10 +84,15 @@ const RECOVER_ANNOUNCEMENT = 'Connection restored.';
  * routing through the throttled announcer instead of writing to a live
  * region on every call. Entering `'stalled'` announces with `mode="assertive"`
  * (a stall can need the user's attention, e.g. before they give up and
- * navigate away); recovering back out of `'stalled'` announces with
- * `mode="polite"` (good news doesn't need to interrupt). The decorative
- * indicator dot is `aria-hidden` — it's a color/motion cue only, never the
- * sole carrier of state.
+ * navigate away); leaving `'stalled'` always announces with `mode="polite"`
+ * (good news doesn't need to interrupt), but the *wording* depends on where
+ * it lands: `"Connection restored."` only when the destination is
+ * `'streaming'` (a genuine recovery), or a neutral `"No longer stalled."`
+ * when the destination is `'idle'`/`'connecting'` instead — that's the host
+ * giving up on the stream, not the stream recovering, and a screen-reader
+ * user must never be told the opposite of what a sighted user sees on
+ * screen. The decorative indicator dot is `aria-hidden` — it's a
+ * color/motion cue only, never the sole carrier of state.
  *
  * Visual: `'stalled'` is styled as a warning, not a danger — a stall is
  * usually recoverable (the stream may resume on its own, or the host's own
@@ -73,7 +106,7 @@ const RECOVER_ANNOUNCEMENT = 'Connection restored.';
  * @slot - Custom copy shown only while `phase="stalled"` (e.g. "Taking longer than usual…"). A sensible built-in default is used when nothing is slotted.
  * @slot actions - A stop/retry button row. Always present in the template regardless of `phase` — visibility is driven purely by whether anything is slotted, not by `phase`; what to put here, and when, is entirely the host's call.
  * @event lyra-stall - Fired whenever `phase` transitions into `'stalled'` from anything else (timer-driven, or a direct host assignment).
- * @event lyra-recover - Fired whenever `phase` transitions out of `'stalled'` to anything else (via `recordActivity()`, or a direct host assignment).
+ * @event lyra-recover - Fired whenever `phase` transitions out of `'stalled'` to anything else (via `recordActivity()`, or a direct host assignment) — fired unconditionally regardless of destination phase, even though the accompanying announcement's wording varies (see the class doc's "Accessibility" section).
  * @csspart base - The root layout container.
  * @csspart indicator - The decorative (`aria-hidden`) status dot.
  * @csspart message - Wrapper around the default slot; only rendered while `phase="stalled"`.
@@ -89,14 +122,23 @@ export class LyraStreamStatus extends LyraElement {
          *  before this component declares it stalled. */
         this.stallThresholdMs = 10000;
         this.hasActionsSlot = false;
+        // Seeded from light-DOM childNodes in willUpdate() (mirrors hasActionsSlot
+        // above), then kept current via onMessageSlotChange() -- see
+        // isRealMessageNode()'s doc comment for why native <slot> fallback content
+        // can't be relied on for the default stalled-message text.
+        this.hasMessageContent = false;
         this.onActionsSlotChange = (e) => {
             this.hasActionsSlot = e.target.assignedElements({ flatten: true }).length > 0;
         };
+        this.onMessageSlotChange = (e) => {
+            this.hasMessageContent = e.target.assignedNodes({ flatten: true }).some(isRealMessageNode);
+        };
     }
     static { this.styles = [LyraElement.styles, styles]; }
     willUpdate() {
         if (!this.hasUpdated) {
             this.hasActionsSlot = this.hasSlotted('actions');
+            this.hasMessageContent = Array.from(this.childNodes).some(isRealMessageNode);
         }
     }
     // `changed.get('phase')` is `undefined` on the very first update, for the
@@ -107,10 +149,36 @@ export class LyraStreamStatus extends LyraElement {
     // skips firing an event/announcement for whatever phase this element
     // happens to mount with, while still arming the stall timer below if it
     // mounts already `'streaming'`.
+    //
+    // The `else if` below only matters while `phase` itself didn't also change
+    // in this same update -- if it did, onPhaseChanged() above already
+    // (re)armed the timer with the current `stallThresholdMs`, so re-arming it
+    // again here would just be redundant, not wrong, but the `else` skips that
+    // double work.
     updated(changed) {
         if (changed.has('phase')) {
             this.onPhaseChanged(changed.get('phase'));
         }
+        else if (changed.has('stallThresholdMs') && this.phase === 'streaming') {
+            // Unlike `phase` itself, `stallThresholdMs` has no dedicated handler --
+            // the already-armed timer was scheduled against the *old* value and
+            // keeps counting down against it otherwise, so a shortened (or
+            // lengthened) threshold would silently have no effect until the next
+            // recordActivity() call or phase transition happened to re-arm it.
+            this.armStallTimer();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // A disconnect always disarms the timer (see disconnectedCallback()
+        // below), but reparenting this element elsewhere in the page while still
+        // `'streaming'` fires disconnectedCallback then connectedCallback with
+        // `phase` unchanged -- no `updated()` cycle runs in between, so nothing
+        // else would ever re-arm it. Without this, a reparent mid-stream would
+        // permanently disable stall detection for the rest of that streaming
+        // session.
+        if (this.phase === 'streaming')
+            this.armStallTimer();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -150,8 +218,15 @@ export class LyraStreamStatus extends LyraElement {
             this.announceTransition('assertive', STALL_ANNOUNCEMENT);
         }
         else if (previous === 'stalled' && this.phase !== 'stalled') {
+            // `lyra-recover` fires unconditionally -- a host may still want the
+            // event for any exit from 'stalled' -- but the *announced text* must
+            // not claim the connection was "restored" when the destination is
+            // 'idle'/'connecting': that's the host abandoning the stream, not it
+            // recovering, and telling a screen-reader user otherwise would be the
+            // opposite of what a sighted user sees on screen.
             this.emit('lyra-recover');
-            this.announceTransition('polite', RECOVER_ANNOUNCEMENT);
+            const text = this.phase === 'streaming' ? RECOVER_ANNOUNCEMENT : STALL_CLEARED_ANNOUNCEMENT;
+            this.announceTransition('polite', text);
         }
     }
     armStallTimer() {
@@ -185,7 +260,11 @@ export class LyraStreamStatus extends LyraElement {
       <div part="base">
         <span part="indicator" aria-hidden="true"></span>
         ${this.phase === 'stalled'
-            ? html `<div part="message"><slot>${DEFAULT_STALL_MESSAGE}</slot></div>`
+            ? html `<div part="message">
+              <slot @slotchange=${this.onMessageSlotChange}></slot>${this.hasMessageContent
+                ? nothing
+                : DEFAULT_STALL_MESSAGE}
+            </div>`
             : nothing}
         <div part="actions" ?hidden=${!this.hasActionsSlot}>
           <slot name="actions" @slotchange=${this.onActionsSlotChange}></slot>
@@ -204,6 +283,9 @@ __decorate([
 __decorate([
     state()
 ], LyraStreamStatus.prototype, "hasActionsSlot", void 0);
+__decorate([
+    state()
+], LyraStreamStatus.prototype, "hasMessageContent", void 0);
 __decorate([
     query('lyra-live-region')
 ], LyraStreamStatus.prototype, "liveRegion", void 0);

package/dist/components/streaming-text/streaming-text.d.ts

@@ -29,8 +29,10 @@ export declare function looksLikeMarkdown(text: string): boolean;
  * the throttle and flush immediately instead of waiting out the window: the
  * very first `content` assignment after mount (so an already-complete
  * message never shows an artificial startup delay), and any transition of
- * `streaming` from `true` to `false` (so the final chunk of a finished
- * stream can never be left stranded mid-window).
+ * `streaming` between `true` and `false` in either direction (so the final
+ * chunk of a finished stream can never be left stranded mid-window, and a
+ * stream restarting on a reused element can never keep showing the
+ * previous stream's stale final content for the length of the window).
  *
  * `markdown` is a tri-state property, not a plain boolean: left unset (the
  * default), it auto-detects via a lightweight regex heuristic (see
@@ -82,12 +84,16 @@ export declare class LyraStreamingText extends LyraElement {
      *  `false` force that rendering mode regardless of content. */
     markdown?: boolean;
     private displayedContent;
+    private lastScannedContent?;
+    private lastScannedResult;
     private readonly coalescer;
     constructor();
     protected willUpdate(changed: PropertyValues): void;
     disconnectedCallback(): void;
     /** Whether Markdown mode is actually in effect right now, resolving the
-     *  tri-state `markdown` property against `looksLikeMarkdown`. */
+     *  tri-state `markdown` property against the memoized `looksLikeMarkdown`
+     *  result for the currently-displayed content (see `lastScannedContent`/
+     *  `lastScannedResult` above). */
     private get effectiveMarkdown();
     render(): TemplateResult;
 }

package/dist/components/streaming-text/streaming-text.js

@@ -86,8 +86,10 @@ const optionalBooleanConverter = {
  * the throttle and flush immediately instead of waiting out the window: the
  * very first `content` assignment after mount (so an already-complete
  * message never shows an artificial startup delay), and any transition of
- * `streaming` from `true` to `false` (so the final chunk of a finished
- * stream can never be left stranded mid-window).
+ * `streaming` between `true` and `false` in either direction (so the final
+ * chunk of a finished stream can never be left stranded mid-window, and a
+ * stream restarting on a reused element can never keep showing the
+ * previous stream's stale final content for the length of the window).
  *
  * `markdown` is a tri-state property, not a plain boolean: left unset (the
  * default), it auto-detects via a lightweight regex heuristic (see
@@ -140,6 +142,7 @@ export class LyraStreamingText extends LyraElement {
         // The coalesced value actually rendered -- lags `content` by up to
         // `coalesceMs` (or zero, for the immediate-flush cases documented above).
         this.displayedContent = '';
+        this.lastScannedResult = false;
         // Built in the constructor (not a class-field initializer) so it reads
         // `this.coalesceMs` only after that property's own field initializer has
         // already run and set the declared default -- same ordering rationale as
@@ -162,23 +165,35 @@ export class LyraStreamingText extends LyraElement {
             // coalescing window technically applies to it.
             this.coalescer.announce(this.content, { force: !this.hasUpdated });
         }
-        // A stream finishing must never leave its final chunk stranded inside an
-        // in-progress coalescing window -- force whatever `content` currently
-        // holds through immediately. `changed.get('streaming')` is only defined
-        // for a real transition (never the initial mount value, per Lit's
-        // documented first-change semantics), so this can't misfire on connect.
-        if (changed.has('streaming') && changed.get('streaming') === true && !this.streaming) {
+        // Neither a stream finishing nor a stream (re)starting on a reused
+        // element may leave stale content stranded inside an in-progress
+        // coalescing window -- force whatever `content` currently holds through
+        // immediately in both directions. Without the restart side of this, a
+        // reused element would keep showing the *previous* stream's final
+        // content for up to a full coalesce-ms window after a new stream had
+        // already begun. `changed.get('streaming')` is only defined for a real
+        // transition (never the initial mount value, per Lit's documented
+        // first-change semantics), so this can't misfire on connect.
+        if (changed.has('streaming') &&
+            changed.get('streaming') !== undefined &&
+            changed.get('streaming') !== this.streaming) {
             this.coalescer.announce(this.content, { force: true });
         }
+        if (changed.has('displayedContent') && this.displayedContent !== this.lastScannedContent) {
+            this.lastScannedContent = this.displayedContent;
+            this.lastScannedResult = looksLikeMarkdown(this.displayedContent);
+        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.coalescer.cancel();
     }
     /** Whether Markdown mode is actually in effect right now, resolving the
-     *  tri-state `markdown` property against `looksLikeMarkdown`. */
+     *  tri-state `markdown` property against the memoized `looksLikeMarkdown`
+     *  result for the currently-displayed content (see `lastScannedContent`/
+     *  `lastScannedResult` above). */
     get effectiveMarkdown() {
-        return this.markdown ?? looksLikeMarkdown(this.displayedContent);
+        return this.markdown ?? this.lastScannedResult;
     }
     render() {
         return html `

package/dist/components/streaming-text/streaming-text.styles.js

@@ -5,10 +5,11 @@ export const styles = css `
     overflow-wrap: break-word;
     /* Not derived from any --lyra-* token in tokens.styles.ts -- there's no
        shared "inline cursor bar" token to resolve through, so this component
-       defines its own scoped custom property, exactly the way
+       defines its own scoped custom properties, exactly the way
        lyra-typing-indicator's --lyra-typing-cursor-width/-height do for its
        own (near-identical) blinking cursor. */
     --lyra-streaming-text-cursor-width: 0.125rem;
+    --lyra-streaming-text-cursor-height: 1em;
   }
 
   [part='base'] {
@@ -30,7 +31,7 @@ export const styles = css `
     display: inline-block;
     vertical-align: text-bottom;
     inline-size: var(--lyra-streaming-text-cursor-width);
-    block-size: 1em;
+    block-size: var(--lyra-streaming-text-cursor-height);
     margin-inline-start: var(--lyra-space-xs);
     background: currentColor;
     border-radius: var(--lyra-streaming-text-cursor-width);

package/dist/components/switch/switch.d.ts

@@ -1,4 +1,4 @@
-import { type TemplateResult, type PropertyValues } from 'lit';
+import { type TemplateResult } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
 /**
  * `<lyra-switch>` — a boolean toggle-switch form control. Structurally the
@@ -27,21 +27,66 @@ import { LyraElement } from '../../internal/lyra-element.js';
 export declare class LyraSwitch extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
     static formAssociated: boolean;
-    checked: boolean;
-    disabled: boolean;
-    required: boolean;
-    name: string;
-    value: string;
+    static properties: {
+        checked: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        name: {
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        value: {
+            noAccessor: boolean;
+        };
+    };
     private hasLabelSlot;
     private internals;
+    private validityController;
     private _defaultChecked;
     private _defaultCaptured;
+    private _fieldsetDisabled;
+    private _name;
+    private _checked;
+    private _disabled;
+    private _required;
+    private _value;
+    /** Whether the control is disabled explicitly or by an ancestor fieldset. */
+    get effectiveDisabled(): boolean;
+    get checked(): boolean;
+    set checked(next: boolean);
+    get disabled(): boolean;
+    set disabled(next: boolean);
+    /** The form submission key, reflected synchronously for native form APIs. */
+    get name(): string;
+    set name(next: string);
+    get required(): boolean;
+    set required(next: boolean);
+    get value(): string;
+    set value(next: string);
     constructor();
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
     connectedCallback(): void;
     protected willUpdate(): void;
     private updateValidity;
-    protected updated(changed: PropertyValues): void;
+    private syncFormState;
     formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null, _mode?: 'restore' | 'autocomplete'): void;
     formDisabledCallback(disabled: boolean): void;
     checkValidity(): boolean;
     reportValidity(): boolean;