Proposal: Update design of AutoSuggestBox

[anawishnoff]

Proposal: Updated AutoSuggestBox Design

Summary

I'm proposing design changes to AutoSuggestBox. This includes changes to its dropdown menu so that it visually aligns with the new ListView designs, as well as new border visuals for rest and non-rest states.

Rationale

• As ListView is getting a design update, controls that have list functionality should align with that update.
• Many controls in WinUI have rounded corners, so AutoSuggestBox items should follow that trend and embrace the modern, Fluent look.

Scope

Capability	Priority
AutoSuggestBox items will have a rounded backplate in non-rest states.	Must
AutoSuggestBox items should use a pill-shaped selection indicator to display the currently selected item.	Must
AutoSuggestBox items should align with new ListView design details overall.	Must
When the text input field is in a pressed or focus state (but the flyout is still collapsed), there should be an accent-colored line/border on the bottom of the textbox.	Must
When in rest and hover states (and the flyout is closed), the text input field should have a bottom shadow.	Must
When the QueryIcon is clicked or hovered, it should have a rounded grey backplate, similar to list items.	Must
These changes will not affect the functionality of AutoSuggestBox.	Won't

Important Notes

Design Mockups

Below: AutoSuggestBox in a focused state, with the dropdown displayed. In the dropdown, "GridView" is selected while "DataGrid" is being hovered.

Below: AutoSuggestBox in a rest state, flyout closed (top). AutoSuggestedBox in a focused/typing state, flyout closed (bottom).

Below: AutoSuggestBox in a focused/typing state, with the QueryIcon being hovered.