Improve Browser Support for design system and primitive Web Components

[NoelDeMartin]

As part of #769, a bunch of Web Components have been implemented using newer browser APIs. However, some of them may not be available in all supported browsers.

Before looking into this, though, we still have to consider whether we can use 3rd party components from Web Awesome or other libraries. If we do, maybe we can end up removing all the new functionality that relies on unsupported APIs.

These are some of the APIs being used:

• CSS anchor positioning
• :state() CSS pseudo-class
• Popover API
• <dialog> element

[timea-solid]

I would like to understand what browsers we are loosing if we use these features.
From our configs, we are now supporting:

Babel

Targets browsers >1% share, last 3 versions, actively maintained.
Optional TypeScript preset.

TypeScript

Target: ES2019
Libs: DOM + ES2019
Module: ESNext

And for mobile: all devices above 375px.

[NoelDeMartin]

Yeah, that's what this task is about, but I haven't even looked at it because I'm not sure we'll end up using these APIs at all. Depending on what we decide about the 3rd party components, we'll see if we need to stop using some of these APIs or implement polyfills.

As to how we can find which browsers we use, it should be possible using a combination of caniuse and browserlist. Unfortunately, I don't think they work together, so it's a bit of a manual work :/. We can see how to improve that.