Streamgraph traffic card

<article class="cmp-streamgraph-traffic-card cmp-atlas" data-state="idle" data-variant="0">
  <header>
    <span>Traffic charts</span
    ><button type="button" data-primary aria-pressed="false">Live view</button>
  </header>
  <div class="cmp-atlas__metric"><b>84%</b><span data-output>+12.8% this cycle</span></div>
  <div class="cmp-atlas__chart">
    <button
      style="--i: 0; --v: 35"
      type="button"
      data-choice="0"
      aria-pressed="true"
      aria-label="Inspect data point 1"
    ></button
    ><button
      style="--i: 1; --v: 52"
      type="button"
      data-choice="1"
      aria-pressed="false"
      aria-label="Inspect data point 2"
    ></button
    ><button
      style="--i: 2; --v: 69"
      type="button"
      data-choice="2"
      aria-pressed="false"
      aria-label="Inspect data point 3"
    ></button
    ><button
      style="--i: 3; --v: 86"
      type="button"
      data-choice="3"
      aria-pressed="false"
      aria-label="Inspect data point 4"
    ></button
    ><button
      style="--i: 4; --v: 42"
      type="button"
      data-choice="4"
      aria-pressed="false"
      aria-label="Inspect data point 5"
    ></button
    ><button
      style="--i: 5; --v: 59"
      type="button"
      data-choice="5"
      aria-pressed="false"
      aria-label="Inspect data point 6"
    ></button
    ><button
      style="--i: 6; --v: 76"
      type="button"
      data-choice="6"
      aria-pressed="false"
      aria-label="Inspect data point 7"
    ></button
    ><button
      style="--i: 7; --v: 93"
      type="button"
      data-choice="7"
      aria-pressed="false"
      aria-label="Inspect data point 8"
    ></button
    ><button
      style="--i: 8; --v: 49"
      type="button"
      data-choice="8"
      aria-pressed="false"
      aria-label="Inspect data point 9"
    ></button
    ><button
      style="--i: 9; --v: 66"
      type="button"
      data-choice="9"
      aria-pressed="false"
      aria-label="Inspect data point 10"
    ></button
    ><button
      style="--i: 10; --v: 83"
      type="button"
      data-choice="10"
      aria-pressed="false"
      aria-label="Inspect data point 11"
    ></button
    ><button
      style="--i: 11; --v: 39"
      type="button"
      data-choice="11"
      aria-pressed="false"
      aria-label="Inspect data point 12"
    ></button>
  </div>
  <div class="cmp-atlas__choices">
    <button type="button" data-choice="0" aria-pressed="true">Now</button
    ><button type="button" data-choice="1" aria-pressed="false">7 days</button
    ><button type="button" data-choice="2" aria-pressed="false">30 days</button>
  </div>
  <p data-status aria-live="polite">Current data view selected</p>
</article>