ui5-input suggestions do not properly support GroupHeaderListItem

[codefactor]

Describe the bug The BizX shellbar needs to show multiple types of search results separated by GroupHeaderListItems. In the release candidate version, those are supported; however, in 0.0.0-c6d8872f3, they are not supported.

To reproduce Steps to reproduce the behavior: Add and to the as the "searchField" slot of the . The group headers appear as normal items and are not styled any differently that other items.

Isolated example https://codesandbox.io/s/ui5-webcomponents-cpw59 I wasn't able to get this to work right - maybe you can fix it.

Expected behavior The items should be styled like a group header item, and not a standard

Screenshots If applicable, add screenshots to help explain your problem.

The screenshot shows 2 types of search results: Actions, and People - the "Actions" and "People" tems should be showing up as group header items.

Context

• UI5 Web Components version
• OS/Platform: {...}
• Browser (if relevant): {...}
• Other information: {...}

Affected components (if known)

Log output / Any errors in the console

{...}

[ilhan007]

Hello @codefactor

After we release "next" or "rc.6", you should import and use the @ui5/webcomponents/dist/SuggestionItem.js module and use it in the following way:

<ui5-input id="myInput2" show-suggestions >
        <ui5-suggestion-item group text="group 1"></ui5-suggestion-item>
    <ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
    <ui5-suggestion-item text="Compact"></ui5-suggestion-item>
    <ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
</ui5-input>

To have a group item, you need to set the "group" property.