[Feature] Combobox shadcn visual revamp

[djalmaaraujo]

Related issue

Visual parity with shadcn/ui Combobox.

Description

Complete visual revamp of the Combobox component to match shadcn/ui design. This includes new trigger modes, chips for multiple selection, keyboard navigation, and accessibility improvements.

What's new

• ComboboxInputTrigger — New default trigger: an input field that doubles as the search box. Replaces the button-style trigger as the primary combobox pattern.
• ComboboxBadgeTrigger — Multiple selection trigger with inline chips/badges. Selected items appear as removable chips inside the input field. Supports clear_button: true prop.
• ComboboxItemIndicator — Check icon (✓) on the right side of selected items, using peer-checked:opacity-100 CSS pattern.
• ComboboxBadge — Chip component for badges inside the trigger.
• Chevron-down icon — Replaced double-chevron with shadcn's single chevron-down with hover effect (size-6 rounded-sm hover:bg-muted).
• Keyboard navigation — Arrow keys, Enter, and Escape now work from the trigger/input (handlers moved from popover to controller element).
• Tab-to-open — Focusing via Tab opens the popover automatically (using focusin with mouse-detection to avoid click race conditions).
• Auto-highlight — First visible item is highlighted when filtering.
• Chips wrap with padding — When chips overflow to multiple lines, pt-1.5 is dynamically added for spacing.

What changed (non-breaking)

• ComboboxItem — Removed has-[:checked]:bg-accent (no persistent background on selected items, only check icon). Removed aria-[current=true]:ring (no ring on keyboard highlight, only bg-accent).
• ComboboxRadio / ComboboxCheckbox — Now peer sr-only (visually hidden, accessible).
• ComboboxTrigger (Popup mode) — Placeholder text now uses text-muted-foreground and switches to foreground when an item is selected.
• ComboboxClearButton — Subtle gray styling, added focus-visible:ring-2 for keyboard accessibility.
• ComboboxPopover — Removed autofocus attribute (focus stays on trigger/input).
• Keyboard handlers — Moved from ComboboxPopover to Combobox controller element so they work when focus is on the trigger.

API compatibility

No breaking changes. All existing APIs continue to work. New features are additive:

• ComboboxBadgeTrigger(clear_button: true) — new prop, defaults to false
• ComboboxInputTrigger — new component, existing ComboboxTrigger still works
• ComboboxItemIndicator — auto-rendered by ComboboxItem, no user action needed

Tailwind only

Zero inline CSS. All styling via Tailwind classes. JS-toggled classes (h-auto, min-h-9, pt-1.5) are referenced in Ruby comments so Tailwind compiles them.

Testing instructions

1. Run bundle exec rake — 103 tests, 450 assertions, 0 failures
2. In the docs site, visit /docs/combobox and verify:
   • Basic: Input trigger, type to filter, select closes dropdown, reopen shows all items
   • Popup: Button trigger, click toggles, tab opens, search inside popover
   • Multiple: Chips appear inside input on selection, x removes chip, clear button clears all, chips wrap on overflow
   • Groups: Items grouped with labels
   • Custom Items: Icons alongside text
   • Invalid: Red border on trigger
   • Disabled: Disabled state on both trigger types
   • Auto Highlight: First match highlighted while typing
3. Keyboard: Tab into any combobox opens. Arrow down/up navigate. Enter select. Esc close.