media-quality-radio-group

const quality = useQualityOptions();

<Menu.RadioGroup value={quality.value} onValueChange={quality.setValue}>
  <Menu.GroupLabel>Quality</Menu.GroupLabel>
  {quality.options.map((option) => (
    <Menu.RadioItem key={option.value} value={option.value} disabled={option.disabled}>
      {option.label}
      <Menu.ItemIndicator checked={option.value === quality.value} />
    </Menu.RadioItem>
  ))}
</Menu.RadioGroup>

<media-quality-radio-group>
  <template>
    <media-menu-radio-item>
      <span data-part="label"></span>
      <span data-part="tier"></span>
      <span data-part="badge"></span>
      <media-menu-item-indicator></media-menu-item-indicator>
    </media-menu-radio-item>
  </template>
</media-quality-radio-group>

media-quality-radio-group[data-availability="unavailable"] {
  display: none;
}