[Styles dropdown] Implement the UI

[Reinmar]

Why

Implementation needed for #5700.

What

Based on #11267. Implement the UI layer of the feature.

Scope:

• Basic UI implementation of the dropdown with a list of styles
• With basic a11y
• Without researching safe styles previews (how to generate previews of defined styles in a way that e.g. a super large heading breaks the preview container)

[Reinmar]

Problem that we encountered: How to apply .ck-content SELECTOR {} styles inside the preview slots in the dropdown.

These styles have lower specificity than .ck.ck-reset_all * {} which we use in the UI too.

We were thinking about:

• Changing the reset selector to .ck.ck-reset_all :not(.some-class-to-abort) {} and using .some-class-to-abort in the preview boxes. However, this rises the specificity of the reset rules and is a heavy breaking change
• Forcing people to rise the specificity of their .ck-content * styles.

The only feasible way for now is the second approach.

[Reinmar]

When generating previews of styles, we need to generate their markups. However, a style for <td> is pretty tricky to showcase. Hence, for all these kinds of intermediate elements, we will use a <div> instead.

When writing CSS for these elements people will need to:

• write the default styles via .ck.ck-content td.some-style {}
• and additionally style .ck.ck-content.ck-style-grid__button__preview div.some-style {}

[wimleers]

Problem that we encountered:

We have JS in Drupal for exactly this problem in a different scenario: https://git.drupalcode.org/project/drupal/-/blob/9.3.x/core/modules/ckeditor5/js/ckeditor5.es6.js#L186-L230, done in https://www.drupal.org/project/drupal/issues/3248469.

We use the "donut scope" selector for this: https://css-tricks.com/weekly-platform-news-focus-rings-donut-scope-ditching-em-units-and-global-privacy-control/#aa-the-enhanced-css-not-selector-enables-donut-scope

[oleq]

Closed in #11293.