Thirty-two variants across six components: twenty-two rows, four menus, a submenu trigger, the trigger button, a heading and a rule.
Six components, thirty-two variants
DropdownMenu / Item - Variant × State × Show Icon: Default · Shortcut · Destructive × Default · Hover · Hover (Translucent) · Disabled × No · Yes - Destructive has no frosted hover
DropdownMenu / Menu - Color × Appearance: Default · Inverted × Solid · Translucent - 160 × 233
DropdownMenu / SubTrigger - Active × Show Icon: No · Yes × Yes · No - 290 × 28
DropdownMenu - Open: Yes · No - a 56 × 32 trigger with the menu under it
DropdownMenu / Label · Separator - none: a 302 × 24 heading and a bare 1px rule
Using the Dropdown Menu
How is this different from Context Menu?
Almost not at all, and that is the point: the rows are 312 wide here against 300 there, and this one adds a trigger button because a dropdown is opened by pressing something. Everything else, the states, the destructive treatment, the frosted panel, is the same vocabulary. Learn one and you have both.
Why does Destructive have three states and not four?
It skips Hover (Translucent). A destructive row fills with base.destructive and takes its label and icon to base.destructive-foreground; a 70% version of that on a frosted panel reads as a weaker warning rather than a softer one. Twenty-two variants instead of twenty-four.
Why is the Separator different from Context Menu's?
This one is a bare 1px rule with no padding of its own; Context Menu wraps its line in an 8px board. Here the two groups inside the menu carry their own 4px, so the rule sits flush between them and the spacing comes from the groups rather than from the rule.
What does the Open axis actually switch?
Only whether the menu is showing. The trigger button is a base.muted pill that looks identical in both, so the variant is about the panel rather than about the button's pressed state. If you want a pressed trigger, that is Button's job.
Do the group labels work on the Inverted menu?
They do now. All nine of them were base.muted-foreground, which is #737373 - fine on the white panel, about 3.4:1 on the #262626 inverted one, where a 12px label needs 4.5. They are bound to colors.muted-foreground-dark now, at #a1a1a1 and around 5.7:1. Worth checking on any component with an inverted surface: the foreground tokens flip when the background does, and muted text is where that gets forgotten.