# Lesson path

Lesson path: a free component, built on your design tokens, to use on the home screen of a language or learning app, for picking the next lesson. A learning path: the daily streak, XP and a daily goal ring, the unit with its cover photo, and lessons as round steps down a winding path, done, up next and locked, with a card under the chosen lesson to start or practise it.

Prompt: Add the OpenDesigner component lesson-streak to this project: https://opendesigner.dev/library/r/lesson-streak.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: done, up next, locked, selected, pressed, focus.

Accessibility: The path is an ordered list; each lesson is a button named with its number, title and state, the next one has aria-current="step", locked ones are disabled, and the lesson card is a polite live region.

File: https://opendesigner.dev/library/r/lesson-streak.html