# Dropdown Transition Popover

> A model-picker popover built around a two-layer dropdown transition: the panel springs up from the trigger with a soft cross-blur while its content settles a beat later, and the model list slides sideways to per-model detail panels. Maraschino cherry theme, keyboard navigable, Escape to close.

- Category: Popover
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Orchard
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: dropdown, ai
- Page: https://builder.atheros.ai/components/dropdown-transition
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_dropdown_transition/preview-5d346b350e9d.webp

## Features

- Trigger button with rotating chevron that toggles an anchored model-picker popover
- Two-layer open transition: the panel rises with a slight overshoot and cross-blur, content settles 70ms later
- Fast, quiet exit — the panel drops back toward the trigger in 160ms with no overshoot
- Direction-aware master-detail slide: the list exits left, detail panels enter from the right, back reverses it
- Local Claude, OpenAI, Gemini and Meta SVG marks presented without tile backgrounds, paired with design-system provider colors
- Rich detail panels: provider row, one-line positioning blurb, capability chips, a tabular stat grid and speed/quality/value meters above the select action
- Capability chips (Vision, Tools, Reasoning, Code, Fast) with Tabler glyphs on `--chips-radius`, tinted from a low accent wash under near-text ink
- Three-segment speed / quality / cost meters drawn from the readable accent role on a recessed scrim track
- The popover animates its own height between the compact list and the taller detail panel — the list state is never padded out
- Selecting a model updates the trigger label, marks the list item with a cherry check, and returns focus to the trigger
- ArrowUp / ArrowDown cycle focus through the model list; Escape closes and restores focus
- Click outside the popover to dismiss it
- Intentional night mode — wine-black surfaces with a backlit cherry accent via `body.dark`
- Responsive down to 240px and fully respects `prefers-reduced-motion`

## Accessibility

- **Dialog role** — The popover uses `role="dialog"` with an `aria-label`
- **Trigger semantics** — The trigger has `aria-haspopup`, `aria-expanded` and `aria-controls`
- **Button labels** — List items, back and select buttons carry `aria-label`
- **Roving list focus** — ArrowUp / ArrowDown cycle focus through the model list items
- **Focus management** — Drilling in focuses the back button; going back refocuses the originating item; selecting or Escape returns focus to the trigger
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all transitions and delays

## Keyboard shortcuts

- `Enter / Space` — Activate the focused item, back or select button
- `ArrowDown / ArrowUp` — Cycle focus through the model list
- `Escape` — Close the popover and restore focus to the trigger

## Common questions

**Which frameworks is Dropdown Transition Popover available in?**

Dropdown Transition Popover ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Dropdown Transition Popover free?**

Dropdown Transition Popover is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Dropdown Transition Popover support dark mode?**

Yes. Dropdown Transition Popover ships light and dark themes, both drawn from the Orchard design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Dropdown Transition Popover live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/dropdown-transition

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt