TextSwitcher

import {TextSwitcher} from '@wearables-ui-toolkit/mrbd';

function CaptureMode({mode}: {mode: string}) {
  return <TextSwitcher text={mode} />;
}

import {TextSwitcher} from '@wearables-ui-toolkit/mrbd';

function ConnectionStatus({status}: {status: string}) {
  return (
    <div className="status-row">
      <TextSwitcher
        className="status-switcher"
        text={status}
        noAnimationFirstView
      />
    </div>
  );
}

.status-row {
  display: flex;
  padding: var(--uit-spacing-large);
}

.status-switcher {
  flex: 1;
}

import {
  CornerRadius,
  RoundedRectangleShapeProvider,
  TextSwitcher,
  usePrefersReducedMotion,
} from '@wearables-ui-toolkit/mrbd';

const SHAPE = new RoundedRectangleShapeProvider(CornerRadius.SMALL);

function StepName({step}: {step: string}) {
  const prefersReducedMotion = usePrefersReducedMotion();
  return (
    <TextSwitcher
      text={step}
      shapeProvider={SHAPE}
      animated={!prefersReducedMotion}
    />
  );
}

• Without an aria-label, the root is a polite, atomic live region (aria-live="polite", aria-atomic="true"). This allows the settled value to be announced once.
• A non-empty aria-label suppresses the automatic live region. The label then owns the accessible name, and the application must provide any announcement of value changes so assistive technology receives the update.
• Caller-provided aria-live and aria-atomic values take precedence over the automatic values. Use aria-live="assertive" only when the update is urgent, or aria-live="off" when another element owns the announcement.
• The surface has no role and is not focusable. Connect it to the control or region whose state it reports, typically by setting an id on the switcher and referencing it with aria-describedby.
• A swap briefly makes the value invisible. Do not use TextSwitcher for content a user may be reading, because the transition would interrupt access to that content.

• Prefer TextSwitcher for a short value that benefits from visual continuity.
• Set noAnimationFirstView when a known initial value should appear settled.
• Give the surface an explicit width or a layout transition signature when a changing value would otherwise shift nearby content.
• Disable animation when the user prefers reduced motion.

• Avoid paragraphs, wrapped copy, or rapidly changing telemetry. The component displays one clipped line, and each change requires a complete crossfade.
• Avoid setting opacity or transition through style; the component owns those properties for its crossfade.
• Avoid wrapping the component in competing position or opacity animations, which can make the transition inconsistent.
• TextSwitcher does not accept children. Do not nest a container-like component, button, chip, tag, or page header inside it.
• Choose one owner for announcements. Avoid relying on the automatic announcement after supplying a label that disables it.