Create vaadin-list-divider component

[web-padawan]

The current hr selector is problematic because there could be global styles on the page that modify it, and ::slotted() styles lose in specificity. This is what happens with Java examples - see "Separators" demo.

With vaadin-list-divider as an individual element we would have the following benefits:

1. Easy to customise theme (compared to adding custom styles to vaadin-list-box),
2. No need to set role="separator" (component can set the role on itself).

This seems a better alternative than using a CSS class name, which was proposed by vaadin/vaadin-list-box#71.

[lkraav]

So if official semantics is role=separator, why are we thinking a new term like divider here?

Is it somehow better than vaadin-list-separator?

[web-padawan]

There could be a more generic vaadin-divider component in its own repo. We already have vaadin-item in separate repo, although it is rarely used outside list-box (so we don't even have Flow counterpart for it).

Some more ideas would be orientation property (and aria-orientation attribute) and theme variants, see for example
https://demo.creativebulma.net/components/divider/1.1/get-started/

[web-padawan]

Related issues: https://github.com/vaadin/vaadin-context-menu-flow/issues/137 and https://github.com/vaadin/vaadin-menu-bar-flow/issues/20