Size and stock selector

<section class="cmp-size-stock" aria-labelledby="cmp-size-stock-title">
  <header>
    <div>
      <span>Choose your fit</span>
      <h2 id="cmp-size-stock-title">Studio shell · size</h2>
    </div>
    <a href="#size-guide">Size guide</a>
  </header>
  <div class="cmp-size-stock__options" role="radiogroup" aria-label="Product size">
    <button
      type="button"
      role="radio"
      aria-checked="false"
      tabindex="-1"
      data-size="XS"
      data-stock="4"
    >
      XS<small>4 left</small>
    </button>
    <button
      type="button"
      role="radio"
      aria-checked="true"
      tabindex="0"
      data-size="S"
      data-stock="12"
    >
      S<small>Ready</small>
    </button>
    <button
      type="button"
      role="radio"
      aria-checked="false"
      tabindex="-1"
      data-size="M"
      data-stock="8"
    >
      M<small>8 left</small>
    </button>
    <button
      type="button"
      role="radio"
      aria-checked="false"
      tabindex="-1"
      data-size="L"
      data-stock="0"
    >
      L<small>Sold out</small>
    </button>
    <button
      type="button"
      role="radio"
      aria-checked="false"
      tabindex="-1"
      data-size="XL"
      data-stock="2"
    >
      XL<small>2 left</small>
    </button>
  </div>
  <div class="cmp-size-stock__result">
    <span data-result>Size S selected · 12 in stock</span
    ><button type="button" data-restock hidden>Notify me when size L returns</button>
  </div>
  <span class="cmp-size-stock__status" aria-live="polite"></span>
</section>