Media

DIL source

<box gap={3}>
  <title>Room to explore.</title>
  <carousel>
    <carousel-item><AsyncImage query="mountain landscape" /></carousel-item>
    <carousel-item><AsyncImage query="butterfly" /></carousel-item>
  </carousel>
  <caption>Offline illustrations. No network request required.</caption>
</box>

AsyncImage.query supplies the accessible description and selects an original offline geometric illustration. It is not an image-search or network-fetch API. Its aspect-ratio frame remains in place if decoding fails.

carousel contains carousel-item children. The stock carousel includes labelled previous/next controls and keyboard behavior. Give image queries descriptive text rather than a generic placeholder.

For real media services, register a trusted React image component in Shadow DOM or host mode and validate its URLs at the application boundary.