<!-- source-hash: 223f5a1c3c624e5773b99c85b384c3b9 -->
Accessible, styled select dropdown component built on Radix UI's Select primitive, integrated with the OpenFrame Design System (ODS) token system and `FieldWrapper` for label/error support.

## Key Components

| Export | Description |
|--------|-------------|
| `Select` | Root select primitive (Radix `SelectPrimitive.Root`) |
| `SelectTrigger` | Styled trigger button with `invalid`, `label`, and `error` props; wraps in `FieldWrapper` |
| `SelectContent` | Dropdown panel rendered in a portal with open/close animations |
| `SelectItem` | Individual option row with checkmark indicator and hover/disabled states |
| `SelectGroup` | Groups related options (Radix `SelectPrimitive.Group`) |
| `SelectLabel` | Label for an option group |
| `SelectValue` | Displays the currently selected value placeholder |
| `SelectSeparator` | Horizontal divider between options |
| `SelectScrollUpButton` / `SelectScrollDownButton` | Scroll controls for long option lists |

## Usage Example

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

// Basic usage with label and error validation
<Select>
  <SelectTrigger label="Region" error={errors.region?.message}>
    <SelectValue placeholder="Select a region..." />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>North America</SelectLabel>
      <SelectItem value="us-east">US East</SelectItem>
      <SelectItem value="us-west">US West</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

// Invalid / error state
<Select>
  <SelectTrigger label="Priority" invalid error="Priority is required">
    <SelectValue placeholder="Select priority..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="low">Low</SelectItem>
    <SelectItem value="medium">Medium</SelectItem>
    <SelectItem value="high">High</SelectItem>
  </SelectContent>
</Select>
```

## Notes

- **Validation states**: Pass `error` (string) or `invalid` (boolean) to `SelectTrigger` to apply `ods-error` border and icon tinting.
- **ODS tokens**: All colors use `ods-*` CSS custom properties (`ods-card`, `ods-accent`, `ods-error`, etc.) for consistent theming.
- **Content width**: Dropdown matches trigger width via `--radix-select-trigger-width` CSS variable.
- **Accessibility**: Built on Radix UI — keyboard navigation, ARIA roles, and focus management are handled automatically.