<!-- source-hash: edcc0618a769c715daef264fcd0292ee -->
Accessible, styled select/dropdown component built on Radix UI primitives with Flamingo ODS design tokens and smooth open/close animations.

## Key Components

| Export | Description |
|--------|-------------|
| `Select` | Root component managing open/value state |
| `SelectTrigger` | Styled button that opens the dropdown, includes `ChevronDown` icon |
| `SelectContent` | Animated portal-rendered dropdown container with scroll support |
| `SelectItem` | Individual option with a `Check` indicator when selected |
| `SelectGroup` | Groups related items together |
| `SelectLabel` | Section label within a group |
| `SelectValue` | Displays the currently selected value in the trigger |
| `SelectSeparator` | Horizontal divider between items or groups |
| `SelectScrollUpButton` | Scroll control shown when content overflows upward |
| `SelectScrollDownButton` | Scroll control shown when content overflows downward |

## Usage Example

```typescript
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

export function PrioritySelect() {
  return (
    <Select onValueChange={(value) => console.log(value)}>
      <SelectTrigger className="w-[200px]">
        <SelectValue placeholder="Select priority..." />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Ticket Priority</SelectLabel>
          <SelectItem value="critical">Critical</SelectItem>
          <SelectItem value="high">High</SelectItem>
          <SelectSeparator />
          <SelectItem value="medium">Medium</SelectItem>
          <SelectItem value="low">Low</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}
```

> All sub-components forward refs and accept native Radix UI props, allowing full customization via `className` alongside ODS defaults.