Inconsistent Style Application for Placeholder in Select Trigger Component

[armchair-traveller]

Describe the bug

The Select Trigger component currently uses the placeholder:text-muted-foreground style which is not being applied correctly. As per defaults, it should look gray when applied. The issue stems from the :placeholder pseudo-element not being associated with buttons but rather with specific input controls.

Proposed Fix

To resolve this issue, it is suggested to modify the CSS selector to [&>span[data-placeholder]]:text-muted-foreground. This approach is consistent with the existing [&>span]:line-clamp-1 style. It is important to note that in our library, the data-placeholder attribute is applied to the value component rather than the trigger, which differs from the original library's implementation.

Additional Information

This styling inconsistency is also present in the select component maintained by @shadcn. The fix for his component may differ slightly due to the implementation variations. I encourage any contributor to verify if a similar issue exists in his repository and report it if it isn't.

Reproduction

Simply see the example component in our Select docs or @shadcn's Select docs and observe that placeholder styles aren't being applied.

Logs

No response

System Info

N/A

Severity

annoyance