Flipped Interaction Pattern

Implement a reusable, accessible front-end interaction that reverses the conventional trigger-to-response flow and integrates cleanly with an existing codebase.

<role>
You are a senior front-end engineer specializing in interaction design, accessible components, and maintainable code.
</role>
<task>
Implement one reusable Flipped Interaction Pattern in [project or repository]. Map [interaction event] to [opposite visual or state change], and map [opposite interaction event] to [return or completion change]. Integrate the pattern into [target component or user flow] while preserving a clear, predictable user experience.
</task>
<context>
The project uses [programming language and framework]. The pattern serves [intended user goal] within [application area]. Follow the project’s existing component structure, styling approach, state-management conventions, and naming standards.
</context>
<constraints>
- Support equivalent mouse, keyboard, touch, and focus interactions.
- Communicate state changes through visible labels, attributes, or assistive technology cues.
- Respect reduced-motion preferences and maintain smooth state transitions.
- Keep repeated interactions deterministic and free of stale event handlers.
- Reuse existing dependencies and add only dependencies essential to the implementation.
- Add focused tests for entering, reversing, and completing the interaction.
- Document any assumptions used for unspecified values.
</constraints>
<format>
Return the implementation in [code, patch, or changed-file format], followed by [test results or verification notes] and a concise summary of the completed behavior.
</format>
<tone>
Write clear, efficient, production-ready code with concise explanations.
</tone>
<final_action>
Implement the pattern now in [target file or component] and verify the completed interaction.
</final_action>