#Streaming Text

Maintains a stable reading region while content arrives incrementally and distinguishes streaming, paused, complete, and failure states.

npm install @a3s-lab/ui@0.4.1

<output class="streaming-text" data-state="streaming" aria-live="polite">
  <span data-streaming-content>Checking package contracts and visual states</span><span data-streaming-status>Receiving verified output…</span>
</output>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

<output class="streaming-text" data-state="streaming" aria-live="polite">
  <span data-streaming-content>Checking package contracts and visual states</span><span data-streaming-status>Receiving verified output…</span>
</output>

#Standalone controller

import "@a3s-lab/ui/runtime";
import "@a3s-lab/ui/streaming-text";

const component = document.querySelector(".streaming-text");
component.getState();

The controller is idempotent; the complete package can instead import @a3s-lab/ui/all once. The host performs permission and business validation through cancelable before-* events.

#Contract

#Product boundary

It opens no network connection, parses no rich text, and never scrolls a parent automatically. Transport, abort, retry, and trusted rendering belong to the host.

The component publishes a reusable interaction boundary only. Data fetching, persistence, permission, trusted content, and business entities remain host-owned.

#Accessibility

Updates use a polite live region and reduced motion retains a static status cue. Completion and failure have readable text rather than relying on a blinking caret.