HoverCard

<Text>
	Merged by{" "}
	<HoverCard>
		<HoverCard.Trigger>
			<Link href="/users/sergiodxa">@sergiodxa</Link>
		</HoverCard.Trigger>
		{/* bottom-start keeps the panel inside the column it opens in, rather than
		    centering it under the mention and hanging off the edge. */}
		<HoverCard.Content
			placement="bottom-start"
			aria-label="About @sergiodxa"
			// Every recipe compiles into its own cascade sublayer, and a sublayer's position
			// is fixed the first time it appears on the page. The panel's own hidden state
			// registers after the root's reveal rules, which a later layer wins against, so
			// the reveal is restated here where it lands last.
			mix={[
				when(':is([data-slot="hover-card"]:hover, [data-slot="hover-card"]:focus-within) &', [
					opacity(100),
					visibility(),
				]),
			]}
		>
			<Avatar size="lg">
				<Avatar.Fallback>SX</Avatar.Fallback>
			</Avatar>
			<span>Sergio Xalambrí</span>
			<Text>Writes small packages built on web standards.</Text>
			<span>
				<MapPinIcon aria-hidden="true" /> Lima, Peru
			</span>
			<span>
				<CalendarIcon aria-hidden="true" /> Joined March 2011
			</span>
			<Button size="sm">Follow</Button>
		</HoverCard.Content>
	</HoverCard>{" "}
	two hours ago.
</Text>