TextView

import {TextColor, TextStyle, TextView} from '@wearables-ui-toolkit/mrbd';

function TrailSummary() {
  return (
    <div className="trail-summary">
      <TextView as="h2" textStyle={TextStyle.BODY2_EMPHASIZED}>
        Trail conditions
      </TextView>
      <TextView as="p" textStyle={TextStyle.BODY2}>
        The north overlook is open.
      </TextView>
      <TextView
        as="p"
        textStyle={TextStyle.META2}
        textColor={TextColor.SECONDARY}>
        UPDATED JUST NOW
      </TextView>
    </div>
  );
}

.trail-summary {
  display: grid;
  gap: var(--uit-spacing-med-lg);
}

import type {ReactNode} from 'react';
import {TextColor, TextStyle, TextView} from '@wearables-ui-toolkit/mrbd';

function RouteSection({children}: {children: ReactNode}) {
  return (
    <section aria-labelledby="route-heading">
      <TextView
        id="route-heading"
        as="h3"
        textStyle={TextStyle.LABEL_EMPHASIZED}>
        Route
      </TextView>
      <TextView
        as="p"
        textStyle={TextStyle.META1}
        textColor={TextColor.SECONDARY}>
        {children}
      </TextView>
    </section>
  );
}

• Choose as from the document structure the content needs, rather than from its visual appearance. Pairing a heading element with a body appearance is a supported and typically preferred way to preserve the page outline.
• TextView adds no role or accessible name. The application owns the semantics and accessible relationships for the rendered text.
• Forwarded id, aria-*, data-*, role, and tabIndex props allow the text to participate in relationships such as aria-labelledby and aria-describedby.
• TextViewProps does not include htmlFor, so as="label" cannot associate the component with a form control through that attribute. Use aria-labelledby, or render a native <label> and apply the appearance class directly, so the control receives an accessible label.
• Decorative text must be marked aria-hidden by the application so assistive technology does not announce it. TextView does not hide content automatically.

• Assign an explicit textStyle to each text view so its role remains clear if the default changes or the composition evolves.
• Prefer body, label, and metadata appearances for routine hierarchy. Reserve heading, display, and numeral appearances for content that needs that visual emphasis.
• Use as="p" and heading elements with a column layout and spacing tokens for stacked text. This gives the application predictable semantics and spacing.
• Use className for layout, spacing, and wrapping, and use component props for appearance and semantic color.

• Avoid literal font family, size, weight, line height, letter spacing, or color values that imitate a toolkit appearance. Semantic typography and color choices keep display rendering consistent.
• Do not apply the secondary color token without the class that provides its required blend, and do not try to cancel that blend with inline mixBlendMode. The additive-light display requires both parts.
• Avoid placing adjacent default inline text views when the content needs visual separation; use layout and spacing tokens instead.
• Prefer the component designed for clamping or truncation instead of reshaping text through style.