Multi-Select Combo Box: Color-Coded Chips

[anezthes]

Describe your motivation

Client would like to color code the chips. Now, why would you want to color code the chips? Well, here's my good friend Chad Geepieteh to answer that for you:

"Color coding in lists of options offers numerous benefits, including improved visual clarity, faster decision-making, reduced errors, and enhanced user experience. When implemented thoughtfully and with consideration for accessibility, it can be a valuable tool for both usability and aesthetics in various applications and interfaces."

Describe the solution you'd like

Some kind of chip renderer perhaps? Any way of adding class names to individual chips would be great.

[TatuLund]

Currently you can do this in some cases using title attribute in the CSS selector, but this is cumbersome when localization of the item labels are needed. As the chips are in light DOM, it would be sufficient if we would have setClassNameGenerator(..) in Multi-Select Combo Box

[rolfsmeds]

It would probably make sense to introduce a ClassNameGenerator for the items that would apply the classname both to the chips and the corresponding items in the dropdown.

[web-padawan]

Prototype: https://github.com/vaadin/web-components/compare/proto-chip-class-name-generator

Using chipClassNameGenerator function for chips is quite easy. If we also need that to be applied to items, then it would require also updating vaadin-combo-box scroller and would probably better to be named itemClassNameGenerator.

[rolfsmeds]

Acceptance Criteria: vaadin/platform#5212