Version indicator for rendered examples

#4400 changed the Docs to always render the React example if available, regardless of the selected source code type. This causes some issues.

• Currently it isn't indicated to the users in any way that the rendered example doesn't match the source code selection.
• You can still view e.g. the Flow example by clicking the "Open in a new tab" button at the corner when you have Flow selected for displaying the source code, but it likewise isn't indicated in any way that this is necessary, or that it possibly opens something else than what you already see.
• If you do open to a new tab, what you see there doesn't indicate which version it belongs to either, or whether it matches what you saw in the embedded version. You can't easily decipher this from the new URL either.
• You can't even see the version selection without first clicking 'Show code', so you might be initially looking at an embedded React example and accidentally open a Lit example to a new tab when you are actually trying to check out how the feature behaves in Flow.
• Presumably if one of these versions didn't exist at all, it would open some other version in the new tab without the user being none the wiser.

E.g. the first example about Date Time Picker component currently links to these pages: Lit, React, Flow

The Lit URL above doesn't even mention Lit, and the Flow URL doesn't mention Flow but it does mention React even if it's apparently still the Flow example in reality.

Obviously none of this is very ideal and it's confusing to users and staff members both.

• It would be nice to have some small indicator in the embedded example already on what version is rendered there -- if I understood correctly it's not even always React, it might still be Lit or Flow of there is no React version available. This indicator could be e.g. an icon or a letter.

  • Bonus points if there would be an info button or a tooltip or something else that explains what the indicator means -- and, if that's indeed the case, why the displayed version doesn't match the selected version in the code examples. If this explanation is very long, it could link to some FAQ instead.

• It would also be nice to have some small indicator in the opened tab on which version was actually opened there.

  • Bonus points if the indicator could be clickable to expand a version list that would indicate which other versions are actually available and redirect you there upon selection.

If you think this issue is important, add a 👍 reaction to help the community and maintainers prioritize this issue.

Start by comparing the linked Date Time Picker Lit, React, and Flow example URLs with the embedded example, the Show code selector, and the Open in a new tab action. Done means users can identify the version rendered in the embedded and opened examples, understand when it differs from their selection, and see which versions are available.