Native HTML has no dedicated dropdown/popover primitive that combines trigger management, content positioning, focus trapping, and responsive behavior. Building a dropdown from <details>/<summary> or custom <div> toggles requires significant work for accessibility and positioning. auro-dropdown provides a production-ready solution.

Custom dropdown implementations often break keyboard navigation, fail to trap focus, or leave background content interactive when the dropdown is open.

auro-dropdown provides:

• Focus trapping — In desktop modal mode, Tab and Shift+Tab cycle within the dropdown content. Background content is made inert. The implementation handles focus across shadow DOM boundaries.
• Native dialog semantics — On mobile, the dropdown opens via showModal(), which provides browser-native focus trapping and background inert behavior.
• ARIA attributes — The trigger carries aria-expanded, aria-controls, and a configurable role (default: button). The dropdown bib has an accessible dialog label.
• Focus delegation — delegatesFocus: true ensures clicks on the trigger container route focus to the correct interactive element.
• Escape to close — The dialog's cancel event is handled to close the dropdown on Escape.

Positioning a dropdown relative to its trigger — accounting for viewport edges, scroll containers, and dynamic content — is a complex problem that native HTML does not solve.

auro-dropdown integrates Floating UI with:

• Configurable placement (12 positions: top/bottom/left/right with start/center/end)
• offset control for gap between trigger and content
• noFlip to prevent automatic repositioning
• shift to slide the dropdown along the edge to avoid clipping
• autoPlacement to let the library choose the best position
• matchWidth to size the dropdown to the trigger width
• Layout containment escape so the dropdown is not clipped by ancestor overflow or <dialog> elements

Native disclosure elements have no concept of viewport-aware presentation.

auro-dropdown adapts to the viewport:

• Desktop — Content appears as a positioned panel with optional modal behavior
• Mobile — Content opens as a fullscreen dialog below a configurable breakpoint (fullscreenBreakpoint: xs, sm, md, lg, xl, or disabled)
• Desktop modal — desktopModal makes background siblings inert, traps focus within the dropdown, and prevents interaction with page content — all without going fullscreen

Unlike <select>, which only accepts <option> elements, auro-dropdown accepts any HTML content in its default slot. This makes it the foundation for composed components like auro-select, auro-combobox, and auro-counter-group.

The trigger slot accepts any content — plain text, buttons, inputs, or complex custom elements. The component detects whether the trigger content is focusable and adjusts tabindex and ARIA attributes accordingly.

auro-dropdown is built with the Auro Design System:

• Three layout options: classic, emphasized, snowflake
• Light and dark theme support (appearance)
• Chevron indicator for expand/collapse state
• CSS ::part() selectors (trigger, chevron, size, helpText)
• Help text slot with error message support