feat(design): create select component

[xelaint]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/graycoreio/daffodil/blob/develop/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

There is no dropdown components.

Things that need to be added:

• Loading state
• Error state
• When a user clicks somewhere outside a dropdown when it's open, the dropdown should close. (use cdk overlay)
• By default, a dropdown should either render a label text of what the dropdown is or one of the options as the selected value (i.e. shipping addresses, render the first available address as the selected option or the "default" address a user has set in their account)
• Keyboard behavior for selecting options
• Accessibility considerations (aria label announcements for each option, selected option announcement)
• Tests
• Documentation
• Implement as CVA
• Don't render options when dropdown isn't open
• Rename to DaffSelect
• Block tab event if select is open

Fixes: #2467

What is the new behavior?

A dropdown component that displays a list of options.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

[griest024]

By default, a dropdown should either render a label text of what the dropdown is or one of the options as the selected value (i.e. shipping addresses, render the first available address as the selected option or the "default" address a user has set in their account)

So does the dropdown track the selected state or is that the responsibility of the consuming component?

[xelaint]

By default, a dropdown should either render a label text of what the dropdown is or one of the options as the selected value (i.e. shipping addresses, render the first available address as the selected option or the "default" address a user has set in their account)

So does the dropdown track the selected state or is that the responsibility of the consuming component?

@damienwebdev any input on this?

[griest024]

@xelaint we discussed this on a call, the component implementation will change significantly. You will probably have some styling to do after

[griest024]

@xelaint this is ready for you to do some styling and fix skeleton. I haven't touched keyboard navigation or accessbility yet

[xelaint]

How does this component actually handle errors aside from having the daff-error-message slot? Do we need to add an error property? Since I need to add error styles to the component on top of showing an error message.

[xelaint]

TODO: An opened select should not be tabbable. Tab event needs to be blocked so focus is not lost on select. @griest024

[griest024]

TODO: An opened select should not be tabbable. Tab event needs to be blocked so focus is not lost on select. @griest024

done

[xelaint]

@griest024 There's a weird scrolling behavior if I open the select using Alt + Down key. https://www.loom.com/share/3123202d6ece417f8d2bc4a3e18af75a?sid=2c2c9540-2563-48c8-85ff-1e4d87203151

[damienwebdev]

This needs a rebase against develop.

[xelaint]

To do for me: fix conflict, rebase against develop, convert to standalone