Updates needed for component selector

[froschdesign]

• [ ] the current component is not selected
• [ ] no label on the page for documentation overview
• [ ] entry for overview is missing
• [x] headlines for groups are difficult to recognize (see #76)
• [ ] sorting is quite strange if you search something
• [x] the placeholder "Jump to package documentation..." is too long (see #76)

Examples:

• https://docs.zendframework.com/
• https://docs.zendframework.com/zend-expressive/

[froschdesign]

Suggestion:

• fixes font size for component name (.choices__packagename)
• updates background for headings / group names
• adds shadow
• updates placeholder in search field

ping @weierophinney, @thexpand

[thexpand]

@froschdesign @weierophinney Bigger font size for component name - OK Shadow for the whole drop-down - OK Shorter placeholder - Great

I just don't like the dark background of the headings. Seems too much. I suggest using a smaller font size, but capital letters with a light gray background. Here's a preview (combine this with the sticky headings from my PR):

[froschdesign]

@thexpand

... with a light gray background

The problem: this results in a poor contrast ratio.

[thexpand]

@froschdesign That's why I added the capitalized letters :( I can't think of a better way to do this, unfortunately. By the way, higher contrast doesn't always mean better. Same goes to applying many colors, which I think is what we must escape from.

[froschdesign]

@thexpand

That's why I added the capitalized letters

It's fine for short text, but if the text is longer and smaller, it will be harder to read.

By the way, higher contrast doesn't always mean better.

In this case it helps a lot. (compare the screenshots)

Same goes to applying many colors, which I think is what we must escape from.

Then we have no problem here! 😉 Because the entire documentation uses a minimal color palette. Colored are only the code examples.