Contents Purpose Anatomy Variants States Tokens Used Accessibility Behavior Platform Notes Component: dropdown Purpose Floating action menu for context menus and overflow actions. Anatomy dropdown — positioned container (hidden by default) dropdown-item — individual action button dropdown-item-danger — destructive action variant dropdown-separator — visual divider between groups Variants Class Visual Usage dropdown Base — floating surface with shadow Menu container dropdown-item Full-width button Standard menu action dropdown-item-danger Error-colored hover/active Destructive actions (delete, remove) dropdown-separator Horizontal rule Group divider States Dropdown container: Rest: display: none Active (is-active): display: block with fade-in animation Dropdown items: Hover (transition: --duration-normal ease-out): dropdown-item: background-color → --color-surface-secondary dropdown-item-danger: background-color → --color-error-subtle, color → --color-error-text Active (instant, no transition): dropdown-item: background-color → --color-surface-tertiary dropdown-item-danger: filter: brightness(0.9) Focus-visible: outline: 2px solid var(--color-accent-base) outline-offset: -2px (inset within menu bounds) Disabled: opacity: 0.4 pointer-events: none Tokens Used --font-sans, --text-sm --space-1, --space-2, --space-3 --color-surface-primary, --color-surface-secondary, --color-surface-tertiary --color-text-primary, --color-text-secondary --color-border-default --color-error-subtle, --color-error-text --shadow-float --z-dropdown --duration-fast --icon-sm Accessibility Container: role="menu" on the dropdown Items: role="menuitem" on each dropdown-item Separators: role="separator" on dividers Trigger button: aria-expanded="true" when menu is open, aria-haspopup="menu" Keyboard: Arrow keys navigate items, Escape closes, Tab moves out Focus management: first item receives focus on open, focus returns to trigger on close Outside click dismisses Behavior Container: position: absolute, surface-primary bg, border-default border, shadow-float, z-index: var(--z-dropdown), min-width: 160px, max-width: 280px Activation: is-active class toggles display: block with a fade-in animation (--duration-fast) Items: full-width <button> elements, --text-sm, --font-sans, --space-2 / --space-3 padding (vertical/horizontal) Item icons: --icon-sm, text-secondary color, placed inline before text Danger items: use error functional colors on hover/active only (rest state looks normal) Separator: <hr> element, 1px border-default, --space-1 vertical margin prefers-reduced-motion: reduce: fade-in animation suppressed Platform Notes Web: CSS in @layer components. One file: dropdown.css. JS handles: open/close, focus trap, arrow key nav, Escape dismiss, outside click, aria-expanded on trigger. macOS: Map to NSMenu or SwiftUI .contextMenu / .menu.