sl-select: Improve CSS customization

[neischlah]

Hi there! I'm having trouble customizing the sl-select element.

https://jsfiddle.net/n95jmubq/6/

1. I need to address the dropdown's trigger element explicitly to do a fancy hover animation.
2. As I removed all focus rings, the dropdown offset is a bit... off. If it's too complicated to make it dependent on the focus ring size, having it customizable would be awesome.

Thank you for your time!

[claviska]

I need to address the dropdown's trigger element explicitly to do a fancy hover animation.

The dropdown is used internally by <sl-select>, so you won't be able to target the trigger part because it's only exposed on the dropdown. That said, I've added a control part in 8c3888d so you can target it from the select like this:

sl-select::part(control) {
  ...
}

As I removed all focus rings, the dropdown offset is a bit... off. If it's too complicated to make it dependent on the focus ring size, having it customizable would be awesome.

The distance is configurable in <sl-dropdown> and it was harded coded to 2. It probably should have been 0 all along, but with the focus-visible rework in 43f7458 it makes even less sense.

I've made the default 0 in e1471ec.